使用 Selenium IDE 脚本进行浏览器测试

Selenium IDE 脚本测试是 Instana 合成浏览器脚本测试的一种。

使用 Selenium IDE 脚本（也称为侧脚本）来模拟用户与网络应用程序的交互。

建议您从简单的 Selenium IDE 脚本开始，如录制 Selenium IDE 脚本部分所述，或使用 Selenium 侧脚本示例。

然后，您可以使用 Instana Synthetic 提供的高级功能，如访问用户凭据、截图等，详见 Selenium IDE 脚本中的扩展测试功能。如果您想使用 Instana 提供的全局变量，例如： $secure 或扩展的浏览器测试 API ，例如 await $browser.takeScreenshot()您可以使用 Instana Synthetic-browser-script 本地运行器。有了这个本地运行程序，您就可以在本地测试和调试 Selenium IDE 脚本，因为 Selenium IDE 无法识别这些高级 API，也无法为您清除每次测试运行的 cookies 或会话。

录制 Selenium IDE 脚本

录制基本脚本

下载并安装 Selenium IDE。

您可以为 Firefox 和 Chrome 浏览器用户下载并安装 Selenium IDE。
- 对于 Firefox 用户，请在浏览器中添加 Firefox 附加组件。然后，根据需要重新启动浏览器。
- 对于 Chrome 浏览器用户，请完成以下方法之一：
  
  注： Selenium IDE Chrome 扩展已不再在 Chrome 网上商城提供。
  - 使用命令行或命令提示符安装 Selenium IDE。
```
npm install -g selenium-ide
selenium-ide
```
    有关安装说明的更多信息，请参阅 readme 文件。
  - 根据操作系统从 Selenium IDE GitHub 版本中下载集成开发环境，并在本地运行应用程序。
    
    注： Selenium IDE 应用程序以 3.0 格式记录项目，合成 PoP BrowserScript 播放引擎尚不支持该格式。
    
    为确保兼容性，必须手动将 .side 文件中的版本号从 3.0 更改为 2.0。
    
    在 Selenium IDE 应用程序中保存项目后，要手动编辑 .side 文件，请完成以下步骤：
    1. 用文本编辑器打开 .side 文件。
    2. 查找文件中的版本字段。下面的示例显示了版本字段的外观：
```
    {
        "id": "some-id",
        "version": "3.0",
          ...
    }
```
    3. 将版本更改为 2.0。
    4. 保存文件。
从菜单栏打开 Selenium IDE。点击 Record a new test in a new project 链接，然后按照说明录制脚本。

在 Selenium IDE 进行记录时，其在脚本中为每个用户操作生成一条命令。
执行测试操作，在 Google 中搜索 instana 关键字。

按 Enter 进入搜索结果页面。在此页面添加 wait 条件；右键单击搜索图标并选择 Selenium IDE -> Wait For -> Present。在 Value 属性中输入等待元素显示的超时值，例如 10000 最多可等待 10 秒。
添加验证测试的断言。添加 assert 命令；右键单击页面并选择 Selenium IDE -> Assert -> Title。

完成录音后，点击 Selenium IDE 中的 " 停止录音 "按钮。
您可以添加 send keys 等命令，值为 ${KEY_ENTER} ，在搜索文本区域键入 Enter 。

在 wait for element present 命令的 Value 属性中提供一个超时值，如 10000 ，以等待条件。使用与上一步相同的 Target 值来定位搜索文本区域网页元素。这是确保测试稳定成功运行的重要步骤。这在浏览器测试领域被称为 " 显式等待"。在继续执行代码中的下一条命令之前，逻辑会对应用程序的特定条件进行轮询。如果在指定的超时值之前未满足条件，则会显示超时错误。

然后测试脚本，点击运行。
录制完成后，将脚本保存到 .side 文件中。

更多信息，请参阅 Selenium IDE 入门。完整示例见下节。

考虑使用 Instana Synthetic-browser-script 本地运行程序在本地测试和调试录制的脚本。 Synthetic-browser-script 本地运行程序提供与 Instana Synthetics 相同的运行时间，它可以帮助你为每次测试运行清除 cookie 或用户配置文件。

然后，您可以在 Instana 上创建 Selenium IDE 测试，选择 Create Synthetic Test -> Browser Script Test -> Switch to Advanced Mode ，单击 Add Script ，然后上传 .side 文件。

注：

如果无法在 Instana 的测试结果中看到时间轴图表。您可以检查 suites -> tests 属性中是否有测试 ID。没有该测试 ID，您的测试将无法执行回放。

"suites": [{
    "id": "7de135e9-a6c4-4b39-b28a-092bb0d7cbac",
    "name": "Search Instana",
    "persistSession": false,
    "parallel": false,
    "timeout": 300,
    "tests": ["c0283e5a-8cbd-492f-8b3d-f2476f319264"]
}],

