[Question] Playwright Imports & Path Aliases

[chrstophr-wltrs]

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 😁

[rwoll]

Try adding a baseUrl (https://github.com/microsoft/playwright/issues/7121#issuecomment-1009140849) in your tsconfig like https://github.com/rwoll/playwright-typescript-path-aliases/blob/main/tsconfig.json. Without baseUrl I get resolution errors, with it, the aliasing works in that linked repo.

[chrstophr-wltrs]

@rwoll That's what I get for not pasting the entire config file 😣 Apologies. I do have a baseUrl set, just to the root of the project (".")

[chrstophr-wltrs]

I don't know if there's some sort of name for the effect where one discovers additional information about a problem only after asking for help, but there really should be. It turns out this might not be an issue with path aliases at all. When I replace the import at the top of my test file (/apps/app-e2e/tests/test.spec.ts) with:

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

I still get the same result.

Interestingly, when looking at the 'testing' panel in VS Code, the test runner detects the file, but it does not recognize the individual test cases within that file, as it has done previously:

It seems possible, even likely, that something I did with the fixtures has mucked up the 'test' object that is used for actually writing tests, so I'll need to fiddle with that. I'll report back with what I find!

[mxschmitt]

Playwright has some tsconfig path resolving integrated since a few releases, that's why the linked issue of yours is closed. In your case it most likely does not find your tsconfig or does not process it correctly.

Could you give us a better idea of your folder structure? Especially where your playwright.config.ts, where your tsconfig and where your test is located?

(if your tsconfig is next to your playwright.config.ts or next to your tests, then it should work. ~~We as of today don't process extends inside tsconfig afaik~~).

[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?

[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.

[rwoll]

I think the best path forward is to look at a full repro. Without it, Playwright can only guess about how the project and folder structure are interacting.

I'm going to close this issue as part of triage, but if you can create a minimal repro (i.e. a GitHub repo we can clone, download, and run that shows the issue), we can-retriage! Thanks!

[rwoll]

(For above, just re-file as a new issue with the repro and reference this issue. This will ensure we see it since sometimes closed issues with later comments slip under our radar!)