पिछले हफ्ते के ऐपसिग्नल अपडेट में प्रत्येक स्क्रीन के लिए एक अद्यतन इंटरफ़ेस डिज़ाइन शामिल था। इसका मतलब यह था कि हमें अपने होमपेज पर सभी स्क्रीनशॉट को अपडेट करना था, ताकि यह सुनिश्चित हो सके कि वे ऐप की वर्तमान स्थिति को दर्शाते हैं। शारीरिक श्रम की भारी मात्रा को कम करने के लिए, हमने इस प्रक्रिया को स्वचालित करने का निर्णय लिया।
सौभाग्य से, हमें जल्द ही याद आया कि सेलेनियम स्क्रीनशॉट लेने में सक्षम है। हम पहले से ही हमारे फीचर परीक्षणों के लिए कैपिबारा के माध्यम से सेलेनियम का काफी उपयोग करते हैं, इसलिए हमने जांच की कि क्या यह नए चलती भागों को पेश किए बिना कार्य को स्वचालित करने का एक तरीका हो सकता है। कुछ विचार-विमर्श के बाद, हमें पता चला कि हमारी योजना व्यवहार्य थी।
स्क्रीनशॉट लेने के लिए एपीआई सीधे आगे है। बस ब्राउज़र विंडो को वांछित आकार में सेट करें, एक पृष्ठ पर जाएं और एक स्क्रीनशॉट लें:
require 'capybara'
Capybara.default_driver = :selenium
page.driver.browser.manage.window.resize_to(1600, 1200)
visit 'https://appsignal.com'
page.save_screenshot(file)यह निर्दिष्ट स्थान पर एक पीएनजी फ़ाइल बनाता है। यदि आप रेटिना स्क्रीनशॉट लेना चाहते हैं तो एक चेतावनी है:क्रोम ड्राइवर रेटिना स्क्रीनशॉट बनाता है, लेकिन केवल दृश्य क्षेत्र को शूट करता है। दूसरी ओर फ़ायरफ़ॉक्स ड्राइवर पूरे पृष्ठ को शूट करता है, लेकिन रेटिना रिज़ॉल्यूशन में नहीं। और क्योंकि हमारी टीम में हर कोई रेटिना स्क्रीन का उपयोग नहीं करता है, वे वैसे भी स्क्रीनशॉट को अपडेट नहीं कर पाएंगे।
कुछ खोज के बाद, हमें इस Gistby chrism में समस्या का समाधान मिला। इस निफ्टी हैक का उपयोग करके हमने स्क्रीनशॉट लेने से ठीक पहले फ़ायरफ़ॉक्स को सामान्य आकार को दोगुना करने के लिए पेज को उड़ाने दिया:
page.driver.execute_script('
body = document.getElementsByTagName("body")[0];
body.style["transform-origin"] = "top left";
body.style["transform"] = "scale(2)";
')
पूरे पृष्ठ के रेटिना स्क्रीनशॉट के साथ, अगला चरण convert का उपयोग करके इसे वांछित आयाम में क्रॉप करना है ImageMagick के साथ शामिल 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}`इसमें बस इतना ही है। हमने इन आदेशों के आधार पर एक रेकफाइल लिखा है जिसे हम डिजाइन परिवर्तन करने पर फिर से चला सकते हैं। आप यहां संपूर्ण कोड के साथ एक सार ढूंढ सकते हैं।
इस प्रक्रिया को स्वचालित करने से पहले ही भुगतान हो चुका है, और यह हमें भविष्य में भी सचेत रखेगा। अभी के लिए, टूर और अन्य जगहों पर उनकी सभी रेटिना महिमा में परिणामी छवियों का आनंद लें!