PlayWright教程

最新推荐文章于 2025-07-11 14:37:42 发布
原创 最新推荐文章于 2025-07-11 14:37:42 发布 · 6k 阅读 · 39 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#自动化 #python #pytest

本文章已经生成可运行项目，

一、简介

微软开源自动化测试工具Playwright，支持主流浏览器，包括：Chrome、Firefox、Safari 等，同时支持以无头模式、有头模式运行，并提供了同步、异步的 API，可以结合主流测试框架使用，并且支持浏览器端的自动化脚本录制等功能。

特点：

  • 跨浏览器：Playwright 支持所有现代渲染引擎，包括Chromium、WebKit 和 Firefox；
  • 跨平台：在 Windows、Linux 和 MacOS 上进行本地或 CI、无头或有头测试;
  • 跨语言：在 TypeScript、JavaScript、Python、.NET、Java 中使用Playwright API;
  • 测试移动网络：适用于 Android 和 Mobile Safari 的 Google Chrome 原生移动仿真。相同的渲染引擎适用于您的桌面和云端。

通俗的讲： 就是一款主流的自动化测试工具，可以跨平台、跨语言、开源、支持分布式、拥有成熟的社区及学习文档，主要用于接口和web自动化测试。

二、安装

  1. Java 开发环境搭建
    首先需要明确的是Java环境是使用maven管理项目的，所以我们只需用在项目中找到对应的pom文件在其中添加如下内容：
    <dependency>
    <groupId>com.microsoft.playwright</groupId>
    <artifactId>playwright</artifactId>
    <version>1.25.0</version>
    </dependency>
    就可以自动导入playwright。
    Ps：因为maven的中央仓库是外网地址，下载很慢需耐心等待，或者在修改镜像站，改为国内镜像。
    添加demo.java内容如下：
    package org.example;
    import com.microsoft.playwright.*;
    public class Example {
    public static void main(String[] args) {
    try (Playwright playwright = Playwright.create()) {
    Browser browser = playwright.chromium().launch();
    Page page = browser.newPage(); page.navigate("https://www.cnblogs.com/longronglang"); System.out.println(page.title());
    }
    }
    }
    运行这个类之后会下载 Playwright 包并安装适用于 Chromium、Firefox 和 WebKit 的浏览器二进制文件，如下所示：
     

2.Python开发环境搭建（网上教程很多此处不做过多说明）

  1. 安装Playwright依赖库（Playwright支持Async\Await语法，故需要Python3.7+）
    pip install playwright
  2. 安装Chromium、Firefox、WebKit等浏览器的驱动文件（内置浏览器）

python -m playwright install

三、脚本录制

此章主要是介绍如何录制脚本，提供给需要使用录制屏幕的人，若是不喜欢觉得自己手写更方便的同学可以跳过此章。

  1. 录制环境安装
    如同常见的自动化测试工具一样，playwright同样支持屏幕录制并生成脚本。因为录屏时需要node环境，所以请提前安装。不会的同学请自行度娘，本文不做详述。
    1.1 确认node环境及版本：
    node -v
     


1.2 安装：
npm init -y
npm i -D @playwright/test
 

2. 录制
录制是不需要写代码的，只需要启动浏览器，playwright就会帮我们生成脚本代码。
输入如下命令即可启动，开启录制模式：
npx playwright codegen https://www.baidu.com（开启录屏模式）
Npx playwright open --viewport-size 1920，1080 https://www.baidu.com
Ps: 上文中的url 是我们需要录制的网站地址，请根据实际使用情况自行配置。
 


同样playwright是支持多语言的，我们可以在录制界面随意切换自己需要的语言，本文以Java为例，其余不做演示。
 


接下来我们只需要在浏览器中执行相关操作，playwright就会把我们所有的操作记录下来。
下图中为在首页的输入框中输入playwright并查询。
 

当操作完成之后，我们点击playwright的停止和复制就可以得到录制好的脚本
 


我们把复制好的脚本粘贴到编辑器中，点击运行该脚本，通过运行后就证明我们录制的脚本没有问题，可以保存。如果有，则通过调整代码或者推倒重新录制即可解决。
至此录制环境安装和脚本录制完成。

3. 调试

