Use .ts extension when creating Playwright config for TypeScript projects

[benmccann]

Describe the bug

I've seen a few reports of this. It appears to have been a known issue when the feature was added: #4056 (comment)

I saw that someone fixed it by prefixing with some environment variable. Unforunately, I can't find what that was at the moment

Reproduction

Create TypeScript + Playwright project from wizard

Logs

No response

System Info

latest

Severity

serious, but I can work around it

Additional Information

No response

[vhscom]

I believe you're looking for:

"test": "PW_EXPERIMENTAL_TS_ESM=1 playwright test"

example implementation: https://github.com/vhscom/svelte-headlessui-starter

[Conduitry]

Is there another way to configure that besides the env var? Setting env vars like that in Windows wouldn't work, and it'd be lovely not to bring in another dependency just to smooth over that cross-platform issue.

[vhscom]

Last update I saw for ESM in TS for Playwrite dated Jan 11: microsoft/playwright#7121 (comment). I'd expect the ENV var to simply become optional later, but since this flag was recently introduced I haven't dug in deeper yet.

[frederikhors]

I opened this some time ago and I'm waiting for the next version. After this TS code is usable. microsoft/playwright#12307

[EdricChan03]

I believe you're looking for:

"test": "PW_EXPERIMENTAL_TS_ESM=1 playwright test"

example implementation: https://github.com/vhscom/svelte-headlessui-starter

Testing this on the latest versions appears to result in the following issue:

Cannot find package 'url.js' imported from /path/to/node_modules/@sveltejs/kit/dist/chunks/index2.js

(Full build logs for context)

(And a reproduction of the issue)

[vhscom]

Testing this on the latest versions appears to result in the following issue:

Cannot find package 'url.js' imported from /path/to/node_modules/@sveltejs/kit/dist/chunks/index2.js`

Appears to have started with 1.0.0-next.292 when using PW_EXPERIMENTAL_TS_ESM flag for tests with TypeScript. Backing down to @sveltejs/kit@1.0.0-next.291 and tests are functional again. So something in the 291-292 changeset is conflicting with the experimental TS ESM flag for Playwright in the current stable release of playwright. As a result, if using @sveltejs/kit@1.0.0-next.292 or above, consider installing playwright version 1.20.0 (currently tagged beta) or above, or try the latest nightly release with @playwright/test@next.

You're using experimental features, so I'll assume you know how to upgrade and downgrade your version of Node.
If the browser window stops opening and tests fail as a result, reinstall playwright with npx playwright install.

[sebastianrothe]

Works again with the latest version of Playwright (1.20), which has been released just now.

[benmccann]

PW_EXPERIMENTAL_TS_ESM had no effect for me

[vhscom]

PW_EXPERIMENTAL_TS_ESM=1 is required for the Playwright config to be written in TypeScript as of v1.20. Reference implementation. OP asked about an environment variable. Were you looking for something else?

[benmccann]

With the latest release of SvelteKit, when you setup a new Playwright+TypeScript project it is now working without needing any further changes

However, if I rename playwright.config.js to playwright.config.ts it does not work even when adding PW_EXPERIMENTAL_TS_ESM=1. Newly created projects are using Playwright 1.20.0

[aliak00]

I just now ran a completely new installation of sveltekit, did an npm install and then npm test and got this error. Adding "test": "PW_EXPERIMENTAL_TS_ESM=1 playwright test" did not work. (on mac m1).

[frederikhors]

Use 1.20.0, they are fixing bugs with 1.20.1.

[frederikhors]

Unfortunately:

I'm having this issue using both 1.20.1 and next:

Only a VSCode issue. The tests are working.

If I use ./constants (without .ts) I get error in pw at runtime: [ERR_MODULE_NOT_FOUND] using PW_EXPERIMENTAL_TS_ESM=1 playwright test.

[Rich-Harris]

I think this can be closed now? #4479

[frederikhors]

I'm using SvelteKit with PW 1.20.2 with no problem and Typescript. I think we can close.