How to listen to playwright actions

Question

I am creating a function to create a report file that shows the steps that playwright has taken and what data it has filled the input fields with.

I am trying to add an event listener for when playwright uses the fill action, but i havent been able to find one that does what i am looking for. This is my current code.

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

  //Listening to the console
  page.on('console', (message:ConsoleMessage) => {
    logFile.write(`Console: ${message.text()}\n`);
  });

  //Listen to actions.        

  //Listening to the requests
  let stepCounter = 1;
  page.on('request', (request:Request) => {
    logFile.write(`Step ${stepCounter}: ${request.} ${request.url()}\n`);
    stepCounter++;
  });

  return { newPage:page };
}

Answer 1

I don't think there's an option to do this because it's Locator action and not Page events. https://playwright.dev/docs/api/class-page#events

As option, you can create a custom wrapper over click(), fill() or any other event you may want to log.