Learning Path
浏览 Playwright 相关教程与章节。
Linux、Docker、Git、IDE、自动化测试、命令行与工程工具。
教程
46
Playwright Locator 类 API Locator 是 Playwright 的定位器对象，提供链式筛选、操作和断言。 Locator 操作方法 方法说明 locator.click(options?)点击元素 locator.dblclick(options?)双击元素 locator.hover(options?)鼠标悬停 locator.fill(value, options?)清空并填入文本 locator...
Playwright 定位器（Locators） Locator（定位器）是 Playwright 中最核心的概念之一，它代表了一种在页面上查找元素的方式。 本章介绍 Playwright 推荐的定位方法：通过角色、文本、标签和占位符来定位元素。 什么是 Locator Locator 是 Playwright 用来在页面上查找元素的抽象对象。 与传统的 document.querySelector() 不同，Playwright ..
Playwright 移动端测试 Playwright 移动端测试，主要包括模拟移动设备、地理位置、权限控制等功能。 Playwright 除了能模拟桌面浏览器，还支持 移动端设备测试，包括： 模拟不同手机型号（屏幕大小、分辨率、UA 等） 模拟触摸事件（点击、滑动、长按） 模拟地理位置（GPS） 模拟权限（摄像头、定位、通知） 这让我们能在 PC 上测试出接近真实手机的效果。 模拟设备 Playw..
Playwright 网络拦截 Playwright 的网络拦截 (Network Interception) 是自动化测试和爬虫场景中非常有用的能力，可以让我们拦截、修改、模拟网络请求与响应。 Playwright 提供了 page.route() 和 page.on('request') / page.on('response') 等 API，可以： 拦截请求：决定是否放行、修改 ..
Playwright 网络拦截与 Mock 本章介绍如何使用 Playwright 拦截、修改和模拟网络请求，实现不依赖后端 API 的独立测试。 什么是网络拦截 网络拦截允许你在浏览器发起 HTTP 请求时进行干预。 你可以阻止请求、修改响应、返回模拟数据，让测试不依赖外部 API 或网络状态。 page.route() 拦截请求 page.route(url, handler) 用于拦截匹配指定 URL 模式的所有网络请求。..
Playwright 网络监控与 API 测试 本章介绍如何监控浏览器网络流量，以及使用 Playwright 进行独立的 API 测试。 监听网络请求与响应 page.on('request') 监听请求 实例 [mycode4 type='javascript'] test('监控网络请求', async ({ page }) => { const r..
Playwright 其他 API 本附录列出 Dialog、Download、Video、Tracing 等辅助类的 API。 Dialog 类 方法说明 dialog.accept(promptText?)确认弹窗 dialog.dismiss()取消弹窗 dialog.message()弹窗消息 dialog.type()弹窗类型：'alert' | 'confirm' | '..
Playwright Page 类 API 参考 Page 是 Playwright 中最常用的类，提供页面交互的全部方法。 导航方法 方法说明 page.goto(url, options?)导航到 URL page.goBack(options?)后退 page.goForward(options?)前进 page.reload(options?)刷新页面 定位器方法 方法说明 page.getByRole(role,..
Playwright 页面操作基础 本章节我们来了解下 Playwright 如何与网页进行实际交互及最常用的页面操作 API。 页面导航 页面导航是最常见的操作，Playwright 提供了多个 API 来打开、刷新和控制页面的跳转。 1. 打开网页（page.goto） await page.goto('https://example.com'); 常用参数： url：要访问的地址 time..
Playwright 并行、分片与重试 本章介绍 Playwright 的并行执行策略、分片运行和失败重试机制，帮助你高效运行大规模测试套件。 并行执行 Playwright 默认使用多个 Worker 进程并行运行测试，充分利用多核 CPU。 fullyParallel 配置 fullyParallel 控制同一文件内的测试是否并行执行。 实例 [mycode4 type='javascript'] /..
Playwright 页面对象模型（POM） 本章介绍页面对象模型（Page Object Model）的设计思想和实现方式，帮助你组织大型测试套件。 什么是 POM 页面对象模型是一种测试设计模式，将页面的元素和操作封装到独立的类中。 每个页面对象代表 Web 应用中的一个页面或组件，包含该页面的定位器和操作方法。 POM 的优势 优势说明 简化测试编写测试代码使用高层 API（如 loginPage.login('..
Playwright 项目结构 成功初始化 Playwright 项目后，你的项目目录中会生成一系列文件和文件夹，本章详细解读每个部分的用途。 初始化的项目结构一览 运行 npm init playwright@latest 后，项目目录中会生成以下结构： your-project/ ├── playwright.config.ts # Playwright 配置文件 ├── package.json ..
Playwright 多项目配置（Projects） 本章介绍如何通过 Projects 配置在多个浏览器和设备上运行测试，以及项目依赖的用法。 什么是 Project 在 Playwright 中，一个 Project 代表一组在特定浏览器和设备配置下运行的测试。 通过配置多个 Project，你可以用同一套测试代码在 Chromium、Firefox、WebKit 以及移动端设备上运行。 基础多浏览器配置 实例 [my..
Playwright 运行测试 本章全面介绍 Playwright 测试的运行方式、命令行参数以及各种筛选技巧。 基本运行命令 实例 [mycode4 type='bash'] # 运行所有测试 npx playwright test # 默认使用 package.json 中配置的项目 npm test [/mycode4] 筛选特定测试 按文件路径 # 运行单个测试文件 npx play..
Playwright 截图与视频 本章介绍如何使用 Playwright 进行截图和视频录制，帮助你在测试失败时快速定位问题。 page.screenshot() 截图 全页面截图 实例 [mycode4 type='javascript'] // 保存到文件 await page.screenshot({ path: 'screenshots/runoob-homepage.png'..
Playwright VS Code 开发环境配置 Playwright 开发推荐用 VS Code，因为它对 JavaScript/TypeScript、调试器、扩展支持都很强大。 安装 VS Code 前往 VS Code 官网 下载并安装。 安装完成后，建议同时装上 中文语言包（扩展市场搜索 Chinese (Simplified)）。 VS Code 相关内容参考：https://www.runoob.co..
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..
Playwright 测试结构与钩子 本章介绍 Playwright 测试的组织方式，包括测试分组、执行控制以及生命周期钩子的用法。 test.describe() 测试分组 test.describe() 用于将相关的测试组织在一起，形成逻辑分组。 实例 [mycode4 type='javascript'] // 文件路径：tests/describe-demo.spec.ts import { tes..
Playwright Test Playwright 除了作为浏览器自动化工具，还自带了一个 完整的测试框架 —— Playwright Test。 Playwright Test 可以帮助我们组织测试用例、生成报告、并行执行、失败重试，功能完备，开箱即用。 Playwright Test 是一个 集成的测试框架，无需额外依赖。 配置文件可设置 超时、重试、报告、浏览器项目等。 测试用例支持 分组、钩子..
Playwright 教程 Playwright 是微软（Microsoft） 在 2020 年推出的一个开源项目，用于 Web 自动化和端到端（End-to-End）测试的开源框架。 Playwright支持多种浏览器（Chromium、Firefox 和 WebKit）和多种编程语言（JavaScript/TypeScript、Python、Java 和 .NET），旨在提供可靠、快速且功能丰富的自动化测试解决方案。 学..
Playwright 视觉回归测试 本章介绍 Playwright 的视觉回归测试功能，通过截图对比检测 UI 的意外变化。 什么是视觉回归测试 视觉回归测试（Visual Regression Testing）通过比较当前截图与基准截图（Golden File）之间的像素差异，检测页面的 UI 变化。 当某个 CSS 改动意外影响了其他页面的布局时，视觉回归测试能直接捕获这个问题。 expect(page).toHaveScr..
Playwright 自动等待与超时 本章深入介绍 Playwright 的自动等待机制，以及手动等待和超时配置的完整知识。 为什么需要自动等待 现代 Web 应用大量使用异步渲染，页面内容不会瞬间全部加载完毕。 传统测试框架中，开发者不得不写 sleep 或 waitFor 来等待，但这些操作不够灵活，要么等待太久拖慢测试，要么等待不够导致 flaky。 Playwright 将等待逻辑内置到每个 Locator 和 Action..