Seleniumで擬似要素を扱うためのTips

Seleniumを使ってE2Eテストを書いていると、たまに擬似要素（::beforeとか::after）に遭遇して困ることがある。

何が困るかというと、これらの擬似要素はCSSに使われる擬似的な要素であるため、SeleniumのWebドライバから直接いじることができないのである。
つまり、クリックしようと思っていても、擬似要素は直接クリックすることはできないのである。（下のコードはSelenide。）

擬似要素をクリックしようとする

  $("button::before").click(); // クリックできない！

じゃあ、どうやってクリックすればいいかというと、その擬似要素を含む要素ごとクリックするという手がある。

擬似要素を含む要素をクリックしようとする

  $("button").click();

これで上手くいけばハッピーなのだが、往往にして擬似要素を含む要素がinvisibleになっていて失敗する。
そういう時は仕方ないが、次のようにアドホックにブラウザ上での場所を指定してクリックするしかない。

擬似要素を含む要素をクリックする

Actions actions = new Actions(WebDriverRunner.getWebDriver());
actions.click($("button")).build().perform();
// 場所をさらに細かく動かしたい人
actions.moveToElement($("button"), xOffset, yOffset).click().build().perform();

参考資料

https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements
https://stackoverflow.com/questions/45427223/click-on-pseudo-element-using-selenium
https://www.quora.com/How-do-I-locate-After-and-Before-css-tag-in-selenium-webdriver