概要

Playwright 是一個(gè)用于做自動(dòng)化測(cè)試的開源框架，它允許你通過代碼去自動(dòng)化操作瀏覽器，它還可以跨瀏覽器測(cè)試，包括Chrome，Edge、Firefox和Safari等，功能十分強(qiáng)大。

Playwright 是什么

Playwright 是微軟開源的一個(gè)用于 Web 測(cè)試和自動(dòng)化的Node.js 庫(kù)，通過一個(gè) API，可以自動(dòng)化運(yùn)行在Chrome，Edge、Firefox和Safari等瀏覽器上。開發(fā)人員可以使用這些API去創(chuàng)建一個(gè)新的瀏覽器頁面，導(dǎo)航URL到對(duì)應(yīng)的頁面，然后與頁面上的元素進(jìn)行交互。

Playwright默認(rèn)使用無頭瀏覽器，可以通過命令行來啟動(dòng)無頭瀏覽器，它不顯示UI。

為什么建議你使用Playwright 來做自動(dòng)化測(cè)試

Playwright 在跨瀏覽器、跨平臺(tái)和跨語言方面的能力非常突出，

為什么建議你使用 Playwright ？有以下幾個(gè)原因：

• 兼容性非常強(qiáng)大。 Playwright 可以在Windows、Linux 和 macOS 上使用，所有的主流瀏覽器(Chromium、 WebKit、 Firefox) 都支持。并且，它還支持多種編程語言，比如Java、 JavaScript、 Python 和 .NET ，有統(tǒng)一的API來讓你調(diào)用。
• 穩(wěn)定性非常強(qiáng)大。 Playwright會(huì)自動(dòng)等待元素出現(xiàn)，并可操作，從而可以減少不穩(wěn)定性。它的 web 優(yōu)先斷言和重試邏輯有助于確保測(cè)試的可靠性，而不需要手動(dòng)設(shè)置超時(shí)。
• 完全測(cè)試隔離。 每個(gè)測(cè)試都是在單獨(dú)的瀏覽器上下文中運(yùn)行，Playwright會(huì)模擬一個(gè)全新的瀏覽器配置文件，這樣可以確保每個(gè)測(cè)試之間不會(huì)互相干擾。您可以保存身份驗(yàn)證狀態(tài)，避免重復(fù)登錄，同時(shí)保持測(cè)試的獨(dú)立性。
• 高級(jí)測(cè)試場(chǎng)景。 Playwright允許你在多個(gè)選項(xiàng)卡、用戶或上下文的復(fù)雜工作流中測(cè)試，并且可以讓你操作真實(shí)的瀏覽器輸入和操作DOM元素，模仿真實(shí)的用戶操作。
• 豐富的調(diào)試工具。 Playwright Inspector、Codegen和Trace Viewer這些工具，方便你快速地檢查元素和調(diào)試。還提供了視頻、屏幕快照和 DOM 快照等方式，讓你可以全面的了解測(cè)試全過程。

Playwright 是如何工作的

在講Playwright的工作原理前，我們可以先看下Selenium是如何工作的。Selenium會(huì)將每個(gè)命令作為獨(dú)立的 HTTP請(qǐng)求發(fā)送，然后接收對(duì)應(yīng)的JSON 響應(yīng)，你的每個(gè)操作，比如打開瀏覽器窗口、單擊元素或向輸入框輸入文本都會(huì)作為獨(dú)立的 HTTP 請(qǐng)求發(fā)送。

而這種做法，往往意味著，我們必須等待更長(zhǎng)的時(shí)間才能得到響應(yīng)，并增加了出錯(cuò)的可能性。

而Playwright是怎么運(yùn)行的呢？Playwright 沒有通過單獨(dú)的 WebSocket 與每個(gè)驅(qū)動(dòng)程序進(jìn)行通信。而是依賴于一個(gè)單獨(dú)的 WebSocket 連接與所有驅(qū)動(dòng)程序進(jìn)行通信，直到測(cè)試完成。這允許在單個(gè)連接上快速發(fā)送命令，從而減少出錯(cuò)。

該怎么開始使用Playwright

1. 安裝 Playwright

有2種方法可以安裝Playwright

使用VS Code插件

在VS Code的擴(kuò)展管理器中搜索 Playwright。然后，安裝正式的 Playwright Test for VS Code插件，如下圖所示:

插件安裝好后，再使用命令安裝Playwright：

使用 npm 安裝

npm init playwright@latest

