Selenium::WebDriver::Element#click が position: fixed のヘッダやフッタに邪魔されて not clickable になってクリックできない

事象

ヘッダとフッタが position: fixed; で固定されたUIを持ったWebページのe2eテストとか書いてるとクリックできないよーってエラーがよく起きる。こんな感じのUIで;

See the Pen fixed header and footer by oieioi (@oieioi) on CodePen.

このページに対してこんなスクリプトを実行すると;

test.rb

require 'selenium-webdriver'
driver = Selenium::WebDriver.for :chrome
driver.navigate.to "http://127.0.0.1:8081/"
element = driver.find_element(name: 'button')
element.click
driver.quit

こんなエラーになる。 fixed された <footer> とクリックしたい <button> が被っているためクリックできないという。

Element <button name="button">...</button> is not clickable at point (40, 881).
Other element would receive the click: <footer>...</footer>

解決策

目標をセンターに入れてクリックする。

色々方法はあるが、今回はJavaScriptの Element.scrollIntoView() を使って解決した。以下を click する前に実行すれば目標の要素を真ん中になるようにスクロールするので、クリックできるようになる。

driver.execute_script("arguments[0].scrollIntoView({behavior: 'auto', block: 'center', inline: 'nearest'});", element)

で、この動作を click をモンキーパッチする Gem をつくりました。

使い方は require するだけです。

test.rb

require 'selenium-webdriver'
require 'selenium/webdriver/element/extend_click_again'
...

たまに便利です。