Rails의 System Spec에서 JavaScript 오류를 감지하는 방법

소개

최근 웹사이트라면 JavaScript를 이용하지 않는 페이지를 찾는 것이 어려울까 생각합니다.
그런 가운데 단순히 Rails의 System Spec에 의한 검증만이라면, 테스트를 통과했기 때문에 릴리스하면 실은 이하와 같은 JavaScript 에러가 발생하고 있던 것 같은 간과가 일어나는 일이 때때로 있지요.



해결책으로서의 이상은 JavaScript가 영향을 주는 모든 부분을 망라하는 테스트를 쓸지도 모르지만, 현실적으로는 거기까지 쓸 수 없다는 경우가 많을까 생각합니다.
또, 모든 것을 망라하고 있을 생각이라도 실제로는 누설이 있어 프로덕션 환경의 콘솔에 JavaScript 에러가 표시되고 있었던 것 같은 일은 일어날 수 있습니다.

그래서 이번 기사에서는 Rails의 System Spec에서 JavaScript 오류를 감지하는 방법을 소개합니다.

설정 예

spec/support/system_test.rb

module Capybara
  module Matchers
    class JsNoErrorMatcher
      def matches?(page)
        errors = page.driver.browser.manage.logs.get(:browser)
        errors.find_all { |error| error.level == 'WARNING' }.each do |error|
          STDERR.puts 'WARN: javascript warning'
          STDERR.puts error.message
        end

        @severe_errors = errors.find_all { |error| error.level == 'SEVERE' }
        @severe_errors.empty?
      end

      def description
        'have no js errors'
      end

      def failure_message
        @severe_errors.map(&:message).join("\n")
      end
    end

    def have_no_js_errors
      JsNoErrorMatcher.new
    end
  end
end

RSpec.configure do |config|
  config.include Capybara::Matchers, type: :system

  driven_by :selenium, using: :headless_chrome

  config.after(:each, type: :system) do |example|
    if example.metadata[:skip_js_error]
      # ログリセット
      page.driver.browser.manage.logs.get(:browser)
    else
      expect(page).to have_no_js_errors
    end
  end
end

※설명을 간단하게 하기 위해서 1 파일에 정리해 쓰고 있습니다만 실제로는 나누는 편이 깨끗하다고 ​​생각합니다.

사용법

지금까지 System Spec을 실행하면 JavaScript 오류가 발생하면 발생한 오류 메시지가 표시되고 테스트가 실패합니다.



만약 외부 스크립트에 의존하고 있는 등의 이유에 의해, 에러를 무시할 수 밖에 없는 것 같은 경우에서는 이하와 같이 쓰는 것으로 특정의 테스트만 JavaScript 에러의 검증을 스킵 할 수가 있습니다.

it 'ログインできること', skip_js_error: true do
  visit root_path
  # ...
end

요약

그래서이 기사에서는 "System Spec에서 JavaScript 오류를 감지하는 방법"을 소개했습니다.
기존의 테스트에 설정을 더하는 것만으로 JavaScript 에러를 깨닫게 되거나 불안정한 테스트의 원인을 파악하기 쉬워진다고 도움이 되는 경우가 많다고 생각합니다.