「Node.jsでブラウザを自動操作してみよう」の感想・備忘録2

思うように動かなかったらexecuteScriptを使う。

await driver.executeScript("document.getElementById('xxx').innerHTML='hogehoge';");

フレームの切り替え

await driver.switchTo().frame(driver.findElement(webdriver.By.id('フレームタグのID')));

// 元のフレームに戻すとき
driver.switchTo().defaultContent();

ウィンドウ（タブ）切り替え

const tabs = await driver.getAllWindowHandles();
await driver.switchTo().window(tabs[1]);
// ※tabs[0]が元のウィンドウ

待機時間の設定

driver.manage().setTimeouts({implicit: 10000});
とすると、findElementなどの際に「要素が表示されるまで最大10秒」待機する。
ただし、試してみてもあまり効果を感じなかった。

明示的な待機(Explicit Wait)

driver.wait(webdriver.until.titleContains('test'), 10000);
※メソッドは他にelementLocated, elementTextContainsなど

ファイルアップロード

ファイル選択ダイアログはブラウザの機能ではないため操作できない。
(執筆時点ではfirefoxは操作できる)
sendKeysメソッドでローカルファイルのパスをセットする。
await driver.findElement(webdriver.By.name('file1')).sendKeys("C:\Users\C-okada\index.html");

表示されていない部分の操作

executeScriptでスクロールしてから操作する必要がある。
await driver.executeScript("window.scrollTo(0, 500)");

Mocha(モカ)

Node.jsのテストフレームワーク=複数のテストをまとめて実行することができる
Chai(チャイ)というNode.jsのアサーションライブラリ=assert()系のメソッドを提供する、が一緒に使われる。
※mochaはchaiを含む復数のアサーションツールを選択して使うことができる

# インストール
npm install mocha
npm install chai

# 実行
npx mocha xxx.js
# -gでインストールした場合はmocha xxx.js

テストコード

const chai = require('chai');
const expect = chai.expect;

describe('Test Example', () => {
  it ('test1', () => {
    expect('hello world').to.contain('world');
  });
  it ('test2', () => {
    expect('hello world').to.contain('World');
  });
});

MochaでGoogleのtitleをテストするコード

Mochaはデフォルトでタイムアウトが2000msと短いので、実行時に–timeout 10000のようにオプション指定するとよい
実運用でのテストではdriver.getPageSource()で取得したソースに期待している文字列が含まれているか、を行うのが一般的
各テスト実行時にスクリーンショットを保存するとステキ

const webdriver = require('selenium-webdriver');
const chai = require('chai');
const expect = chai.expect;

describe('Google Test', () => {
  it ('Check Title', async () => {
    const driver = new webdriver.Builder().forBrowser('chrome').build();
    await driver.get('https://www.google.com/');
    const title = await driver.getTitle();
    expect(title).to.contain('Google');
    await driver.quit();
  });
});

前処理と後処理

beforeEachメソッド、afterEachメソッドをdescribeメソッドの第2引数の関数の中に定義する。

describe('Google Test', () => {
  let driver;
  beforeEach(async () => {
    driver = new webdriver.Builder().forBrowser('chrome').build();
  });
  afterEach(async () => {
    await driver.quit();
  });
  // 以下省略
});