Java+playwright+testNG实现UI自动化测试

今天来讲讲使用Java结合最新的playwright来做UI自动化测试

目前网上大部分都是关于使用Python做自动化的教程，Java的比较少一些，但是我认为使用Java做自动化还是有优点的，性能就好一点，当然大家根据实际需求来。

一、普通UI测试

创建 Maven 项目：
在你选择的 IDE（如 IntelliJ IDEA 或 Eclipse）中创建一个新的 Maven 项目。

**添加依赖到 pom.xml**：(我使用的jdk1.8) 打开 pom.xml 文件并添加以下依赖：

<dependencies><!-- Playwright --><dependency><groupId>com.microsoft.playwright</groupId><artifactId>playwright</artifactId><version>1.41.0</version><scope>test</scope></dependency><!-- TestNG --><dependency><groupId>org.testng</groupId><artifactId>testng</artifactId><version>7.4.0</version><scope>test</scope></dependency>
</dependencies>

示例测试用例

接下来，编写一个简单的测试用例，使用 Playwright 打开 Google 页面，并验证页面标题。

创建测试类：
在你的 Maven 项目中，创建一个新的测试类 BaiduTest.java。

import com.microsoft.playwright.*;
import org.testng.Assert;
import org.testng.annotations.*;public class BaiduTest {Playwright playwright;Browser browser;Page page;@BeforeClasspublic void setUp() {playwright = Playwright.create();BrowserType.LaunchOptions options = new BrowserType.LaunchOptions();options.headless = false; // 设置为有头浏览器browser = playwright.chromium().launch(options);page = browser.newPage();}@Testpublic void testBaiduHomePage() {page.navigate("https://www.baidu.com");String title = page.title();Assert.assertEquals(title, "百度一下，你就知道");}@AfterClasspublic void tearDown() {browser.close();playwright.close();}
}

使用 TestNG 管理测试用例

使用 @Test 注解：这标记了一个方法作为测试方法。
使用 @BeforeClass 和 @AfterClass 注解：分别用于在测试类中所有测试方法之前和之后执行代码。
断言：使用 Assert 类来进行断言，验证测试结果是否符合预期。

生成测试报告

在 pom.xml 中配置 TestNG 生成测试报告的能力。

<build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-surefire-plugin</artifactId><version>3.0.0-M5</version><configuration><suiteXmlFiles><suiteXmlFile>testng.xml</suiteXmlFile></suiteXmlFiles></configuration></plugin></plugins>
</build>

创建 testng.xml 文件来管理测试套件：

<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
<suite name="Sample Suite"><test name="Baidu Tests"><classes><class name="BaiduTest"/></classes></test>
</suite>

生成的报告会呈现在target/surefire-reports 目录下生成 XML 格式的测试报告

集成Allure

如果要生成更详细的HTML测试报告，可以集成allure

要集成 Allure，您需要添加相关依赖和插件到您的 POM 文件中：

<dependency><groupId>io.qameta.allure</groupId><artifactId>allure-testng</artifactId><version>2.13.8</version><scope>test</scope>
</dependency>

并配置 Allure Maven 插件：

<plugin><groupId>io.qameta.allure</groupId><artifactId>allure-maven</artifactId><version>2.10.0</version><configuration><reportVersion>2.13.8</reportVersion><reportingOutputDirectory>${project.build.directory}/allure-results</reportingOutputDirectory></configuration><executions><execution><phase>post-integration-test</phase><goals><goal>report</goal></goals></execution></executions></plugin>

然后我们需要在src/test/resources目录下添加allure.properties

allure.results.directory=target/allure-results

添加这个文件主要让生成的Allure结果放到target目录里面，不然就直接放在根目录，当然你不介意的话

运行和生成报告

可以直接运行测试文件，也可以通过mvn test执行测试，然后就能在target目录下看到Allure_results的测试结果数据，全部为json格式文件，接下来使用allure generate <results dir> -o <report dir> 在report dir 目录下生成Allure测试报告，打开index.html文件就能查看测试结果

我直接使用allure generate .target/allure-results 这样就会根据里面的结果生成报告了，同样在Jenkins上面配置Allure的时候要注意results和report的区别，配置正确

二、数据驱动测试

1. 组织测试数据

为了处理多个参数和多组数据，testNG的数据提供者（@DataProvider）的二维数组会是你的核心工具。数据数组的每个元素都可以包含多种数据，包括不同的定位方式、输入值和其他参数。

import org.testng.annotations.DataProvider;public class TestDataProvider {@DataProvider(name = "complexData")public Object[][] createComplexData() {return new Object[][] {{ "Case 1", "https://example.com/login", "username1", "password1", "login-button-id-1" },{ "Case 2", "https://example.com/login", "username2", "password2", "login-button-id-2" },{ "Case 3", "https://example.com/signup", "newuser1", "newpass1", "signup-button-id" }};}
}

在这个示例中，我们有一个数据提供者 complexData，包含了多个参数，包括测试用例名称、网址、用户名、密码和按钮 ID。

2. 链接数据提供者到测试方法

现在，我们需要一个测试类，它使用上面定义的数据提供者来获取不同的数据集，并应用于测试方法。

import com.microsoft.playwright.*;
import org.testng.Assert;
import org.testng.annotations.*;public class ComplexTest {Playwright playwright;Browser browser;Page page;@BeforeClasspublic void setUp() {playwright = Playwright.create();BrowserType.LaunchOptions options = new BrowserType.LaunchOptions();options.headless = false; // 设置为 true 运行无头浏览器browser = playwright.chromium().launch(options);page = browser.newPage();}@Test(dataProvider = "complexData", dataProviderClass = TestDataProvider.class)public void testComplexScenarios(String testCaseName, String url, String username, String password, String buttonId) {page.navigate(url);// 输入用户名和密码page.fill("input[name='username']", username);page.fill("input[name='password']", password);// 点击按钮page.click("#" + buttonId);// 检查页面是否成功登录/注册boolean isLoginSuccess = page.locator("#success-message").isVisible();Assert.assertTrue(isLoginSuccess, testCaseName + " - 登录/注册失败");}@AfterClasspublic void tearDown() {browser.close();playwright.close();}
}

在这个示例中，测试方法 testComplexScenarios 接收多个参数。这使得我们可以根据不同的数据集运行相同的测试逻辑。

3. 在报告中显示测试用例名称和具体步骤

为了在报告中显示测试用例名称和步骤结果，可以通过以下方式实现：

使用 TestNG Reporter：TestNG 提供了报告功能，测试用例可以通过 Reporter.log() 输出特定信息，这样在最终报告中会显示这些信息。
使用 TestNG 监听器：监听器可以帮助你更好地跟踪测试结果，并自定义报告输出。

示例代码展示了如何记录测试步骤以及在报告中显示测试用例名称：

import com.microsoft.playwright.*;
import org.testng.Assert;
import org.testng.Reporter;
import org.testng.annotations.*;public class DetailedReportTest {Playwright playwright;Browser browser;Page page;@BeforeClasspublic void setUp() {playwright = Playwright.create();BrowserType.LaunchOptions options = new BrowserType.LaunchOptions();options.headless = false; // 设置为 true 运行无头浏览器browser = playwright.chromium().launch(options);page = browser.newPage();}@Test(dataProvider = "complexData", dataProviderClass = TestDataProvider.class)public void testWithReport(String testCaseName, String url, String username, String password, String buttonId) {Reporter.log("开始执行用例：" + testCaseName, true);page.navigate(url);Reporter.log("导航至：" + url, true);// 输入用户名和密码page.fill("input[name='username']", username);Reporter.log("填入用户名：" + username, true);page.fill("input[name='password']", password);Reporter.log("填入密码", true);// 点击按钮page.click("#" + buttonId);Reporter.log("点击按钮：" + buttonId, true);// 检查页面是否成功boolean isSuccess = page.locator("#success-message").isVisible();Assert.assertTrue(isSuccess, testCaseName + " - 操作失败");Reporter.log("用例：" + testCaseName + " 执行成功", true);}@AfterClasspublic void tearDown() {browser.close();playwright.close();}
}

这个例子通过 Reporter.log() 来记录测试用例的步骤和结果，在生成的 TestNG 报告中，你可以看到这些日志信息以及测试用例名称。

当然如果你想要在Allure里面展示详细步骤，比如某个按钮，或者某个节点是否成功，你可以添加Allure.step(<string>)

import com.microsoft.playwright.*;
import com.microsoft.playwright.options.AriaRole;
import org.testng.Assert;
import org.testng.annotations.*;
import io.qameta.allure.*;public class LoginTest {Playwright playwright;Browser browser;Page page;@BeforeClasspublic void setUp() {playwright = Playwright.create();BrowserType.LaunchOptions options = new BrowserType.LaunchOptions();options.headless = false; // 设置为运行有头浏览器browser = playwright.chromium().launch(options);page = browser.newPage();}@Feature("登录功能模块")@Test(dataProvider = "loginData",dataProviderClass = TestDataProvider.class)public void testLogin(String testCaseName,String username, String password, boolean isExpectedAlert ,String expectedMessage, String expectedUrl) {boolean[] alertPresent = {false};String [] alertMessage = {""};
//        page.onDialog(dialog -> {
//            alertPresent[0] = true;
//            alertMessage[0] =dialog.message();
//        });page.navigate("https://yourexample.com/mangement/#/login");Allure.step("进入登录页成功");page.locator("input[type=\"text\"]").fill(username);Allure.step(testCaseName+"输入用户名成功");page.fill("#inputPwd", password);Allure.step(testCaseName+"输入密码成功！");page.getByText("登录", new Page.GetByTextOptions().setExact(true)).click();Allure.step(testCaseName+"点击登录按钮成功！");String newUrl = page.url();if(!testCaseName.equals("Case 1")) {Locator toast = page.getByRole(AriaRole.ALERT);toast.waitFor(new Locator.WaitForOptions().setTimeout(1000));//最多等待五秒if (toast.isVisible()) {alertPresent[0] = true;alertMessage[0] = toast.textContent();}}else {page.waitForTimeout(2000);newUrl = page.url();Allure.step(testCaseName+"登录成功！");}Assert.assertEquals(alertPresent[0],isExpectedAlert, testCaseName + "failed");Assert.assertEquals(alertMessage[0],expectedMessage,testCaseName + "failed");Assert.assertEquals(newUrl,expectedUrl,testCaseName + "failed");}@AfterClasspublic void tearDown() {browser.close();playwright.close();}
}

如果熟悉使用Python进行UI测试用过Allure的应该都清楚

这里简单回顾一下Allure常用的接口，装饰器(更多的大家可以去官网查看)

@Feature：

意义：用于标注主要的功能模块。
用途：帮助组织和分类测试用例，使其按照功能模块进行归类。通过查看报告中的Feature，可以快速地了解哪些功能模块被测试了。

@Story：

意义：用于标注功能模块下的分支功能或具体场景。
用途：进一步细分功能模块，描述更具体的功能点或业务场景。通过Story，可以更详细地了解每个功能模块下的具体测试内容。

@Title：

意义：用于为测试用例或测试步骤提供标题。
用途：使得每个测试用例或步骤在报告中都有一个明确的、描述性的标题，方便用户快速识别和理解。

三、测试数据与代码分离进行数据驱动

当然，让我们继续讨论如何使用 CSV 文件来进行数据驱动的测试。

添加 Maven 依赖

首先，在你的 Maven pom.xml 文件中添加 Apache Commons CSV 或任何其他 CSV 解析库的依赖。这里我们使用 Apache Commons CSV。

<dependency><groupId>org.apache.commons</groupId><artifactId>commons-csv</artifactId><version>1.8</version>
</dependency>

读取 CSV 文件

创建一个 @DataProvider 方法来读取 CSV 文件，并返回测试用例所需的数据。以下是一个例子，演示如何解析 CSV 文件并构造对象数组。

import org.apache.commons.csv.*;
import org.testng.annotations.DataProvider;import java.io.FileReader;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;public class CSVDataProviders {@DataProvider(name = "csvTestData")public static Object[][] readCsvData() throws IOException {List<Object[]> testCases = new ArrayList<>();try (CSVParser parser = new CSVParser(new FileReader("path/to/testdata.csv"), CSVFormat.DEFAULT.withHeader())) {for (CSVRecord record : parser) {String testCaseName = record.get("TestCaseName");String inputData = record.get("InputData");String locatorId = record.get("LocatorId");String expectedOutcome = record.get("ExpectedOutcome");testCases.add(new Object[]{testCaseName, inputData, locatorId, expectedOutcome});}}return testCases.toArray(new Object[0][]);}
}

在这个例子中，我们假设 CSV 文件有列标题 TestCaseName, InputData, LocatorId, 和 ExpectedOutcome。CSVParser 用于读取 CSV 文件，然后每条记录被转换成一个对象数组并添加到列表中。

使用数据提供者

接下来，在你的测试类中使用这个 @DataProvider：

import com.microsoft.playwright.*;
import org.testng.Assert;
import org.testng.annotations.*;public class DataDrivenTests {Playwright playwright;Browser browser;Page page;@BeforeClasspublic void setUp() {playwright = Playwright.create();browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));page = browser.newPage();}@Test(dataProvider = "csvTestData", dataProviderClass = CSVDataProviders.class)public void testWithCsvData(String testCaseName, String inputData, String locatorId, String expectedOutcome) {page.navigate(inputData); // Assuming inputData is a URL for simplicitypage.click("#" + locatorId);Assert.assertTrue(page.isVisible(expectedOutcome), "Test failed for: " + testCaseName);}@AfterClasspublic void tearDown() {browser.close();playwright.close();}
}

在这个测试方法中，通过 @DataProvider 注解指定数据来源为 csvTestData，它会自动接收 CSV 文件中的每行数据作为参数。

好了本次分享就到此结束了，欢迎大家一起讨论学习

附官网参考地址：

1、playwright的Java版本相关接口：https://playwright.dev/java/docs/api/class-playwrighthttps://playwright.dev/java/docs/api/class-playwright

2、Allure与testNG相关的接口：

https://allurereport.org/docs/testng/