Playwright 入门教程：从概念到应用（Java 版）-EW帮帮网

文章目录

一、什么是 Playwright？
二、Playwright 的核心特性
三、安装和配置 Playwright
四、Playwright 下载浏览器二进制文件存储详解
五、基本使用：启动浏览器、导航页面
- 1、简单示例
- 2、说明：
五、Playwright 核心概念
六、Playwright 的辅助工具与功能

系列文章
Playwright 入门教程：从概念到应用（Java 版）
Playwright JAVA版本常用操作总结
 Jsoup、Selenium 和 Playwright 的含义、作用和区别

一、什么是 Playwright？

Playwright 是由 Microsoft 开发的一个现代化的自动化测试工具，专为现代 Web 应用设计。它支持多种编程语言（如 Java、JavaScript/TypeScript、Python 和 C#），并提供对主流浏览器（Chromium、Firefox、WebKit）的原生支持。Playwright 不仅可以用于自动化测试，还可以用于抓取动态内容、调试和分析 Web 应用。

与传统的 Selenium 相比，Playwright 提供了更智能的等待机制、更高的性能以及更强大的功能（如网络请求拦截、移动端仿真等）。无论是开发人员还是测试工程师，都可以通过 Playwright 快速构建高效的自动化脚本。

二、Playwright 的核心特性

多浏览器支持：内置对 Chromium、Firefox 和 WebKit 的支持，无需额外配置。
智能等待机制：自动处理异步操作和元素加载，避免显式等待代码的冗余。
网络请求拦截：可以拦截和修改网络请求，便于测试特定场景。
移动端仿真：支持模拟移动设备的行为和分辨率。
无头模式：支持无头浏览器运行，提高测试效率。
高效的调试能力：支持截图、录屏以及详细的日志记录。
多线程并行测试：支持高效并行执行测试用例。

三、安装和配置 Playwright

1、安装 Playwright-导包

在 Java 项目中使用 Playwright，首先需要确保你已经安装了 JDK（推荐版本 11 或更高）。然后，你可以通过 Maven 或 Gradle 添加 Playwright 的依赖。

使用 Maven

在 pom.xml 文件中添加以下依赖：

<dependency>
    <groupId>com.microsoft.playwright</groupId>
    <artifactId>playwright</artifactId>
    <version>1.51.0</version> <!-- 确保使用最新版本 -->
</dependency>

使用 Gradle

在 build.gradle 文件中添加以下依赖：

implementation 'com.microsoft.playwright:playwright:1.51.0' // 确保使用最新版本

2、下载浏览器二进制文件-运行

1、安装 Playwright 命令（需要配置maven 环境变量）

安装 Playwright 后，你需要下载浏览器二进制文件。可以通过运行以下命令完成：
```
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="install"
```

命令分解

mvn exec:java
- 这是调用 Maven 的 exec-maven-plugin 插件的目标 exec:java。
- 它的作用是直接在当前 JVM 中运行指定的 Java 主类，而无需先打包成 JAR 文件。
-e
- -e 是 Maven 的调试选项，表示在执行过程中如果发生错误，会输出更详细的错误信息（堆栈跟踪）。
- 这对于排查问题非常有用。
-Dexec.mainClass=com.microsoft.playwright.CLI
- -D 是用来定义系统属性的方式。
- exec.mainClass 是 exec-maven-plugin 的配置参数，用于指定要运行的主类。
- 在这里，主类是 com.microsoft.playwright.CLI，这是 Playwright 的命令行工具入口类。
-Dexec.args="install"
- exec.args 是 exec-maven-plugin 的另一个配置参数，用于向主类传递命令行参数。
- 在这里，传递的参数是 "install"，意思是让 com.microsoft.playwright.CLI 执行安装操作。

用途解释

这条命令通常用于安装 Playwright 的浏览器依赖。Playwright 是一个流行的自动化测试工具，支持多种浏览器（如 Chromium、Firefox 和 WebKit）。为了正常运行 Playwright 测试，需要下载并安装对应的浏览器二进制文件。

具体来说：

com.microsoft.playwright.CLI 是 Playwright 提供的一个命令行工具类。
当传递参数 "install" 时，它会自动下载并安装 Playwright 所需的浏览器二进制文件到本地环境。

2、通过idea直接运行

