デバッグ時PuppeteerでDOMツリーをダンプする

問題

PuppeteerでWebアプリのE2Eテストを書いたが、何故かテストがパスしない。
デバッグのため特定の時点でのDOMツリーをダンプ出力したい。

解決策

page.contentでDOMツリーを取得できます。

const res = await page.content();
console.log(`DOM: ${res}`);

特定のElementのみ出力したいなど細かい制御はpage.evaluateを使えば可能です。

const res = await page.evaluate(() => {
  return document.documentElement.outerHTML;
});
console.log(`DOM: ${res}`);

前提条件

page変数は以下のように定義しているという前提です。

const puppeteer = require('puppeteer');
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(SAMPLE_URL);