How do I extend expect.extend in a file other than playwright.config.ts in Playwright?

Answer

Sure, you can extend expect.extend in a file other than playwright.config.ts. Playwright supports TypeScript, so you can write tests in TypeScript and Playwright will handle the rest.

Here's a tip: set up a separate tsconfig.json file in your tests directory. This way, you can tweak some settings specifically for your tests.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@myhelper/*": ["./helper/*"]
    }
  }
}

You can also use path mapping declared in the tsconfig.json. Just ensure that baseUrl is also set. This lets you import using mapped paths.

import { username, password } from '@myhelper/credentials';

But be careful, if you're using experimental or very recent features of TypeScript, Playwright Test might not transform your TypeScript code correctly. You might need to manually compile your tests with TypeScript.

For test options like reporters or filtering tests, you can pass these options directly into the playwright.config.ts.

export default defineConfig({
  reporter: [['junit', { outputFile: 'results.xml' }]],
});

You can even create custom reporters by implementing a class with some of the reporter methods and then use this reporter with testConfig.reporter.

In a nutshell, while it's recommended to set up a separate tsconfig.json file for your tests and configure test options directly into playwright.config.ts, extending expect.extend can happen in any file that makes sense for your project.