当前位置： 首页 > news >正文

零基础快速上手Playwright自动化测试

news 2025/10/14 6:25:41

本文目标：实现零基础开发者，使用自己熟悉的语言（Java/Python/C#/JavaScript）快速上手编剧，并完成第一个端到端（E2E）自动化测试脚本。
相关知识：拥有各个目标语言的基础语法知识。
最终成果：编写一个能自动打开浏览器、访问搜索、引擎执行搜索并验证结果的脚本。

第一部分：认识Playwright

1.1 什么是Playwright？

Playwright是一个由微软开发的现代化、开源、跨浏览器的Web自动化测试框架。它的核心优势在于：

  • 跨浏览器：支持 Chromium（Chrome、Edge）、Firefox 和 WebKit（Safari），确保您的网站在所有主流浏览器上表现一致。
  • 跨平台：可在 Windows、macOS 和 Linux 上运行。
  • 跨语言：提供对TypeScript/JavaScript、Python、Java和.NET (C#)的一流支持，API 设计保持一致。
  • 自动等待：Playwright在执行操作状态前会自动等待元素可用的（如可点击、可见），手动添加sleep，使脚本更健壮。
  • 强大的工具：内置了Codegen（代码生成器）、Playwright Inspector（调试工具）和Trace Viewer（追踪查看器），极大提升开发效率。
1.2 核心架构

对于初学者来说，只需理解两个核心概念：

  • 作者：管理浏览器安装的“总管”。
  • 浏览器：一个浏览器实例（如Chrome）。
  • 页面：浏览器中的一个标签页。我们的大部分操作（如点击、输入）都在页面上进行。

工作流程：Playwright-> 启动Browser-> 创建Page-> 在Page上执行操作。

第二部分：环境搭建与项目初始化

请根据您选择的语言，完成以下步骤。

2.1 项目初始化与安装

JavaScript/TypeScript

  1. 创建一个新目录并进入：mkdir my-playwright-project && cd my-playwright-project
  2. 初始化 npm 项目：npm init -y
  3. 安装Playwright：npm init playwright@latest

安装过程中，可以选择安装哪些浏览器（推荐全选）以及是否生成示例文件（推荐是）

Python

  1. 确定安装Python（3.7+以上）。
  2. 安装编剧：pip install playwright
  3. 安装器二进制文件浏览：playwright install

Java

  1. 确定安装Java（8+）和Maven。
  2. 使用Maven Archetype快速创建项目： 
    mvn archetype:generate -DgroupId=com.mycompany -DartifactId=my-playwright-project -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false
cd my-playwright-project
  3. 在pom.xml文件中添加Playwright依赖： 
    <dependencies><dependency><groupId>com.microsoft.playwright</groupId><artifactId>playwright</artifactId><version>1.40.0</version> <!-- 请使用最新版本 --></dependency>
</dependencies>

.NET（C#）

  1. 确定安装.NET SDK（6.0+）。
  2. 创建新的控制台应用程序：dotnet new console -n MyPlaywrightProject
  3. 进入项目目录：cd MyPlaywrightProject
  4. 添加编剧包：dotnet add package Microsoft.Playwright
  5. 安装器二进制文件浏览：playwright install

第三部分：第一个实战脚本：自动化搜索

我们的目标是：打开Bing搜索，输入“Playwright”，执行搜索，并验证搜索结果页面标题包含“Playwright”。

3.1 代码实现（多语言对比）

创建一个文件（例如first_test.js，first_test.py，FirstTest.java，Program.cs），然后粘贴对应语言的代码。

JavaScript（异步/等待方式）

// first_test.js
const { chromium } = require('playwright'); // 引入 Playwright(async () => {// 1. 启动浏览器 (默认无头模式，不显示UI。要显示则使用 { headless: false })const browser = await chromium.launch({ headless: false });// 2. 创建一个新页面const page = await browser.newPage();// 3. 导航到 Bing 搜索await page.goto('https://www.bing.com');// 4. 在搜索框（选择器是 `input[name="q"]`）中输入 "Playwright"await page.fill('input[name="q"]', 'Playwright');// 5. 点击搜索按钮（选择器是 `input[type="submit"]`）await page.click('input[type="submit"]');// 6. 等待页面导航完成（可选，但推荐）await page.waitForLoadState('networkidle');// 7. 验证页面标题包含 "Playwright"const title = await page.title();if (title.includes('Playwright')) {console.log('测试通过！标题包含 Playwright。');} else {console.log('测试失败！标题不包含 Playwright。');}// 为了看清结果，等待3秒await page.waitForTimeout(3000);// 8. 关闭浏览器await browser.close();
})();

运行：node first_test.js

Python

# first_test.py
from playwright.sync_api import sync_playwrightwith sync_playwright() as p:# 1. 启动浏览器browser = p.chromium.launch(headless=False)# 2. 创建页面page = browser.new_page()# 3. 导航到 Bingpage.goto("https://www.bing.com")# 4. 输入搜索词page.fill('input[name="q"]', 'Playwright')# 5. 点击搜索page.click('input[type="submit"]')# 6. 等待导航page.wait_for_load_state("networkidle")# 7. 验证标题title = page.title()if "Playwright" in title:print("测试通过！标题包含 Playwright。")else:print("测试失败！标题不包含 Playwright。")# 等待page.wait_for_timeout(3000)# 8. 关闭浏览器browser.close()

运行：python first_test.py

Java

