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

上次更新时间: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 的唯一属性:

  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 时,请省略 // 前缀。

将此新选择器添加到 CloudWatch Canary

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

这篇文章对您有帮助吗?


您是否需要账单或技术支持?