如何确定要在 CloudWatch Canary GUI 工作流生成器中使用的 DOM 选择器或 XPath？

上次更新时间：2020 年 12 月 14 日

如果在使用 GUI 工作流生成器创建Canary 时选择的 DOM 元素不正确，则可能会收到以下错误消息：

• "Error: Node is either not visible or not an HTMLElement."
• "No test result returned.Error: Navigation failed because browser has disconnected!"
• "TimeoutError: Waiting for selector"
• "TimeoutError: Waiting for XPath"

GUI 工作流生成器有五个操作。所需的选择器类型取决于您使用的操作和运行时版本。

使用 Node.js 和 Puppeteer 的运行时版本，验证文本操作使用 XPath 选择器。下列操作使用 DOM 选择器：

• 单击
• 验证选择器
• 输入文本
• 点击并导航

对于使用 Python 和 Selenium Webdriver 的运行时，所有操作均使用 XPath 选择器。

DOM 选择器

要找到 DOM 的唯一属性：

1. 打开元素（例如按钮、输入字段、div、span 或 h1）的上下文菜单（右键单击）。
2. 选择检查元素 (Mozilla Firefox) 或检查 (Google Chrome)。
3. 记住此唯一的 DOM 属性，您将会使用此属性来标识您的元素（例如 id、类或名称）。

如果您的 DOM 没有唯一属性，请使用下面的任意一种方法来查找该元素：

• 使用后代选择器以根据给定的路径或属性来匹配元素（必须使用确切的路径）。例如，要查找 <div class='new' id='newId'> <a href="/test1">test1</a> <a href="/test2">test2</a> <a href="/test3">test3</a> </div>，则使用 div.new > a:first-child。
• 使用属性选择器以根据给定属性的存在或值来匹配元素。例如，要查找 <div class="user-panel main" id="userId"> <input name="login"/> </div>，则使用 div.user-panel.main input[name='login']。

您还可以使用互联网浏览器的开发者模式来获取 DOM 元素的唯一 DOM 选择器。

Chrome：

1. 打开元素的上下文菜单（右键单击），然后选择检查。
2. 在元素选项卡上，打开突出显示行的上下文菜单（右键单击）。
3. 选择复制，然后选择复制选择器。

Firefox：

1. 打开元素的上下文菜单（右键单击），然后选择检查元素。
2. 在检查器选项卡上，打开突出显示行的上下文菜单（右键单击）。
3. 选择复制，然后选择 CSS 选择器。

注意：如果 HTML 文档中有多个选择器实例，则 Canary 会从返回的数组中选择第一个元素。不要选择包含 display:none; CSS 属性的元素。这些元素是不可见的，将导致选择器失败。

XPath 选择器

使用互联网浏览器的开发者模式来获取 DOM 元素的唯一 XPath 选择器。

Chrome：

1. 打开元素的上下文菜单（右键单击），然后选择检查。
2. 在元素选项卡上，打开突出显示行的上下文菜单（右键单击）。
3. 选择复制，然后选择复制 XPath。

Firefox：

1. 打开元素的上下文菜单（右键单击），然后选择检查元素。
2. 在检查器选项卡上，打开突出显示行的上下文菜单（右键单击）。
3. 选择复制，然后选择 XPath。

注意：在添加您复制到 Canary 的 XPath 选择器之前，请移除“//”前缀。Canary 会默认将“//”前缀添加到您的代码中。

在互联网浏览器中打开控制台模式

Chrome：

1. 在浏览器的右上角，选择 Customize（自定义）。
2. 展开 More tools（更多工具）选项，然后选择 Developer tools（开发者工具）。
3. 在浏览器中打开 DevTools 后，选择 Console panel（控制台面板）。

Firefox：

1. 在浏览器的右上角，选择 Open menu（打开菜单）。
2. 选择 Web Developer（Web 开发者），然后选择 Web Console（Web 控制台）。
   注意：在某些版本的 Firefox 中，Web Developer（Web 开发者）菜单位于 Tools（工具）菜单中。

测试 DOM 选择器

在浏览器控制台中测试 DOM 选择器查询的语法是：document.querySelectorAll("[AttributeName='AttributeValue']")。例如，假设您有一个 div 元素，id='username'，则使用以下模式：document.querySelectorAll("[name='username']")。

测试 XPath 选择器

在浏览器控制台中测试 XPath 查询的语法是： $x("XPATH_QUERY")。例如，假设您有一个 div 元素，id='welcome'，其中包含一个 h1 元素，则使用以下模式：$x("//div[@id='welcome']//h1)。当您将此路径添加到 Canary 时，请省略 // 前缀。

1. 打开 CloudWatch 控制台。
2. 对于 Synthetics，选择 Canaries。
3. 选择 Create Canary（创建 Canary）。
4. 选择 Use a blueprint（使用蓝图），然后选择 GUI Workflow Builder（GUI 工作流生成器）。
5. 请参阅 GUI 工作流生成器中的示例以使用新创建的选择器完成一个蓝图。
</ol