在Node.js环境下使用Playwright添加自定义实现方式

// 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');
});

// 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');
});

// 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');
});

// 高级：等待元素包含特定文本
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 }
  );
}