ক্যাপিবারা এবং সেলেনিয়াম ব্যবহার করে স্বয়ংক্রিয় স্ক্রিনশট

গত সপ্তাহের AppSignal আপডেটে প্রতিটি স্ক্রিনের জন্য একটি আপডেট করা ইন্টারফেস ডিজাইন অন্তর্ভুক্ত করা হয়েছে। এর মানে হল আমাদের হোমপেজে সমস্ত স্ক্রিনশট আপডেট করতে হবে, যাতে তারা অ্যাপের বর্তমান অবস্থা প্রতিফলিত করে। কায়িক পরিশ্রমের বিশাল পরিমাণ কমাতে, আমরা প্রক্রিয়াটিকে স্বয়ংক্রিয় করার সিদ্ধান্ত নিয়েছি।

সৌভাগ্যবশত, আমরা শীঘ্রই মনে রেখেছিলাম যে সেলেনিয়াম স্ক্রিনশট নিতে সক্ষম৷ আমরা ইতিমধ্যেই আমাদের বৈশিষ্ট্য পরীক্ষার জন্য Capybara-এর মাধ্যমে সেলেনিয়ামকে বেশ ভারী ব্যবহার করি, তাই আমরা নতুন চলমান অংশগুলি প্রবর্তন না করেই কাজটি স্বয়ংক্রিয় করার একটি উপায় হতে পারে কিনা তা তদন্ত করার জন্য রওনা দিলাম৷ কিছুক্ষণ চিন্তা করার পরে, আমরা শিখেছি যে আমাদের পরিকল্পনাটি বাস্তবসম্মত।

একটি স্ক্রিনশট নেওয়ার জন্য এপিআই সোজা-আগামী। শুধু ব্রাউজার উইন্ডোটিকে পছন্দসই আকারে সেট করুন, একটি পৃষ্ঠায় যান এবং একটি স্ক্রিনশট নিন:

require 'capybara'
 
Capybara.default_driver = :selenium
page.driver.browser.manage.window.resize_to(1600, 1200)
visit 'https://appsignal.com'
page.save_screenshot(file)

এটি নির্দিষ্ট স্থানে একটি png ফাইল তৈরি করে। আপনি যদি রেটিনার স্ক্রিনশট নিতে চান তবে একটি সতর্কতা রয়েছে:ক্রোম ড্রাইভার রেটিনা স্ক্রিনশট তৈরি করে, তবে শুধুমাত্র দৃশ্যমান জায়গাটি শুট করে। অন্যদিকে ফায়ারফক্স ড্রাইভার পুরো পৃষ্ঠাটি শুট করে, কিন্তু রেটিনা রেজোলিউশনে নয়। এবং যেহেতু আমাদের টিমের সবাই রেটিনা স্ক্রিন ব্যবহার করে না, তাই তারা স্ক্রিনশট আপডেট করতে পারবে না।

কিছু অনুসন্ধানের পরে, আমরা এই জিস্টবাই ক্রিসমের সমস্যার সমাধান পেয়েছি। এই নিফটি হ্যাকটি ব্যবহার করে আমরা ফায়ারফক্সকে স্ক্রিনশট নেওয়ার ঠিক আগে, স্বাভাবিক আকার দ্বিগুণ করতে পৃষ্ঠাটিকে উড়িয়ে দিই:

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

সম্পূর্ণ পৃষ্ঠার রেটিনা স্ক্রিনশট হয়ে গেলে, পরবর্তী ধাপ হল convert ব্যবহার করে এটিকে পছন্দসই মাত্রায় ক্রপ করা। CLI টুল যা ImageMagick-এর সাথে অন্তর্ভুক্ত:

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

আমাদের মাত্রা দ্বিগুণ করতে হবে, কারণ ইমেজ ম্যাজিক জানে না এটি একটি রেটিনা চিত্র। এটি কেবল এটিকে 3200px বাই 1600px বলে বিবেচনা করে৷ to_file সরাসরি আমাদের সম্পদ ফোল্ডারে ফাইলের দিকে নির্দেশ করে।

অবশেষে, আমরা ফাইলটি অপ্টিমাইজ করতে pngquant ব্যবহার করি। আমাদের সাধারণ স্ক্রিনশটগুলি 220kB থেকে 250kB পর্যন্ত, যার মানে আমাদের অবশ্যই তাদের আকার ছোট করা উচিত:

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

যে এটা আছে সব. আমরা এই কমান্ডগুলির উপর ভিত্তি করে একটি Rakefile লিখেছি যেটি আমরা যখনই ডিজাইন পরিবর্তন করি তখন আমরা আবার চালাতে পারি৷ আপনি এখানে সম্পূর্ণ কোড সহ একটি সারাংশ খুঁজে পেতে পারেন৷

এই প্রক্রিয়াটি স্বয়ংক্রিয়ভাবে পরিশোধ করা হয়েছে, এবং ভবিষ্যতেও আমাদের সুস্থ রাখবে। আপাতত, ট্যুরে এবং অন্যত্র তাদের সমস্ত রেটিনার গৌরব সহ ফলাফল চিত্রগুলি উপভোগ করুন!