或者直接运行这个程序【Debug’App.main()'】，也可以直接下载。

第一次执行，将安装 Chromium、Firefox 和 WebKit 的浏览器环境。
在这里插入图片描述
注：第一次编译执行的时候需要下载对应的依赖，耗时比较久，第二次执行就快了

四、Playwright 下载浏览器二进制文件存储详解

当您运行 mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="install" 命令时，Playwright 会下载并安装浏览器二进制文件。这些二进制文件的存储位置是由 Playwright 的设计决定的，而不是由 Maven 或项目结构直接控制。以下是详细说明：

1. 浏览器二进制文件的存储位置

Playwright 默认会将浏览器二进制文件安装到 用户主目录下的一个隐藏目录 中，与具体的项目无关。具体路径如下：

Windows

路径：C:\Users\<YourUsername>\AppData\Local\ms-playwright

示例：

C:\Users\JohnDoe\AppData\Local\ms-playwright

macOS 和 Linux

路径：~/.cache/ms-playwright
示例：
```
/home/johndoe/.cache/ms-playwright
```

2. 存储位置的特点

全局共享
- 浏览器二进制文件是按用户安装的，而不是按项目安装的。
- 这意味着同一台机器上的所有 Playwright 项目都会共享这些二进制文件，而不会重复下载。
跨项目使用
- 如果您在多个项目中使用 Playwright，它们会自动复用已经安装的浏览器二进制文件，无需重复安装。
独立于项目
- 浏览器二进制文件的存储位置与项目的代码目录无关，因此即使删除项目目录，浏览器二进制文件仍然存在。

3. 如何验证安装路径

您可以通过以下方式确认浏览器二进制文件的安装路径：

方法 1：查看日志输出

运行 mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="install" 时，Playwright 会在终端输出下载和安装的详细信息。例如：

Downloading Chromium 108.0.5359.62 (playwright build v1234) from https://...
Downloading Firefox 107.0 (playwright build v5678) from https://...
Downloading WebKit 15.4 (playwright build v9101) from https://...
Installing to /home/johndoe/.cache/ms-playwright

方法 2：检查默认路径

您可以直接导航到上述提到的默认路径（如 ~/.cache/ms-playwright 或 C:\Users\<YourUsername>\AppData\Local\ms-playwright），查看是否存在相关的浏览器文件夹。

4. 自定义安装路径

如果您希望将浏览器二进制文件安装到特定位置，可以通过设置环境变量 PLAYWRIGHT_BROWSERS_PATH 来实现。

步骤：

设置环境变量：

在 Linux/macOS 上：

export PLAYWRIGHT_BROWSERS_PATH=/path/to/custom/directory

在 Windows 上：

set PLAYWRIGHT_BROWSERS_PATH=C:\path\to\custom\directory

再次运行安装命令：

mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="install"

Playwright 将把浏览器二进制文件安装到指定的自定义路径。

5. 总结

默认情况下，浏览器二进制文件会被安装到用户的主目录下（如 ~/.cache/ms-playwright 或 C:\Users\<YourUsername>\AppData\Local\ms-playwright）。
文件是全局共享的，与具体项目无关。
如果需要自定义路径，可以通过设置 PLAYWRIGHT_BROWSERS_PATH 环境变量来更改安装位置。

五、基本使用：启动浏览器、导航页面

1、简单示例

以下是一个最简单的 Playwright 示例，演示如何启动浏览器、打开一个网页并关闭浏览器：

import com.microsoft.playwright.*;

public class PlaywrightExample {
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) { // 创建 Playwright 实例
            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false)); // 启动 Chromium 浏览器
            Page page = browser.newPage(); // 创建一个新的页面            
            // 导航到目标网站
            page.navigate("https://example.com");
            
            // 输出页面标题
            System.out.println(page.title());
            
            // 关闭浏览器
            browser.close();
        }
    }
}

2、说明：

Playwright.create() 方法用于创建 Playwright 实例。
chromium().launch() 方法用于启动 Chromium 浏览器，默认情况下以无头模式运行（即不显示浏览器窗口）。如果需要显示窗口，可以设置 .setHeadless(false)。
newPage() 方法创建一个新的浏览器标签页。
navigate() 方法用于导航到指定的 URL。
title() 方法获取当前页面的标题。

五、Playwright 核心概念

