पिछले हफ्ते के AppSignal अपडेट में हर स्क्रीन के लिए एक अपडेटेड इंटरफेस डिज़ाइन शामिल था। इसका मतलब था कि हमें अपने होमपेज पर सभी स्क्रीनशॉट अपडेट करने थे, ताकि वे ऐप की वर्तमान स्थिति को प्रतिबिंबित करें। इस कार्य में लगने वाले भारी मैनुअल श्रम को कम करने के लिए, हमने प्रक्रिया को स्वचालित करने का फैसला किया।
सौभाग्य से, हमें जल्दी याद आया कि Selenium स्क्रीनशॉट लेने में सक्षम है। हम पहले से ही अपने फीचर टेस्ट के लिए Capybara के माध्यम से Selenium का काफी उपयोग करते हैं, इसलिए हमने जांच की कि क्या यह नए घटकों को पेश किए बिना कार्य को स्वचालित करने का एक तरीका हो सकता है। कुछ छेड़छाड़ के बाद, हमने सीखा कि हमारी योजना संभव थी।
स्क्रीनशॉट लेने के लिए 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 फ़ाइल बनाता है। हालांकि, यदि आप रेटिना स्क्रीनशॉट लेना चाहते हैं तो एक चेतावनी है: Chrome ड्राइवर रेटिना स्क्रीनशॉट बनाता है, लेकिन केवल दृश्य क्षेत्र को शूट करता है। दूसरी ओर Firefox ड्राइवर पूरे पेज को शूट करता है, लेकिन रेटिना रिज़ॉल्यूशन में नहीं। और चूंकि हमारी टीम में हर कोई रेटिना स्क्रीन का उपयोग नहीं करता, वे वैसे भी स्क्रीनशॉट अपडेट नहीं कर पाएंगे।
कुछ खोज के बाद, हमें chrism के इस Gist में समस्या का समाधान मिला। इस चतुर हैक का उपयोग करके हम Firefox को स्क्रीनशॉट लेने से ठीक पहले पेज को सामान्य आकार से दोगुना बड़ा कर देते हैं:
page.driver.execute_script(' body = document.getElementsByTagName("body")[0]; body.style["transform-origin"] = "top left"; body.style["transform"] = "scale(2)"; ')पूरे पेज का रेटिना स्क्रीनशॉट हो जाने के बाद, अगला कदम ImageMagick के साथ शामिल convert CLI टूल का उपयोग करके इसे वांछित आयाम में क्रॉप करना है:
`convert #{file} -crop #{1600 * 2}x#{ 800 * 2}+0+0 #{to_file}`हमें आयामों को दोगुना करना होगा, क्योंकि ImageMagick को नहीं पता कि यह एक रेटिना इमेज है। यह इसे केवल 3200px गुणा 1600px मानता है। to_file सीधे हमारे एसेट्स फ़ोल्डर में फ़ाइल को इंगित करता है।
अंत में, हम फ़ाइल को ऑप्टिमाइज़ करने के लिए pngquant का उपयोग करते हैं। हमारे विशिष्ट स्क्रीनशॉट 220kB से 250kB तक होते हैं, जिसका अर्थ है कि हमें निश्चित रूप से उनके आकार को कम करना चाहिए:
`pngquant --force --output #{to_file} #{to_file}`बस इतना ही। हमने इन कमांड्स के आधार पर एक Rakefile लिखा जिसे हम जब भी डिज़ाइन परिवर्तन करते हैं, चला सकते हैं। आप पूरा कोड यहीं एक Gist में पा सकते हैं।
इस प्रक्रिया को स्वचालित करने से पहले ही लाभ हुआ है, और भविष्य में भी हमें sane रखेगा। अभी के लिए, टूर और अन्य जगहों पर उनके सभी रेटिना गौरव में परिणामी छवियों का आनंद लें!
