اختبارات الميزات باستخدام Headless Chrome وCapybara

يُعد Capybara من أشهر أطر اختبار الميزات (feature testing) في مجتمع Ruby on Rails. كنت راضيًا تمامًا عن استخدامه مع متصفح headless مثل PhantomJS.

لكن Google أطلقت مؤخرًا Headless Chrome مع الإصدار 59 من متصفح Chrome، وأداؤه مبهر حقًا. قررت الانتقال إليه في مشروعي الحالي، وحدّثت إعدادات Capybara لدعمه، وأنا راضٍ جدًا عن تحسّن الأداء.

تثبيت ChromeDriver

لتشغيل الـ feature specs، تحتاجون إلى تثبيت Chrome (الإصدار 59 فما فوق) وChromeDriver (الإصدار 2.30 فما فوق). إن كنتم تستخدمون MacOS، يمكنكم تثبيت ChromeDriver أو تحديثه بسهولة عبر Homebrew بتشغيل أحد هذه الأوامر في Terminal:

# install the latest version
brew install chromedriver
# update existing chrome driver
brew upgrade chromedriver
lang-bash

يمكنكم التحقق من التثبيت بتشغيل:

chromedriver -v
# It should display the latest/specify version like so
#=> ChromeDriver 2.33.506106 (8a06c39c4582fbfbab6966dbb1c38a9173bfb1a2)
lang-bash

إعدادات Capybara أضع عادةً إعدادات الـ specs في spec/supports/ وأستوردها في spec_helper، كي أتمكن من تسمية ملف الإعدادات بشكل واضح، وإعدادات Capybara ليست استثناءً.

# frozen_string_literal: true

require 'capybara/rspec'

IS_DEBUG_MODE = -> { ENV['DEBUG'].present? ? :chrome : :headless_chrome }

Capybara.register_driver :chrome do |app|
  Capybara::Selenium::Driver.new(app, browser: :chrome)
end

Capybara.register_driver :headless_chrome do |app|
  options = ::Selenium::WebDriver::Chrome::Options.new
  options.add_argument 'headless'
  Capybara::Selenium::Driver.new app, browser: :chrome, options: options
end

Capybara.configure do |config|
  config.default_max_wait_time = 30
  config.default_driver = IS_DEBUG_MODE.call
  config.javascript_driver = IS_DEBUG_MODE.call
end
lang-ruby

تضبط هذه الإعدادات Capybara على استخدام headless_chrome كـ driver افتراضي لـ JavaScript، وتفتح متصفح Chrome عند تصدير المتغير DEBUG إلى الـ ENV. كما تتيح لكم كتابة اختبارات ميزات للصفحات التي تُعرض بواسطة React.js، وهذا رائع!

تحديث 4/10/17أصدرت RSpec الشهر الماضي الإصدار 3.7 وأصبحت إعدادات اختبارات التكامل أنظف بكثير. إليكم المقتطف:

# System tests use Rack::Test for non JS test and headless Chrome for JS specs
  config.before(:each, type: :system) do
    driven_by :rack_test
  end

  config.before(:each, type: :system, js: true) do
    driven_by :selenium_chrome_headless
  end
lang-ruby

شكرًا لـ Michael Kohl الذي أطلعني على هذا التحديث. ❤

إعدادات CI

إن كان لديكم الإصدار الصحيح من Chrome وChromeDriver مثبتًا على بيئة CI، فيُفترض أن تعمل اختباراتكم بشكل طبيعي.

أما مستخدمو CircleCI مثلي، فإن أجهزة CircleCI الحالية تستخدم إصدارًا أقدم من Chrome وChromeDriver لا يدعم Headless Chrome.

**هل جرى تحديث ChromeDriver على صورة Ubuntu 14.04 (Trusty)؟**مرحبًا، بدأنا نلاحظ فشل عمليات البناء قبل ساعتين بسبب عدم التطابق بين إصداري Chrome وChromeDriver. نحن…discuss.circleci.com

لحل ذلك، تحتاجون إلى إضافة script يزيل Chrome وChromeDriver ثم يعيد تثبيت إصدارات أحدث منهما (على الأقل إلى أن تحدّث CircleCI الإصدار).

dependencies:
  pre:
    # install chrome
    - wget -N https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb -P ~/
    - sudo dpkg -i --force-depends ~/google-chrome-stable_current_amd64.deb
    - sudo apt-get -f install -y
    - sudo dpkg -i --force-depends ~/google-chrome-stable_current_amd64.deb
    - sudo rm /usr/local/bin/chromedriver
    # install chromedriver
    - wget -N http://chromedriver.storage.googleapis.com/$CHROME_DRIVER_VERSION/chromedriver_linux64.zip -P ~/
    - unzip ~/chromedriver_linux64.zip -d ~/
    - rm ~/chromedriver_linux64.zip
    - sudo mv -f ~/chromedriver /usr/local/bin/chromedriver
    - sudo chown root:root /usr/local/bin/chromedriver
    - sudo chmod 0755 /usr/local/bin/chromedriver
lang-yaml

الخلاصة

كما ذكرت سابقًا، أداء Headless Chrome مُرضٍ حقًا، وتصحيح الأخطاء فيه بهذه الإعدادات سهل للغاية. أنصحكم بشدة بتجربته مع الـ feature specs لديكم.