Bản cập nhật AppSignal tuần trước bao gồm thiết kế giao diện cập nhật cho mọi màn hình. Điều này có nghĩa là chúng tôi phải cập nhật tất cả các ảnh chụp màn hình trên trang chủ của mình, để đảm bảo chúng phản ánh trạng thái hiện tại của ứng dụng. Để giảm số lượng lớn các laborthis thủ công, chúng tôi quyết định tự động hóa quy trình.
May mắn thay, chúng tôi đã sớm nhớ ra rằng Selenium có khả năng chụp ảnh màn hình. Sau một hồi dò xét, chúng tôi biết được rằng kế hoạch của mình là khả thi.
API để chụp ảnh màn hình có thể thực hiện được. Chỉ cần đặt cửa sổ trình duyệt ở kích thước mong muốn, truy cập một trang và chụp ảnh màn hình:
require 'capybara'
Capybara.default_driver = :selenium
page.driver.browser.manage.window.resize_to(1600, 1200)
visit 'https://appsignal.com'
page.save_screenshot(file)Thao tác này tạo tệp png ở vị trí được chỉ định. Tuy nhiên, có một lưu ý nếu bạn muốn chụp ảnh màn hình Retina:trình điều khiển Chrome tạo ảnh chụp màn hìnhRetina, nhưng chỉ chụp vùng hiển thị. Mặt khác, trình điều khiển TheFirefox không quay toàn bộ trang, nhưng không quay ở độ phân giải Retina. Và bởi vì không phải tất cả mọi người trong nhóm của chúng tôi đều sử dụng màn hình Retina, họ sẽ không thể cập nhật ảnh chụp màn hình.
Sau một số tìm kiếm, chúng tôi đã tìm ra giải pháp cho vấn đề trong chrism nàyGistby. Sử dụng bản hack tiện lợi này, chúng tôi cho phép Firefox làm nổ trang để tăng gấp đôi kích thước bình thường, ngay trước khi chụp ảnh màn hình:
page.driver.execute_script('
body = document.getElementsByTagName("body")[0];
body.style["transform-origin"] = "top left";
body.style["transform"] = "scale(2)";
')
Với ảnh chụp màn hình Retina của toàn bộ trang được thực hiện, bước tiếp theo là kéo nó đến kích thước mong muốn bằng cách sử dụng convert Công cụ CLI đi kèm với ImageMagick:
`convert #{file} -crop #{1600 * 2}x#{ 800 * 2}+0+0 #{to_file}`
Chúng tôi phải tăng gấp đôi kích thước, vì ImageMagick không biết đó là hình ảnh aRetina. Nó chỉ coi nó là 3200px x 1600px. to_file trực tiếp trỏ đến tệp trong thư mục nội dung của chúng tôi.
Cuối cùng, chúng tôi sử dụng pngquant để tối ưu hóa tệp. Ảnh chụp màn hình điển hình của chúng tôi nằm trong khoảng từ 220kB đến 250kB, có nghĩa là chúng tôi nên giảm thiểu kích thước của chúng một cách rõ ràng:
`pngquant --force --output #{to_file} #{to_file}`Đó là tất cả những gì cần làm. Chúng tôi đã viết một Rakefile dựa trên các lệnh này để wecan chạy lại bất cứ khi nào chúng tôi thực hiện thay đổi thiết kế. Bạn có thể tìm thấy một Gist với mã hoàn chỉnh ngay tại đây.
Việc tự động hóa quy trình này đã đem lại hiệu quả và sẽ giúp chúng ta luôn tỉnh táo trong tương lai. Còn bây giờ, hãy tận hưởng những hình ảnh thu được trong tất cả vinh quang Retina của họ trong Tour và các nơi khác!