よくある質問

「 Synthetic-browser-script 」のローカルランナーを使用すれば、スクリプトをローカル環境でテストおよびデバッグすることができます。

ブラウザテストを作成するには、 「 Instana 」 の「Synthetic Browser Script」のサンプルを参照してください。

その他の例については、以下のリファレンスを参照してください。

• ブラウザー・スクリプト

• Selenium サイドスクリプト

• 複数のブラウザ用スクリプト

ブラウザテストを作成する際、タイムアウト値を設定することで、実行時間が指定した時間を超えた場合にテストが失敗するようにすることができます。 ただし、タイムアウトの設定は、その値が（デフォルトは5分） BROWSERSCRIPT_TIMEOUT未満の場合にのみ有効になります。

Selenium WebブラウザにCookieや閲覧履歴が残っている場合、 Instana でのテストの記録に失敗する可能性があります。また、Webサイト上で「Cookieを受け入れる」などのポップアップウィンドウが表示されない場合があります。 この問題を回避するには、テストスクリプトを作成した後、 Instana の「Synthetic-browser-script 」ローカルランナーを使用して、スクリプトをローカル環境でテストしてください。

Instana のSynthetic-browser-script を使用すると、以下のタスクを実行できます：

• ユーザープロファイルを自動的に削除する： Selenium のIDEプラグインを使用すれば、ローカル環境ではスクリプトを正常に実行できますが、 Instana ではポップアップウィンドウが表示されるため、スクリプトが失敗する可能性があります。 アクションを実行する前に、ポップアップ・ウィンドウを閉じる必要があります。 シンセティック・ブラウザー・スクリプトのローカル・ランナーを使用すると、ユーザー・プロファイルが自動的にクリアされます。 ブラウザーから Cookie を手動でクリアする必要はありません。
• Instana の拡張ブラウザテスト API のテスト： Instana の拡張ブラウザテストAPIを使用したい場合は、Synthetic-browser-scriptローカルランナーを使用してテストを行うことができます。 Synthetic-browser-script ローカルランナーの実行環境は、 Instana のSyntheticブラウザエンジンと同じです。

Selenium IDEは、CSSセレクタ、XPath、IDなどのロケータを生成するためのオープンソースの記録ツールです。 Selenium IDEはウェブ要素を特定するのに役立ちます。 しかし、これには次のような制約がある：

• 明示的なWaitコマンドの追加、スクロール、Shadow DOMへのアクセスなど、手作業も必要だ。
• element is not attached to the page document, element not interactable のようなテストの失敗が報告されないことがあります。 Selenium IDE は時々スクリプトランナーと互換性がありません。

Instana が提供する「 Synthetic-browser-script 」ローカルランナーを使用して、スクリプトをローカル環境でテストしてください。 このツールを使えば、フルブラウザのUIプロンプトが表示され、テストスクリプトでアクションを実行できるため、デバッグやトラブルシューティングに役立ちます。 ループなどの複雑なテストロジックがある場合は、 Instana のシンセティックブラウザスクリプトテスト （ JavaScript-based ）を利用してみるのも良いでしょう。 シャドーDOMをサポートするために手動ステップを追加する方法などは、このトピックの他のセクションを参照してください。

テストは、以下のいずれかのエラー・メッセージで失敗する可能性があります。

• is not clickable at point (285,436) because another element <li> obscures it
• Failed to execute command clickElement {} element not interactable.

この問題を解決するには、マウスを移動して要素にフォーカスします。 以下のいずれかの方法を使用できます。

StaleElementReferenceError: stale element reference: element is not attached to the page documentというエラーが発生するかもしれません。 これはよくある Selenium のエラー です。

このエラーは、テストスクリプトがDOMに接続されなくなったWeb要素を参照している場合に発生します。これは、 React やVueなどのフレームワークを使用しているWebページで発生することがあります。 この問題を解決するには、例を参照してください。

テストケースが成功したかどうかを検証するには？

ブラウザのテストフィールドでは、アサーション、明示的WAITを使ってテスト結果を検証します。 こうして、ウェブページが期待通りにロードされ、レンダリングされることを確認できます。 Instana のブラウザテスト機能を使用すると、テスト実行時のスクリーンショットを生成したり、コンソールログ（ Selenium で記録されたスクリプト内のEcho コマンド）、ブラウザログ、タイムラインチャートを確認したりすることもできます。

以下のコマンドが役に立つ：

{
      "id": "938df959-9b65-4ae4-a2f5-59be6188ea5f",
      "comment": "This is how to sleep for 5 seconds.",
      "command": "pause",
      "target": "5000",
      "targets": [],
      "value": ""
},
{
    "id": "2d5c6b52-d2d7-4592-8052-87572a09e58b",
     "comment": "This is how to take screenshot",
     "command": "executeScript",
     "target": "await $browser.takeScreenshot()",
     "targets": [],
     "value": ""
}
 

