作者：京東保險(xiǎn) 張新磊

背景

在前端開發(fā)中，自動(dòng)化測(cè)試是確保軟件質(zhì)量和用戶體驗(yàn)的關(guān)鍵環(huán)節(jié)。隨著Web應(yīng)用的復(fù)雜性不斷增加，手動(dòng)測(cè)試已經(jīng)無法滿足快速迭代和持續(xù)交付的需求。自動(dòng)化測(cè)試通過模擬用戶與應(yīng)用的交互，能夠高效地執(zhí)行重復(fù)性測(cè)試任務(wù)，加快測(cè)試周期，提升測(cè)試覆蓋率，從而更早地發(fā)現(xiàn)缺陷和問題。這不僅提高了軟件的穩(wěn)定性和可靠性，還降低了維護(hù)成本，并為創(chuàng)新和功能增強(qiáng)提供了更多的時(shí)間和資源。

在眾多自動(dòng)化測(cè)試工具中，Playwright以其創(chuàng)新的特性和強(qiáng)大的功能，迅速在前端測(cè)試領(lǐng)域嶄露頭角。作為一個(gè)由微軟開發(fā)的開源項(xiàng)目，Playwright支持所有現(xiàn)代Web瀏覽器，包括Chromium、WebKit和Firefox，并能夠在Windows、Linux和macOS上運(yùn)行。它提供了統(tǒng)一的API來實(shí)現(xiàn)跨瀏覽器的測(cè)試，這意味著開發(fā)者可以編寫一次測(cè)試腳本，就能在所有支持的瀏覽器和平臺(tái)上運(yùn)行，無需為每個(gè)瀏覽器單獨(dú)編寫或調(diào)整測(cè)試用例。

Playwright的自動(dòng)等待機(jī)制、豐富的API、以及對(duì)現(xiàn)代Web特性的全面支持，使其成為了前端自動(dòng)化測(cè)試的強(qiáng)大工具。它不僅簡化了測(cè)試腳本的編寫和維護(hù)，還提高了測(cè)試的準(zhǔn)確性和可靠性。此外，Playwright的并行測(cè)試執(zhí)行能力也極大地提高了測(cè)試的效率，使其成為現(xiàn)代Web應(yīng)用開發(fā)中不可或缺的一部分。隨著越來越多的企業(yè)和開發(fā)者采用Playwright，它的影響力在前端測(cè)試領(lǐng)域不斷增強(qiáng)，正逐漸成為自動(dòng)化測(cè)試的新標(biāo)準(zhǔn)。

對(duì)比

討論P(yáng)laywright的API設(shè)計(jì)，如何支持開發(fā)者編寫簡潔而強(qiáng)大的測(cè)試腳本。

安裝

安裝Node.js和npm，Playwright需要Node.js環(huán)境，因此首先需要確保你的系統(tǒng)上安裝了Node.js和npm。可以從Node.js官網(wǎng)下載并安裝。node.js和npm安裝忽略，默認(rèn)為已安裝，如有需要安裝node.js和npm可聯(lián)系支持。

全局安裝Playwright

npm i -D playwright

安裝瀏覽器
Playwright自帶Chromium，F(xiàn)irefox和WebKit瀏覽器，無需單獨(dú)下載驅(qū)動(dòng)程序。安裝Playwright時(shí)，瀏覽器也會(huì)自動(dòng)安裝。

playwright install

配置

初始化Playwright項(xiàng)目
如果你的項(xiàng)目是一個(gè)新項(xiàng)目，可以使用以下命令來生成配置文件和安裝必要的依賴項(xiàng)。

npx playwright install

Demo

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com');
  // 添加你的測(cè)試操作...
  await browser.close();
})();

運(yùn)行測(cè)試

npx playwright test

常用API

發(fā)送get請(qǐng)求

const { request } = require('playwright');

(async () => {
  // 創(chuàng)建一個(gè)新的API請(qǐng)求上下文
  const context = await request.newContext();

  // 發(fā)送GET請(qǐng)求
  const response = await context.get(url, {
    headers: {
{      "Authorization": "Bearer "}
    },
    params: {
      query: 'value'
    }
  });

  // 檢查響應(yīng)狀態(tài)
  if (response.ok) {
    console.log('Response:', await response.json());
  } else {
    console.error('Error:', response.status());
  }

  // 釋放上下文資源
  await context.dispose();
})();

發(fā)送post請(qǐng)求

const { request } = require('playwright');

(async () => {
  // 創(chuàng)建一個(gè)新的API請(qǐng)求上下文
  const context = await request.newContext();

  // 定義POST請(qǐng)求的URL和數(shù)據(jù)
  const url = xxx;
  const data = {
    key1: 'value1',
    key2: 'value2'
  };

  // 發(fā)送POST請(qǐng)求
  const response = await context.post(url, {
    headers: {
      'Content-Type': 'application/json',
      // 如果需要身份驗(yàn)證
      'Authorization': 'Bearer '
    },
    data: JSON.stringify(data) // 對(duì)于JSON數(shù)據(jù)，需要將對(duì)象轉(zhuǎn)換為字符串
  });

  // 檢查響應(yīng)狀態(tài)
  if (response.ok) {
    console.log('Response:', await response.json()); // 假設(shè)響應(yīng)內(nèi)容是JSON格式
  } else {
    console.error('Error:', response.status());
  }

  // 釋放上下文資源
  await context.dispose();
})();

審核編輯 黃宇