如何确定要在 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 的唯一属性:
- 打开元素(例如按钮、输入字段、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[name='login']。
您还可以使用互联网浏览器的开发者模式来获取 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("[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
- 打开 CloudWatch 控制台。
- 对于 Synthetics,选择 Canaries。
- 选择 Create Canary(创建 Canary)。
- 选择 Use a blueprint(使用蓝图),然后选择 GUI Workflow Builder(GUI 工作流生成器)。
- 请参阅 GUI 工作流生成器中的示例以使用新创建的选择器完成一个蓝图。 </ol