[Feature] Allow to provide tsconfig path

[bonkalol]

Now there is no option that would allow you to specify which tsconfig to use when running playwright tests, I would like to have this option since my project uses several tsconfig's

npx playwright test --tsconfig mega.tsconfig.json

[pavelfeldman]

Could you share more about your project structure?

[bellindj]

We have this issue. We're using an NX monorepo. What we have is a setup like this:

libs/lib1/tsconfig.json libs/lib1/tsconfig.lib.json -- overrides config for the library when built libs/lib1/tsconfig.spec.json -- overrides config for test files libs/lib1/playwright.config.ts

libs/lib2/tsconfig.json libs/lib2/tsconfig.lib.json -- overrides config for the library when built libs/lib2/tsconfig.spec.json -- overrides config for test files libs/lib2/playwright.config.ts

Right now, we can't use our tsconfig.spec.json files for playwright because it is always grabbing the tsconfig.json next to it. This is also why we ended up having a separate playwright config per lib (so that we could use our separate tsconfig.json files per project).

Ideally, we could pass in tsconfig.spec.json when we run playwright.

[JonWallsten]

@pavelfeldman This is really helpful in case you need different TS-settings for your build, test and working environment. We have one TS-config for VSCode/IntelliJ, one for the build process and one for testing. For VSCode we might want to include all files in the project for TS to pick up new files. In the build process we only want to use entry points. For testing we want less strict typing rules to avoid issues with third party tools etc.

This is our app right now:

So this would be really neat.

[dgozman]

We recommend everyone to have a separate tests/tsconfig.json file that will be test-specific. If you put your tests under tests/ directory, Playwright will automatically pick it up.

src/
    source.ts

tests/
    tsconfig.json  # test-specific tsconfig
    example.spec.ts

tsconfig.json  # generic tsconfig for all typescript sources

playwright.config.ts

[cdesiles]

I would also like to customize which tsconfig.json is used.

I have two typescript configuration files in my project, and would like to change it something liketsconfig2.json.

The tsconfig.json is actually hard-coded in the tsconfig-loader.js file, which is sad. Quick and dirty solution, add a script in your project package.json, called with postinstall:

 "postinstall": "npx playwright install && yarn fix-playwright",
 "fix-playwright": "sed -i -e s/tsconfig.json/tsconfig2.json/ ../../node_modules/@playwright/test/lib/third_party/tsconfig-loader.js",

an entry in playwright.config.ts like this would be much clearer IMO:

const config: PlaywrightTestConfig = {
  tsconfig: "./a/b/c/tsconfig2.json",
  // ...
}

export default config;

[Edit] another alternative is to add a new tests/tsconfig.json if testDir === 'tests', and make it requiring another file like:

{
  "extends": "../tsconfig2.json"
}

[dgozman]

We recommend a separate tests/tsconfig.json file in the tests directory that will be automatically picked up by Playwright. See documentation

[daniel-nagy]

This is a bit unfortunate when using TypeScript project references. In our case we have many feature modules and tests for each feature are colocated with the feature.

Because of this we need to put a tsconfig.json file in each test directory that extends the tsconfig.e2e.json file, which ends up looking like this.

{
  "compilerOptions": {
    "baseUrl": "../../../",
    "rootDir": "../../../"
  },
  "extends": "../../../tsconfig.e2e.json"
}

The content of tsconfig.e2e.json looks like this

{
  "compilerOptions": {
    "lib": ["ES2021"],
    "types": ["node"]
  },
  "exclude": [],
  "extends": "./tsconfig.base.json",
  "include": ["src/**/__test__"]
}

which is referenced in our "solution" tsconfig file

{
  "files": [],
  "include": [],
  "references": [
    { "path": "./tsconfig.build.json" },
    { "path": "./tsconfig.e2e.json" },
    { "path": "./tsconfig.test.json" }
  ]
}

I would expect the tests to compile without needing these additional tsconfig files when using TypeScript project references, similar to if I ran tsc -b tsconfig.e2e.json, which does not require these additional tsconfig files.

[mfurtak]

The statement from the docs which says:

Note that Playwright only supports the following tsconfig options: paths and baseUrl.

implies that that Playwright doesn't support references. Is that correct?

[OliverJAsh]

I've opened an issue to request support for project references: https://github.com/microsoft/playwright/issues/22761

[bl185052]

I hope this is added soon. It doesn't look like playwright can support tsconfig.json files in custom test directories at the same time as launching a test using a playwright config file.