快捷導(dǎo)航

在Node.js環(huán)境下使用Playwright添加自定義實(shí)現(xiàn)方式

更新時(shí)間：2025年08月08日 15:24:44 作者：勤奮的碼農(nóng)007

這篇文章主要介紹了在Node.js環(huán)境下使用Playwright添加自定義實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

方法1：直接創(chuàng)建實(shí)用工具函數(shù)（推薦）

原理：創(chuàng)建獨(dú)立的工具函數(shù)，通過(guò)參數(shù)傳入 page 對(duì)象操作頁(yè)面

// utils/custom-actions.js
module.exports = {
  async login(page, username, password) {
    await page.goto('https://example.com/login');
    await page.fill('#username', username);
    await page.fill('#password', password);
    await page.click('#submit');
    await page.waitForURL(/dashboard/);
  },
  
  async captureScreenshot(page, fileName) {
    await page.screenshot({ path: `screenshots/${fileName}.png` });
  }
};

使用方式：

const { test } = require('@playwright/test');
const { login, captureScreenshot } = require('./utils/custom-actions');

test('Authentication test', async ({ page }) => {
  // 使用自定義方法
  await login(page, 'test@email.com', 'p@ssw0rd');
  await captureScreenshot(page, 'dashboard-view');
});

方法2：封裝自定義 Page 類（通過(guò)組合模式）

原理：創(chuàng)建代理類包裹原始 page 對(duì)象，添加額外方法

// lib/custom-page.js
module.exports = class CustomPage {
  constructor(page) {
    this.page = page;
  }

  async typeSlowly(selector, text, delay = 100) {
    for (const char of text) {
      await this.page.type(selector, char);
      await this.page.waitForTimeout(delay);
    }
  }

  async dragAndDrop(sourceSel, targetSel) {
    const source = await this.page.$(sourceSel);
    const target = await this.page.$(targetSel);
    await this.page.dragAndDrop(source, target);
  }
};

使用方式：

const { test } = require('@playwright/test');
const CustomPage = require('./lib/custom-page');

test('Form test', async ({ page }) => {
  const customPage = new CustomPage(page);
  
  await customPage.typeSlowly('#comment', 'Hello World', 150);
  await customPage.dragAndDrop('#item1', '#drop-zone');
});

方法3：通過(guò) Test Fixtures 擴(kuò)展（Playwright 官方推薦）

原理：利用 Playwright 的 fixture 系統(tǒng)擴(kuò)展測(cè)試上下文

// fixtures.js
const base = require('@playwright/test');
const CustomPage = require('./lib/custom-page');

exports.test = base.test.extend({
  customPage: async ({ page }, use) => {
    const customPage = new CustomPage(page);
    await use(customPage);
  }
});

使用方式：

// tests.spec.js
const { test } = require('./fixtures');

test('Advanced test', async ({ customPage }) => {
  await customPage.typeSlowly('#bio', 'Automation Engineer');
  // 原始 page 仍然可用
  await customPage.page.keyboard.press('Enter');
});

主要優(yōu)勢(shì)

無(wú)侵入性：不修改 Playwright 源碼或原型
按需組合：可以混合使用原生 API 和自定義方法
維護(hù)性強(qiáng)：自定義邏輯集中管理
TypeScript 支持：通過(guò)聲明文件添加類型提示（如使用 TS）

最佳實(shí)踐建議

將常用操作封裝成獨(dú)立功能（如登錄、數(shù)據(jù)生成）
為復(fù)雜交互創(chuàng)建專用工具類（如表格操作、拖放序列）
在 fixtures 中初始化常用測(cè)試狀態(tài)
對(duì)自定義方法添加錯(cuò)誤處理和日志
使用 page.waitForFunction() 實(shí)現(xiàn)高級(jí)等待邏輯

// 高級(jí)：等待元素包含特定文本
async waitForText(selector, text, timeout = 5000) {
  await this.page.waitForFunction(
    ({ sel, txt }) => {
      const el = document.querySelector(sel);
      return el?.innerText?.includes(txt);
    },
    { selector, text },
    { timeout }
  );
}

這些方法既保持了 Playwright API 的原始完整性，又能有效擴(kuò)展測(cè)試能力，特別適合復(fù)雜應(yīng)用的測(cè)試場(chǎng)景。