puppeteerとAVAでE2Eテストしてみる

Puppeteerとは？

今回やること

AVA+Nightmare製のE2EテストをAVA+Puppeteerに置き換えます
※URLやセレクタは適当に置き換えています

テスト内容

• 検索フォームを入力しsubmit
• 結果ページのリンクを一つ取得
• リンクが取れていることをチェック

まずはNightmareバージョン

構成

• Node.js v6
• ava v0.18
• Nightmare v2.10

コード

nightmare.js

const Nightmare = require('nightmare');
const test = require('ava');

test.serial('check form result', function *(t) {
    const nightmare = Nightmare({show: true});
    let href;
    try {
        href = yield nightmare.goto('http://sample.jp/form')
            //検索フォームに入力
            .type('input[name=search]', 'E2Eテスト')
            .click('form input[type=submit]')
            //結果の要素を取得
            .evaluate(function () {
                return document.querySelector('.result a').href;
            });
    } catch (e) {
        t.fail(e);
    }
    //スクリーンショットの生成
    const fileName = 'nightmare' + new Date().getTime() + ".png";
    yield nightmare.screenshot('capture/'+fileName);

    yield nightmare.end();
    console.log(href)
    t.truthy(href);
});

Puppeteerで書いてみる

構成

• Node.js v8.4.0
• ava v0.22.0
• puppeteer v0.9.0

コード

package.json

{
  "name": "js",
  "version": "1.0.0",
  "description": "test",
  "dependencies": {
    "ava": "^0.22.0",
    "puppeteer": "^0.9.0",
  },
  "scripts": {
    "test": "env NODE_PATH=./lib ava"
  },
  "ava": {
    "verbose": true,
    "presets": []
  }
}

puppet.js

const puppeteer = require('puppeteer');
const test = require('ava');

test.serial('check form result', async (t) => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    let href;
    try {
        await page.goto('http://sample.jp/form', { waitUntil: 'networkidle' });
        await page.focus('input[name=search]');
        await page.type('E2Eテスト');
        await page.click('form input[type=submit]');
        await page.waitForNavigation();
        href = await page.evaluate(() => {
            return Promise.resolve(document.querySelector('.result a').href);
        });
    } catch (e) {
        t.fail(e);
    }
    const fileName = 'puppeteer' + new Date().getTime() + ".png";
    await page.screenshot({ path: fileName });

    browser.close();
    console.log(href)
    t.truthy(href);
});

比較

• Nightmareと同様のことが可能
• focusを実行しないと入力はできない
  • ブラウザを実際に操作する感覚でコードに落とす必要あり
• 起動が若干遅い（？）