Instana 仅支持测试套件中的序列化测试，因此 Selenium IDE 脚本中的以下属性会被 Instana 浏览器播放引擎覆盖：
- "persistSession": 错误
- "并行"： false

如何等待条件

您可以使用可用的 " 显式等待"（Explicit Wait ）命令，等待条件满足后再执行代码中的下一条命令。 明确等待是浏览器测试的最佳实践。如果在指定的超时值之前未满足指定条件，则会显示超时错误。测试失败，提示错误。最常用的 wait 命令是 wait for element present。在 value 属性中输入超时值（毫秒）。
```
{
    "id": "d13e50bd-f698-4a04-9420-701a21dcde8d",
    "comment": "",
    "command": "waitForElementPresent",
    "target": "id=searchform",
    "targets": [],
    "value": "10000"
}
```

您可以使用 pause 命令暂停几毫秒。在下面的示例中，等待时间为 3 秒。

{
    "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb7",
    "comment": "",
    "command": "pause",
    "target": "3000",
    "targets": [],
    "value": ""
}

如何验证测试结果

要自动验证测试结果，可以使用断言和显式等待。如果验证失败，测试结果状态将显示为失败。您可以使用合成智能警报监控测试失败。

您可以使用 wait for element present、 assert element present 或其他显式等待命令，等待所需元素在指定超时前出现在用户界面上。在 wait for 命令的 value 属性中设置超时值。 assert 命令的超时值为 15 秒。
```
{
    "id": "e9a3161a-de29-4557-bbf6-9950c1881425",
    "comment": "",
    "command": "assertElementPresent",
    "target": "linkText=About",
    "targets": [],
    "value": ""
}
```

您可以使用 assert title 命令来验证页面标题。

{
    "id": "46eb59c2-5fd6-4481-b3e8-eaaddab79a69",
    "comment": "",
    "command": "assertTitle",
    "target": "instana - Google Search",
    "targets": [],
    "value": ""
}

您可以使用 assert text 命令确认元素文本是否包含所提供的值。该命令的 value 属性必须与字符串完全匹配。 Selenium IDE 不支持该命令的模式匹配。
```
{
    "id": "ed733875-5682-4a3b-9a3e-9286f88a62ca",
    "comment": "",
    "command": "assertText",
    "target": "linkText=About",
    "targets": [],
    "value": "About"
}
```

如何在控制台日志中打印信息

您可以使用 echo 命令在控制台日志中打印日志信息，以帮助您排除故障。

{
    "id": "03e23d25-38e3-4051-81ff-740109350ee8",
    "comment": "",
    "command": "echo",
    "target": "Generate a TOTP token from a TOTP key",
    "targets": [],
    "value": ""
}

如何使用 JavaScript 向下滚动

大多数测试用例都需要在页面上滚动，使网页元素成为焦点、可见或可点击。在 Selenium IDE 脚本中，需要使用 JavaScript 进行滚动。使用 runScript 或 executeScript 命令实现滚动，如下例所示：

滚动到页面高度的一半：

{
    "id": "e4d8bc94-cd2c-4648-b64e-952ccfa89aaa",
    "comment": "",
    "command": "runScript",
    "target": "window.scrollTo(0, document.body.scrollHeight/2)",
    "targets": [],
    "value": ""
}

滚动到页面末尾：

{
    "id": "e4d8bc94-cd2c-4648-b64e-952ccfa89aaa",
    "comment": "",
    "command": "runScript",
    "target": "window.scrollTo(0, document.body.scrollHeight)",
    "targets": [],
    "value": ""
}

滚动到页面开头：

{
    "id": "e4d8bc94-cd2c-4648-b64e-952ccfa89aaa",
    "comment": "",
    "command": "runScript",
    "target": "window.scrollTo(0, 0)",
    "targets": [],
    "value": ""
}

滚动到网页元素并点击它：

直到找到元素，然后滚动到该元素并单击它。

{
    "id": "d13e50bd-f698-4a04-9420-701a21dcde8d",
    "comment": "",
    "command": "waitForElementPresent",
    "target": "id=pnnext",
    "targets": [],
    "value": "20000"
},
{
    "id": "b345d354-1d95-45d0-81ab-7c78695ed040",
    "comment": "",
    "command": "runScript",
    "target": "const el = document.getElementById('pnnext'); el.scrollIntoView(); el.click();",
    "targets": [],
    "value": ""
}

{
    "id": "d13e50bd-f698-4a04-9420-701a21dcde8d",
    "comment": "",
    "command": "waitForElementPresent",
    "target": "css=#pnnext > span:nth-child(2)",
    "targets": [],
    "value": "20000"
},
{
    "id": "b345d354-1d95-45d0-81ab-7c78695ed040",
    "comment": "",
    "command": "runScript",
    "target": "const el = document.querySelector('#pnnext > span:nth-child(2)'); el.scrollIntoView(); el.click();",
    "targets": [],
    "value": ""
}

