Web 自动化测试提速利器：Aqua 的 Web Inspector （检查器）使用详解
- 前言
- 简介
- 一、安装
- 二、Web Inspector 的使用
- 2.1 获取元素定位器（Locators）
- 2.2 将定位器添加到代码
- 2.3 验证定位器
- 2.4 处理 Frames (框架)
- 总结
前言
JetBrains 的 Aqua IDE 提供强大的 Web Inspector 工具，帮助测试人员高效地定位网页元素、生成测试代码，并最终提升 Web 测试的效率。本文将深入探讨 Aqua Web Inspector 的常用功能，助你掌握这个强大的工具。
简介
- Aqua 是第一款专为测试自动化而创建的 IDE；
- 支持多种 WEB 自动化测试框架，包括： Selenium、Cypress 和 Playwright；
- 支持多语言，包括：Java、Python、JavaScript、TypeScript、Kotlin 和 SQL；
- 开箱即用，直接进行测试，无需安装和配置大量插件；
- 拥有独特的功能集，能够满足自动化测试工程师的日常需求；
- Web Inspector 的工作方式类似于内置浏览器，允许捕获任何页面元素，无需切换到其他工具；
- 还有用于 API 测试的 HTTP 客户端，以及与数据库、Docker 和版本控制的集成。
官网：https://www.jetbrains.com.cn/aqua/
一、安装
Aqua IDE 下载链接：https://www.jetbrains.com.cn/aqua/download/
下载完成后，安装Aqua IDE，具体安装步骤在这里不再赘述。
- 打开Aqua IDE，新建项目；
- 等待相关依赖自动安装完成；
二、Web Inspector 的使用
2.1 获取元素定位器（Locators）
Web Inspector 的核心功能之一就是方便地获取网页元素的定位器，这对于编写自动化测试至关重要。下面我们来学习打开 Web Inspector 并定位元素：
-
点击 IDE 右侧的 web检查器 icon: 打开 Web Inspector。
-
直接指定 URL: 在 Web Inspector 的地址栏中输入 URL 并回车，即可打开目标网站。
打开网页后，就可以开始选择网页元素了。Aqua 提供了以下几种方式：
-
点击选择元素按钮: 在网页上直接选择目标元素，这是最直观的操作方式。
-
输入定位器/子字符串: 在 Locators Evaluator 部分的搜索框中输入定位器或其子字符串，Aqua 会自动完成并提示匹配的元素。这对于已知部分定位器的元素查找非常高效。
-
在 Page Structure 中选择元素: Page Structure 部分会以树形结构展示网页的 DOM 结构，你可以方便地在其中浏览和选择元素。这特别适用于在已选元素附近查找其他元素。
选择元素后，Aqua 会自动生成该元素的唯一标识符，确保每个定位器都指向页面上的特定元素。
2.2 将定位器添加到代码
获得元素定位器之后，下一步就是将其添加到你的测试代码中。Aqua 提供了多种方式：
-
复制到剪贴板: 点击复制按钮，将定位器复制到剪贴板，然后手动粘贴到代码中。
-
直接添加到代码: 点击 Locators Evaluator 部分的 按钮，将定位器直接添加到代码中。
-
使用特定选择器添加元素: 如果你想使用特定的选择器（例如 Text、Tag with classes、CSS等）来添加元素，点击下拉按钮，然后从列表中选择所需的选择器。Aqua 会生成框架和语言特定的表达式，将选定的元素添加到你的代码中。
2.3 验证定位器
验证定位器是否有效， Aqua 提供了以下方法：
- 从代码编辑器验证: 在代码编辑器中，点击定位器左边的图标，这个图标会展示匹配的元素数量，如果定位器有效，Web Inspector 工具窗口将打开，并且相应的元素将在 Web Inspector 和 Page Structure 部分中突出显示。
2.4 处理 Frames (框架)
Aqua 能够很好地支持选择 Frame 中的元素，并生成 Frame 切换代码。
- 自动切换到 Frame: 当你选择不在根 Frame 中的元素时，Aqua 会自动切换到包含该元素的 Frame。Page Structure 也会更新以反映 Frame 的内容，方便在 Frame 内导航。
- 在 Frames 之间切换: 当你切换到不同的 Frame 时，会显示一个面包屑导航，表示当前所在的 Frame。你可以双击顶部的 Frame 按钮，切换回根 Frame。你也可以点击该按钮并从列表中选择一个现有的 Frame 进行切换。
总结
Aqua Web Inspector 提供了一套完整的功能，可以显著提升 Web 测试的效率。通过本文的介绍，你已经掌握了如何使用 Web Inspector 的常用功能。使用这些功能，可以极大地提高你的 Web 测试效率和代码质量。希望本文能够帮助你更好地利用 Aqua Web Inspector，编写更稳定、可靠的 Web 测试脚本。
