PowerCMS Xのプラグインを用いてブラウザのコンソールに表示されるデータを収集する

「ウェブサイトリニューアル案件で移行後のHTMLを検査〜自動的に修正する | PowerCMS X ブログ」のようにウェブサイトリニューアル時にHTMLの移行作業が発生した場合の話題です。ブラウザのコンソールを見ると読み込めないリソースやJavaScriptのエラーを確認することができますが、対象ページが非常に多い場合は人力での確認はなかなか大変です。そこで、PowerCMS X Ver.3.08で追加されたアクセシビリティ検証プラグイン「AxeRunner」のスクリプトにコードを追記し、ブラウザのコンソールに表示されるデータを機械的に収集してみました。

AxeRunnerではChrome / Chromiumを操作する高レベルAPIである「Puppeteer」を利用してページを読み込んでいます。PuppeteerのPageEventObject interface等を確認すると、リクエストに失敗した時やページでエラーが発生するときにイベントが発生し情報を取得できるようになっていました。以下のコードをpowercmsx/app/plugins/AxeRunner/node_app/a11ycheck/a11ycheck.jsに記述してAxeRunnerを実行したところ、指定のファイルにエラーの情報が記録されました。

const resultFile = '/var/www/html/puppeteer-results.tsv';
page.on('pageerror', error => {
    const writeMessage = url + "\t" + error.message.replace(/\n\s+/, ' ');
    fs.appendFileSync(resultFile, `${writeMessage}\n`);
});
page.on('console', message => {
    const writeMessage = url + "\t" + message.text() + "\t" + message.location().url;
    fs.appendFileSync(resultFile, `${writeMessage}\n`);
});
page.on('requestfailed', request => {
    const writeMessage = url + "\t" + request.failure().errorText + "\t" + request.url();
    fs.appendFileSync(resultFile, `${writeMessage}\n`);
});

また、古いページでは画像のロールオーバー機能を利用しているケースがありますが、プリロード機能がない場合は実際に画像にマウスオーバーするまでロールオーバー時の画像が読み込まれません。そこで、a要素やbutton要素にマウスオーバーするコードを追加するとロールオーバー画像のリクエストが発生し画像の不足を検出することができました。目視チェックだとロールオーバー機能を利用していることに気付かないケースもあり、このコードは大変役立ちました。

const handles = await page.$$('main a, main button, main area');
for (let handle of handles) {
    await handle.hover();
}

余談になりますが、プリントメディア用CSSの確認のためにPDFを一括作成することも可能です。よく指摘が入りがちなページをまたいだ時のコンテンツ表示確認に役立ちます。これはMac上のPuppeteerで実行してみました。

await page.pdf({
    path: `page_${i + 1}.pdf`,
    format: 'A4',
    margin: {
        top: '10mm',
        right: '10mm',
        bottom: '10mm',
        left: '10mm',
    },
    displayHeaderFooter: true,
    headerTemplate: `<div style="font-size: 10px; margin: 0 1em;"><span class="title"></span><span class="date" style="margin-left: 1em;"></span></div>`,
    footerTemplate: `<div style="font-size: 10px; margin: 0 1em;"><span class="url"></span><span class="pageNumber" style="margin-left: 1em;"></span>/<span class="totalPages"></span></div>`,
    printBackground: true,
});