剧作家：浏览器自动化和测试指南-js教程-PHP中文网

剧作家：浏览器自动化和测试指南

聖光之護

发布： 2025-02-17 08:06:10

原创

719人浏览过

剧作家：浏览器自动化和测试指南

关注我的GitHub新项目！

简介

Playwright是一个强大的浏览器自动化库，用于快速、可靠且跨浏览器的测试。它支持Chromium、Firefox和WebKit，是自动化Web交互、测试应用程序和提升UI可靠性的理想工具。本指南涵盖以下内容：

安装和配置Playwright
编写和运行测试
处理身份验证
网络模拟
高级调试技巧

Playwright概述

Playwright是一个Node.js库，用于浏览器自动化。它允许您控制浏览器，与页面元素交互，截取屏幕截图，录制视频以及执行UI测试。主要功能：

支持Chromium、Firefox和WebKit
兼容Windows、macOS和Linux
快速执行
内置网络拦截和API测试功能
移动模拟和地理位置测试
...

安装Playwright

Playwright需要Node.js 14或更高版本。

使用npm安装：

<code class="bash">npm init playwright@latest</code>

登录后复制

此命令会设置Playwright，包括浏览器、测试框架和示例。

手动安装Playwright：

<code class="bash">npm install @playwright/test
npx playwright install</code>

登录后复制

此命令会安装Chromium、Firefox和WebKit浏览器。

编写和运行基本测试

让我们创建一个简单的Playwright测试，检查网页是否正确加载。

示例：打开一个网页并检查标题

创建一个测试文件：

<code class="javascript">const { test, expect } = require('@playwright/test');

test('检查网站标题', async ({ page }) => {
    await page.goto('https://example.com');
    const title = await page.title();
    expect(title).toBe('Example Domain');
});</code>

登录后复制

运行测试：

<code class="bash">npx playwright test</code>

登录后复制

Playwright默认在无头模式下运行测试。添加--headed参数可在浏览器UI中查看测试运行过程。

Playwright中的身份验证处理

许多Web应用程序需要身份验证才能访问受保护的区域。Playwright可以轻松地存储和重用身份验证会话。

示例：持久登录

<code class="javascript">test('登录并保存会话', async ({ browser }) => {
    const context = await browser.newContext();
    const page = await context.newPage();

    await page.goto('https://example.com/login');
    await page.fill('input[name="username"]', 'testuser');
    await page.fill('input[name="password"]', 'password123');
    await page.click('button[type="submit"]');

    // 保存身份验证状态
    await context.storageState({ path: 'auth.json' });
});</code>

登录后复制

这会将身份验证状态存储在auth.json文件中，以便后续测试重用该会话。

在其他测试中使用保存的会话：

<code class="javascript">test.use({ storageState: 'auth.json' });

test('访问仪表盘', async ({ page }) => {
    await page.goto('https://example.com/dashboard');
    await expect(page).toHaveText('Welcome, testuser');
});</code>

登录后复制

这避免了每次测试运行都需要登录，从而加快测试速度。

网络拦截和模拟

Playwright允许模拟API响应，使测试独立于实际服务器数据。

模拟API响应：

<code class="javascript">test('模拟API响应', async ({ page }) => {
    await page.route('https://api.example.com/user', async (route) => {
        await route.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({ id: 1, name: '模拟用户' }),
        });
    });

    await page.goto('https://example.com/profile');
    await expect(page.locator('.username')).toHaveText('模拟用户');
});</code>

登录后复制

这确保了测试即使后端出现故障也能正常运行，并且可以用于测试边缘情况和错误处理。

截取屏幕截图和录制视频

Playwright支持自动截取屏幕截图和录制视频以进行调试。

截取屏幕截图：

<code class="javascript">await page.screenshot({ path: 'screenshot.png' });</code>

登录后复制

录制视频：

在playwright.config.js中启用视频录制：

<code class="javascript">module.exports = {
  use: {
    video: 'on'
  }
};</code>

登录后复制

视频将存储在测试结果文件夹中。

并行运行测试

Playwright可以同时运行多个测试，从而加快测试速度。

一览AI编剧

创意生成+情节生成+脚本生成，AI编剧3步走，AI自动帮你搞定剧情！

查看详情

启用并行执行：

修改playwright.config.js：

<code class="javascript">module.exports = {
  use: {
    headless: true
  },
  workers: 4 // 在4个并行进程中运行测试
};</code>

登录后复制

Playwright会自动在多个浏览器实例中分配测试。

移动和地理位置测试

Playwright支持设备模拟，用于测试移动浏览器。

模拟iPhone：

<code class="javascript">const { devices } = require('@playwright/test');

test.use({ ...devices['iPhone 12'] });

test('移动测试', async ({ page }) => {
    await page.goto('https://example.com');
    await page.screenshot({ path: 'mobile.png' });
});</code>

登录后复制

devices['iPhone 12']模拟iPhone的屏幕尺寸和用户代理。

测试地理位置（GPS）：

<code class="javascript">test('测试位置', async ({ page, context }) => {
    await context.grantPermissions(['geolocation']);
    await page.setGeolocation({ latitude: 37.7749, longitude: -122.4194 }); // 旧金山
});</code>

登录后复制

这模拟了基于地理位置的应用程序的用户位置。

使用Playwright进行API测试

Playwright可以直接测试API端点。

示例：测试REST API：

<code class="javascript">test('API测试', async ({ request }) => {
    const response = await request.get('https://jsonplaceholder.typicode.com/posts/1');
    expect(response.status()).toBe(200);
    const data = await response.json();
    expect(data.id).toBe(1);
});</code>

登录后复制

request.get()获取API数据，expect(response.status()).toBe(200)确保请求成功。

Playwright调试

如果测试失败，调试可以帮助您找到问题。

使用playwright.inspect()：

<code class="javascript">await playwright.inspect();</code>

登录后复制

这会打开Playwright调试器，暂停测试执行。

在有头模式下运行：

<code class="bash">npx playwright test --headed</code>

登录后复制

这会打开一个可见的浏览器窗口。

使用slowMo减慢执行速度：

<code class="javascript">const { chromium } = require('playwright');
const browser = await chromium.launch({ headless: false, slowMo: 1000 });</code>

登录后复制

这会减慢交互速度，以便更好地调试。

在CI/CD中运行Playwright测试

Playwright与GitHub Actions、Jenkins和CircleCI等CI/CD系统集成。

GitHub Actions示例：

创建一个.github/workflows/playwright.yml文件：

<code class="yaml">name: Playwright Tests
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v2
      - name: Install Dependencies
        run: npm install
      - name: Install Browsers
        run: npx playwright install
      - name: Run Tests
        run: npx playwright test</code>

登录后复制

这会在GitHub Actions上运行测试。