1. Browser-表示一个浏览器实例

可以通过 Playwright.chromium().launch() 启动 Chromium 浏览器（默认无头），也可以启动其他浏览器（如 Firefox 或 WebKit）。
可以通过下列代码打开有头浏览器

package com.example.playwright.playwright;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
import org.junit.jupiter.api.AfterAll;
import org.junit.jupiter.api.BeforeAll;
import org.junit.jupiter.api.Test;
import org.springframework.boot.test.context.SpringBootTest;

import java.nio.file.Paths;

/**
* @author wangkanglu
* @version 1.0
* @description
* @date 2025-04-24 11:17
*/
@SpringBootTest
public class Test1 {

   public static Playwright playwright;

   @BeforeAll
   public static void befor() {
       playwright = Playwright.create();
   }

   @AfterAll
   public static void after(){
       playwright.close();
   }

   @Test
   public void test1() {
       //默认无头浏览器
//        Browser browser = playwright.chromium().launch();
       //有头浏览器
       Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
//            打开新页面
       Page page = browser.newPage();
//            访问界面
       page.navigate("https://www.baidu.com/");
//            输入标题
       System.out.println(page.title());
       // 对页面截图
       page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get("login_success.png")));

       // 关闭浏览器
//        browser.close();
   }
}

2. BrowserContext-实现会话隔离

BrowserContext 是 Playwright 中的重要概念，用于实现会话隔离。它的主要特点如下：

独立的会话：
- 每个 BrowserContext 都有自己的 cookies、缓存和存储。
- 不同的 BrowserContext 之间不会共享数据。
多用户场景：
- 如果需要模拟多个用户的操作，可以为每个用户创建一个独立的 BrowserContext。
无痕模式：
- 默认情况下，BrowserContext 不会保存任何数据，类似于无痕浏览模式。

package com.example.playwright.playwright;

import com.microsoft.playwright.*;
import org.junit.jupiter.api.*;
import org.springframework.boot.test.context.SpringBootTest;

import java.nio.file.Paths;

/**
 * @author wangkanglu
 * @version 1.0
 * @description
 * @date 2025-04-24 11:17
 */
@SpringBootTest
public class Test1Context {

    // Shared between all tests in this class.
    static Playwright playwright;

    @BeforeAll
    public static void befor() {
        playwright = Playwright.create();
    }

    @Test
    public void test1() {
        Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
        BrowserContext browserContext = browser.newContext();
//            打开新页面
        Page page = browserContext.newPage();
//            访问界面
        page.navigate("https://www.baidu.com/");
//            输入标题
        System.out.println(page.title());
        // 对页面截图
        page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get("login_success_context.png")));

    }
}

3. Page-表示一个浏览器标签页或窗口

表示一个浏览器标签页或窗口。
所有用户交互（如点击、输入文本）都在 Page 对象中完成。

六、Playwright 的辅助工具与功能

Playwright 提供了一系列强大的工具和功能，帮助开发者更高效地进行自动化测试开发、调试和维护。

1. Codegen（代码生成器）

官网地址：https://playwright.dev/java/docs/codegen

（1）概念

描述：

Codegen 是 Playwright 提供的一个工具，用于通过记录用户的操作来生成测试代码。
运行该命令时，将打开两个窗口，一个浏览器窗口，您可以在其中与要测试的网站进行交互，另一个是 Playwright Inspector 窗口，您可以在其中录制测试，然后将其复制到编辑器中。
它可以将用户在浏览器中的交互行为（如点击按钮、输入文本、滚动页面等）自动转换为可执行的测试代码。

特点：

语言支持：生成的代码可以保存为多种编程语言，包括 JavaScript/TypeScript、Python、Java 等。
实时记录：用户可以在浏览器中手动操作页面，Playwright 会实时记录这些操作，并将其转换为代码。
提高效率：对于复杂的 UI 测试场景，手动编写测试代码可能耗时且容易出错，而 Codegen 可以显著减少开发时间。

使用场景：

快速生成测试用例的初始框架。
对于复杂的交互逻辑，可以通过 Codegen 记录操作，然后根据需要调整生成的代码。

在这里插入图片描述

（2）命令

使用命令运行测试生成器，后跟要为其生成测试的网站的 URL。URL 是可选的，您始终可以在没有 URL 的情况下运行命令，然后将 URL 直接添加到浏览器窗口中。此处RUL设为【www.baidu.com】

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen www.baidu.com"

