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

简短描述

如果您在使用 GUI 工作流生成器创建金丝雀时选择了错误的 DOM 元素，则可能会遇到以下错误：

• “错误： 节点不可见或不是 HTMLElement。”
• “没有返回测试结果。错误： 由于浏览器已断开连接，导航失败！”
• “超时错误： 正在等待选择器”
• “超时错误： 正在等待 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 文档中有多个选择器实例，则金丝雀会从返回的数组中选择第一个元素。避免选择包含 display:none; CSS 属性的元素。这些元素是不可见的，会导致选择器失败。

XPath 选择器

使用互联网浏览器的开发者模式，为您的 DOM 元素获取独一无二的 XPath 选择器。

Chrome：

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

Firefox：

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

**注意：**在添加复制到金丝雀的 XPath 选择器之前，请删除“//”前缀。默认情况下，金丝雀会在您的代码中添加“//”前缀。

测试新的选择器并确认是否正确

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

Chrome：

1. 在浏览器的右上角，选择自定义。
2. 展开更多工具选项，然后选择开发者工具。
3. 在浏览器中打开 DevTools 后，选择网络面板。

Firefox：

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

测试 DOM 选择器

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

测试 XPath 选择器

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

将新的选择器添加到 CloudWatch 金丝雀

1. 打开 CloudWatch 控制台。
2. 在 Synthetics 处，选择金丝雀。
3. 选择创建金丝雀。
4. 选择使用蓝图，然后选择 GUI 工作流生成器。
5. 请参阅 GUI 工作流程生成器中的示例，使用新创建的选择器完成蓝图。