如图是playwright inspectior，我们已经和它见过一次面了，大家应该也不陌生。接下来详细的为大家介绍一下它，它叫playwright inspectior是playwright框架自带的GUI工具，可以帮助我们调试脚本

3.1 如何启动playwright inspectior

在脚本中添加page.pause()方法即可启动.

Ps: 其他方法本文不做推荐，后期请自行研究。

3.2. 界面介绍

1.工具栏介绍

2. 元素栏介绍

如图所示，当我们不确定页面某个元素位置怎么获取时，可点击检测器，然后在页面上点击该元素，即可在输入框中展示该元素。

也可以配合开发者小工具（F12）检测你的元素否正确。

3.3. 如何调试

当脚本出现问题之后，我们就可以使用playwright inspectior做调试

第一步：在你的脚本代码中添加page.pause()方法，运行脚本。

第二步：等待playwright inspectior成功启动之后，我们就能使用工具栏 播放、停止、逐步播放来确定问题所在

第三步：当确定时元素位置错误，我们就能使用元素检查器来确定正确的元素位置。

四、常用方法介绍

  1. 创建浏览器对象
    try (Playwright playwright = Playwright.create()) {
    Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions()
    .setHeadless(false))
    };
    .chromium().launch()方法就是指创建一个谷歌浏览器，同样创建火狐就是.firefox().launch()
    .setHeadless(false)方法是指在创建浏览器的时候，选择无头浏览器（true）还是带头浏览器（false）。
    无头浏览器：后台运行，不在显示器显示脚本操作
    有头浏览器：在显示器上展示脚本所有操作
  2. 创建浏览器上下文
    浏览器上下文对象是浏览器实例中一个类似于隐身模式的会话，简单说就是该上下文资源是完全独立的，与其他的上下文互不干扰，所以在自动化测试中，可以对每一个测试用例都单独开一个浏览器上下文。这对于多用户，多场景的测试非常有用。
    BrowserContext context = browser.newContext();
  3. 创建页面
    page就是浏览器中的标签页，一个page对象就可以当前页面内容交互
    Page page = context.newPage();
  4. 常见页面操作事件

这部分主要演示的常见页面操作，例如：文本输入、点击、键盘键入、上传文件、聚焦等等

4.1、输入操作

语法： Locator.fill(value)

使用场景： 文本框、日期/时间、日历控件等输入框

page.locator("#kw").fill("playwright");

4.2、点击操作

语法： Locator.click()

适用场景： 单选框、复选框、按钮控件、常见可点击控件等等！

page.locator("#kw").click();

4.3、单选框及复选框操作

语法： Locator.setChecked(checked)

适用场景： 单选框、复选框

//单选款 (选中，已选中状态下无效)

page.locator(".Volvo").setChecked(true);

page.locator(".Volvo").check();

System.out.println(page.locator(".Volvo").isChecked());

//复选框（选中，已选中状态下无效）

page.locator("#checkbox [type='checkbox']:nth-child(7)").check();

page.locator("#checkbox [type='checkbox']:nth-child(7)").setChecked(true);

4.4、下拉控件操作

语法： Locator.selectOption(values[, options])

适用场景： 下拉框操作

//通过value值选择

page.locator("[name='select']").selectOption("opel");

//通过可见文本选择

page.locator("[name='select']").selectOption(new SelectOption().setLabel("Audi"));

4.5、鼠标事件

语法： 详见案例

适用场景：常见鼠标点击事件

//常规单击

page.locator("#mouse2").click();

//双击

page.locator("#mouse3").dblclick();

//右键单击

page.locator("#mouse5").click(new Locator.ClickOptions().setButton(MouseButton.RIGHT));

//按住Shift键并单击

page.locator("#mouse2").click(new Locator.ClickOptions().setModifiers(Arrays.asList(KeyboardModifier.SHIFT)));

//悬停在元素上

page.locator("#mouse1").hover();

//单击左上角

page.locator("#mouse1").click(new Locator.ClickOptions().setPosition(0, 0));

//强制点击

page.locator("#mouse2").click(new Locator.ClickOptions().setForce(true));

//调度点击事件来触发点击

page.locator("#mouse2").dispatchEvent("click");

4.５、模拟键盘输入字符操作

语法： Locator.type(value)

