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

2 分钟阅读
0

我正在尝试使用 GUI 工作流程生成器在 Amazon CloudWatch 中创建金丝雀。我收到了错误消息,表明我选择了错误的 DOM 元素,所以我需要找一个 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 工作流程生成器中的示例,使用新创建的选择器完成蓝图。
AWS 官方
AWS 官方已更新 2 年前