Node.js → Mocha → WebDriver → Selenium → Chrome でウェブサイト自動テスト

9202 ワード
WebdriverIO WebDriver mocha Selenium E2Eテスト WebDriver テキストリンク

Node.js から Chrome でウェブサイトを開いて、自動テストしてみます。

テスト実行中のウインドウは、「Chrome は自動テスト ソフトウェアによって制御されています。」という表示が入る。

（1）Selenium Standalone Server をダウンロードする

http://docs.seleniumhq.org/download/
http://selenium-release.storage.googleapis.com/3.8/selenium-server-standalone-3.8.1.jar

（2）ChromeDriver (Chrome用WebDriver) をダウンロードする

https://sites.google.com/a/chromium.org/chromedriver/
https://chromedriver.storage.googleapis.com/2.33/chromedriver_mac64.zip
ZIP ファイルから chromedriver を展開する

（3）手元の java のバージョンを確かめる

java -version

macOS Sierra 標準の 1.7.0_79 だと古い。

PATH=/Applications/WebStorm.app/Contents/jdk/Contents/Home/jre/bin:$PATH
PATH=/Applications/Android\ Studio.app/Contents/jre/jdk/Contents/Home/bin:$PATH
java -version

JetBrains 製品には 1.8.0_152 が入っているので、これを使える。

（4）Selenium Standalone Server を起動する

java -jar -Dwebdriver.chrome.driver=./chromedriver selenium-server-standalone-3.8.1.jar

あとで Chrome 以外のブラウザもテストしたいので Selenium を使う。

（5） webdriverio をインストールする

npm install webdriverio wdio-mocha-framework

（6）最低限の wdio.conf.js を書く

exports.config = {
    specs: ["./test/specs/**/*.js"],
    capabilities: [{browserName: "chrome"}]
};

（7）./test/specs/google.js テストを書く

const assert = require("assert");

describe("Test", () => {
  it("Test", () => {

    // Google を開く
    browser.url("https://www.google.com/");

    // タイトルをチェックする
    assert.equal(browser.getTitle(), "Google");

    // 検索フォームに入力する
    $("form input[name=q]").setValue("webdriver.io");

    // 検索ボタンをタップする（これではうまくいかない）
    // $("form input[type=submit]").click();

    // 検索ボタンをタップする
    browser.execute(() => {
      document.querySelector("form input[type=submit]").click();
    });

    // 検索結果画面が表示されるのを待つ
    browser.waitForExist("h3 a", 5000);

    // 検索結果１位の内容を確認
    assert.equal($("h3 a").getText(), "WebdriverIO - WebDriver bindings for Node.js");
    assert.equal($("h3 a").getAttribute("href"), "http://webdriver.io/");
  });
});

（８）テストを実行する

./node_modules/.bin/wdio wdio.conf.js

テストが成功すれば、以下のように表示される。

․

1 passing (9.20s)

テストが失敗すれば、以下のようにエラー内容が表示される。

F

0 passing (7.80s)
1 failing

1) Test Google:
unknown error: Element <input value="Google 検索" aria-label="Google 検索" name="btnK" 
type="submit" jsaction="sf.chk"> is not clickable at point (524, 411). 
Other element would receive the click: <div class="sbqs_c">...</div>
running
Error: An unknown server-side error occurred while processing the command.
    at Context.it (test/specs/test.js:14:34)
    at Promise.F (node_modules/core-js/library/modules/_export.js:35:28)
    at elementIdClick("0.22294089062951095-2") - click.js:20:22

Google ウェブサイトの検索ボタンをクリックする部分は、
$("form input[type=submit]").click(); でも通りそうだけど、
オートコンプリートの関係か、クリックできないためにエラーになってしまう。
http://webdriver.io/api/action/click.html にも書いてある通り、
execute() でブラウザ側 JavaScript を実行して、検索ボタンをクリックすることで回避できる。