Playwright fixture timing out

Question

const test = defaultTest.extend({
  audit: async ({ page }) => {
    await page.screenshot({ path: 'e2e/test.png' });
    console.info('audit done!');
  },
});

// ...more code

test.only('audit', async ({ page, mount, audit }) => {
  await audit(page);
  // ...test code
}));

Error:

Running 1 test using 1 worker

  ✘  1 [chromium] ›audit.playwright.tsx:48:6 › audit (10.0s)
audit done!


  1) [chromium] › audit.playwright.tsx:48:6 › audit ─────────────────────────────────────

    Test timeout of 10000ms exceeded while setting up "audit".

  1 failed
    [chromium] › audit.playwright.tsx:48:6 › audit

Super simple fixture. I want a screenshot to be taken in the audit, then the rest of the test to continue. The screenshot works (a screenshot file is created), but the test then times out. If I remove the fixture from the test, the test works as intended. What as I missing here?

Answer 1

A fixture is not callable itself, it is used before and after the test. You could do the below to take a screenshot before the test is run:

import { test as defaultTest } from "@playwright/test";

const test = defaultTest.extend({
  audit: async ({ page }, use) => {
    await page.screenshot({ path: 'e2e/test.png' }); // Done before the test
    console.info('audit done!');
    await use(page) // <--- Use the fixture. This is where the test is run
  },
});

// By adding the fixture as an argument, it is applied automatically:
test.only('audit', async ({ page, audit }) => {
  // ...test code
});