add option to create tests with Playwright

[Rich-Harris]

Thought I'd tackle one of the earliest issues — #19. This adds a 'Add Playwright for testing?' prompt when you create a new project:

After that, npm test runs test/test.js with Playwright.

Aside: we had to create our own test fixtures for Kit's own tests, notably clicknav, which allows us to wait for client-side routing to happen following a click. Am reluctantly coming round to the view that my position in #2917 (comment) and #3241 was misguided; in order to use things like page.click and waitForNavigation idiomatically, we need to wait until navigation has occurred before doing pushState. This isn't just the tail wagging the dog — premature pushState also causes a subtle bug where relative URLs are briefly incorrect.

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

• If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpx changeset and following the prompts. All changesets should be patch until SvelteKit 1.0

[changeset-bot]

🦋 Changeset detected

Latest commit: 9e3c8ab

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
create-svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[benmccann]

just fyi, lint is failing

this seems like a good idea to me. the big questions I had about doing this were:

• the navigation stuff (which you already mentioned. though I wonder if that should be done before this)
• whether we'd also want to setup vitest or something similar for unit testing
• whether it makes any sense to test components outside of a web browser in some scenarios (I legitimately don't know the answer to this as I've done limited frontend testing)

[Rich-Harris]

the navigation stuff (which you already mentioned. though I wonder if that should be done before this)

probably. we can open a separate PR and leave this open till then

whether we'd also want to setup vitest or something similar for unit testing

will confess i have no idea what this looks like in practice. have people set this up in kit apps? any pitfalls? either way i tend to think unit tests are somewhat less important, so we can tackle that later

whether it makes any sense to test components outside of a web browser in some scenarios

FWIW it's fairly straightforward to test SSR and endpoints with Playwright. Though I wonder if we should have JS and JS-less projects in the playwright.config.js by default, the same as we do in Kit's own tests

[dummdidumm]

Does playwrigt support writing your code in TypeScript? If yes, should we add a variant for TS users?

[bluwy]

Yeah, playwright does support typescript ootb, down to the playwright config too.

[Rich-Harris]

I can't seem to get it to work. I keep seeing errors like this:

> my-new-app@0.0.1 test /Users/rich/Development/SVELTE/KIT/my-new-app
> playwright test

Error: playwright.config.ts: Cannot import a typescript file from an esmodule.

Am I doing something obviously wrong, or should we add TypeScript stuff in a follow-up PR?

[Rich-Harris]

Let's do the TS stuff in a follow-up

[randyridge]

Hi there, I just tried this out, with the build and preview command in playwright.config.js I found that my build runs longer than the default playwright test timeout, I ended up having to move the build portion to my package.json test script "pnpm build && playwright test".