การอัปเดต AppSignal สัปดาห์ที่แล้วรวมถึงการออกแบบ UI ใหม่สำหรับทุกหน้าจอ หมายความว่าเราต้องอัปเดตสกรีนชอตทั้งหมดบนหน้าแรก ให้แน่ใจว่าแสดงสถานะปัจจุบันของแอป เพื่อลดงานmanual อันมหาศาล เราตัดสินใจทำให้กระบวนการเป็นอัตโนมัติ
โชคดีที่เราจำได้ว่า Selenium ถ่ายสกรีนชอตได้ เราใช้ Selenium ผ่าน Capybara สำหรับ feature tests อยู่แล้ว จึงออกไปสำรวจว่าสิ่งนี้อาจเป็นวิธีทำให้งานอัตโนมัติโดยไม่เพิ่ม moving parts ใหม่ หลังจากลองผิดลองถูก เราพบว่าแผนของเราเป็นไปได้
API สำหรับถ่ายสกรีนชอตตรงไปตรงมา แค่ตั้งขนาด browser window ตามที่ต้องการ เยี่ยมหน้า และถ่ายสกรีนชอต:
require 'capybara' Capybara.default_driver = :selenium page.driver.browser.manage.window.resize_to(1600, 1200) visit 'https://appsignal.com' page.save_screenshot(file)สิ่งนี้สร้างไฟล์ png ในตำแหน่งที่ระบุ มีข้อควรระวังถ้าอยากถ่ายสกรีนชอต Retina: Chrome driver สร้าง Retina screenshots แต่ถ่ายเฉพาะพื้นที่ที่มองเห็น Firefox driver ฝ่ายตรงข้าม ถ่ายหน้าเว็บทั้งหมด แต่ไม่ใช่ความละเอียด Retina และเพราะไม่ใช่ทุกคนในทีมใช้หน้าจอ Retina พวกเขาจึงไม่สามารถอัปเดตสกรีนชอตได้
หลังค้นหา เราพบวิธีแก้ใน Gist นี้ของ chrism ใช้ hack นี้ ให้ Firefox ขยายหน้าเป็นสองเท่าขนาดปกติ ก่อนถ่ายสกรีนชอต:
page.driver.execute_script(' body = document.getElementsByTagName("body")[0]; body.style["transform-origin"] = "top left"; body.style["transform"] = "scale(2)"; ')เมื่อได้สกรีนชอต Retina ของหน้าเว็บทั้งหน้า ขั้นตอนต่อไปคือ crop ให้ขนาดที่ต้องการด้วย CLI tool convert ที่มากับ ImageMagick:
`convert #{file} -crop #{1600 * 2}x#{ 800 * 2}+0+0 #{to_file}`เราต้องคูณขนาด 2 เพราะ ImageMagick ไม่รู้ว่ามันเป็นรูป Retina มันแค่คิดว่ามัน 3200px x 1600px to_file ชี้ตรงไปที่ไฟล์ในโฟลเดอร์ assets ของเรา
สุดท้าย เราใช้ pngquant เพื่อ optimize ไฟล์ สกรีนชอตทั่วไปของเราอยู่ที่ 220kB ถึง 250kB หมายความว่าเราควรลดขนาดให้มากที่สุด:
`pngquant --force --output #{to_file} #{to_file}`แค่นี้ก็จบ เราเขียน Rakefile จากคำสั่งเหล่านี้ ที่เรารันซ้ำได้ทุกครั้งที่เปลี่ยนแปลงดีไซน์ คุณสามารถหา Gist โค้ดเต็มได้ที่นี่
การทำให้กระบวนการนี้เป็นอัตโนมัติคุ้มค่าแล้ว และจะเก็บให้เราอยู่ในสติในอนาคตด้วย ตอนนี้ สนุกกับรูปภาพที่ได้ในความชัดเจน Retina ใน Tour และที่อื่นๆ!
