常见问题及解答

您可以使用 Synthetic-browser-script 本地运行器在本地测试和调试您的脚本。

要创建浏览器测试，请参阅 Instana 中的合成浏览器脚本示例。

有关更多示例，请参阅以下参考:

• 浏览器脚本

• Selenium 旁白

• 多浏览器脚本

创建浏览器测试时，您可以设置超时值，以确保如果执行时间超过指定时长，测试将失败。 但是，超时设置仅在该值小于默认值 BROWSERSCRIPT_TIMEOUT（默认值为 5 分钟）时才生效。

Selenium 如果在您的网页浏览器中存在Cookie和浏览历史记录，录制的测试在 Instana 上可能会失败，因为网站上可能无法显示“接受Cookie”等弹出窗口。 为避免此问题，请在创建测试脚本后，使用 Instana Synthetic-browser-script 本地运行器在本地测试您的脚本。

借助 Instana 的合成浏览器脚本 ，您可以执行以下任务：

• 自动清除用户配置文件：尽管您可以使用 Selenium IDE插件在本地成功运行脚本，但由于弹出窗口的原因，这些脚本在 Instana 上可能会失败。 您需要先关闭弹出窗口，然后再执行操作。 通过使用 Synsynthetic-browser-script 本地运行器，将自动清除用户概要文件。 您无需手动从浏览器中清除 cookie。
• 测试 Instana 扩展的浏览器测试 API：如果您想使用 Instana 扩展的浏览器测试 API ，可以使用 Synthetic-browser-script 本地运行器进行测试。 Synthetic-browser-script 本地运行器的运行时与 Instana 上的 Synthetic 浏览器引擎相同。

Selenium IDE 是一款开源记录工具，用于生成 定位器，如 CSS 选择器、XPath、ID 等。 Selenium IDE 可帮助识别网页元素。 不过，它也有以下局限性：

• 要添加显式等待命令、滚动、阴影 DOM 访问等功能，还需要一些手工操作。
• 有时不会报告测试失败，如 元素未附加到页面文档、元素不可交互。 Selenium IDE 有时与脚本运行程序不兼容，这是一个已知问题。

使用由 Instana 提供的 Synthetic-browser-script 本地运行器，在本地测试您的脚本。 使用该工具，您可以看到完整的浏览器用户界面提示，并在测试脚本中执行您的操作，以帮助您调试和排除故障。 如果您有复杂的测试逻辑（例如循环），也可以尝试使用 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 等框架的网页中，可能会发生这种情况。 要排除此问题，请参阅示例。

如何验证测试用例是否成功？

在浏览器测试字段中，使用 Assertions, Explicit 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 进行匹配。 使用 label、value 或 id 代替 index。 否则， Instana 与 Selenium IDE 之间的结果可能无法兼容。

下例显示了如何使用 select 命令在下拉列表中选择 June。 选择 June 选项的方法见第 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>
 

显式等待是 Selenium 中广为人知的一条最佳实践，旨在避免错误 no such element 并减少等待或休眠时间。 与隐式等待和 $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 中运行 或 runScriptexecuteScript 命令。

{
"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 脚本测试，支持 2FA (双因子认证) 登录到 Web 站点。

完整的测试脚本，请参见 BrowserScript 示例和 Selenium SIDE 示例。

要测试脚本或在本地运行脚本，请将 synb.json 文件中的 url 和 $secure 变量替换为实际值。

要传递 2FA，请完成以下步骤:

1. 获取基于时间的一次性密码 (TOTP) 密钥，这是您与 Web 站点之间随机生成的共享密钥，用于创建 TOTP 令牌以通过双因子认证 (2FA) 登录到 Web 站点。 在初始设置 2FA期间，通常以 QR 代码或数字代码的形式向您提供此密钥。 要获取数字代码，请单击双因子认证配置页面上的以下任何帮助链接:
   • 无法扫描 QR 代码
   • 扫描时发生问题？ 请改为输入代码。
2. 为保护您的密钥，请通过 Instana 访问 API ，为 TOTP 密钥创建 Synthetic 凭证。
3. 在浏览器测试中，请使用浏览器 $browser.generateTOTPToken(key: string) 测试工具 API 生成基于时间的TOTP令牌用于输入。
   • 要将 BrowserScript 用于 2FA 认证:

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

   • 要将 Selenium SIDE 脚本用于 2FA 认证:

     {
        "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}"
     },