はじめに

ENECHANGE では Ruby on Rails でアプリケーションを構築しており、 Circle CI で自動的にテストを実行しています。

ENECHANGE では以前から Circle CI のテストがしばしば失敗するという現象に悩まされていました。たいていの場合、 Rebuild をクリックしたら成功します。が、リリースが遅くなってしまいます。ときには残業をして対応することもあり、エンジニアの負担となっていました。

こうした状況は、健全な状況ではあるとは言えません。今回、一念発起して、たまに落ちるテストがなぜ落ちるのか調査し、それを改善するように対応しました。

これまでの取り組み

ENECHANGE ではこのようなたまに落ちるテストについてずっと放置していたわけではありません。

過去も、下記の記事や

tech.enechange.co.jp

下記の記事で tech.enechange.co.jp

取り組んでいたように、たまに落ちるテストにはずっと取り組んできました。

しかしながら、それだけではすべて解決するのは難しいという状況でした。

状況の調査

たまに落ちるテストがなぜたまに落ちるのかの原因調査を実施しました。これはたまに落ちるという事象であるがゆえに再現性が低くなかなか調査が大変だったのですが、 Circle CI の build with SSH の機能などを活用して、特定することができました。

原因①：ラジオボタンがクリックできていない

さきほども言及した scenario内の一部分をリトライできるrspec-retry_exの紹介 - ENECHANGE Developer Blog の記事でも指摘されているように ENECHANGE ではラジオボタンで、アコーディオン形式でアニメーションする画面部品があるのですが、ここでテストが失敗することが数多くありました。

このとき、 rspec の中では

find('label[for=have_bill]').click

というような書き方をしている箇所がほとんどでした。

調査の結果、上記のコードによってラジオボタンをクリックした直後、

page.find(:id, 'have_bill').checked? #=> false

となっていました。すなわち、クリックしたつもりだけど、実際にはまだラジオボタンにチェックできていない状況であることが分かりました。

対策①：ラジオボタンを確実にクリックする。何度でもクリックする。

ラジオボタンのクリックを確実に成功させた上で次に進むために、成功するまで何度でもクリックするようにしました。

具体的にはもともと

find('label[for=have_bill]').click

と書いていたところを、 choose_n というメソッドを新たに定義し

choose_n('have_bill')

と書けば、成功するまで、何度もクリックするようにしました。

choose_n メソッドは下記のとおりです。

def choose_n(test_id, n = 10)
  n.times do
    choose test_id
    sleep 0.1
    break if page.find(:id, test_id).checked?
  end
end

この choose_n メソッドを使うことで、

シンプルになる
choose メソッドを内部的に使うので、指定した要素がクリック可能な状態になるまで、待ってくれる
checked? メソッドを使い、クリックが成功するまで何度も繰り返す

という動作をしてくれるようになります。

ただ ENECHANGE ではラベルを経由して、ラジオボタンの選択を行うコーディングになっており、何も設定せずに choose を使うと

Capybara::ElementNotFound Exception: Unable to find css

というようなエラーが発生しました。

このようなエラーが発生するのを防ぐため、下記のような Capybara の設定を行いました。

Capybara.configure do |config|
  config.default_driver = :selenium_chrome
  config.automatic_label_click = true
end

この automatic_label_click = true という設定により、 choose メソッドで内部的にラベルをクリックしてくれます。

この工夫により、劇的にテストが失敗する確率を低減することができました。

原因②：なぜかクリックする場所がズレる

ほかに「Element is not clickable at point 」というメッセージが表示され、失敗するという事象が低確率で発生していました。

この件についても Circle CI で build with SSH の機能を使って調査しました。

すると、不思議なことに click するときにクリックすべき座標と比較して y軸下方向に 120px から 150px 程度、ズレている座標をクリックしていることが判明しました。 capybara など Ruby のレイヤでその要素の座標を取得する時点においては y軸の座標がズレていません。しかしながら Capybara::Node::Element クラスの click メソッドを呼ぶと「Element is not clickable at point 」のエラーが発生します。そのエラーメッセージの中にある座標を調べると y軸がズレているのです。

WEB 上の資料を調べたところ、 driver.execute_script("window.scrollTo(0, document.body.scrollHeight);") の処理を追加することで改善したというような事例もあるようなのですが、ENECHANGE ではこれを試してみても改善しませんでした。

かなり試行錯誤しました。結果として黒魔法 Module#prepend を実践投入することで解決しました。

具体的には下記のようなコードを書きました。

module Capybara
  module Node
    module ClickByCoordinate
      def click_by_cordinate(x, y)
        js = <<~JS
        var x = arguments[0] - window.pageXOffset;
        var y = arguments[1] - window.pageYOffset;
        var e = document.elementFromPoint(x, y);
        if(e){
          e.click();
          return true;
        }
        else{
          return false;
        }
        JS
        Capybara.page.execute_script(js, x, y)
      end

      def x
        native.location.x + native.size.width / 2
      end

      def y
        native.location.y + native.size.height / 2
      end

      def click
        super
      rescue ::Selenium::WebDriver::Error::WebDriverError => e
        if e.message.include?("is not clickable at point ")
          native = self.native
          native.location_once_scrolled_into_view
          unless click_by_cordinate(self.x, self.y)
            raise e
          end
        else
          raise e
        end
      end
    end

    class Element
      prepend ClickByCoordinate
    end
  end
end

native.location.x や native.location.y はそのクリックしたいエレメントの左上の角の座標を返します。このコードではエレメントの中心の座標を計算して、 x メソッドでそのエレメントの中心の x 座標、y メソッドでそのエレメントの中心の y座標を返すようにしています。

click_by_cordinate メソッドの内部では JavaScript にある elementFromPoint という関数を使って、その座標のエレメントを取得してクリックしています。

この座標がズレる事象は低頻度でのみ発生するものであったため、まずデフォルトの処理を実行し、座標がズレた結果失敗した場合のエラーが発生した場合 click_by_cordinate メソッドを使って再度クリックするようにしました。

この結果、低確率で座標がズレ、たまにテストが落ちるという現象を防ぐことができ、Circle CI でたまに落ちる現象を防ぐことができました。