概要

このガイドでは、ブラウザテストでカスタム JavaScript を使用してユーザーインターフェイス (UI) をテストする方法について説明します。JavaScript のアサーションは、同期と非同期のコードをサポートします。

カスタム JavaScript を使用してアサーションを作成するには

1. Click Assertion and select Test custom JavaScript assertion.
2. アサーションの本文を記述します。
3. オプションで、UI でターゲットとなる要素を選択します。
4. 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 のログが含まれます。

ラジオボタンがチェックされたことをアサートする

To verify that a radio button is checked, use return document.querySelector("<SELECTORS>").checked === true; in the body assertion.

指定されたローカルストレージの値を設定する

指定したローカルストレージの値を設定するには、本文アサーションに以下を追加します。

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>")
        })
    })
});

参考資料

お役に立つドキュメント、リンクや記事:

ブラウザテストステップについてドキュメント テストステップの高度なオプションを構成する方法を学ぶドキュメント 不明な時間にトリガーされるポップアップの処理方法についてドキュメント