nightwatch.jsでHTMLデータを取得してjQueryっぽく操作する

フロントエンドのE2Eテストにnightwatch.jsを利用しています。
nightwatchjs.org

テスト対象画面のHTMLデータを取得する方法が無いかと調べてみたところ
sourceメソッド http://nightwatchjs.org/api#source
を使えば簡単に取得できるんですね。

browser
  .url("http://www.google.com")
  .source(function (result){
      // Source will be stored in result.value
      console.log(result.value);
  })
  .end();

さらにjQueryっぽくDOM操作をしたい場合にはcheerioが便利です。
以下は、nightwatch.jsの公式サイトのトップページからaタグを全て取得するサンプルです。

const cheerio = require('cheerio');
browser
  .url('http://nightwatchjs.org/')
  .source((result) => {
    const $ = cheerio.load(result.value);
    const anchors = $('a');
    for(let i = 0; i < anchors.length; i++) {
      console.log($(anchors[i]).attr('href'));
    }
  })
  .end();

これを実行すると、以下のようにすべてのaタグが取得できていることがわかります。

/guide
/api
/blog
/contact
https://github.com/nightwatchjs/nightwatch/archive/v0.8.18.zip
https://github.com/nightwatchjs/nightwatch
https://twitter.com/share
.
.
.

nightwatch.jsはseleniumベースのjsライブラリとなっているため、
フロントエンドエンジニアがE2Eテストが書きやすくなります。