Learning Path

Playwright tutorials

Browse tutorials and chapters for Playwright.

DevOps & tools

Linux, Docker, Git, IDEs, automated testing, CLIs, and engineering tools.

Tutorials

TUTORIALDevOps & toolsFetched/Playwright

Playwright Locator 类 API

Playwright Locator 类 API Locator 是 Playwright 的定位器对象，提供链式筛选、操作和断言。 Locator 操作方法方法说明 locator.click(options?)点击元素 locator.dblclick(options?)双击元素 locator.hover(options?)鼠标悬停 locator.fill(value, options?)清空并填入文本 locator...

TUTORIALDevOps & toolsFetched/Playwright

Playwright 定位器（Locators）

Playwright 定位器（Locators） Locator（定位器）是 Playwright 中最核心的概念之一，它代表了一种在页面上查找元素的方式。本章介绍 Playwright 推荐的定位方法：通过角色、文本、标签和占位符来定位元素。什么是 Locator Locator 是 Playwright 用来在页面上查找元素的抽象对象。与传统的 document.querySelector() 不同，Playwright ..

TUTORIALDevOps & toolsFetched/Playwright

Playwright 移动端测试

Playwright 移动端测试 Playwright 移动端测试，主要包括模拟移动设备、地理位置、权限控制等功能。 Playwright 除了能模拟桌面浏览器，还支持移动端设备测试，包括：模拟不同手机型号（屏幕大小、分辨率、UA 等）模拟触摸事件（点击、滑动、长按）模拟地理位置（GPS）模拟权限（摄像头、定位、通知）这让我们能在 PC 上测试出接近真实手机的效果。模拟设备 Playw..

TUTORIALDevOps & toolsFetched/Playwright

Playwright 网络拦截

Playwright 网络拦截 Playwright 的网络拦截 (Network Interception) 是自动化测试和爬虫场景中非常有用的能力，可以让我们拦截、修改、模拟网络请求与响应。 Playwright 提供了 page.route() 和 page.on('request') / page.on('response') 等 API，可以：拦截请求：决定是否放行、修改 ..

TUTORIALDevOps & toolsFetched/Playwright

Playwright 网络拦截与 Mock

Playwright 网络拦截与 Mock 本章介绍如何使用 Playwright 拦截、修改和模拟网络请求，实现不依赖后端 API 的独立测试。什么是网络拦截网络拦截允许你在浏览器发起 HTTP 请求时进行干预。你可以阻止请求、修改响应、返回模拟数据，让测试不依赖外部 API 或网络状态。 page.route() 拦截请求 page.route(url, handler) 用于拦截匹配指定 URL 模式的所有网络请求。..

TUTORIALDevOps & toolsFetched/Playwright

Playwright 网络监控与 API 测试

