告别 Selenium：Playwright 现代 Web 自动化测试从入门到实战

优质文章学习记录

— 6 min read
告别 Selenium：Playwright 现代 Web 自动化测试从入门到实战

告别 Selenium：Playwright 现代 Web 自动化测试简明教程

前言：为什么选择 Playwright？

在 Web 自动化测试领域，Selenium 曾长期占据主流，但面对现代前端框架（React/Vue/Next.js）、复杂 SPA 应用和多端适配需求，其局限性逐渐凸显。Microsoft 推出的 Playwright 框架，凭借跨引擎、跨平台、智能化的特性，成为新一代自动化测试的优选方案。

相比于传统的 Selenium 或 Cypress，Playwright 具有以下优势：

  • 极致性能：基于浏览器上下文（Browser Context）隔离测试环境，启动速度比 Selenium 快 30%+，无冗余进程开销；
  • 智能等待：内置自适应等待机制，自动等待元素可交互，彻底告别sleep()硬编码； 全场景覆盖：支持 Chromium/Firefox/WebKit 三大引擎，Windows/Linux/macOS
    全平台，JavaScript/TypeScript/Python/Java/.NET 多语言；
  • 强大工具链：Codegen（代码自动生成）、Trace Viewer（测试追踪分析）、UI Mode（交互式调试）一站式提效；
  • 多端适配：原生支持移动端浏览器模拟，实验性支持安卓真机测试，覆盖 PC + 移动全场景。

安装

在已有 Node.js 环境的项目中，执行以下命令一键初始化 Playwright：

npm init playwright@latest

执行后，脚本会引导你完成以下配置：

  1. 选择使用 TypeScript 还是 JavaScript。
  2. 指定测试文件存放目录（默认 tests）。
  3. 是否添加 GitHub Actions 工作流。
  4. 是否安装 Playwright 浏览器（建议选择是，否则后续需要手动运行 npx playwright install）。

基础使用

编写第一个测试

Playwright 的 API 非常直观。在 tests/example.spec.ts 中：