// FirstTest.java
import com.microsoft.playwright.*;public class FirstTest {public static void main(String[] args) {// Playwright 对象是线程安全的，建议一个线程一个实例try (Playwright playwright = Playwright.create()) {// 1. 启动浏览器Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));// 2. 创建页面Page page = browser.newPage();// 3. 导航到 Bingpage.navigate("https://www.bing.com");// 4. 输入搜索词page.fill("input[name='q']", "Playwright");// 5. 点击搜索page.click("input[type='submit']");// 6. 等待导航page.waitForLoadState(LoadState.NETWORKIDLE);// 7. 验证标题String title = page.title();if (title.contains("Playwright")) {System.out.println("测试通过！标题包含 Playwright。");} else {System.out.println("测试失败！标题不包含 Playwright。");}// 等待page.waitForTimeout(3000);// 8. 关闭浏览器browser.close();}}
}

运行：mvn compile exec:java -Dexec.mainClass="com.mycompany.FirstTest"(需根据你的包结构调整)

.NET（C#）

// Program.cs
using Microsoft.Playwright;class Program
{public static async Task Main(){using var playwright = await Playwright.CreateAsync();// 1. 启动浏览器await using var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = false });// 2. 创建页面var page = await browser.NewPageAsync();// 3. 导航到 Bingawait page.GotoAsync("https://www.bing.com");// 4. 输入搜索词await page.FillAsync("input[name='q']", "Playwright");// 5. 点击搜索await page.ClickAsync("input[type='submit']");// 6. 等待导航await page.WaitForLoadStateAsync(LoadState.NetworkIdle);// 7. 验证标题string title = await page.TitleAsync();if (title.Contains("Playwright")){Console.WriteLine("测试通过！标题包含 Playwright。");}else{Console.WriteLine("测试失败！标题不包含 Playwright。");}// 等待await page.WaitForTimeoutAsync(3000);// 8. 关闭浏览器已在 `using` 语句中自动处理}
}

运行：dotnet run

3.2 代码解析与核心API

无论使用何种语言，API的设计都高度一致：

  • browserType.launch({ headless: false })：启动一个有界面的浏览器。下拉桌面headless: false在后台无界面运行，速度更快。
  • page.goto(url)：导航到指定URL。
  • page.fill(selector, text)：在指定的输入框元素中填充文本。
  • page.click(selector)：点击指定的元素。
  • page.title()：获取当前页面的标题。
  • browser.close()：关闭浏览器。

关于选择器（Selector）：
例子中input[name="q"]是一个CSS选择器，它寻找属性为name标签。Playwright也支持XPath和基于文本的选择器，非常灵活。"q" input

第四部分：进阶工具与技巧

4.1 使用Codegen脚本脚本（强烈推荐！）

这是Playwright最强大的功能之一，可以帮助快速生成脚本成分。

  1. 在终端运行命令：npx playwright codegen(对于Python/Java/.NET，命令也是playwright codegen)
  2. 浏览器窗口和检查器窗口会打开。
  3. 在浏览器中手动操作（如输入、点击）。
  4. Inspector Window中会实时生成对应操作的代码。
  5. 将生成的代码复制到你的编辑器中，稍作修改即可使用。
4.2 使用不同的浏览器

命令修改启动浏览器的那一行代码即可：

// JavaScript
const browser = await chromium.launch(); // Chromium
const browser = await firefox.launch();  // Firefox
const browser = await webkit.launch();   // Webkit (Safari)

其他语言语法类似。

第五部分：总结与下一步

恭喜！您已经成功使用 Playwright 完成了第一个自动化脚本。

下一步学习方向：

  1. 元素定位：深入学习选择CSS器和XPath，这是自动化测试的基石。
  2. 等待策略：除了自动等待，学习使用page.waitForSelector等page.waitForNavigation更准确的等待方法。
  3. 框架集成：将 Playwright 集成到专业的测试框架中，如Jest (JS)、Pytest (Python)、JUnit (Java)、NUnit (C#)，以便管理测试用例、断言和生成报告。
  4. 高级特性：探索如何处理 iframe、文件上传下载、模拟移动设备、拦截网络请求等。

Playwright 官方文档（https://playwright.dev/）

http://www.dtcms.com/a/477384.html

相关文章：

  • ArcGIS Pro 修改单个波段的值并组合输出新的影像数据
  • Vue 脚手架（Vue CLI）
  • 自己建设网站需要花多少钱爱南宁app下载官网最新
  • 蓝牙物联网多个核心应用场景开发与应用细化分析
  • 百度装修网站郑州建设局官网
  • 服务器在线安装插件失败/离线安装VSIX
  • 大连制作网站软件厦门网站建设外贸
  • python高级04——网络编程
  • 如何选30G、60G、100G的香港高防服务器？
  • Linux IP 网络配置与管理详解
  • Prometheus监控物理服务器
  • Linux: network: 拔插网线 interface down/up测试的痛点
  • **TensorFlow：发散创新的深度学习框架探索**随着人工智
  • aws ec服务器统一为国内时间。ec 设置上海
  • 【文档】搭建 TFTP 服务器
  • 网站建设推广熊掌号衡阳市网站建设
  • JS - npm init
  • Cool Unix + OpenAuth.Net 实现一款校园小程序的开发
  • 【2025最新】ArcGIS for JS 范围裁剪(只保留特定区域显示)，实现精准地理范围聚焦
  • 还有多少用.net做网站的怎样做_网站做seo
  • Azure DevOps CI/CD 流水线中 Java 17 容器化部署 NullPointerException 解决方案
  • 【触想智能】工业安卓一体机在人工智能领域上的市场应用分析
  • Windows安装Neo4j保姆级教程（图文详解）
  • 优化分布式采集的数据同步：一致性、去重与冲突解决的那些坑与招
  • 奶茶销售数据分析
  • 数据处理常用函数
  • RISC-V 架构适配：开源 AI 工具链的跨平台编译优化全流程（附实战指南）
  • 湛江做网站从为什么用html5做网站
  • jsp网站怎么做的好看创艺装饰12万的全包房
  • HashMap实现原理（高频）