Playwright 网络监控与 API 测试本章介绍如何监控浏览器网络流量，以及使用 Playwright 进行独立的 API 测试。监听网络请求与响应 page.on('request') 监听请求实例 [mycode4 type='javascript'] test('监控网络请求', async ({ page }) => { const r..

TUTORIALDevOps & toolsFetched/Playwright

Playwright 其他 API

Playwright 其他 API 本附录列出 Dialog、Download、Video、Tracing 等辅助类的 API。 Dialog 类方法说明 dialog.accept(promptText?)确认弹窗 dialog.dismiss()取消弹窗 dialog.message()弹窗消息 dialog.type()弹窗类型：'alert' | 'confirm' | '..

TUTORIALDevOps & toolsFetched/Playwright

Playwright Page 类 API 参考

Playwright Page 类 API 参考 Page 是 Playwright 中最常用的类，提供页面交互的全部方法。导航方法方法说明 page.goto(url, options?)导航到 URL page.goBack(options?)后退 page.goForward(options?)前进 page.reload(options?)刷新页面定位器方法方法说明 page.getByRole(role,..

TUTORIALDevOps & toolsFetched/Playwright

Playwright 页面操作基础

Playwright 页面操作基础本章节我们来了解下 Playwright 如何与网页进行实际交互及最常用的页面操作 API。页面导航页面导航是最常见的操作，Playwright 提供了多个 API 来打开、刷新和控制页面的跳转。 1. 打开网页（page.goto） await page.goto('https://example.com'); 常用参数： url：要访问的地址 time..

TUTORIALDevOps & toolsFetched/Playwright

Playwright 并行、分片与重试

Playwright 并行、分片与重试本章介绍 Playwright 的并行执行策略、分片运行和失败重试机制，帮助你高效运行大规模测试套件。并行执行 Playwright 默认使用多个 Worker 进程并行运行测试，充分利用多核 CPU。 fullyParallel 配置 fullyParallel 控制同一文件内的测试是否并行执行。实例 [mycode4 type='javascript'] /..

TUTORIALDevOps & toolsFetched/Playwright

Playwright 页面对象模型（POM）

Playwright 页面对象模型（POM）本章介绍页面对象模型（Page Object Model）的设计思想和实现方式，帮助你组织大型测试套件。什么是 POM 页面对象模型是一种测试设计模式，将页面的元素和操作封装到独立的类中。每个页面对象代表 Web 应用中的一个页面或组件，包含该页面的定位器和操作方法。 POM 的优势优势说明简化测试编写测试代码使用高层 API（如 loginPage.login('..

TUTORIALDevOps & toolsFetched/Playwright

Playwright 项目结构

Playwright 项目结构成功初始化 Playwright 项目后，你的项目目录中会生成一系列文件和文件夹，本章详细解读每个部分的用途。初始化的项目结构一览运行 npm init playwright@latest 后，项目目录中会生成以下结构： your-project/ ├── playwright.config.ts # Playwright 配置文件 ├── package.json ..

TUTORIALDevOps & toolsFetched/Playwright

Playwright 多项目配置（Projects）

Playwright 多项目配置（Projects）本章介绍如何通过 Projects 配置在多个浏览器和设备上运行测试，以及项目依赖的用法。什么是 Project 在 Playwright 中，一个 Project 代表一组在特定浏览器和设备配置下运行的测试。通过配置多个 Project，你可以用同一套测试代码在 Chromium、Firefox、WebKit 以及移动端设备上运行。基础多浏览器配置实例 [my..

TUTORIALDevOps & toolsFetched/Playwright

Playwright 运行测试

Playwright 运行测试本章全面介绍 Playwright 测试的运行方式、命令行参数以及各种筛选技巧。基本运行命令实例 [mycode4 type='bash'] # 运行所有测试 npx playwright test # 默认使用 package.json 中配置的项目 npm test [/mycode4] 筛选特定测试按文件路径 # 运行单个测试文件 npx play..

TUTORIALDevOps & toolsFetched/Playwright

Playwright 截图与视频

Playwright 截图与视频本章介绍如何使用 Playwright 进行截图和视频录制，帮助你在测试失败时快速定位问题。 page.screenshot() 截图全页面截图实例 [mycode4 type='javascript'] // 保存到文件 await page.screenshot({ path: 'screenshots/runoob-homepage.png'..

TUTORIALDevOps & toolsFetched/Playwright

Playwright VS Code 开发环境配置

Playwright VS Code 开发环境配置 Playwright 开发推荐用 VS Code，因为它对 JavaScript/TypeScript、调试器、扩展支持都很强大。安装 VS Code 前往 VS Code 官网下载并安装。安装完成后，建议同时装上中文语言包（扩展市场搜索 Chinese (Simplified)）。 VS Code 相关内容参考：https://www.runoob.co..

TUTORIALDevOps & toolsFetched/Playwright

Playwright Test 与 Reporter API

Playwright Test 与 Reporter API 本附录列出 Playwright Test Runner 的配置、Fixture、Reporter 等 API。 Test 函数方法说明 test(name, fn)定义测试 test.describe(name, fn)定义测试分组 test.describe.serial(name, fn)串行测试分组 test.describe.parallel(name, f..

TUTORIALDevOps & toolsFetched/Playwright

Playwright 测试结构与钩子

Playwright 测试结构与钩子本章介绍 Playwright 测试的组织方式，包括测试分组、执行控制以及生命周期钩子的用法。 test.describe() 测试分组 test.describe() 用于将相关的测试组织在一起，形成逻辑分组。实例 [mycode4 type='javascript'] // 文件路径：tests/describe-demo.spec.ts import { tes..

TUTORIALDevOps & toolsFetched/Playwright

Playwright Test

Playwright Test Playwright 除了作为浏览器自动化工具，还自带了一个完整的测试框架 —— Playwright Test。 Playwright Test 可以帮助我们组织测试用例、生成报告、并行执行、失败重试，功能完备，开箱即用。 Playwright Test 是一个集成的测试框架，无需额外依赖。配置文件可设置超时、重试、报告、浏览器项目等。测试用例支持分组、钩子..

TUTORIALDevOps & toolsFetched/Playwright

Playwright 教程

Playwright 教程 Playwright 是微软（Microsoft）在 2020 年推出的一个开源项目，用于 Web 自动化和端到端（End-to-End）测试的开源框架。 Playwright支持多种浏览器（Chromium、Firefox 和 WebKit）和多种编程语言（JavaScript/TypeScript、Python、Java 和 .NET），旨在提供可靠、快速且功能丰富的自动化测试解决方案。学..

TUTORIALDevOps & toolsFetched/Playwright

Playwright 视觉回归测试

Playwright 视觉回归测试本章介绍 Playwright 的视觉回归测试功能，通过截图对比检测 UI 的意外变化。什么是视觉回归测试视觉回归测试（Visual Regression Testing）通过比较当前截图与基准截图（Golden File）之间的像素差异，检测页面的 UI 变化。当某个 CSS 改动意外影响了其他页面的布局时，视觉回归测试能直接捕获这个问题。 expect(page).toHaveScr..

TUTORIALDevOps & toolsFetched/Playwright

Playwright 自动等待与超时

Playwright 自动等待与超时本章深入介绍 Playwright 的自动等待机制，以及手动等待和超时配置的完整知识。为什么需要自动等待现代 Web 应用大量使用异步渲染，页面内容不会瞬间全部加载完毕。传统测试框架中，开发者不得不写 sleep 或 waitFor 来等待，但这些操作不够灵活，要么等待太久拖慢测试，要么等待不够导致 flaky。 Playwright 将等待逻辑内置到每个 Locator 和 Action..