ブラウザテストでカスタム JavaScript アサーションを使用する
概要
このガイドでは、ブラウザテストでカスタム JavaScript を使用してユーザーインターフェイス (UI) をテストする方法について説明します。JavaScript のアサーションは、同期と非同期のコードをサポートします。
カスタム JavaScript を使用してアサーションを作成するには
- Assertion をクリックし、Test your UI with custom JavaScript を選択します。
- アサーションの本文を記述します。
- オプションで、UI でターゲットとなる要素を選択します。
- Apply をクリックします。
アサーションについては、ブラウザテストステップを参照してください。
ある要素がページ上に存在しないことをアサートする
特定の ID を持つ要素がページ上にないことを確認するには、return !document.getElementById("<ELEMENT_ID>"); を使用します。
ページ上に要素がないことを確認し、コンソールエラーで要素の数を返すには、本文のアサーションに以下を追加します。
var element = document.querySelectorAll("<SELECTORS>");
if ( element.length > 0 ){
console.error(element.length+" "+"elements exist");
}
return element.length === 0;
ブラウザテストの結果には、console.error のログが含まれます。
ラジオボタンがチェックされたことをアサートする
ラジオボタンがチェックされていることを確認するには、本文アサーションで return document.querySelector("<SELECTORS>").checked = true; を使用します。
指定されたローカルストレージの値を設定する
指定したローカルストレージの値を設定するには、本文アサーションに以下を追加します。
localStorage.setItem(keyName, keyValue);
return true
例えば、1970 年 1 月 1 日 00 時 00 分 00 秒 (UTC) から経過したミリ秒数を “mytime” に設定するには
localStorage.setItem("mytime", Date.now());
return true
レンダリングされた PDF に含まれるテキストに対するアサート
外部ライブラリを使って、レンダリングされた PDF の内容をテストすることができます。
外部ライブラリを読み込むには、本文アサーションで promise を使用します。
const script = document.createElement('script');
script.type = 'text/javascript';
//外部ライブラリの読み込み
script.src = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js";
const promise = new Promise((r) => script.onload = r)
document.head.appendChild(script)
await promise
var loadingTask = pdfjsLib.getDocument("<PDF_URL>");
return await loadingTask.promise.then(function(pdf) {
return pdf.getPage(1).then(function(page) {
return page.getTextContent().then(function(content) {
return content.items[0].str.includes("<CONTENT_STRING>")
})
})
});
その他の参考資料
