概要

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

Playwright 是什么

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

Playwright默認使用無頭瀏覽器，可以通過命令行來啟動無頭瀏覽器，它不顯示UI。

為什么建議你使用Playwright 來做自動化測試

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

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

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

Playwright 是如何工作的

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

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

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

該怎么開始使用Playwright

1. 安裝 Playwright

有2種方法可以安裝Playwright

使用VS Code插件

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

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

使用 npm 安裝

npm init playwright@latest

2. 開始你的第一個測試用例

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

測試場景1： 驗證淘寶網(wǎng)的title中是不是有「淘寶」兩個字

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

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

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

測試場景2： 驗證淘寶的Logo是否顯示正常

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

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

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

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

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

3. 執(zhí)行測試

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

npx playwright test

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

如果你想看到運行的全過程，可以使用下面這個命令：

npx playwright test --ui

4. 配置playwright

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

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

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

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

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

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

最新評論