Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Misocaにおけるビジュアルテストへの取り組み

 Misocaにおけるビジュアルテストへの取り組み

Rails Developer Meetup 2019に登壇したときの発表資料です。

概ね、「Visual Regression Testingがどういうものか」「Misocaの業務でどういったテストを回しているか」「どんなことに困ったか・工夫したか」などをまとめました。

kokuyouwind

March 23, 2019
Tweet

More Decks by kokuyouwind

Other Decks in Programming

Transcript

  1. CSSでアニメーションを切る def disable_animations page.execute_script(ANIMATIONS_DESABLE_SCRIPT) end ANIMATIONS_DISABLE_STYLE = <<~CSS <!-- *,

    *:before, *:after { /*CSS transitions*/ transition-property: none !important; /*CSS transforms*/ transform: none !important; /*CSS animations*/ animation: none !important; } --> CSS ANIMATIONS_DESABLE_SCRIPT = <<~"SCRIPT" const style = document.createElement('style'); style.innerHTML = `#{ANIMATIONS_DISABLE_STYLE}`; document.head.appendChild(style); SCRIPT
  2. テストコード module Pages module Invoices include Pages::Base register_tours do tour

    ' 請求書⼀覧画⾯', '/invoices' do screenshot full: true check 'order[invoices][]', match: :first screenshot ' フッター- 単独', full: true check 'all-checkbox' screenshot ' フッター- 複数', full: true uncheck 'all-checkbox' # ...
  3. テストコード 基本はただのCapybaraコード ヘルパーメソッドをいくつか作っている tour(view_name, path) pathにvisitする screenshot(state_name, full: bool, sleep:

    oat) 現在の画面を(view_name + state_name)で保存する fullなら縦幅を要素に合わせる 画面キャプチャ前にsleep秒待つ
  4. キャプチャするメソッド def screenshot(name = nil, wait: 0.5, full: false) #

    テキストボックスのキャレットが表示されないようにする page.execute_script "document.activeElement.style.caretColor = 'transparent'" # ページの読み込み待ちと負荷軽減を兼ねて、少し待つ sleep(wait) # 全体をスクリーンショットに撮るために、ブラウザウィンドウをリサイズする resize_to_full if full Capybara::Screenshot.new_saver(Capybara, Capybara.page, false, name ? "#{pagename}_#{name}" # ブラウザウィンドをリサイズしていた場合、元に戻す resize_to_default if full end
  5. 誤差許容の設定 // regconfig.json { "core": { "workingDir": ".reg", "actualDir": "screenshots",

    "thresholdPixel": 50, "addIgnore": true, "thresholdRate": 0, "ximgdiff": { "invocationType": "client" } }, // ... }