如何监听Playwright的fill操作以生成步骤与填充数据报告

解决方案代码 #

import { ConsoleMessage, Page, Request } from "@playwright/test";
import fs from 'fs';

export async function createLogger(page: Page) {
  const logFile = fs.createWriteStream('./playwright.log', { flags: 'w' });
  let stepCounter = 1;

  // 监听控制台输出
  page.on('console', (message: ConsoleMessage) => {
    logFile.write(`[Console] ${message.text()}\n`);
  });

  // 重写fill方法以监听输入框填充操作
  const originalFill = page.fill.bind(page);
  page.fill = async function(selector: string, value: string) {
    logFile.write(`Step ${stepCounter}: 填充选择器 "${selector}"，内容："${value}"\n`);
    stepCounter++;
    return originalFill(selector, value);
  };

  // 监听网络请求（修复原代码语法错误）
  page.on('request', (request: Request) => {
    logFile.write(`Step ${stepCounter}: 请求 ${request.method()} ${request.url()}\n`);
    stepCounter++;
  });

  return { newPage: page };
}

关键说明 #

• 监听fill操作：Playwright没有原生的fill事件，通过重写page.fill方法，在执行原生填充逻辑前插入日志记录，即可捕获所有填充操作的选择器和内容。
• 修复原代码错误：原request事件监听中的request.属于语法错误，改为request.method()获取请求的HTTP方法（如GET/POST）。
• 扩展其他操作：如果需要监听click、type等交互动作，可采用相同逻辑重写对应方法，比如重写page.click记录点击的目标选择器。
• 日志标准化：通过前缀区分日志类型，统一使用步骤计数器保证报告的顺序性，便于后续排查和回溯。

内容的提问来源于stack exchange，提问作者Fabian Sarango