如何发送钥匙

要双击过滤器区域并键入按键，可以使用下面的示例：

{
    "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb1",
    "comment": "",
    "command": "doubleClickAt",
    "target": "id=repos-list-filter-input",
    "targets": [],
    "value": ""
}, {
    "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb1",
    "comment": "",
    "command": "type",
    "target": "id=repos-list-filter-input",
    "targets": [],
    "value": "instana"
}

要在过滤区暂停 3 秒后键入 Enter 键，可以使用下面的示例：

{
    "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb2",
    "comment": "",
    "command": "pause",
    "target": "3000",
    "targets": [],
    "value": ""
}, {
    "id": "d0239041-5bdf-42be-b920-c5055628f161",
    "comment": "",
    "command": "sendKeys",
    "target": "id=repos-list-filter-input",
    "targets": [],
    "value": "${KEY_ENTER}"
},

示例

在下面的示例中， Selenium IDE 脚本用于在搜索引擎中搜索 Instana 关键字：

{
  "id": "d54cb226-42e2-493a-9965-c05d209da23a",
  "version": "2.0",
  "name": "test-google-search",
  "url": "https://www.google.com",
  "tests": [{
    "id": "c0283e5a-8cbd-492f-8b3d-f2476f319264",
    "name": "search instana",
    "commands": [{
      "id": "cd6aaf21-62f8-4d7f-af0a-5fe8beee8fde",
      "comment": "",
      "command": "open",
      "target": "/",
      "targets": [],
      "value": ""
    }, {
      "id": "f6ef14b9-0f06-4b62-bb29-41c21a298703",
      "comment": "",
      "command": "click",
      "target": "id=APjFqb",
      "targets": [],
      "value": ""
    }, {
      "id": "ed0b72f9-8da9-4413-8088-819b89f1f6dc",
      "comment": "",
      "command": "type",
      "target": "id=APjFqb",
      "targets": [],
      "value": "instana"
    }, {
      "id": "f9746499-1d97-4f83-aa8a-a5419d9e3922",
      "comment": "",
      "command": "sendKeys",
      "target": "id=APjFqb",
      "targets": [],
      "value": "${KEY_ENTER}"
    }, {
      "id": "93939f21-739f-4c84-bb2e-580af6b1bc76",
      "comment": "",
      "command": "waitForElementPresent",
      "target": "css=.zgAlFc svg",
      "targets": [],
      "value": "10000"
    }, {
      "id": "331e3fc1-9baa-4519-9814-3105d6d06937",
      "comment": "",
      "command": "assertTitle",
      "target": "instana - Google Search",
      "targets": [],
      "value": ""
    }]
  }],
  "suites": [{
    "id": "7de135e9-a6c4-4b39-b28a-092bb0d7cbac",
    "name": "Search Instana",
    "persistSession": false,
    "parallel": false,
    "timeout": 300,
    "tests": ["c0283e5a-8cbd-492f-8b3d-f2476f319264"]
  }],
  "urls": ["https://www.google.com/"],
  "plugins": []
}

在 Selenium IDE 脚本中扩展测试功能

与 Selenium IDE 相比，Instana Synthetic 浏览器测试提供了更多的功能：

Instana Synthetic 提供丰富的测试结果，其中包括时间线图、 HTTP Archive format (HAR) 文件、屏幕截图、录音、浏览器日志和控制台日志。
Instana Synthetic 提供更高级的浏览器测试 API 和全局变量。

如果您想使用 Instana Synthetic 提供的高级浏览器测试 API 和全局变量修改 Selenium IDE 脚本，请参阅以下示例。由于 Selenium IDE 无法支持这些高级功能，因此您需要使用 Synthetic-browser-script 本地运行程序来测试和调试脚本。

如何访问用户证书

访问 Instana 后端服务器中定义的用户证书

要使用合成开放式 API 创建证书，请完成以下步骤：
1. 请确保您已正确设置权限。
2. 通过 credentialName 和 credentialValue 变量，使用 Synthetic OpenAPI 创建证书。
然后，在测试脚本中使用 $secure.credentialName 来指代创建的凭证，例如 $secure.password 或 $secure.username。 ${} 在 Selenium IDE 脚本中的 Value 属性中是指预定义变量，以区别于常量字符串。 $secure.credentialName 是如何在 Instana 中访问用户凭据的。