また、以下のアサーション・コマンドを試すこともできる：

{
    "id": "46eb59c2-5fd6-4481-b3e8-eaaddab79a69",
    "comment": "This is one type of Assertions in browser testing",
    "command": "assertTitle",
    "target": "instana - Google Search",
    "targets": [],
    "value": ""
}
 

ブラウザー・スクリプト・テストでテストを検証するためにExplicit Waitを使用する方法を、次の例で示します：

await $browser.waitForAndFindElement($driver.By.xpath(`//h1[contains(text(), 'Websites & mobile apps')]`), 30000)
await $browser.wait($driver.until.titleContains(`Websites – Websites & mobile apps`), 30000);
 

録画したサイドファイルに以下のコマンドを追加してみてください：

{
      "id": "615cb3e5-fe2a-4859-b0aa-9df52f22028f",
      "comment": "This is Explicit Wait in browser testing",
      "command": "waitForElementPresent",
      "target": "id=mainmenu",
      "targets": [],
      "value": "30000"
},
{
      "id": "03e23d25-38e3-4051-81ff-740109350ee8",
      "comment": "This is how to add logging message in console logs",
      "command": "echo",
      "target": "Verify UI dashboard",
      "targets": [],
      "value": ""
}
 

Web サイトでフレームを使用している場合、 no such element エラーが発生することがあります。

この問題を解決するには、 $browser.switchTo().frame(id: number | WebElement);を使用してフレームまたは iframe に切り替えます。

Instana ブラウザスクリプトのテスト用フレームまたはiframeに切り替えるには：

let frameElement = await $browser.waitForAndFindElement($driver.By.xpath('//*[contains(@id, "pop-frame")]'), 10000);
await $browser.switchTo().frame(frameElement);
 

Web要素を検索するには、 Selenium の 「ロケーター戦略」 に関するリファレンスを参照してください。

CSS セレクターの形式は By.css(element[attribute='attribute-value'])です。

XPath 式の形式は、 By.xpath("//element[@attribute='value']") または By.xpath("//*[@attribute='value']")です。

属性 ( <a href="mysite.com"></a>など) によってエレメントを検索するには、以下を実行します。

// CSS selector
$driver.By.css(a[href*="example"] )
 

// XPath expression
$driver.By.xpath("//a[contains(@href,'Electronics')]")
$driver.By.xpath(`//dds-footer-nav-item[contains(.,'Developer education')]`)
 

Selenium IDE プラグインのデフォルト・ロケーターから変更するには、ターゲットをクリックします。

selectコマンドを使えば、ドロップダウンリストから要素を選択することができます。 Valueプロパティでは、label=、value=、id=、index=で一連のオプションから値を選択できます。 接頭辞がない場合は、label とのマッチが使われます。 indexの代わりにlabel、value、idを使います。 そうしないと、 Instana と Selenium IDEの間で結果が互換性を欠く可能性があります。

selectコマンドを使ってドロップダウンリストで6月を選択する方法を次の例に示します。 6月オプションを選択する方法は、行番号3、4、5に示されている。 これらの方法は、 Selenium IDE および Instana で動作します。

<select id="month" name="month" class="inline six" onchange="document.cf.typ[1].checked=true">
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8" selected="">August</option>
  <option value="9">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>
</select>
 

明示的な待機は、 エラー no such element を回避し、待機時間やスリープ時間を短縮するための、 Selenium におけるよく知られたベストプラクティスです。 暗黙待機および $browser.sleepとの比較では、明示待機が推奨されます。

Instana で明示的な待機を使用するには、以下の例に示すようにコマンドを実行します

// wait until the title comes out
await $browser.wait($driver.until.titleContains('Year 2023 Calendar'), 10000);

// Call the wait function.
await $browser.wait(function () {
    return $browser.getTitle().then(function (title) {
      return title.includes("Google");
    });
  }, 10000);

await $browser.wait(async function () {
    const title = await $browser.getTitle();
    return title.includes("Google");
  }, 10000);

// waitForAndFindElement API
const cookies = await $browser.waitForAndFindElement(
    $driver.By.id(`truste-consent-button`),
    30000
);
await cookies.click();
 

Selenium IDEスクリプトでは、次の例のようにWAITコマンドを使うことができます。 valueプロパティの待ち時間をミリ秒単位で入力します。

{
"id": "d13e50bd-f698-4a04-9420-701a21dcde8d",
"comment": "",
"command": "waitForElementPresent",
"target": "id=result-stats",
"targets": [
    ["id=result-stats", "id"],
    ["css=#result-stats", "css:finder"],
    ["xpath=//div[@id='result-stats']", "xpath:attributes"],
    ["xpath=//div[@id='slim_appbar']/div/div", "xpath:idRelative"],
    ["xpath=//div[7]/div/div/div/div/div", "xpath:position"]
],
"value": "10000"
}
 

