Cập nhật AppSignal tuần trước bao gồm thiết kế giao diện mới cho mọi màn hình. Nghĩa là phải cập nhật tất cả screenshot trên homepage để phản ánh trạng thái hiện tại. Để giảm khối lượng lao động thủ công khổng lồ, quyết định tự động hóa.
May mắn, nhớ rằng Selenium có thể chụp screenshot. Chúng ta đã dùng Selenium khá nhiều qua Capybara cho feature tests, nên tìm hiểu xem có thể tự động hóa không mà không thêm moving parts mới. Sau vài thử nghiệm, thấy kế hoạch khả thi.
API chụp screenshot đơn giản. Chỉ set kích thước cửa sổ browser, visit trang và chụp:
require 'capybara' Capybara.default_driver = :selenium page.driver.browser.manage.window.resize_to(1600, 1200) visit 'https://appsignal.com' page.save_screenshot(file)Tạo file png tại vị trí chỉ định. Có caveat nếu muốn screenshot Retina: Chrome driver tạo Retina screenshot nhưng chỉ chụp vùng visible. Firefox driver chụp toàn trang nhưng không Retina. Và không phải ai trong team cũng có màn hình Retina, nên họ không cập nhật screenshot được.
Sau tìm kiếm, tìm thấy giải pháp trong Gist của chrism. Dùng hack này để Firefox phóng to trang gấp đôi kích thước bình thường ngay trước khi chụp:
page.driver.execute_script(' body = document.getElementsByTagName("body")[0]; body.style["transform-origin"] = "top left"; body.style["transform"] = "scale(2)"; ')Với screenshot Retina toàn trang xong, bước tiếp theo crop đến kích thước mong muốn dùng CLI convert có sẵn với ImageMagick:
`convert #{file} -crop #{1600 * 2}x#{ 800 * 2}+0+0 #{to_file}`Phải nhân đôi dimensions vì ImageMagick không biết đó là ảnh Retina. Nó chỉ coi là 3200px x 1600px. to_file trỏ trực tiếp đến file trong assets folder.
Cuối cùng, dùng pngquant tối ưu file. Screenshot điển hình 220kB-250kB, nên minimize size:
`pngquant --force --output #{to_file} #{to_file}`Đó là tất cả. Viết Rakefile dựa trên các lệnh này chạy lại khi có thay đổi thiết kế. Tìm Gist code hoàn chỉnh ở đây.
Tự động hóa đã trả giá, và sẽ giữ chúng ta tỉnh táo trong tương lai. Hiện tại, tận hưởng hình ảnh Retina đầy rực rỡ trong Tour và nơi khác!