自动化测试 - Playwrigh简单介绍+基础使用

文章目录

[1.Playwright 简介](#1.Playwright 简介)
[2. Playwright 原理](#2. Playwright 原理)
- Playwright与Selenium区别
- [Playwright 的核心工具](#Playwright 的核心工具)
[3. Playwright使用](#3. Playwright使用)
- 环境配置
- 示例
- Codegen
- - Codegen-保存登录状态
- Playwright常用API
- - Playwright代码使用API
- [Trace Viewer 简介](#Trace Viewer 简介)
- - 代码中使用Trace
  - 打开trace,查看代码用例执行步骤
总结

✨✨✨学习的道路很枯燥，希望我们能并肩走下来！

编程真是一件很奇妙的东西。你只是浅尝辄止，那么只会觉得枯燥乏味，像对待任务似的应付它。但你如果深入探索，就会发现其中的奇妙，了解许多所不知道的原理。知识的力量让你沉醉，甘愿深陷其中并发现宝藏。

本文开始

1.Playwright 简介

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

1.Web 自动化测试框架。

2.跨平台多语言支持。

3.支持 Chromium、Firefox、WebKit 等主流浏览器自动化操作

Playwright特点：

1.支持所有流行的浏览器。

2.速度更快，更可靠的执行。

3.更强大的自动化测试配置。

4.强大的工具库：Codegen、Playwright inspector、Trace Viewer

2. Playwright 原理

原理：Playwright调用的puppeteer工具，puppeteer工具通过chrome devtools协议，调用浏览器；

Selenium原理：通过driver调用浏览器；

Playwright与Selenium区别

项目	Playwright	Selenium
是否需要驱动	否	需要对应浏览器 webdriver
支持语言	Java, Python, Javascript	Java, Python, Javascript, Ruby, C#等
支持浏览器	Chrome、Firefox 等	Chrome、Firefox 等
通讯方式	websocket 双向通讯协议	http 单向通讯协议
使用的测试框架	无限制(pytest,unittest)	无限制(pytest,unittest)
测试速度	快	慢
录制测试视频、快照	支持	支持
社区支持	微软	thoughtworks 公司

Playwright 的核心工具

Codegen：通过记录你的操作来生成测试。将它们保存为任何语言。
Playwright inspector：检查页面、生成选择器、逐步执行测试、查看点击点、探索执行日志。
Trace Viewer：捕获所有信息以调查测试失败。 Playwright 跟踪包含测试执行截屏、实时 DOM 快照、动作资源管理器、测试源等等

3. Playwright使用

环境配置

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

在 pom.xml 中添加依赖

java 复制代码

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>org.example</groupId>
  <artifactId>examples</artifactId>
  <version>0.1-SNAPSHOT</version>
  <name>Playwright Client Examples</name>
  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  </properties>
  <dependencies>
    <dependency>
      <groupId>com.microsoft.playwright</groupId>
      <artifactId>playwright</artifactId>
      <version>1.29.0</version>
    </dependency>
  </dependencies>
  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.10.1</version>
      </plugin>
    </plugins>
  </build>
</project>

示例

java 复制代码

//1，需要在项目跟目录下执行
//2,执行命令：mvn compile exec:java -D exec.mainClass="包名.文件名"
//3，如果是第一次执行会需要下载依赖的浏览器，所以耗时会比较久
public class App {
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
            //启动浏览器，这里默认是无头模式
            Browser browser = playwright.webkit().launch();
//            Browser browser = playwright.chromium().launch();
            //打开页面
            Page page = browser.newPage();
            //访问网页
            page.navigate("https://www.baidu.com/");
            //截图
            page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get("example.png")));
            //打印页面标题
            System.out.println(page.title());
        }
    }
}

Codegen

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

bash 复制代码

# 设定展示窗口大小
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen --viewport-size=800,600 地址"
# 指定设备
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args='codegen --device="iPhone 11" 地址'

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

Codegen-保存登录状态

场景：单点登录、验证码问题

bash 复制代码

# 保存登录状态到auth.json文件中
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen  --save-storage=auth.json"
# 上述登录后会将登录状态保存到auth.json文件中
# 从auth.json文件加载认证信息
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen --load-storage=auth.json github.com/microsoft/playwright"

1.执行命令 mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen --save-storage=auth.json"

2.弹出空白网页，输入www.baidu.com打开页面进行登陆；

3.生成文件结果：登陆成功后手动点击两次关闭页面，项目目录下会自动生成 auth.json 文件保存登陆信息.

1.执行命令 mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen --load-storage=auth.json www.baidu.com"

2.再次打开同网页，直接进入登陆后的页面。

Playwright常用API

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

常用API	含义
create()	实例化playwright
chromium().launch()	打开chrome浏览器
newPage()	打开一个窗口页面
navigate()	打开网站
page.locator()	定位某个元素
click()	点击元素
fill()	输入内容
keyboard().down()	键盘事件
ScreenshotOptions()	截图操作

Playwright代码使用API

java 复制代码

public class PlaywrightTest {
    public static Playwright playwright;
    @BeforeAll
    static void setupClass(){
        playwright = create();
    }
    @Test
    void playwrightDemo() {
        // 初始化一个浏览器实例
        Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
        // 初始化一个page实例
        Page page = browser.newPage();
        // 打开 ceshiren 页面
        page.navigate("https://www.baidu.com/");
        // 点击搜索输入框
        page.locator("#chat-input-area").click();
        // 输入搜索信息
        page.locator("#chat-submit-button").fill("Appium");
        // 按下回车按钮
        page.keyboard().down("Enter");
        // 获取搜索结果的第一条
        Locator result = page.locator("xxx");
        // 断言搜索结果是否包含关键字
        assertTrue(result.innerText().contains("Appium"));
    }
}

Trace Viewer 简介

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

代码中使用Trace

问题：直接调用Trae报错：需要配置 PLAYWRIGHT_JAVA_SRC=src/test/java

java 复制代码

// 1.Java需要设置环境变量
Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));

// 2.创建一个context 实例
BrowserContext context = browser.newContext();
// 3.添加trace配置
context.tracing().start(new Tracing.StartOptions()
        .setScreenshots(true)
        .setSnapshots(true)
        .setSources(true));
// 注意，后面的page实例来自于上面声明的context实例
Page page = context.newPage();

//...省略测试逻辑代码,具体测试操作...

// 测试用例执行完成之后结束trace，生成trace 文件
context.tracing().stop(new Tracing.StopOptions()
        .setPath(Paths.get("trace.zip")));

打开trace,查看代码用例执行步骤

bash 复制代码

# 打开trace
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="show-trace trace.zip"

打开Trace可以看到的界面：

总结

✨✨✨各位读友，本篇分享到内容是否更好的帮助你理解，如果对你有帮助给个👍赞鼓励一下吧！！
🎉🎉🎉世上没有绝望的处境，只有对处境绝望的人。
🎉🎉🎉一遇挫折就灰心丧气的人，永远是个失败者。而一向努力奋斗，坚韧不拔的人会走向成功。
感谢每一位一起走到这的伙伴，我们可以一起交流进步！！！一起加油吧！！！