2. 開始你的第一個(gè)測(cè)試用例

現(xiàn)在，我們可以使用Playwright TypeScript編寫第一個(gè)測(cè)試用例，我們可以使用淘寶網(wǎng)來做案例展示下如何寫Playwright。

測(cè)試場(chǎng)景1： 驗(yàn)證淘寶網(wǎng)的title中是不是有「淘寶」兩個(gè)字

import { test, expect } from '@playwright/test';

test('title 是否正常', async ({ page }) => {
  await page.goto('https://www.taobao.com/');
  await expect(page).toHaveTitle('淘寶');
});

在這個(gè)場(chǎng)景中，page.goto () 可以實(shí)現(xiàn)導(dǎo)航到淘寶網(wǎng)，然后通過Expect() 斷言和 toHaveTitle() 方法來驗(yàn)證頁面的標(biāo)題是否與文本「淘寶」 匹配。

測(cè)試場(chǎng)景2： 驗(yàn)證淘寶的Logo是否顯示正常

test('logo 是否正常', async ({ page }) => {
  await page.goto('https://www.taobao.com/');
  await expect(todoPage.locator('.logo-bd').toBeVisible());

在這個(gè)場(chǎng)景中，todoPage.locator() 可以選中頁面Class元素，并自動(dòng)等待元素，toBeVisible可以判斷元素是否出現(xiàn)。

測(cè)試場(chǎng)景3： 驗(yàn)證登錄淘寶網(wǎng)時(shí)，頁面上的「淘寶直播」幾個(gè)字是否顯示正常。

test('淘寶直播顯示正常', async ({ page }) => {
  await page.goto('https://www.taobao.com/');
  await expect(page.getByText('淘寶直播')).toBeVisible();
});

在這個(gè)場(chǎng)景中，todoPage.getByText() 可以在頁面中尋找「淘寶直播」幾個(gè)字，toBeVisible可以判斷「淘寶直播」是否出現(xiàn)。

3. 執(zhí)行測(cè)試

可以執(zhí)行下面這個(gè)命令來執(zhí)行測(cè)試：

npx playwright test

然后在命令行中，就可以看到運(yùn)行步驟和運(yùn)行結(jié)果

如果你想看到運(yùn)行的全過程，可以使用下面這個(gè)命令：

npx playwright test --ui

4. 配置playwright

為了更好地執(zhí)行我們的測(cè)試，我們可以在 playwright.config.ts 文件中，對(duì)playwright進(jìn)行配置。

import { defineConfig, devices } from '@playwright/test';  
  
export default defineConfig({  
    // 設(shè)置默認(rèn)運(yùn)行的測(cè)試文件目錄，默認(rèn)會(huì)運(yùn)行tests目錄下的測(cè)試用例
    testDir: 'tests',  
  
    // 設(shè)置是否并行運(yùn)行測(cè)試用例
    fullyParallel: true,  
  
    // 如果有任何測(cè)試被標(biāo)記為 test.only，是否需要帶著錯(cuò)誤退出。 
    forbidOnly: !!process.env.CI,  
  
    // 重試次數(shù)  
    retries: process.env.CI ? 2 : 0,  
  
    // 用于并行化測(cè)試的并發(fā)工作進(jìn)程的最大數(shù)量  
    workers: process.env.CI ? 1 : undefined,  
  
    // Reporter to use  
    reporter: 'html',  
  
    use: {  
        // 默認(rèn)運(yùn)行的基礎(chǔ)Url
        baseURL: 'http://127.0.0.1:3000',  

        // 當(dāng)重試失敗用例時(shí)，收集日志
        trace: 'on-first-retry',  
    },  
    // 瀏覽器配置  
    projects: [  
        {  
            name: 'chromium',  
            use: { ...devices['Desktop Chrome'] },  
        },  
    ],  
    // 在開始測(cè)試之前運(yùn)行本地開發(fā)服務(wù)器。  
    webServer: {  
            command: 'npm run start',  
            url: 'http://127.0.0.1:3000',  
            reuseExistingServer: !process.env.CI,  
        },  
    });

更多詳細(xì)的配置，大家可以移步這里 Test configuration

以上，就是關(guān)于Playwright的初步使用指南，大家有興趣的，可以移步Playwright官網(wǎng)進(jìn)行更多學(xué)習(xí) playwright

到此這篇關(guān)于Node.js中Playwright庫(kù)使用指南的文章就介紹到這了,更多相關(guān)Node.js Playwright內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論