Learning Path
浏览 Playwright 相关教程与章节。
Linux、Docker、Git、IDE、自动化测试、命令行与工程工具。
教程
46
Playwright 教程 Playwright 是微软（Microsoft） 在 2020 年推出的一个开源项目，用于 Web 自动化和端到端（End-to-End）测试的开源框架。 Playwright支持多种浏览器（Chromium、Firefox 和 WebKit）和多种编程语言（JavaScript/TypeScript、Python、Java 和 .NET），旨在提供可靠、快速且功能丰富的自动化测试解决方案。 学..
Playwright 网络与输入 API 本附录列出网络请求、键盘、鼠标和触控相关的 API。 Request 类 方法说明 request.url()请求 URL request.method()请求方法（GET/POST 等） request.headers()请求头 request.postData()POST 请求的 body 数据 request.postDataJSON()POST 请求的 JSON body requ..
Playwright 操作（Actions） 本章介绍 Playwright 中与导航和点击相关的操作，以及操作背后的自动等待机制。 什么是 Action Action（操作）是 Playwright 中用来模拟用户行为的方法，比如点击按钮、输入文字、选择下拉框。 每个 Action 在执行之前，Playwright 会自动等待目标元素变为可操作状态。 Actionability 可操作性检查 在执行每个操作前，Playwrig..
Playwright 高级页面操作 本章节我们将介绍 Playwright 高级页面操作，这部分会更贴近真实测试需求，覆盖 等待机制、表单处理、弹窗对话框 等高级功能。 等待机制 Playwright 最大的优势之一就是 智能等待（auto-waiting）：大部分操作（如 click, fill）会自动等待元素可见且可操作。但在复杂场景中，仍需要手动控制等待。 1. 隐式等待（Auto-waiting） Playwright 内置..
Playwright 断言（Assertions） 本章全面介绍 Playwright 的断言体系，包括自动重试断言、通用断言以及软断言的用法。 什么是断言 断言（Assertion）用来验证测试的预期结果是否与实际结果一致。 Playwright 提供了两套断言：通用断言（来自 Jest）和自动重试断言（Playwright 独有）。 自动重试断言 vs 通用断言 自动重试断言（Async Matchers） Playwri..
Playwright 认证（Authentication） 本章介绍如何在 Playwright 中处理认证，避免每个测试都重复登录，同时保持测试的隔离性。 认证的核心问题 大多数 Web 应用的测试都需要用户登录。 如果每个测试都从头执行登录流程，会显著拖慢测试速度。 Playwright 的解决方案是：认证一次，保存状态，所有测试复用。 准备工作：.auth 目录 实例 [mycode4 type='bash..
Playwright 最佳实践 本章汇总 Playwright 测试编写和维护过程中最重要的最佳实践，帮助你编写稳定、可维护的测试。 测试哲学 测试用户可见行为 自动化测试应该验证最终用户能看到和交互的内容，而不是验证代码实现细节。 比如，测试应该验证页面上显示了正确的文本、按钮可以点击、表单提交后跳转到正确页面，而不是验证某个 JavaScript 函数的返回值或 DOM 的内部结构。 实例 [mycode4 type=&..
Playwright 测试隔离与 Browser Context 本章介绍 Playwright 的测试隔离机制和 Browser Context 的概念，这是保证测试稳定可靠的关键设计。 什么是测试隔离 测试隔离是指每个测试用例运行在完全独立的环境中，互不影响。 在 Playwright 中，每个测试自动获得一个独立的Browser Context（浏览器上下文）。 Browser Context 是什么 Browser Co..
Playwright CI/CD 集成 本章介绍如何将 Playwright 测试集成到 CI/CD 流水线中，包括 GitHub Actions 和其他常见 CI 平台。 GitHub Actions 集成 当你在 npm init playwright@latest 时选择添加 GitHub Actions，Playwright 会自动生成工作流配置。 自动生成的工作流 实例 [mycode4 type='ya..
Playwright Codegen 测试生成器 本章介绍 Playwright 的命令行测试生成器 Codegen，通过浏览器操作自动生成测试代码。 什么是 Codegen Codegen（Code Generator）是 Playwright 内置的交互式测试生成工具。 你像普通用户一样操作浏览器，Codegen 自动将你的操作转换为 Playwright 测试代码。 启动 Codegen # 基本用法：打开一个 URL..
Playwright 配置详解 本章详细介绍 playwright.config.ts 中的各项配置，让你能够根据项目需求灵活调整测试行为。 配置文件概览 playwright.config.ts 是 Playwright 的中央配置文件，所有测试运行参数都在此定义。 实例 [mycode4 type='javascript'] // 文件路径：playwright.config.ts import { d..
Playwright 核心类 API 本附录列出 Playwright 核心类的常用 API，供快速查阅。 Playwright 类 Playwright 是 Playwright Library 的入口对象。 方法/属性说明 playwright.chromium返回 Chromium 的 BrowserType 对象 playwright.firefox返回 Firefox 的 BrowserType 对象 playwrig..
Playwright 数据提取和验证 数据提取和验证是自动化测试的关键，主要包括 获取页面数据、断言验证、截图和录制，不仅能验证功能是否正确，还能辅助调试和回归测试。 元素信息获取 在测试中经常需要读取页面信息进行验证，Playwright 提供了丰富的 API。 1. 获取文本内容 实例 [mycode4 type='js'] // 获取单个元素的文本 const text = await page.textCon..
Playwright 调试工具 本章介绍 Playwright 的三大调试工具：UI Mode、Trace Viewer 和命令行 Debug 模式。 UI Mode 完整介绍 UI Mode 是 Playwright 内置的图形化测试界面，提供探索、运行和调试测试的一站式体验。 启动 UI Mode npx playwright test --ui 测试列表浏览 启动后，左侧边栏显示所有测试文件。 你可以展开每个文件和 ..
Playwright 设备与浏览器模拟 本章介绍如何在 Playwright 中模拟移动设备、地理位置、时区、语言、颜色方案等浏览器环境参数。 移动端设备模拟 Playwright 内置了大量设备预设，可以模拟各种手机和平板的视口、User-Agent 和触控行为。 使用 devices 预设 通过 devices 对象可以快速模拟特定设备。 实例 [mycode4 type='javascript'] ..
Playwright 扩展与迁移 本章介绍 Playwright 生态的扩展功能，包括 Library 脚本模式、MCP 服务、Test Agents，以及从其他框架迁移到 Playwright 的指南。 Playwright Library 脚本模式 Playwright Library 是单独的浏览器自动化库，适用于测试运行器之外的场景。 安装 npm i playwright 典型用法 实例 [mycode4 ..
Playwright 文件操作 虽然 Playwright 主要是做浏览器自动化的，但它在文件上传和下载方面也很强大，可以轻松应对前端常见的文件交互场景。 文件上传 在 Web 表单中，文件上传通常通过 <input type='file'> 完成。Playwright 提供了专门的 API 来处理： 方法一：setInputFiles() await page.setInputFiles..
Playwright 第一个脚本 在编写代码之前，理解 Playwright 的核心概念至关重要，最核心的三个对象是 Browser、BrowserContext 和 Page，这三个对象构成了你与网页交互的基础： Browser（浏览器）：这是自动化过程的起点。一个 Browser 实例代表了一个实际的浏览器，例如 Chromium、Firefox 或 WebKit。你可以启动一个浏览器，然后在其内部创建..
Playwright 测试 本章带领你编写并运行第一个 Playwright 测试，理解测试的基本组成和执行流程。 运行示例测试 初始化项目后，先运行一下自动生成的示例测试，确认一切正常： # 运行所有测试 npx playwright test 运行后你会看到类似以下的输出： Running 6 tests using 4 workers ✓ 1 [chromium] › tests/example.spec.ts:..
Playwright Fixtures 与参数化 本章介绍 Playwright 的 Fixture 机制、如何创建自定义 Fixture 以及参数化测试的技巧。 什么是 Fixture Fixture（夹具）是 Playwright 测试函数参数的依赖注入机制。 每个测试通过解构参数的方式获取所需的 Fixture（如 { page }），Playwright 负责创建和清理。 实例 [mycode4 type='..
Playwright Frame 与新窗口 本章介绍如何处理 iframe、弹窗对话框、新标签页以及 Playwright 的事件系统。 iframe 操作 Playwright 通过 frameLocator() 来定位和操作 iframe 内的元素。 page.frameLocator() 定位 iframe 实例 [mycode4 type='javascript'] test('操作 i..
Playwright 安装 Playwright 是一个 Node.js 库，所以需要我们本地安装 Node.js，如果你已经安装了可以跳过。 1、安装 Node.js Playwright 官方推荐使用 Node.js。 打开 Node.js 官网 下载并安装 LTS（长期支持版） 验证是否安装成功： node -v npm -v 能看到版本号即可。 ..
Playwright 简介Playwright 是由微软开发的一个开源 Web 自动化测试框架，用于在 Chromium、Firefox 和 WebKit 三大浏览器引擎中进行端到端测试。 简单来说，它就是一个可以帮你通过编程来控制浏览器的工具，我们可以把它想象成一个虚拟用户，它能像人一样在网页上进行各种操作，比如：点击按钮、填写表单、导航到不同的页面、截图和保存网页内容。 Playwright 是微软开源的现代浏览器自动化框架，..
Playwright JavaScript 执行 本章介绍如何在 Playwright 中执行 JavaScript 代码，包括页面上下文执行、参数传递和初始化脚本注入。 page.evaluate() 页面上下文执行 page.evaluate() 在页面的 JavaScript 环境中执行代码，可以访问 DOM 和页面全局变量。 实例 [mycode4 type='javascript'] test(&..