在这里插入图片描述

（3）录制测试

在浏览器窗口中运行命令并执行作。Playwright 将为用户交互生成代码，您可以在 Playwright Inspector 窗口中看到这些代码。完成测试录制后，请停止录制，然后按 copy 按钮将生成的测试复制到编辑器中。

使用测试生成器，您可以录制：

单击或填充等作，只需与页面交互即可
通过单击工具栏中的图标之一，然后单击页面上要针对的元素进行断言。您可以选择：
- 'assert visibility’断言元素可见
- 'assert text’断言元素包含特定文本
- 'assert value’断言元素具有特定值
  
  还可以使用测试生成器生成定位器。

在这里插入图片描述

（4）其他命令-模拟视口大小–viewport

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen --viewport-size='800,600' www.baidu.com"

（5）其他命令-模拟设备–device

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args='codegen --device="iPhone 13" www.baidu.com'

（6）保留已验证状态 --save-storage=auth.json

Run with 在会话结束时保存 cookie、localStorage 和 IndexedDB 数据。这对于单独记录身份验证步骤并在以后记录更多测试时重复使用它非常有用。

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen https://www.csdn.net  --save-storage=auth.json"

在这里插入图片描述

执行身份验证后要手动关闭浏览器，不要从控制台关闭，它就会将包含存储状态的文件存放入根目录，然后您可以在测试中重复使用该状态。auth.json

在这里插入图片描述
确保只在本地使用，因为它包含敏感信息。将其添加到您的测试中，或在完成生成测试后将其删除。auth.json

（7）加载已验证状态–load-storageauth.json

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen --load-storage=auth.json https://www.csdn.net"

Run with 使用之前从 .这样，所有 cookie、localStorage 和 IndexedDB 数据都将被恢复，使大多数 Web 应用程序进入 authenticated 状态，而无需再次登录。这意味着您可以继续从 logged in 状态生成测试
在这里插入图片描述

2. Playwright Inspector

描述：

Playwright Inspector 是一个强大的调试工具，用于帮助开发者检查页面、生成选择器、逐步执行测试、查看点击点以及探索执行日志。
它提供了一个直观的界面，允许开发者在浏览器中可视化地调试和分析测试脚本的行为。
运行codegen命令时，将打开两个窗口，一个浏览器窗口，您可以在其中与要测试的网站进行交互，另一个是 Playwright Inspector 窗口，您可以在其中录制测试，然后将其复制到编辑器中。

功能：

检查页面：
- 显示当前页面的 DOM 结构，帮助开发者理解页面布局和元素结构。
- 支持搜索和过滤 DOM 元素，快速定位目标元素。
生成选择器：
- 自动为选定的 DOM 元素生成稳定的选择器（如 CSS 选择器或 XPath），避免因页面结构调整而导致的测试失败。
- 提供多个选择器选项，开发者可以选择最适合的方案。
逐步执行测试：
- 支持按步骤执行测试脚本，每一步都可以暂停并查看当前的状态。
- 帮助开发者逐步调试复杂的测试逻辑，确保每个步骤都按预期执行。
查看点击点：
- 显示测试脚本中所有点击操作的位置，帮助开发者验证点击操作是否准确。
探索执行日志：
- 记录测试脚本的执行过程，包括每个操作的时间戳、参数和结果。
- 提供详细的日志信息，方便排查问题。

使用场景：

一般都是和codegen一起使用，运行codegen命令时，将打开两个窗口，一个浏览器窗口，您可以在其中与要测试的网站进行交互，另一个是 Playwright Inspector 窗口，您可以在其中录制测试，然后将其复制到编辑器中。

在这里插入图片描述

3. Trace Viewer

官网地址：https://playwright.dev/java/docs/trace-viewer

描述：

Trace Viewer 是 Playwright 提供的一个工具，用于捕获和分析测试执行过程中的所有信息，帮助开发者调查测试失败的原因。
它可以跟踪并记录测试执行过程中的各种细节，包括截图、实时 DOM 快照、动作资源管理器、测试源代码等。

特点：

