深入學習playwright：從多個角度詳細探索

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：

page.click(selector[, options])：單擊匹配選擇器的元素。
page.dblclick(selector[, options])：雙擊匹配選擇器的元素。
page.fill(selector, value[, options])：在匹配選擇器的可編輯元素上設置值。
page.focus(selector)：將焦點設置在匹配選擇器的元素上。
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。

原創文章，作者：AHCDY，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/369186.html