上次更新时间：2020 年 12 月 14 日
我尝试使用 GUI 工作流生成器在 Amazon CloudWatch 中创建一个 Canary。但我收到了有关我选择的 DOM 元素不正确的错误消息。如何才能找到要使用的正确 DOM 选择器或 XPath？
简短描述如果在使用 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 的唯一属性：
-
打开元素（例如按钮、输入字段、div、span 或 h1）的上下文菜单（右键单击）。
选择检查元素 (Mozilla Firefox) 或检查 (Google Chrome)。
记住此唯一的 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。您还可以使用互联网浏览器的开发者模式来获取 DOM 元素的唯一 DOM 选择器。
Chrome：
-
打开元素的上下文菜单（右键单击），然后选择检查。
在元素选项卡上，打开突出显示行的上下文菜单（右键单击）。
选择复制，然后选择复制选择器。
Firefox：
-
打开元素的上下文菜单（右键单击），然后选择检查元素。
在检查器选项卡上，打开突出显示行的上下文菜单（右键单击）。
选择复制，然后选择 CSS 选择器。
注意：如果 HTML 文档中有多个选择器实例，则 Canary 会从返回的数组中选择第一个元素。不要选择包含 display:none; CSS 属性的元素。这些元素是不可见的，将导致选择器失败。
XPath 选择器
使用互联网浏览器的开发者模式来获取 DOM 元素的唯一 XPath 选择器。
Chrome：
-
打开元素的上下文菜单（右键单击），然后选择检查。
在元素选项卡上，打开突出显示行的上下文菜单（右键单击）。
选择复制，然后选择复制 XPath。
Firefox：
-
打开元素的上下文菜单（右键单击），然后选择检查元素。
在检查器选项卡上，打开突出显示行的上下文菜单（右键单击）。
选择复制，然后选择 XPath。
注意：在添加您复制到 Canary 的 XPath 选择器之前，请移除“//”前缀。Canary 会默认将“//”前缀添加到您的代码中。
测试新的选择器并确认是否正确在互联网浏览器中打开控制台模式
Chrome：
-
在浏览器的右上角，选择 Customize（自定义）。
展开 More tools（更多工具）选项，然后选择 Developer tools（开发者工具）。
在浏览器中打开 DevTools 后，选择 Console panel（控制台面板）。
Firefox：
-
在浏览器的右上角，选择 Open menu（打开菜单）。
选择 Web Developer（Web 开发者），然后选择 Web Console（Web 控制台）。
注意：在某些版本的 Firefox 中，Web Developer（Web 开发者）菜单位于 Tools（工具）菜单中。
测试 DOM 选择器
在浏览器控制台中测试 DOM 选择器查询的语法是：document.querySelectorAll("")。例如，假设您有一个 div 元素，id='username'，则使用以下模式：document.querySelectorAll("")。
测试 XPath 选择器
在浏览器控制台中测试 XPath 查询的语法是： $x("XPATH_QUERY")。例如，假设您有一个 div 元素，id='welcome'，其中包含一个 h1 元素，则使用以下模式：$x("//div//h1)。当您将此路径添加到 Canary 时，请省略 // 前缀。
将此新选择器添加到 CloudWatch Canary-
打开 CloudWatch 控制台。
对于 Synthetics，选择 Canaries。
选择 Create Canary（创建 Canary）。
选择 Use a blueprint（使用蓝图），然后选择 GUI Workflow Builder（GUI 工作流生成器）。
请参阅 GUI 工作流生成器中的示例以使用新创建的选择器完成一个蓝图。 </ol