Selenium WebDriver (Chrome) でテストするにあたり役に立ったTips

Node.jsのSelenium-webdriverでE2Eテスト書くためのTips。はじめから知っていればどれだけ捗ったか。

Seleniumの公式ドキュメントはここ

探してもなかなか見つからなかった。
ここ。
https://seleniumhq.github.io/selenium/docs/api/javascript/index.html
公式ドキュメントを見るのが1番なので、Qiitaで知った気になっている人はこのリンク先だけ見ておけ。

ChromeのデベロッパーツールにXpathを作ってもらう

階層が深いDOMElementだったり、SPAでいろいろなコンポーネントを使ってサイトを作っていると、なかなかXPathを思ったとおりに指定するのが難しい。
そんな時は思考停止してChromeのデベロッパーツールを使ってXpathを取得しよう。

とはいえ @class @id で指定するほうが記述が簡潔になる場合が多い。
Chromeに頼りすぎるな。自分の頭で考えろ。

ChromeのデベロッパーツールでXpathを指定して要素を取得しよう

既存のテストを読んだところで指定されているXpathがどの要素を指定しているかわからない。そんな時はChromeデベロッパーツールを使えば要素を取得できる。

$x('xpath') にXpathを渡してやれば要素を確認することができる。

WebElement#clear() 動いてなくね？

MaterialUIのコンポーネントだからなのかinput要素にsendKeys()でテキストを送ることはできても、clear() で削除することができない。なんなんこれ。

代替手段としての BACK_SPACE キーを送信してテキストを削除する。

// e.g. sending back space.
import webdriver, { until, By, Key } from 'selenium-webdriver'

export const timeout = 15000
const drive = new webdriver.Builder()
  .forBrowser('chrome')
  .build()


driver
  .findElement(By.xpath('//*[contains(@id,"name_input")]'))
  .then(element => {
    element.sendKeys.apply(element, [Key.chord(Key.CONTROL, "e"), ...(new Array(30).fill(Key.BACK_SPACE))])
    element.sendKeys('new name')
  })

この例では、まず Ctrl+e を送信してカーソル位置を文字列の最後に移動させてから BACK_SPACE を送信している。また、送信数も30回にしているが、このあたりは環境によって調整が必要。

詳しくはドキュメントを見ろ。