全面的日志记录：Trace Viewer 会捕获测试执行过程中的所有重要信息，包括：
- 页面截图：每次操作前后的页面截图，帮助开发者直观地看到页面状态的变化。
- 实时 DOM 快照：记录每次操作前后页面的 DOM 结构，便于分析页面变化。
- 动作资源管理器：记录所有用户操作（如点击、输入、滚动等），并显示其执行顺序和参数。
- 测试源代码：记录测试脚本的执行过程，方便开发者定位问题。
故障排查：当测试失败时，Trace Viewer 提供了丰富的信息，帮助开发者快速定位问题的根本原因。
可视化分析：Trace Viewer 提供了一个友好的界面，允许开发者逐步回放测试执行过程，查看每个步骤的详细信息。

记录跟踪- BrowserContext.tracing（）

代码：

package com.example.playwright.playwright;

import com.microsoft.playwright.*;
import org.junit.jupiter.api.BeforeAll;
import org.junit.jupiter.api.Test;

import java.nio.file.Paths;

/**
 * @author wangkanglu
 * @version 1.0
 * @description
 * @date 2025-04-24 20:41
 */
public class BaiduTracTest {

    static Playwright playwright;

    @BeforeAll
    public static void befor() {
        playwright = Playwright.create();
    }

    @Test
    public void test1() {
        Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
        BrowserContext context = browser.newContext();
        // 添加trace配置
        context.tracing().start(new Tracing.StartOptions()
                .setScreenshots(true)
                .setSnapshots(true)
                .setSources(true));

//      打开新页面
        Page page = context.newPage();
//      访问界面
        page.navigate("https://www.baidu.com/");
//      输入标题
        System.out.println(page.title());
        // 结束trace,生成trace文件
        context.tracing().stop(new Tracing.StopOptions()
                .setPath(Paths.get("trace.zip")));

    }

}

结果：
在这里插入图片描述

本地打开-Trace Viewer

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="show-trace trace.zip"

在这里插入图片描述

在线打开trace.playwright.dev

在 trace.playwright.dev 上的浏览器中打开跟踪，地址：https://trace.playwright.dev/

trace.playwright.dev 是 Trace Viewer 的静态托管变体。您可以使用拖放或通过按钮上传跟踪文件。
Trace Viewer 完全在浏览器中加载跟踪，不会在外部传输任何数据。

4.总结

Playwright 提供了以下三个强大的工具和功能，帮助开发者更高效地进行自动化测试：

Codegen：
- 通过记录用户操作自动生成测试代码。
- 支持多种编程语言，提高测试开发效率。
Playwright Inspector：
- 提供页面检查、选择器生成、逐步执行测试等功能。
- 帮助开发者调试和分析测试脚本的行为。
Trace Viewer：
- 捕获测试执行过程中的所有信息，包括截图、DOM 快照、动作记录等。
- 用于故障排查和分析测试执行过程。

Playwright 入门教程：从概念到应用（Java 版）

文章目录

一、什么是 Playwright？

二、Playwright 的核心特性

三、安装和配置 Playwright

1、安装 Playwright-导包

使用 Maven

使用 Gradle

2、下载浏览器二进制文件-运行

1、安装 Playwright 命令（需要配置maven 环境变量）

命令分解

用途解释

2、通过idea直接运行

四、Playwright 下载浏览器二进制文件存储详解

1. 浏览器二进制文件的存储位置

Windows

macOS 和 Linux

2. 存储位置的特点

3. 如何验证安装路径

方法 1：查看日志输出

方法 2：检查默认路径

4. 自定义安装路径

5. 总结

五、基本使用：启动浏览器、导航页面

1、简单示例

2、说明：

五、Playwright 核心概念

1. Browser-表示一个浏览器实例

2. BrowserContext-实现会话隔离

3. Page-表示一个浏览器标签页或窗口

六、Playwright 的辅助工具与功能

1. Codegen（代码生成器）

（1）概念

（2）命令

（3）录制测试

（4）其他命令-模拟视口大小–viewport

（5）其他命令-模拟设备–device

（6）保留已验证状态 --save-storage=auth.json

（7）加载已验证状态–load-storageauth.json

2. Playwright Inspector

描述：

功能：

使用场景：

3. Trace Viewer

描述：

特点：

记录跟踪- BrowserContext.tracing（）

本地打开-Trace Viewer

在线打开trace.playwright.dev

4.总结

网站公告

今日签到

热门文章

最新发布