深入学习playwright：从多个角度详细探索

发布时间：2023-05-23

Playwright是一个Node.js库，它提供了跨浏览器自动化脚本的API。该库旨在解决现有自动化工具中的一些痛点，如浏览器安全性、可靠性和多浏览器支持。其中，它支持多种浏览器，包括 chromium、firefox、webkit，特别是对chromium更加友好。本篇文章将从多个方面详细分析playwright官网，为你揭开playwright的神秘面纱。

一、 环境搭建

既然要使用playwright，首先需要进行开发环境搭建。playwright的安装非常简单，只需在项目目录中使用npm或yarn安装playwright即可：

npm i playwright

如果不知道该选择哪个浏览器进行测试，playwright提供了一个叫做playwright install的命令行工具来安装所需浏览器。你还可以指定需要特定版本的浏览器。

npx playwright install
npx playwright install --browser=firefox
npx playwright install --channel=firefox-nightly

二、基本语法

至此，我们已经成功安装了playwright，接下来让我们来看一下playwright的基本语法。使用playwright测试网站不仅仅只是打开浏览器，还需要进行页面操作。下面我们来看一下如何使用playwright来打开谷歌，搜索内容并点击搜索结果：

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://google.com');
  await page.fill('input[name="q"]', 'playwright');
  await page.keyboard.press('Enter');
  await page.waitForSelector('a[href^="https://github.com/microsoft/playwright"]');
  await context.close();
  await browser.close();
})();

三、内置的交互模拟

在测试中，需模拟用户在浏览器上的各种交互操作，如打开url，输入内容，点击按钮等。Playwright为我们提供了一套内置的交互操作API，方便我们快速进行测试。下面我们来看一下Playwright提供的一些API：

  1. page.click(selector[, options])：单击匹配选择器的元素。
  2. page.dblclick(selector[, options])：双击匹配选择器的元素。
  3. page.fill(selector, value[, options])：在匹配选择器的可编辑元素上设置值。
  4. page.focus(selector)：将焦点设置在匹配选择器的元素上。
  5. page.hover(selector[, options])：将鼠标悬停在匹配选择器的元素上。

四、截图和录像功能

测试过程中，有时需要保存测试过程记录，特别是当测试失败时，我们需要知道是哪个部分有问题，从而进行调试和修复。Playwright提供了截图和视频录制功能来帮助我们进行记录。这些功能可以通过BrowserContext设置进行开启。例如：

const { firefox } = require('playwright');
(async () => {
  const browser = await firefox.launch({ headless: true });
  const context = await browser.newContext({
    recordVideo: {
      dir: 'path/to/videos/',
    },
    viewport: { width: 640, height: 480 },
  });
  const page = await context.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });
  await context.close();
  await browser.close();
})();

五、使用WebSocket协议

使用WebSockets协议可以实现远程调试，从而更好地调试服务器中的代码。Plawright提供了通过WebSocket远程调试的功能，让你可以在你的本地机器上调试远程浏览器中运行的测试代码。下面我们来看一下如何使用WebSocket。

const { chromium } = require('playwright');
const http = require('http');
const WebSocket = require('ws');
(async () => {
  const browser = await chromium.launch();
  const httpServer = http.createServer((req, res) => {
    res.end('Hello world!');
  });
  const wsServer = new WebSocket.Server({ server: httpServer });
  wsServer.on('connection', (socket) => {
    socket.on('message', (response) => {
      console.log('received', response); // prints 'ping'
      socket.send('pong');
    });
  });
  await httpServer.listen(0);
  const context = await browser.newContext({ devtools: true });
  const page = await context.newPage();
  const url = `ws://localhost:${httpServer.address().port}`;
  await page.goto(url);
  const message = await page.evaluate(
    ({ url }) => new Promise((resolve) => {
      const ws = new WebSocket(url);
      ws.addEventListener('open', () => ws.send('ping'));
      ws.addEventListener('message', ({ data }) => {
        console.log('received', data); // prints 'pong'
        resolve(data);
        ws.close();
      });
    }),
    { url }
  );
  console.log('result', message);
  await browser.close();
})();

六、使用playwright-test-runner进行自动化测试

Playwright Test Runner是Playwright框架下的单元测试框架，专为使用Playwright进行测试设计。该测试框架在Playwright的核心上叠加了一层易于使用的工具集，帮助用户更方便地管理测试、产生测试报告和记录测试状态。下面，我们以一个简单的搜索测试用例为例，展示如何使用Playwright Test Runner进行测试：

const { test, expect } = require('@playwright/test');
test.describe('Playwright Test Runner', () => {
  test('should work', async ({ page }) => {
    await page.goto('https://playwright.dev/');
    await page.fill('input[name="search"]', 'test');
    await page.press('input[name="search"]', 'Enter');
    await page.waitForSelector('.results-wrapper');
    const title = await page.title();
    expect(title).toBe('Search Results · Playwright');
  });
});

总结

以上就是对Playwright官网从多个方面详细介绍，包括环境搭建、基本语法、内置的交互模拟、截图和录像功能、使用WebSocket协议、使用playwright-test-runner进行自动化测试等方面。Playwright是一个非常强大的工具，具有使用方便、支持多种浏览器和可靠性高的特点，它在实际的测试和开发中也得到了广泛应用。希望此篇文章可以让你更好地理解和使用Playwright。

推荐文章