こんにちは。ヒューマンクレスト山口です。
私は普段「Selenium」を用いて、Webサイトの自動化しています。
皆さんは自動テストをしながら、HTTPステータスコードを確認したいと思ったことはありませんか？
現在、「Selenium」ではHTTPステータスコードを確認することはできません。
HTTPステータスコードを取得するには様々な方法がありますが、ライブラリを使うのも１つの手段だと思います。
そこで今回は「puppeteer」を用いたWebサイトのテスト自動化を簡単に紹介します。

puppeteerとは？

Chrome　DevTools Protocolを用いて、Headless ChromeをNode.jsで操作しやすくしたライブラリです。
2017年8月にリリースされ、ChromeのDevToolチームが開発・メンテナンスしています。
また、多様なAPIが提供されており、様々な操作を簡単に書くことができます。

環境情報

Mac OS Sierra
Node.js v8.7.0
Chrome 最新

puppeteerのインストール

以下のコマンドでインストールできます。

npm i puppeteer

Webサイトを操作する

クリック・入力・チェックなどの基本操作は以下のようにして記載し、実行することができます。
待ち時間をある程度いれないと上手く動作しなかったので、コードの中で待ち時間を記載しています。

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

(async () => {
  const browser = await puppeteer.launch({headless: true});
  const page = await browser.newPage();
  let url = "https://example.selenium.jp/reserveApp_Renewal/"

  //URLを開く
  await page.goto(url, {waitUntil: 'networkidle',networkIdleTimeout:5000});

  //宿泊日を選択する
  const datepick = await page.$('#datePick');
  await datepick.click();
  const date_next = await page.$('.next');
  await date_next.click();
  const date_select = await page.$('.day');
  await date_select.click();
  await page.waitFor(3000);

  //名前を入力する
  page.type('#guestname', 'QuesTest');
  await page.waitFor(5000);

  //「利用規約に同意して次へ」をクリックする
  const inputElement = await page.$('#agree_and_goto_next');
  await inputElement.click();
  await page.waitFor(5000);

  //期間をチェックする
  const check_term = await page.evaluate(() => {
    const node = document.body.querySelectorAll('#term');
    const array =[];
    for (item of node){
      array.push(item.innerText);
    }
    return array;
  });

  console.log("期間::"+check_term)

  assert.equal(check_term, "期間: 2017年11月26日 〜 2017年11月27日 1泊")

  //名前をチェックする
  const g_name = await page.evaluate(() => {
    const node = document.body.querySelectorAll('#gname');
    const array =[];
    for (item of node){
      array.push(item.innerText);
    }
    return array;
  });

  console.log("名前::"+g_name)

  assert.equal(g_name, "QuesTest")

  //ブラウザを閉じる
  await browser.close();
})();

スクリーンショットを取得する

以下の書き方でスクリーンショットを取得することができます。
スクリーンショットはそのページのすべて（見えてる範囲だけではなく、表示範囲全部）を撮ることが可能です。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: true});
  const page = await browser.newPage();
  let url = "https://example.selenium.jp/reserveApp_Renewal/"

  //URLを開く
  await page.goto(url);

  //スクリーンショットを取得する
  await page.screenshot({path: 'example.png',fullPage:true});

  //ブラウザを閉じる
  await browser.close();
})();

ステータスコードを取得する

以下のように書くことでステータスコードやメソッドを取得できます。

const puppeteer = require('puppeteer');
const assert = require('assert');
let status = '';

(async () => {
  const browser = await puppeteer.launch({headless: true});
  const page = await browser.newPage();
  let url = "https://example.selenium.jp/reserveApp_Renewal/"

  //Method、StatusCode、URLを出力する
  await page.on('response', response => {
    const req = response.request();
    if (req.url == url) {
      status = response.status
      console.log(req.method, response.status, req.url);
    }
  })
  //URLを開く
  await page.goto(url);

  //指定URLのStatusCodeが200であることチェックする
  assert.equal(status, 200)

  //ブラウザを閉じる
  await browser.close();
})();

最後に

「puppeteer」を用いることで、スクリーンショットやステータスコードを簡単に取得することができそうです。
その他にも、UserAgent書き換えやCookie設定、Keyboard操作などWebブラウザでの様々な動作を確認することができます。
皆さまも機会があれば、自動テストの１つの手法として、「puppeteer」を使ってみてはいかがでしょうか。

参考

https://example.selenium.jp/reserveApp_Renewal/