import{ test, expect }from'@playwright/test';test('has title',async({ page })=>{await page.goto('https://playwright.dev/');// 期待标题包含 "Playwright"awaitexpect(page).toHaveTitle(/Playwright/);});test('get started link',async({ page })=>{await page.goto('https://playwright.dev/');// 点击 "Get started" 链接await page.getByRole('link',{ name:'Get started'}).click();// 期待 URL 包含 introawaitexpect(page).toHaveURL(/.*intro/);});

常见测试场景

1. 元素定位与交互

Playwright 推荐使用 page.getByRole 或 page.getByText 等面向用户的定位方式，这能使测试更具鲁棒性。

// 填写表单await page.getByLabel('用户名').fill('admin');await page.getByLabel('密码').fill('123456');// 点击按钮await page.getByRole('button',{ name:'登录'}).click();

2. 等待网络请求

在现代单页应用（SPA）中，等待特定的接口返回是非常常见的需求。

// 等待接口返回const[response]=awaitPromise.all([ page.waitForResponse(resp => resp.url().includes('/api/login')&& resp.status()===200), page.getByRole('button',{ name:'登录'}).click(),]);

3. 处理弹窗与 Iframe

Playwright 能够轻松处理 JavaScript 警告框（Dialog）和嵌套的 Iframe。

// 处理 Dialog page.on('dialog', dialog => dialog.accept());await page.getByRole('button',{ name:'删除'}).click();// 进入 Iframe 交互const frame = page.frameLocator('#my-iframe');await frame.getByText('确认提交').click();

4. 键盘输入与快捷键

Playwright 提供了非常精细的键盘模拟能力，不仅可以输入文本，还能模拟单个按键及组合键。

// 聚焦并输入文本await page.getByLabel('搜索').focus();await page.keyboard.type('Playwright',{ delay:100});// 模拟真实打字速度// 按下回车键await page.keyboard.press('Enter');// 组合键：全选并删除 (Windows/Linux 用 Control, macOS 用 Meta)await page.keyboard.press('Control+A');await page.keyboard.press('Backspace');

5. 移动端与权限模拟

Playwright 生态内置了大量的设备预设，可以轻松模拟特定的手机或平板环境，并支持精细控制地理位置、语言和系统权限。

import{ test, devices }from'@playwright/test';test('iPhone 14 移动端模拟测试',async({ browser })=>{// 使用内置设备预设const context =await browser.newContext({...devices['iPhone 14'], locale:'zh-CN', timezoneId:'Asia/Shanghai', geolocation:{ longitude:116.39, latitude:39.9}, permissions:['geolocation']// 授予地理位置权限});const page =await context.newPage();await page.goto('https://maps.google.com');// 验证页面是否根据模拟坐标显示await context.close();});

常用命令

  • 运行所有测试：npx playwright test
  • 运行指定浏览器：npx playwright test --project=chromium
  • 有界面模式（Headed）：npx playwright test --headed
  • UI 模式（推荐交互式调试）：npx playwright test --ui
  • 查看测试报告：npx playwright show-report

安卓平台测试 (实验性)

Playwright 提供了一项非常有趣的功能：直接对安卓设备上的 Chrome 或 WebView 进行自动化。

准备工作

  1. 确保已安装 ADB 并能够识别设备（adb devices）。
  2. 在安卓设备上开启“开发者模式”和“USB 调试”。
  3. 确保 Chrome (87+) 或对应的 WebView 已安装。

示例代码

const{_android: android }=require('playwright');(async()=>{// 连接到安卓设备const[device]=await android.devices(); console.log(`Model: ${device.model()}`);// 启动 Chromeawait device.shell('am force-stop com.android.chrome');const context =await device.launchBrowser();const page =await context.newPage();await page.goto('https://github.com/microsoft/playwright'); console.log(await page.title());await device.screenshot({path:'android-screenshot.png'});await context.close();await device.close();})();

注：此功能目前仍处于实验阶段。

CI 集成

Playwright 与 GitHub Actions 集成非常简单。如果你在安装时选择了添加 GitHub Actions 工作流，它会为你生成 .github/workflows/playwright.yml：

name: Playwright Tests on:push:branches:[ main, master ]pull_request:branches:[ main, master ]jobs:test:timeout-minutes:60runs-on: ubuntu-latest steps:-uses: actions/checkout@v4 -uses: actions/setup-node@v4 with:node-version: lts/* -name: Install dependencies run: npm ci -name: Install Playwright Browsers run: npx playwright install --with-deps -name: Run Playwright tests run: npx playwright test -uses: actions/upload-artifact@v4 if: always() with:name: playwright-report path: playwright-report/ retention-days:30

MCP 使用

在现代开发流程中，我们可以利用 Model Context Protocol (MCP) 将 Playwright 的自动化能力暴露给 AI Agent。

通过配置 Playwright MCP 服务，AI 可以：

  1. 自动化交互：根据自然语言描述，AI 可以在浏览器中点击、输入、导航。
  2. 错误诊断：当测试失败时，AI 可以读取追踪文件（Trace）并结合源码给出修复方案。
  3. 动态录制：让 AI 生成复杂的 Playwright 测试脚本。

要在 GitHub Copilot 或其他支持 MCP 的环境中使用，你可以：

  1. 安装插件：在 VS Code 的扩展市场中搜索 @mcp playwright 并下载安装相应的 MCP 服务器插件。
  2. 配置连接：在 GitHub Copilot 的设置中添加该 MCP 服务，授予其浏览器的控制权限。

一旦配置完成，你就可以直接在 Chat 窗口中命令 AI：“帮我打开 xxx 网站并截个图”，或者“在这个页面执行一个登录流程”。

总结

Playwright 凭借高性能、智能化、全场景覆盖的特性，完美适配现代 Web 应用的自动化测试需求。从基础的页面交互到复杂的移动端 / 真机测试，从本地调试到 CI 集成，再到 AI 协同提效，Playwright 构建了完整的自动化测试生态。相比 Selenium，它更简洁、更稳定、更贴合现代开发流程，是值得投入学习的下一代自动化测试框架。

作者：Smoothcloud润云

Read more

要成为AI的主人，而不是被它所绑架

要成为AI的主人，而不是被它所绑架

这两年，AI 编码工具确实给开发效率带来了很大提升。写脚本更快了，补测试更轻松了，搭原型更顺手了，连很多文档工作都被大幅压缩。笔者自己在持续使用 GPT-5.4 和 Claude 一段时间后，也真切感受到了这种效率红利。与此同时，随着使用越来越深入，笔者也开始经常在架构师论坛和技术社区里，围绕 AI 开发的安全性、保密性、稳定性、可控性等问题，与多位大厂架构师持续交流。讨论得越多、实践得越久，我越认同一个判断：小项目、低敏项目、单人维护项目，AI 基本没有大问题；但一旦进入多人协作、长期演进、涉及核心资产和生产责任的项目，AI 如果没有边界、规范和审计，就很容易从“效率工具”变成“失控放大器”。 很多人讨论 AI，还停留在“能不能更快把功能做出来”这个层面。但架构师的关注点从来不只是“能不能开发出来”，而是“
除了 OpenClaw，今天 AI 热榜还有什么值得看？我把 5 个重点方向讲清楚了

除了 OpenClaw，今天 AI 热榜还有什么值得看？我把 5 个重点方向讲清楚了

🔥 个人主页：杨利杰YJlio❄️ 个人专栏：《Sysinternals实战教程》《Windows PowerShell 实战》《WINDOWS教程》《IOS教程》《微信助手》《锤子助手》《Python》《Kali Linux》《那些年未解决的Windows疑难杂症》🌟 让复杂的事情更简单，让重复的工作自动化 除了 OpenClaw，今天 AI 热榜还有什么值得看？我把 5 个重点方向讲清楚了 * 除了 OpenClaw，今天 AI 热榜还有什么值得看？我把 5 个重点方向讲清楚了 * 1. 我先说结论：今天这波 AI 热榜，最重要的不是“谁最火”，而是“风向变了” * 2. GoogleCloudPlatform / generative-ai：平台生态正在成为真正的护城河 * 3. MiroFish：群体智能和多智能体，开始从概念走向更具体的产品叙事
OpenClaw深度解析：“数字龙虾”何以引爆AI Agent时代？安全危机与未来之战

OpenClaw深度解析：“数字龙虾”何以引爆AI Agent时代？安全危机与未来之战

OpenClaw深度解析：“数字龙虾”何以引爆AI Agent时代？安全危机与未来之战 一只“龙虾”，正在搅动整个科技圈。 2026年3月，一款名为OpenClaw的开源AI智能体框架在中国科技圈引发了一场前所未有的“全民养虾热”。它的GitHub星标数突破27万，超越React和Linux登顶全球开源软件项目榜。黄仁勋在GTC 2026上高呼：“这是Agent时代的Windows，每个公司都需要有OpenClaw战略”。 但与此同时，中国互联网金融协会、工信部、国家互联网应急中心接连发布安全预警。有用户因AI幻觉痛失全部邮件，有企业因恶意技能被植入后门。 这只“数字龙虾”究竟是什么？它为何能掀起滔天巨浪？又将游向何方？ 01 现象：OpenClaw引爆的“龙虾热” 2026年春天，科技圈最火的关键词无疑是OpenClaw。这款开源自动化智能体框架，让大语言模型第一次真正长出了能干活儿的“钳子”。 核心能力：从“会说话”到“会做事” 与传统对话式AI不同，OpenClaw能够直接操作浏览器、读取文件、调用API、运行脚本，甚至接入微信、飞书、钉钉等协作平台。