当前位置: 首页 > article >正文

Web 自动化测试提速利器:Aqua 的 Web Inspector (检查器)使用详解

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,具体安装步骤在这里不再赘述。

  1. 打开Aqua IDE,新建项目;
    在这里插入图片描述在这里插入图片描述
  2. 等待相关依赖自动安装完成;
    在这里插入图片描述

二、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 测试脚本。


http://www.kler.cn/a/555992.html

相关文章:

  • RFID测温技术:电力设备安全监测的新利器
  • CMU Sphinx、Kaldi 和 Mozilla DeepSpeech 三个开源语音识别引擎的综合比较
  • 越权漏洞及其修复方法
  • 相机快门 deepseek
  • 基于ffmpeg+openGL ES实现的视频编辑工具-字幕添加(六)
  • ✨ ‌2025年Oracle从入门到实战的跃迁之路‌ ✨
  • 微软量子芯片:开启量子计算新时代?
  • VUE中的组件加载方式
  • 鸿蒙-自定义布局-实现一个可限制行数的-Flex
  • 进程(2)
  • 论文概览 |《Urban Analytics and City Science》2023.10 Vol.50 Issue.8
  • 深度学习中的学习率调度器(lr_scheduler)详解:以 Cosine 余弦衰减为例(中英双语)
  • 【深度学习】Pytorch项目实战-基于协同过滤实现物品推荐系统
  • 并行计算考前复习整理
  • TTL和CMOS的区别【数电速通】
  • CyberRT(apollo) IPC(shm)通信包重复/丢包 bug 及解决方案
  • 分词 tokenization
  • AGM芯片推出TensorLight框架,全面拥抱AI+边缘推理市场
  • 智能工业相机:重塑现代制造的视觉革命
  • 如何基于transformers库通过训练Qwen/DeepSeek模型的传统分类能力实现文本分类任务