カスタム JavaScript

カスタム JavaScript は、自分で作成するチェックです。JavaScript のスニペットを記述すると、Silktide がテストするすべてのページでブラウザー内にそのスニペットを実行し、スニペットが報告した内容がそれらのページの指摘事項になります。

これにより、Silktide が標準ではテストしない、組織が重視するあらゆる項目をテストできます。たとえば、社内のスタイルルール、必須のトラッキングスニペット、表示されるべきではない非推奨コンポーネントなどです。

修正方法

このチェックによる指摘事項が何を意味するかはスニペットの判断によって決まるため、修正方法も自分で定義します。各指摘事項の message には、そのスニペットを見たことがない同僚でも何を変更すべきか分かるように記述してください。

Silktide によるテスト方法

1. スニペットは、Silktide がテストする各ページで、ページの読み込みが完了した後にブラウザー内で実行されます。スニペットは async JavaScript 関数の本体として実行されるため、await と return を直接使用できます。
2. スニペットの戻り値は指摘事項に変換されます。
   • 複数の指摘事項を報告するには、ページ上の各要素を強調表示するオブジェクトの配列を返します。

// 幅が 500px を超える画像をすべて指摘事項として報告
const wide = [...document.querySelectorAll('img')].filter(img => img.width > 500);
return wide.map(img => ({
  selector: 'img[src="' + img.getAttribute('src') + '"]',
  text: img.getAttribute('src'),
  severity: 'medium',
  message: '画像の幅が 500px を超えています',
}));

• 各オブジェクトには、selector（強調表示する要素の CSS セレクター）、text（指摘事項に表示する内容）、severity（low、medium、high のいずれか）、問題を説明する message を含めることができます。
• ページについて重大度が「低」の指摘事項を 1 件報告するには、単純な文字列を返します。
• 空の配列、または何も返さない場合、そのページに問題がないものとして報告されます。

3. スニペットでエラーが発生した場合、またはサポートされていない値が返された場合、チェックはそのページにエラーを報告します。これにより、スニペットのデバッグができます。

スニペットはページのダウンロード時にブラウザー内で実行されるため、スニペットを変更してもすぐには反映されず、ページが次回再テストされたときに反映されます。

トラブルシューティング

スニペットはブラウザーのコンソールでは動作するのに、ここでは動作しない

スニペットは関数の本体として実行されるため、return などの文はトップレベルに記述できます。console.log で結果を出力するのではなく、指摘事項を返していることを確認してください。console.log の出力は収集されません。

指摘事項で正しい要素が強調表示されない

返す selector は、ページのテスト時点でページ内の要素に一意に一致する必要があります。コンテンツの変化によって機能しなくなる :nth-child のような位置指定セレクターよりも、安定した属性（id、data-* 属性）を使用してください。

詳細情報

• MDN: Document.querySelectorAll
• MDN: CSS セレクター