使用场景： 模拟键盘输入字符

ｐｓ： 大多数时候，Page.fill()可以满足要求。如不能输入时，可以考虑键入字符操作。

page.locator("#user").type("playwright");

4.６、单元素键盘事件操作

语法：Locator.press(键盘事件)

使用场景：定位元素并产生单个键盘事件

//模拟Ctrl+A 全选操作

page.locator("#user").press("Control+A");

//模拟回车操作 == > 跳转到百度页面

page.locator(".baidu").press("Enter");

4.７、上传文件

语法：Locator.setInputFiles()

使用场景：上传一个或多个文件

//上传一个文件

page.locator("#load").setInputFiles(Paths.get("demo.md"));

// 上传多个文件

page.locator("#load").setInputFiles(new Path[]{Paths.get("pom.xml"), Paths.get("demo.md")});

4.８、拖拽操作

语法：Locator.dragTo()

使用场景：常见元素拖动操作

// 拖拽元素

page.locator("#A").dragTo(page.locator(".container ul:nth-of-type(2)"));

4.９、悬浮操作

语法：Locator.hover()

使用场景：常见元素悬浮操作

//悬浮

page.locator("#action").hover();

欢迎关注公众号，与Joker一起探索测试之道。

参考链接：



PlayWright教程--新手篇

