不正经

这个屌丝很懒，什么也没留下！

热门标签

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

作者：不正经 | 2024-04-30 10:30:53

踩

今天来讲讲使用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;
 
    @BeforeClass
    public void setUp() {
        playwright = Playwright.create();
        BrowserType.LaunchOptions options = new BrowserType.LaunchOptions();
        options.headless = false; // 设置为有头浏览器
        browser = playwright.chromium().launch(options);
        page = browser.newPage();
    }
 
    @Test
    public void testBaiduHomePage() {
        page.navigate("https://www.baidu.com");
        String title = page.title();
        Assert.assertEquals(title, "百度一下，你就知道");
    }
 
    @AfterClass
    public 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;
 
    @BeforeClass
    public 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 + " - 登录/注册失败");
    }
 
    @AfterClass
    public 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;
 
    @BeforeClass
    public 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);
    }
 
    @AfterClass
    public 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;
 
    @BeforeClass
    public 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");
 
    }
    @AfterClass
    public 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;
 
    @BeforeClass
    public 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 simplicity
        page.click("#" + locatorId);
        Assert.assertTrue(page.isVisible(expectedOutcome), "Test failed for: " + testCaseName);
    }
 
    @AfterClass
    public 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/

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/512909

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

一、 普通UI测试

示例测试用例

使用 TestNG 管理测试用例

生成测试报告

集成Allure

二、数据驱动测试

1. 组织测试数据

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

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

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

添加 Maven 依赖

读取 CSV 文件

使用数据提供者

一、普通UI测试