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

更新時間：2025年08月08日 15:24:44 作者：勤奮的碼農007

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

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

原理：創(chuàng)建獨立的工具函數，通過參數傳入 page 對象操作頁面

// 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 類（通過組合模式）

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

// 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：通過 Test Fixtures 擴展（Playwright 官方推薦）

原理：利用 Playwright 的 fixture 系統擴展測試上下文

// 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)勢

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

最佳實踐建議

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

// 高級：等待元素包含特定文本
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 的原始完整性，又能有效擴展測試能力，特別適合復雜應用的測試場景。