Instana の拡張API を呼び出すには、 Selenium のIDEスクリプトを使用して、または executeScriptrunScript コマンドを実行してください。

{
"id": "e781c454-0080-447a-b905-7183443956f3",
"comment": "",
"command": "runScript",
"target": "await $browser.takeScreenshot()",
"targets": [],
"value": ""
}
 

ドロップダウン・リスト内の項目は、 findElement で選択され、クリックされます。

<select id="month" name="month" >
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
...
</select>

// find element by css or xpath
await $browser.findElement($driver.By.css(`#month > option:nth-child(3)`)).click();
await $browser.findElement($driver.By.xpath(`//select[@id='month']/option[3]`)).click();

// wait until element located and do assertion
await $browser.wait($driver.until.elementLocated($driver.By.id("month")), 3000).click();
assert.equal(5, await $browser.findElement($driver.By.id("month")).getAttribute("value"));
await $browser.findElement($driver.By.xpath("//select[@id='month']/option[3]")).click();
assert.equal(3, await $browser.findElement($driver.By.id("month")).getAttribute("value"));
 

シャドー DOM エレメントをテストするには、 getShadowRoot() 関数を使用します。

getShadowRoot() 関数を使用するには、以下のコマンドを実行します。

let shadowHost = await $browser.waitForAndFindElement(shadowHostSelector, timeout);
let shadowRoot = await shadowHost.getShadowRoot();
let element = await shadowRoot.findElement(elementSelector);
console.log("element text is:", await element.getText(), ", id is:", await element.getId());
 

あるいは、 Selenium IDEで Instana の高度なAPIを使用してスクリプトを記録し、ローカルランナーを使ってテストすることもできます：

{
"id": "4f602785-2a19-4b5f-a23c-7ae6f6e58d5d",
"comment": "",
"command": "executeScript",
"target": "let shadowHost = await $browser.waitForAndFindElement($driver.By.css(`.field > q2-input`), 10000); let shadowRoot = await shadowHost.getShadowRoot(); let element = await shadowRoot.findElement($driver.By.css(`*[type='text']`)); await element.sendKeys(`user1`); ",
"targets": [],
"value": ""
},
 

部分一致でページ上のテキストを検証するには、XPath によって findElement を使用できます。

BrowserScript および Selenium SIDE スクリプト・テストの場合、Web サイトへのログオンに 2FA (2 要素認証) がサポートされます。

完全なテストスクリプトについては、 BrowserScript の例および Selenium SIDE の例を参照してください。

スクリプトをテストするか、スクリプトをローカルで実行するには、 synb.json ファイル内の url 変数と $secure 変数を実際の値に置き換えます。

2FAを渡すには、以下の手順を実行します。

1. 2 要素認証 (2FA) を使用して Web サイトにサインインするための TOTP トークンを作成するために、お客様と Web サイトとの間でランダムに生成された共有秘密鍵である Time-based One-Time Password (TOTP) 秘密鍵を取得します。 この秘密鍵は通常、 2FAの初期セットアップ時に QR コードまたはデジタル・コードの形式で提供されます。 デジタル・コードを取得するには、2 要素認証構成ページで以下のいずれかのヘルプ・リンクをクリックします。
   • QR コードをスキャンできない
   • 問題をスキャンしますか? 代わりにというコードを入力してください。
2. 秘密鍵を保護するために、 Instana を使用して、TOTP 秘密鍵用の Synthetic 認証情報を作成してください。 API を開いてください。
3. ブラウザでのテストでは、ブラウザテスト $browser.generateTOTPToken(key: string) 用 API を使用して、入力用の時間ベースのTOTPトークンを作成してください。
   • 2FA 認証に BrowserScript を使用するには、次のようにします。

     let totp_token = $browser.generateTOTPToken($secure.totpKey);
     await findElementByIdAndSendKeys("password", totp_token);
      

   • 2FA 認証に Selenium SIDE スクリプトを使用するには、以下のようにします。

     {
        "id": "ec51296b-4d16-4167-ac83-ba87f89cc0c7",
        "comment": "Generate a TOTP token from a TOTP key",
        "command": "executeScript",
        "target": "return $browser.generateTOTPToken($secure.totpKey);",
        "targets": [],
        "value": "totpToken"
     }, {
        "id": "3cbc306a-ed33-46bf-9923-92752b0466f2",
        "comment": "",
        "command": "type",
        "target": "id=password",
        "targets": [],
        "value": "${totpToken}"
     },