Posted at

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に頼りすぎるな。自分の頭で考えろ。

スクリーンショット 2019-04-10 13.44.46.png


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

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

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

スクリーンショット 2019-04-10 13.49.21.png


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回にしているが、このあたりは環境によって調整が必要。

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