【JavaScriptl】サイトやページの中の各リンク先がアクセス可能か否かをテストできるライブラリ broken-link-checker の紹介

　webサイトを作ったり、改修したりした結果のテストをする際、正常なリンクがあるように見えるけれどもアクセスするとエラーとなるページがあるかないかを探します。主要なリンクについてはロジック等の本筋のテストのついででチェックできますが、ついででリンクを網羅的にチェックするのは現実的でありません。またこれを手作業で行うのは辛いですし、ブラウザ上のスクリプトで行おうにもページを開ききるだけでも結構手間です。これを解決するために自動テストの際にページ内のリンクを探して、リンク先にアクセスして結果を確認する、という手段が取れます。broken-link-checker はこのページ内、サイト内のリンクを探してアクセス結果を確認することを専門とするライブラリです。

stevenvachon/broken-link-checker： Find broken links, missing images, etc within your HTML.

　broken-link-checker は例えば次の様に使えます

// testBrokenLink.js

const { SiteChecker } = require('broken-link-checker');
// サイト全体をチェック
const siteChecker = new SiteChecker(
  {
    // @see https://github.com/stevenvachon/broken-link-checker#filterlevel
    // チェック対象となる要素のフィルタリング 0 はクリック可能なリンク
    filterLevel: 0,
    // テストしたくない URL に含まれているキーワード。
    // 過剰アクセスで迷惑外部サービスのURLだったり、実体のないテスト用URLだったりの一部を入れる
    excludedKeywords: ['twitter'],
    // 同ページ中の同URLはテストから除外するか否か
    excludeLinksToSamePage: true,
  },
  {
    error: (error) => console.error(error),
    link: (result) => {
      if (result.broken) {
        // リンク先にアクセスできないならば、それについての情報を表示
        console.log({
          broken: result.broken,
          brokenReason: result.brokenReason,
          page: result.base.original,
          link: result.url.resolved,
          linkText: result.html.text,
          tag: result.html.tag,
        });
      } else {
        // リンク先にアクセスできるならば . を表示。テストツールや凛とツール的な感じ
        process.stdout.write(`.`);
      }
    },
  }
);
// テスト対象のサイトの URL
siteChecker.enqueue('http://localhost:18021');

node testBrokenLink.js

　これを実行すると次の様に何故どのページのどこにアクセスできないリンクがあるか表示されます。

.......{
  broken: true,
  brokenReason: 'HTTP_undefined',
  page: 'http://localhost:18021/index',
  link: 'https://example.com/ファイルなしテスト,
  linkText: '編集テスト',
  tag: ''
}
.......................

Broken Link Checker – Chrome ウェブストア

　これは次の様にブラウザ上で実行すると各リンクについてチェックし、アクセス可能か不可能化を示してくれます。先ほどの網羅チェックでアクセス不可リンクが見つかったページでこれを実行するとすぐに問題となるリンクの要素を見つけられます。この要素とソースコードをたらし合わせれば問題のリンクのコードがわかり、そのリンクの定義のされ方などから問題の原因もすぐに見つけられます。

　概ね便利ですが注意点もあります。例えば ajax や axios などが結果的に動く様な要素は発見できず、試せません。また特定条件でのみリンクが現れるページをクロールし損ねることもあります。リンク先にアクセスできるけれども想定した行先でないこともあります。厳密にチェックするならば非同期ロジックは単体テスト、なにがしかの方法でテストが必要なページの URL を洗い出して SiteChecker ではなく HtmlUrlChecker でページ単位でチェックする、他のテスト同様に期待する結果と実際の結果を比べる、といったことが必要になります。