本文章已经生成可运行项目
一文掌握 Playwright 的详细使用
数据知道的博客
02-25 9556
Playwright 是一个功能强大的浏览器自动化工具，适用于网页自动化测试、数据抓取和网页交互。通过掌握其基础用法和高级功能，你可以轻松实现各种浏览器自动化任务。Playwright 支持多浏览器、多语言，并且具有高效的异步操作能力，是现代浏览器自动化的首选工具之一。
playwright基本入门必备知识点
LYJbao的博客
04-23 808
Playwright中，当我们定位元素后，对元素进行操作。如果说当时根据定位条件，找不到这个元素，Playwright并不会立即抛出错误，而是缺省等待元素时间为30s,在30秒内如果元素出现了，就立即操作成功返回~css selector定位和xpath定位，只介绍在Playwright写法哈~ 具体的细节语法其实和selenium中学到是一样的~方法创建的一个元素定位器（Element Locator）对象。通过这个对象来执行各种操作，如点击、输入等操作~
【0基础学爬虫】爬虫基础之自动化工具 Playwright 的使用
K哥爬虫
04-28 4153
上期文章中讲到了自动化工具 Selenium 的基本使用方法，也介绍了 Selenium 的优缺点。Selenium的功能非常强大，支持所有现代浏览器。但是 Selenium 使用起来十分不方便，我们需要提前安装好浏览器，然后下载对应版本的驱动文件，当浏览器更新后驱动文件也得随之更新。如果想要大规模且长期的采集数据，那么部署 Selenium 时环境配置会是一个大问题。因此本期我们将介绍一款更加好用的自动化工具 Playwright。
【Python学习】【自动化测试】使用playwright进行网页自动化测试
m0_59162248的博客
11-02 2308
【Python学习】【自动化测试】使用playwright进行网页自动化测试
1小时搞定跨浏览器测试！零基础玩转Playwright自动化
霍格沃兹测试学院的博客
07-04 928
Playwright是由微软开发的现代化端到端测试框架，支持Chromium、Firefox和WebKit三大浏览器引擎，提供Python、JavaScript等多语言API。其核心优势包括自动等待机制减少不稳定测试、内置录制器和网络拦截等调试工具，以及原生并行测试支持。安装仅需pip安装库和浏览器内核，通过sync/async API即可编写测试脚本，推荐使用智能定位器和事件等待替代强制等待。高级功能涵盖设备模拟、状态复用和请求拦截，结合pytest可实现完整测试套件。相比传统方案，Playwright基
强大易用！新一代爬虫利器 Playwright 的介绍
m0_58477260的博客
03-19 6133
Playwright 是微软在 2020 年初开源的新一代自动化测试工具，它的功能类似于 Selenium、Pyppeteer 等，都可以驱动浏览器进行各种自动化操作。它的功能也非常强大，对市面上的主流浏览器都提供了支持，API 功能简洁又强大。虽然诞生比较晚，但是现在发展得非常火热。因为 Playwright 是一个类似 Selenium 一样可以支持网页页面渲染的工具，再加上其强大又简洁的 API，Playwright 同时也可以作为网络爬虫的一个爬取利器。
Playwright教程
松勤软件测试 分享不同阶段的测试经验资料
05-25 1193
在Chromium，Firefox和WebKit上进行测试。Playwright拥有适用于所有现代浏览器的完整API覆盖，包括Google Chrome和Microsoft Edge（带有Chromium），Apple Safari（带有WebKit）和Mozilla Firefox。跨平台的WebKit测试。使用Playwright，使用适用于Windows，Linux和macOS的WebKit构建，测试您的应用程序在Apple Safari中的行为。在本地和CI上进行测试。测试手机。
playwright教程 （一）适合小白
热门推荐
weixin_45674080的博客
06-24 1万+
playwright工具结合xlwt，将所需数据生成excel表格，博主也是小白，第一次写博文，适合小白观看。
Playwright Python 教程：网页自动化
最新发布
欢迎大家一起攻克bug
07-11 689
Playwright是一款功能强大的网页自动化工具，支持多种语言和浏览器。它比Selenium速度更快，比Puppeteer支持更全面的浏览器。摘要介绍了Playwright的安装、核心对象、基本操作流程以及典型应用场景，包括浏览器控制、页面交互、内容提取等关键功能。通过4个实用案例（自动登录、商品爬取、无限滚动处理和文件下载）展示了其实际应用能力。Playwright特别适合自动化测试、网页爬虫等场景，具有自动等待机制、网络请求拦截和设备模拟等独特优势。
【AI技术前站】playwright自动化测试技术入门与精通
春天的波菜
05-06 1165
获取匹配的第3个元素page.locator("影子节点 >> 内部定位表达式")
playwright 教程高级篇：掌握网页自动化与验证码处理等关键技术详解
weixin_46001686的博客
04-13 908
启动浏览器：创建持久化上下文，保存会话并配置伪装。复用页面：使用默认页面保持效率。规避检测：修改属性，隐藏自动化痕迹。访问网页：加载页面并等待稳定。用户提示：显示非模态置顶提示，等待登录确认。填写表单：输入数据至字段。点击按钮：触发操作推进流程。短暂等待：为动态内容留出时间。检查窗口：轮询验证码出现。等待元素：确认关键元素可见。截取图像：保存验证码图片。拖动滑块：模拟人类操作解决验证码。验证成功：检查任务完成。关闭浏览器：保存数据并清理。处理 iframe：应对复杂网页结构。
playwright教程
07-15
下面是一个简单的Playwright教程： 1. 安装Playwright: 首先，你需要安装Playwright。你可以通过运行以下命令来安装Playwright的Node.js库： ``` npm i playwright ``` 2. 创建一个Playwright脚本： 创建一个...
Playwright快速入门（TypeScript版）
云泽野の编程日记
09-14 1493
Playwright 相比 Selenium，具有多浏览器支持、现代化 API、更快性能、精细页面控制、自动等待元素、简单文件上传、强大网络层控制等优势，提供了更好的开发者体验。这些特性都大大提升了开发者的使用体验和测试效率。本文的内容大多来自官网，如有问题，可查看官方文档。Playwright Test 是专门为了满足端到端测试的需求而创建的。Playwright 支持所有现代渲染引擎，包括 Chromium、WebKit 和 Firefox。
playwright入门--相知（脚本录制篇）
m0_54701273的博客
04-29 2782
Playwright 提供了一个名为playwright-cli的命令行工具，其中包含一个强大的功能：能够录制用户在浏览器中的操作并自动生成 Playwright 测试脚本。这极大地简化了测试脚本的编写过程，特别是对于不熟悉编程的测试同学来说。
一、playwright入门篇-基础知识
一个间歇性踌躇满志,持续性混吃等死的小菜鸟
01-31 7134
playwright第一篇，基础篇作为入门
自动化测试工具playwright中文文档-------1.编写测试
2301_76646967的博客
08-05 1917
Playwright 测试非常简单，它们执行操作，并断言状态是否符合预期。在执行任何操作之前，无需等待任何内容：Playwright 在执行每个操作之前会自动等待一系列可操作性检查通过。此外，在执行检查时也不需要处理竞态条件——Playwright 的断言设计方式能够描述最终需要满足的期望。就这样！这些设计选择允许 Playwright 用户完全忘记他们测试中的不稳定超时和竞态检查。您将学习如何编写第一个测试如何执行操作如何使用断言测试如何在隔离环境中运行如何使用测试钩子。
自动化测试工具playwright中文文档-------8.操作
2301_76646967的博客
08-12 1388
Playwright 可以与 HTML 输入元素（如文本输入框、复选框、单选按钮、选择选项）进行交互，也可以执行鼠标点击、输入字符、按键和快捷键操作，以及上传文件和聚焦元素等操作。
自动化测试工具playwright中文文档-------2.生成测试
2301_76646967的博客
08-06 1434
Playwright 内置了生成测试的能力，是快速开始测试的一个绝佳方式。它会打开两个窗口：一个浏览器窗口，用于与您希望测试的网站进行交互；另一个是 Playwright Inspector检查器窗口，您可以在其中录制测试、复制测试、清除测试以及更改测试的语言。您将学习：如何录制测试如何生成定位器（Locators）
自动化测试工具playwright中文文档-------7.开始使用
2301_76646967的博客
08-09 2266
这意味着在Windows平台上，如果你使用的是Python 3.7或更低版本，并且希望使用Playwright，那么你可能需要确保你的代码或Playwright的某些部分能够正确设置事件循环为ProactorEventLoop，以便能够支持异步子进程。不过，请注意，从Python 3.8开始，这通常是自动处理的，因此不需要额外设置。如果这不可行，你可能需要考虑在打包之前手动下载浏览器并将其放置在 Playwright 能够找到的位置，但这通常不是推荐的做法，因为它增加了打包的复杂性和可执行文件的大小。
playwright
06-04
### Playwright 使用指南与示例代码 Playwright 是一个由微软开发的用于自动化浏览器操作的工具，支持 Chromium、Firefox 和 WebKit 等多种浏览器引擎。它提供了强大的功能来帮助开发者进行端到端测试和网页抓取。以下是 Playwright 的使用指南和一些示例代码。 #### 1. 安装 Playwright 在开始之前，需要确保已安装 Node.js 或 Python 环境。以下是安装 Playwright 的方法： 对于 **Node.js** 用户： ```bash npm install playwright ``` 对于 **Python** 用户： ```bash pip install playwright playwright install ``` #### 2. 基本概念 Playwright 的核心概念包括浏览器实例、页面对象和上下文管理器。通过这些组件，可以实现对网页的交互和测试[^1]。 #### 3. 示例代码 ##### (1) Node.js 示例代码 以下是一个简单的 Node.js 示例，演示如何启动浏览器并访问指定网站： ```javascript const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch(); // 启动浏览器 const context = await browser.newContext(); // 创建新的浏览器上下文 const page = await context.newPage(); // 打开新页面 await page.goto('https://example.com'); // 访问目标网址 console.log(await page.title()); // 输出网页标题 await browser.close(); // 关闭浏览器 })(); ``` ##### (2) Python 示例代码 以下是 Python 版本的示例代码，展示如何使用 Playwright 进行基本操作： ```python from playwright.sync_api import sync_playwright with sync_playwright() as p: browser = p.chromium.launch() # 启动浏览器 page = browser.new_page() # 打开新页面 page.goto("https://example.com") # 访问目标网址 print(page.title()) # 输出网页标题 browser.close() # 关闭浏览器 ``` #### 4. 高级功能 Playwright 支持许多高级功能，例如截图、视频录制、表单填写和等待特定条件等。 - **截图**：可以轻松捕获当前页面的快照。 ```python page.screenshot(path="example.png") ``` - **表单填写**：自动填充表单字段。 ```python page.fill("input[name='username']", "testuser") page.fill("input[name='password']", "testpassword") page.click("button[type='submit']") ``` - **等待元素加载**：等待特定元素出现在页面上。 ```python page.wait_for_selector("text=Hello, World!") ``` #### 5. 测试框架集成 Playwright 可以与主流测试框架（如 Jest、Mocha、pytest）无缝集成，用于编写端到端测试用例[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Joker测试

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值