ภาพหน้าจออัตโนมัติโดยใช้ Capybara และ Selenium

การอัปเดต AppSignal ของสัปดาห์ที่แล้วมีการออกแบบอินเทอร์เฟซที่อัปเดตสำหรับทุกหน้าจอ ซึ่งหมายความว่าเราต้องอัปเดตภาพหน้าจอทั้งหมดในหน้าแรกเพื่อให้แน่ใจว่าภาพเหล่านั้นสะท้อนถึงสถานะปัจจุบันของแอป เพื่อลดการใช้แรงงานคนจำนวนมาก เราจึงตัดสินใจทำให้กระบวนการเป็นไปโดยอัตโนมัติ

โชคดีที่เราจำได้ว่าในไม่ช้า Selenium สามารถจับภาพหน้าจอได้ เราใช้ Selenium ค่อนข้างมากในการทดสอบ Capybara ผ่าน Capybara ดังนั้นเราจึงเริ่มตรวจสอบว่านี่อาจเป็นวิธีทำให้งานเป็นอัตโนมัติโดยไม่ต้องแนะนำชิ้นส่วนที่เคลื่อนไหวใหม่หรือไม่ หลังจากแก้ไขบางอย่าง เราก็ได้เรียนรู้ว่าแผนของเราเป็นไปได้

API สำหรับการจับภาพหน้าจอนั้นตรงไปตรงมา เพียงแค่ตั้งค่าหน้าต่างเบราว์เซอร์ให้มีขนาดที่ต้องการ ไปที่หน้าและถ่ายภาพหน้าจอ:

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 สร้างภาพหน้าจอ Retina แต่จะถ่ายเฉพาะพื้นที่ที่มองเห็นได้เท่านั้น ในทางกลับกัน ไดรเวอร์ Firefox จะถ่ายทั้งหน้า แต่ไม่ใช่ในความละเอียดเรตินา และเนื่องจากไม่ใช่ทุกคนในทีมของเราที่ใช้หน้าจอ Retina พวกเขาจึงไม่สามารถอัปเดตภาพหน้าจอได้

หลังจากค้นหา เราพบวิธีแก้ไขปัญหาใน Gistby chrism นี้ การใช้แฮ็คที่ดีนี้ทำให้ Firefox ขยายหน้าเว็บให้ใหญ่เป็นสองเท่าของขนาดปกติ ก่อนจับภาพหน้าจอ:

page.driver.execute_script('
   body = document.getElementsByTagName("body")[0];
   body.style["transform-origin"] = "top left";
   body.style["transform"] = "scale(2)";
')

เมื่อภาพหน้าจอ Retina ของทั้งหน้าเสร็จสิ้น ขั้นตอนต่อไปคือการครอบตัดให้เป็นขนาดที่ต้องการโดยใช้ convert เครื่องมือ CLI ที่มาพร้อมกับ ImageMagick:

`convert #{file} -crop #{1600 * 2}x#{ 800 * 2}+0+0  #{to_file}`

เราต้องเพิ่มขนาดเป็นสองเท่า เนื่องจาก ImageMagick ไม่รู้ว่าเป็นภาพ aRetina แค่คิดว่ามันเป็น 3200px x 1600px to_file ชี้ไปที่ไฟล์โดยตรงในโฟลเดอร์เนื้อหาของเรา

สุดท้าย เราใช้ pngquant เพื่อเพิ่มประสิทธิภาพไฟล์ ภาพหน้าจอทั่วไปของเรามีตั้งแต่ 220kB ถึง 250kB ซึ่งหมายความว่าเราควรย่อขนาดให้เล็กที่สุด:

`pngquant --force --output #{to_file} #{to_file}`

นั่นคือทั้งหมดที่มีให้ เราเขียน Rakefile ตามคำสั่งเหล่านี้ ซึ่งเราสามารถเรียกใช้ได้อีกครั้งเมื่อใดก็ตามที่เราทำการเปลี่ยนแปลงการออกแบบ คุณสามารถหา Gist ที่มีโค้ดทั้งหมดได้ที่นี่

การทำให้กระบวนการนี้เป็นอัตโนมัติได้ผลตอบแทนแล้ว และจะทำให้เรามีสติในอนาคตเช่นกัน สำหรับตอนนี้ เพลิดเพลินไปกับภาพที่ได้ของเรตินาทั้งหมดในทัวร์และที่อื่นๆ!