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

晚枫~2025-10-14 18:14

**本文目标：**实现零基础开发者，使用自己熟悉的语言（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快速创建项目：

    v-md-hljs-bash 复制代码 
    mvn archetype:generate -DgroupId=com.mycompany -DartifactId=my-playwright-project -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false
cd my-playwright-project

  3. 在pom.xml文件中添加Playwright依赖：

    v-md-hljs-xml 复制代码 
    <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（异步/等待方式）

v-md-hljs-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

v-md-hljs-python 复制代码 
# first_test.py
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    # 1. 启动浏览器
    browser = p.chromium.launch(headless=False)
    # 2. 创建页面
    page = browser.new_page()
    
    # 3. 导航到 Bing
    page.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

v-md-hljs-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. 导航到 Bing
            page.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#）

v-md-hljs-csharp 复制代码 
// 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. 导航到 Bing
        await 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 使用不同的浏览器

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

v-md-hljs-javascript 复制代码 
// 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/）

相关推荐
寒秋丶1 分钟前
Milvus：Schema详解（四）
数据库·人工智能·python·ai·ai编程·milvus·向量数据库
琉-璃6 分钟前
vue3+ts 任意组件间的通信 mitt的使用
前端·javascript·vue.js
梨轻巧7 分钟前
pyside6常用控件:QComboBox() 下拉菜单
python
嵌入式-老费17 分钟前
自己动手写深度学习框架（快速学习python和关联库）
开发语言·python·学习
一月是个猫31 分钟前
MCP协议之天气演练
python·mcp
李辉200333 分钟前
Python逻辑运算符
java·网络·python
lzptouch1 小时前
Django项目
后端·python·django
小杨梅君1 小时前
探索现代 CSS 色彩：从 HSL 到 OKLCH，打造动态色阶
前端·javascript·css
刺客_Andy1 小时前
React 第五十一节 Router中useOutletContext的使用详解及注意事项
前端·javascript·react.js
明达智控技术1 小时前
MR30分布式IO在自动上料机的应用
分布式·物联网·自动化
热门推荐
01GitHub 镜像站点02《大数据技术原理与应用》实验报告三 熟悉HBase常用操作03UV安装并设置国内源04综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件05BongoCat - 跨平台键盘猫动画工具06Linux下V2Ray安装配置指南07jdk21下载、安装（Windows、Linux、macOS）08NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南09npm使用国内淘宝镜像的方法10GitLab 零基础入门指南：从安装到项目管理全流程