あくまで個人的なメモ

あくまで個人的なメモ

Puppeteer で Headless Chromeを操ってE2Eテストする(予定) - assertion編

puppeteer

前回の内容で簡単な操作が出来るようになった。はず。

E2E”テスト”というからにはassertion位実施して内容の正しさを確認せねば。

テストフレームワークの導入

とりあえずmocha入れる。mocha+power-assertという選択肢があるか… mocha + power-assert環境の構築 - Qiita これ見ながら。

npm install --save mocha power-assert intelli-espower-loader

intelli-espower-loader は espower-loader を使うためのモジュール？package.jsonの内容とかみてテストファイルがどこにあるかとかを判断してくれる。らしい。よくわからん(ぉ

よくわからんが、nodeのassertの置換したり賢く使えるので使う。

puppeteer 連携させて テスト

テスト自体は適当(ググった結果の件数をチェックする)

mochaのbefore、afterで puppeteer のセットアップする。 ブラウザ起動とか時間がかかるのでmochaとpuppeteerのtimeout設定を長めに設定する。(めんどいので20秒にしてある)

var assert = require("power-assert"); を var assert = require("assert"); にする。 これは最近のpower-assertではassertの上書き？を行っておりモジュール名にpower-を付ける必要がないため。

const puppeteer = require('puppeteer'),
  assert = require('assert');

describe('puppeteer test', function() {
  this.timeout(20000);

  // expose variables
  before (function (done) {
    puppeteer
      .launch({
        headless: true,
        timeout: 200000
      })
      .then(function (browser) {
        global.browser = browser;
        done();
      });
  });

  // close browser and reset global variables
  after (function () {
    browser.close();
  });

  it('search google.', async function() {
    var page = await browser.newPage();
    // ページを開く
    await page.goto('https://www.google.com/');
    // 検索文字列の入力
    await page.type("#lst-ib", "puppeteer");
    // 「Google 検索」ボタンをクリック
    await page.click('input[name="btnK"]');
    // 検索結果が出力されるまで待つ
    await page.waitForSelector('h3 a');
    // 検索結果からリンクを取得する
    let links = await page.$$('h3.r a');
    // assertion
    assert(await links.length === 10); // 検索結果のうちリンク件数を取得。多分実行タイミングとかで変わってくる
    await page.close();
  })

  // 検索キーワード変えて実行。以下同じ。
  it('search google 2', async function() {
    var page = await browser.newPage();
    await page.goto('https://www.google.com/');
    await page.type("#lst-ib", "power-assert");
    await page.click('input[name="btnK"]');
    await page.waitForSelector('h3 a');
    let links = await page.$$('h3.r a');
    assert(await links.length === 10);
    await page.close();
  })
});

その他

色々モジュール組み合わせたり mocha + puppeteer の場合の良いやり方を考えたりで結構時間をつかってしまった。

別で試したけどブラウザクローズしなければcookieとか設定された状態っぽいので、beforeでテストの実行順を考えないと意図しないテストになったりする可能性もある。 puppeteer で cookie操作も可能なので適宜cookie削除するとかの工夫が必要かも。

参考