how to make a test.step be a pass - playwright

Question

I am trying to override the fill method in playwright to add a test.step. I am planning to use this to create a report to show whether the value was populated with the data or not. Ideally this would appear as a pass or failed result.

So far i have coded this, however, the step returns a "skipped" status in the reporter. I have checked that the expected string matches the inputValue. Any help would be more than welcome.

Override fill

export const extendPage = (
  page: Page,
  test: TestType<
    PlaywrightTestArgs & PlaywrightTestOptions,
    PlaywrightWorkerArgs & PlaywrightWorkerOptions
  >
) => {
  const { fill: originalFill } = page;

  page.fill = async function fill(selector, inputText) {
    await test.step(`Filling ${selector} with ${String(
      inputText
    )}`, async () => {
      await originalFill.apply(page, [selector, inputText]);
      await page.waitForSelector(selector, { state: "attached" });
      const inputValue = await page.locator(selector).inputValue();
      expect(inputValue).toBe(inputText);
    });
  };

  return page;

Custom reporter

class MyReporter implements Reporter {
  onBegin(config: FullConfig, suite: Suite) {
    console.log(`Suite title: ${suite.title}`);
  }

  onStepBegin?(test: TestCase, result: TestResult, step: TestStep) {
    // if (step.category === "test.step") {
    //   console.log(`Starting step title ${step.title}`);
    // }
  }

  ////This is the important part
  onStepEnd?(test: TestCase, result: TestResult, step: TestStep) {
    if (step.category === "test.step") {
      console.log(`Result of Step ${step.title} with status ${result.status}`);
    }

    if (step.error) {
      console.log(step.error.message);
      console.log("fail");
    }
  }

  onEnd(result: FullResult) {
    console.log(`Finished the Suite: ${result.status}`);
  }
}
export default MyReporter;