Java Selenium自动化框架搭建指南

table {
border-collapse: collapse;
width: 100%;
margin-bottom: 1rem;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
pre {
background-color: #f8f8f8;
padding: 15px;
border-radius: 4px;
overflow-x: auto;
}

1、使用 Java 和 Selenium WebDriver 创建自动化框架。先决条件：安装最新版本的 Java、你选择的集成开发环境（IntelliJ 是 Java 常用的 IDE）、Chrome 浏览器和 Apache Maven。编写 Selenium WebDriver 测试，为一个简单的用户流程设置测试：登录你喜欢的电子商务应用程序（选择一个你有账户的应用）并验证主页标题。遵循以下步骤：1. 打开 IntelliJ，通过选择“文件”→“新建”→“项目”→“Maven”创建一个新的 Maven 项目。2. 选择你下载的 Java 版本。3. 进入下一个窗口，输入你的项目名称、位置、组 ID 和工件 ID。4. 下载与你本地 Chrome 浏览器版本兼容的 ChromeDriver 可执行文件。5. 将可执行文件放在项目内的 src/main/resources 文件夹下。6. 添加项目依赖项，包括 Selenium、Java 和 TestNG 库。7. 在 src/test/java 下创建一个名为 base 的包。8. 添加一个名为 BaseTests.java 的新类文件，在其中定义 WebDriver 设置。9. 接下来，在 src/test/java 下创建一个名为 tests 的新包，并添加你的第一个测试类（例如 LoginTest）。10. 创建测试后，创建你的页面类。在 src/main/java 下创建一个名为 pages 的新包，并在其中添加你的页面类。11. 现在你可以直接从 IDE 中通过右键单击 @Test 标签旁边的绿色三角形来运行测试，或者使用 Maven 从命令行运行测试，命令为：mvn clean test。

以下是按照步骤创建 Java – Selenium WebDriver 自动化框架并进行测试的详细操作：

安装必备工具：

– 安装最新版本的 Java

– 安装 IntelliJ IDE

– 安装 Chrome 浏览器

– 安装 Apache Maven

创建 Maven 项目：

– 打开 IntelliJ

– 选择“文件” → “新建” → “项目” → “Maven”

– 选择下载的 Java 版本

– 进入下一个窗口输入项目名称、位置、组 ID 和工件 ID

配置 ChromeDriver：

– 下载与本地 Chrome 浏览器版本兼容的 ChromeDriver 可执行文件

– 将其放在项目的

src/main/resources

文件夹下

添加项目依赖：

– 在

pom.xml

文件中添加 Selenium、Java 和 TestNG 库的依赖

– 在 IntelliJ 右侧的 Maven 面板中刷新并下载这些库

创建基础包和类：

– 在

src/test/java

下创建名为

base

的包

– 在该包中添加

BaseTests.java

类

– 在类中定义 WebDriver 设置

创建测试包和类：

– 在

src/test/java

下创建名为

tests

的包

– 在该包中添加第一个测试类，如

LoginTest


创建页面类：

– 在

src/main/java

下创建名为

pages

的包

– 在该包中添加页面类

运行测试：

– 可以在 IDE 中右键单击

@Test

标签旁边的绿色三角形运行测试

– 也可以使用命令行运行，命令为：

bash
mvn clean test


2、使用Cypress和页面对象模型设置一个UI自动化框架。前提条件：安装Node.js 12或更高版本、选择一个集成开发环境（对于JavaScript项目，推荐使用Visual Studio Code）以及一个浏览器（Cypress可与Chrome、Chromium、Edge、Electron和Firefox配合使用）。请说明具体的设置步骤。

使用Cypress和页面对象模型设置UI自动化框架

要使用Cypress和页面对象模型设置UI自动化框架，需先完成以下前提条件：

安装Node.js 12或以上版本

选择合适的IDE（如Visual Studio Code）

安装支持的浏览器（Chrome、Chromium、Edge、Electron、Firefox）

完成前提条件后，请按以下步骤操作：

创建项目目录，在终端项目文件夹中运行以下命令安装Cypress：

npm install cypress --save-dev


在该文件夹中创建

package.json

文件。

运行以下命令打开Cypress应用程序并设置自动化框架结构和示例测试：

node_modules/.bin/cypress open


设置完成后，从Cypress应用程序右上角下拉菜单选择浏览器，点击测试文件运行现有测试。

若要从命令行运行测试，请在

package.json

文件中添加以下脚本：

json
"scripts": {
"test": "cypress run"
}


然后使用以下命令启动测试：

npm test


3、扩展一个Java – Selenium WebDriver自动化框架，添加一个测试，从orders表中获取订单并对order_id和quantity值进行断言。步骤如下：在POM文件中添加PostgreSQL JDBC驱动作为依赖；在tests包下创建一个名为DataVerificationTest.java的新测试类文件；在每次测试前启动与PostgreSQL数据库的连接，并在测试运行后关闭连接，指定要执行的SQL查询并获取数据库记录，使用TestNG断言验证返回的数据；从命令行（使用mvn clean test）或IDE中运行测试，并记得在测试运行前启动PostgreSQL服务器。你也可以选择将与数据库连接相关的方法抽象到一个单独的utils类中以实现可重用性。

以下是完成该任务的详细步骤：

在POM文件中添加 PostgreSQL JDBC 驱动依赖。

在

tests

包下创建名为

DataVerificationTest.java

的新测试类文件。

示例代码如下，在每次测试前启动与 PostgreSQL 数据库的连接，测试运行后关闭连接，指定 SQL 查询并获取数据库记录，使用 TestNG 断言验证返回的数据：

package tests;

import org.testng.annotations.AfterTest;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;
import static org.testng.Assert.*;
import java.sql.*;

public class DataVerificationTest {
    private static Connection connection;
    private static ResultSet results;
    private static Statement statement;

    @BeforeTest
    public void initiateConnection() throws SQLException {
        connection = DriverManager.getConnection(
            "jdbc:postgresql://localhost/postgres", "newuser", null);
    }

    public void executeQuery(String query) throws SQLException {
        initiateConnection();
        statement = connection.createStatement();
        results = statement.executeQuery(query);
    }

    @Test
    public void verifyOrderDetails() throws SQLException {
        executeQuery("select * from orders where item_sku='ABCD0006'");
        System.out.println(results);
        while (results.next()){
            assertEquals(results.getString("Quantity"), "1");
            assertEquals(results.getString("order_id"), "PR125");
        }
    }

    @AfterTest
    public void closeConnection() throws SQLException {
        results.close();
        statement.close();
    }
}

可以从命令行（使用

mvn clean test

）或 IDE 中运行测试，记得在测试运行前启动 PostgreSQL 服务器。此外，为实现可重用性，可将与数据库连接相关的方法抽象到一个单独的

utils

类中。

4、本练习将指导你使用BackstopJS创建视觉测试，以在三种分辨率（平板电脑、手机和普通浏览器）下验证Web应用程序。步骤如下：1. 作为先决条件，设置Node.js和Visual Studio Code。然后创建一个新的项目文件夹，并从终端运行命令’$ npm install -g backstopjs’来安装BackstopJS。2. 使用命令’$ backstop init’设置默认配置和项目脚手架。3. 选择任何公共示例网站进行视觉测试。为了在三种不同的屏幕分辨率下验证网页，添加backstop.json配置。4. 使用命令’$ backstop reference’为测试拍摄不同屏幕尺寸的网页参考截图以进行比较。5. 使用命令’$ backstop test’运行测试。请简要概括使用BackstopJS创建视觉测试的步骤。

使用BackstopJS创建视觉测试的练习指导

本练习指导使用

BackstopJS

创建视觉测试，验证 Web 应用在以下三种分辨率下的显示情况：

平板

手机

普通浏览器

练习步骤

安装依赖环境


– 安装 Node.js

– 安装 Visual Studio Code

创建项目环境


– 创建新项目文件夹

– 全局安装 BackstopJS

配置项目


– 设置默认配置和项目脚手架

– 选取公共网站，添加

backstop.json

配置

拍摄参考截图


– 针对不同分辨率拍摄参考截图

运行测试


– 执行视觉测试，验证页面显示一致性

5、简述开始使用 Cypress 插件进行可视化测试的步骤，并说明如何添加可视化测试以及给出示例代码。

## 开启 Cypress 插件进行可视化测试步骤

若要开启 Cypress 插件进行可视化测试，需按以下步骤操作：

1. 运行命令安装插件：
   ```bash
   $ npm i cypress-plugin-snapshots -S
   ```

2. 在以下两个文件中添加导入插件的代码：
   - `cypress/plugins/index.js`
   - `cypress/support/index.js`

3. 在 Cypress 配置文件 `cypress.json` 中添加测试配置。

### 添加可视化测试示例

在测试用例中使用 `toMatchImageSnapshot()` 方法，示例如下：

```javascript
describe('Application Home page', () => {
  it('Visits the Application home page', () => {
    cy.visit('<give application URL here>');
    cy.get('#twotabsearchtextbox').should('be.visible');
    cy.get('#pageContent').toMatchImageSnapshot();
  });
});

##6、以在线图书馆管理应用为例，根据以下数据计算目标KPI：业务和内部营销团队提供数据，在两个欧洲城市积极开展推广活动，预计第一年有100,000个唯一用户加入；研究表明用户在一次会话中平均花费10分钟搜索书籍、查看类似书籍等；典型用户平均每月借书两次，因此预计用户每月访问网站两次；在欧洲，用户每天上午10点到晚上10点（12小时）活跃在互联网上。
```markdown
## 用户访问量计算

- **总月访问用户数**：100,000用户 * 2次/月 = 200,000月用户
- **日均用户数**：200,000月用户 ÷ 30天/月 = 6,667日用户
- **每小时平均用户数**：6,667日均用户 ÷ 12小时/天 = 555小时用户  
  考虑峰值，向上取整为 **1,000小时用户**
- **并发用户数**：1,000峰值小时用户 * 0.166 = **166并发用户**
- **每小时请求数**：5 * 1,000小时用户 = **5,000请求/小时**

## 目标KPI

- **系统响应时间**：在 **166个并发用户** 时，响应时间应在 **3秒内**
- **系统吞吐量**：需支持 **5,000请求/小时**

7、对 /books 端点进行负载测试，使用 JMeter 配置不同的负载模式，包括使用简单线程组、Concurrency Thread Group 和 Ultimate Thread Group 进行测试。

使用简单线程组：可将 ViewBooks 线程组参数改为“Number of Threads = 166，Ramp-up period = 0，Loop Count = 5”，JMeter 会无加速时间启动 166 个并发线程并循环 5 次获取平均响应时间。

使用 Concurrency Thread Group：

– 选择“Options → Plugins Manager”，在“Available Plugins”标签页搜索“Custom Thread Groups”并安装；

– 重启 JMeter；

– 右键点击“Test Plan”，选择“Add → Threads (Users) → bzm → Concurrency Thread Group”；

– 配置负载参数（Target Concurrency = 166，Ramp Up Time = 0.5，Hold Target Rate Time = 2），即 30 秒内增加 166 个用户并让每个用户在系统中保持 2 分钟；

– 在此线程组下添加 HTTP 请求采样器，运行测试并在监听器中查看结果。

使用 Ultimate Thread Group：

– 右键点击“Test Plan”，选择“Add → Threads (Users) → jp@gc Ultimate Thread Group”；

– 配置负载参数（Start Threads Count = 166，Initial Delay = 0，Startup Time = 10，Hold Load For = 60，Shut down Time = 10），即 10 秒内启动 166 个并发请求并保持负载 1 分钟，之后 10 秒内减少用户；

– 添加 HTTP 请求采样器，运行测试并查看结果。

8、利用在 JMeter 中进行容量测试的经验，模拟其他性能测试用例，如压力测试、浸泡测试、吞吐量验证等，分别说明如何模拟这些测试用例。

1. **压力测试**：使用并发线程组，以 x 个用户为步长逐步增加负载直至达到最大限制，每个步骤运行指定时间，目的是找出响应时间变慢并最终导致错误的负载。

2. **浸泡测试**：使用终极线程组模拟长时间的恒定负载。

3. **吞吐量验证**：使用并行控制器插件并行运行多个 HTTP 请求，同时使用计时器组件设置请求间隔（如思考时间）；也可使用恒定吞吐量计时器将吞吐量固定为恒定值，验证应用程序是否按预期运行，若超过设定的吞吐量值，JMeter 会自动减少向服务器发送的请求数量。

9、将 JMeter 测试集成到 CI 管道中，作为一个单独的作业，并确保性能测试在完全隔离的环境中运行，具体该如何操作？

要将 JMeter 测试作为一个单独的作业集成到 CI 管道中，并确保性能测试在完全隔离的环境中运行，可按以下步骤操作：

首先，保存测试。

找到保存的

.jmx

文件。

然后运行以下命令：

$ jmeter -n -t <library.jmx> -l <log file> -e -o <Path to output folder>

另外，确保性能测试在完全隔离的环境中运行以获得正确的指标非常重要。

你还可以根据需要通过进一步的扩展配置 JMeter 以提供详尽的仪表盘报告。

10、请描述使用 Lighthouse 工具进行前端性能测试的工作流程。

打开 Chrome 浏览器，访问需要测试的网站。

使用快捷键（macOS 为

Cmd - Option - J

，Windows/Linux 为

Shift - Ctrl - J

）或右键选择“检查”打开 Chrome DevTools。

在

Network

标签页选择网络节流偏好，例如可选择 “Slow 3G”。

在

Performance

标签页选择 CPU 节流偏好，若为中低端移动设备可选择

4x 减速

。

从响应式下拉菜单中选择窗口大小，例如可选择

Galaxy S5

选项。

在

Lighthouse

标签页，选择

Performance

类别，然后点击 “Generate report” 生成报告。

11、请解释 PageSpeed Insights 工具的作用以及它与其他工具的区别。

PageSpeed Insights 工具说明

作用

PageSpeed Insights 工具通过以下方式全面呈现前端性能：

展示真实用户监控（RUM）数据；

展示 Lighthouse 生成的实验室数据；

支持通过 API 持续监控和发出警报。

与其他工具的区别

其他工具

：可模拟实验室测试用例，设定前提条件并观察结果；

PageSpeed Insights

：考虑到现实中用户网络带宽、设备配置等细微差异带来的不可预测性，借助 Google 提供的免费监控服务，记录全球用户访问实时应用时的核心网络指标等数据（即 RUM 数据），从而了解不同用户对网站性能的真实体验。

12、I mentioned some automated accessibility auditing tools in the previous discussion. You can try some of these tools as part of the following exercises. 请将这句话翻译成中文。

我在之前的讨论中提到了一些自动化无障碍审计工具。你可以在接下来的练习中尝试使用其中一些工具。

13、现在尝试使用 WAI 的无障碍演示网站，它是同一个网站的无障碍版本。请观察并分析该网站的页面结构及相关元素，可借助工具进行分析。

使用 WAVE 工具分析网站页面结构

可使用 WAVE 工具来分析该网站页面结构。

关于 WAVE

WAVE 是在线无障碍评估工具，能检查网页是否符合无障碍标准，可确定无 CSS 时的页面结构，还会标记元素颜色对比度、语言属性等问题。

运行 WAVE 工具审计步骤如下：

打开 WAVE 网站；

在“网页地址”框输入应用程序 URL，也可用 WAI 出于学习目的故意做成无障碍问题的不可访问演示网站；

点击箭头运行审计。

审计注意事项

审计时可通过关闭 CSS 样式查看页面结构，在无障碍网站中，页面结构应设计合理，有层级关系，各元素和内容顺序可轻松验证，导航也符合层级显示预期。

14、请简述了解灯塔（Lighthouse）工作原理的步骤，并说明生成报告后能看到哪些内容。

了解 Lighthouse 工作原理

操作步骤如下：

在 Chrome 中打开 WAI 的不可访问演示网站。

在 macOS 上使用快捷键

Cmd - Option - I

，或在 Windows/Linux 上使用快捷键

Shift - Ctrl - J

打开 Chrome 开发者工具。

在 Lighthouse 标签页中，选择“可访问性”类别并点击“生成报告”。

不久后，Lighthouse 的可访问性审核报告将在同一面板中显示。

报告内容说明

报告会指出与 WAVE 类似的问题（例如：两个对比度问题、缺少

lang

属性等）。

为了便于调试，报告会展示包含错误的实际代码行，并附有教育链接，帮助开发者修复问题。

报告顶部会提供一个总体分数，用于表示页面的可访问性优劣程度。

报告底部包含一个清单（“需手动检查的其他项目”），列出审核未覆盖的内容，且每一项均附有教育链接，指导开发者进行手动验证。

15、请简述从命令行运行 Lighthouse 的可访问性审计的步骤。

若要通过命令行开展 Lighthouse 的可访问性审计，需按以下步骤操作：

假定你已安装 Node.js，运用命令

$ npm i -g lighthouse

来安装 Lighthouse。

利用命令

$ lighthouse --chrome --flags="--headless" URL

运行审计。

之后对生成的 HTML 报告进行分析。

16、请根据不同目标终端用户体验的相关因素，定义一个涵盖设备类型、网络带宽和目标用户分布等方面的测试用例。

# 终端用户体验测试用例示例

## 1. 测试目标
评估系统在不同设备类型、网络带宽和目标用户分布下的终端用户体验。

## 2. 测试环境

### 2.1 设备类型
- 手机（如 iPhone、华为、小米等不同品牌和型号）
- 平板（iPad、安卓平板）
- 笔记本电脑（Windows、Mac）
- 台式电脑

### 2.2 网络带宽
- 低带宽（如 2G、3G 模拟网络）
- 中带宽（如家庭 Wi-Fi 10 - 50Mbps）
- 高带宽（如企业级光纤 100Mbps 以上）

### 2.3 目标用户分布
- 不同年龄段（青少年、中年、老年）
- 不同地域（城市、农村）
- 不同职业（学生、上班族、自由职业者）

## 3. 测试用例

### 3.1 页面加载测试
在不同设备和网络带宽下打开系统首页，记录页面完全加载的时间。

### 3.2 功能操作测试
在不同设备和网络带宽下，执行系统的核心功能操作，如登录、搜索、提交表单等，检查操作是否流畅，有无卡顿、报错。

### 3.3 响应时间测试
在不同设备和网络带宽下，发起请求，记录系统的响应时间。

### 3.4 兼容性测试
检查系统在不同设备的浏览器（如 Chrome、Safari、Firefox 等）上的显示和功能是否正常。

### 3.5 不同用户分布测试
邀请不同年龄段、地域、职业的用户进行实际操作，收集他们的使用反馈，如操作是否便捷、功能是否满足需求等。

## 4. 预期结果

### 4.1
页面加载时间在合理范围内，低带宽下加载时间可适当延长，但不应过长影响使用。

### 4.2
功能操作流畅，无卡顿、报错。

### 4.3
系统响应时间符合业务要求。

### 4.4
系统在不同设备的浏览器上显示和功能正常。

### 4.5
不同用户群体对系统的操作便捷性和功能满意度达到一定标准。

## 5. 测试记录与报告
记录每个测试用例的执行情况，包括测试环境、测试步骤、实际结果等，根据测试结果生成详细的测试报告，提出改进建议。