This is a cache of http://qiita.com/daponta/items/1b03c1a18d3c2054aefc. It is a snapshot of the page at 2017-08-23T04:01:21.162+0900.
puppeteerとAVAでE2E<strong>テスト</strong>してみる - Qiita

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

  • 1
    いいね
  • 0
    コメント

Puppeteerとは?

http://qiita.com/Quramy/items/26058e83e898ec2ec078

今回やること

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 = 'pupetter' + new Date().getTime() + ".png";
    await page.screenshot({ path: fileName });

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

比較

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