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

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

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

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

Python

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

Java

确定安装Java（8+）和Maven。

使用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

在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#）

确定安装.NET SDK（6.0+）。
创建新的控制台应用程序：dotnet new console -n MyPlaywrightProject
进入项目目录：cd MyPlaywrightProject
添加编剧包：dotnet add package Microsoft.Playwright
安装器二进制文件浏览：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最强大的功能之一，可以帮助快速生成脚本成分。

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

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 完成了第一个自动化脚本。

下一步学习方向：

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

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