注：仅支持 $secure.credentialName 格式。不支持 $secure[credentialName] 格式。
```
{
    "id": "98b7df8f-ec53-47f9-b7a0-0eedbfc64ff0",
    "comment": "",
    "command": "click",
    "target": "id=email",
    "targets": [],
    "value": ""
}, {
    "id": "83ae509f-4247-4acc-ab99-46ef4c620f4f",
    "comment": "",
    "command": "type",
    "target": "id=email",
    "targets": [],
    "value": "${$secure.username}"
}
```

使用密钥生成基于时间的一次性密码（TOTP），通过双因素身份验证（ 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}"
}

如何拍摄屏幕截图

您可以在 Instana 测试结果详情页面找到截图。

{
    "id": "b49ff289-f041-44f1-836b-ba7e993c3f07",
    "comment": "",
    "command": "executeScript",
    "target": "await $browser.takeScreenshot()",
    "targets": [],
    "value": ""
}

如何使用 `$synthetic` 访问全局变量

您可以使用 $synthetic.xxxx、 $secure.xxx 或 $env.xxx 访问全局变量，如下例所示。

要在 JavaScript （如 echo 命令）的模板字符串语法中使用变量，请使用标准 Node.js 语法，并将变量放在 ${} 中。

{
    "id": "da853ea2-7253-4938-ad2d-9272f4c6d3e2",
    "comment": "",
    "command": "echo",
    "target": "tag1's value is ${$synthetic.tag1}",
    "targets": [],
    "value": ""
}

如何使用 `$attributes` API 自定义属性

{
    "id": "26438c58-868d-4d6d-9e6f-dbe9d8f373fd",
    "comment": "",
    "command": "executeScript",
    "target": "$attributes.set('regionName', 'green-region');",
    "targets": [],
    "value": ""
}

$attributes API 在脚本中设置的自定义属性和 customProperties 在测试定义中定义的自定义属性可通过 synthetic.tags 指标在测试结果中访问。您可以使用 synthetic.tags 指标筛选测试结果，或将自定义值传递给 智能警报定制有效载荷 。

如何调用 Instana 高级浏览器测试 API

使用 Selenium 命令 runScript 和 executeScript 调用高级浏览器测试 API。

您可以使用 Selenium 命令 runScript 和 executeScript 调用 Instana 浏览器测试中预定义的浏览器测试 API 和全局变量。

executeScript 和 runScript 的区别在于， executeScript 支持将返回值存储在变量中。然后，您可以使用 ${xxx} assert 或 echo 变量。要存储返回值，请使用 return 关键字，并在 value 输入字段中提供一个变量名。
```
{
    "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": "echo",
    "target": "Generated TOTO token ${totpToken}",
    "targets": [],
    "value": ""
}
```

定义一个环境变量，并将其用于浏览器测试 API。

{
    "id": "10d09a25-d101-43b0-84df-f22265b7cec6",
    "comment": "",
    "command": "storeJson",
    "target": "{\"proxy\": \"<proxy_server>:8080\", \"noproxy\": \"localhost,google.com,192.168.1.0/24\"}",
    "targets": [],
    "value": "proxyConfig"
},
{
    "id": "237bd334-d963-4a73-b9bb-4c31f1dce051",
    "comment": "",
    "command": "runScript",
    "target": "await $browser.setProxy(${proxyConfig.proxy}, ${proxyConfig.noproxy});",
    "targets": [],
    "value": ""
}

滚动到网页元素，然后点击它。

您可以使用 Instana 浏览器测试 API 轻松实现之前的滚动步骤。下面的示例实现了 waiting for element present, waiting for element visible, scrollIntoView 和 click 元素的逻辑。 scrollIntoView 功能可以将元素滚动到浏览器窗口的可见区域。

{
    "id": "b345d354-1d95-45d0-81ab-7c78695ed040",
    "comment": "",
    "command": "runScript",
    "target": "let element = await $browser.waitForAndFindElement(By.xpath(`//a[contains(.,'Customer stories')]`), 30000); await $browser.executeScript(`arguments[0].scrollIntoView()`, element); await $browser.executeScript(`arguments[0].click()`, element)",
    "targets": [],
    "value": ""
}

如何拒绝某些请求

{
    "id": "2e91846e-037b-473d-a977-7fbdfe52d1a4",
    "comment": "",
    "command": "executeScript",
    "target": "await $browser.addHostnamesToDenylist(['ajax.googleapis.com/ajax/libs/jquery']);",
    "targets": [],
    "value": ""
}

如何使用 `$network` API 设置代理

{
    "id": "a418460e-a0a9-4c68-bbd0-fb78d6495e92",
    "comment": "",
    "command": "runScript",
    "target": "await $network.setProxy(${proxyConfig.proxy}, ${proxyConfig.noproxy});",
    "targets": [],
    "value": ""
}

示例

在下面的示例中， Selenium 命令调用了 Instana 浏览器测试 API 和全局变量。

登录并验证 Instana UI 的示例