[Question] Playwright Imports & Path Aliases

Hi all! 👋 I’m currently working in a monorepo with a few different apps, and I’d like to isolate some of the custom code that I’ve written for my Playwright setup to a shared library, that can be used for those respective apps.

In the root of our project, I have the following in a tsconfig.base.json file:

"paths": {
	"@app/end2end/*": ["libs/end2end/src/lib/*"],
	"@app/end2end": ["libs/end2end/src/index.ts"],
}

All of the tsconfig.jsons throughout each individual project and library extend from this base configuration.

This is pretty handy, because it means that when I import the extended ‘test’ object with all my custom fixtures inside of apps/app-e2e/tests/test.spec.ts, I can write this:

import { test } from "@app/end2end";

instead of this:

import { test } from "../../../libs/end2end/src";

which I think we can all agree is a bit of an eyesore.

But there’s one problem: the code that I wrote above doesn’t actually work 😅 When I try to execute test.spec.ts, either from the VS Code test runner or from the terminal with an npm script, nothing actually happens. A node process will be initiated, but then immediately close. There aren’t even any errors to indicate what might be going wrong.

Similarly, when I tried to write the following inside of my playwright.config.ts:

globalSetup: require.resolve("@app/end2end/env/global-setup"),

I get a name resolution error. Playwright doesn’t interact with the Typescript compiler to find the appropriate file, for a given path alias.

In my search for solutions, I of course came across #7121, where a number of other users reported their problems with interoperability between customized tsconfig options and Playwright. But developer comments at the end of that thread seem to indicate that these features had been added to the Playwright test runner as of February, and that the issue was largely resolved.

So my question is: what changes do I need to make to correctly utilize path aliases in my test and config files?

I’m not filing this as a bug, because my preliminary research seems to indicate that this was a bug, but has now been resolved. It’s a lack of knowledge on my part, not a missing feature or defect in the software itself.

Thanks for reading, any advice would be very appreciated 😁

[mxschmitt]

We as of today don’t process extends inside tsconfig afaik

A sparse tsconfig file with extends is how SvelteKit apps are scaffolded today by default. Are you sure?

You are right, I updated my comment above.

[vhscom]

We as of today don’t process extends inside tsconfig afaik

A sparse tsconfig file with extends is how SvelteKit apps are scaffolded today by default. Are you sure?