add option to create tests with Playwright #4056
Conversation
🦋 Changeset detectedLatest commit: 9e3c8ab The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
There was a problem hiding this comment.
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)
Co-authored-by: Ben McCann <[email protected]>
probably. we can open a separate PR and leave this open till then
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
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 |
Co-authored-by: Rich Harris <[email protected]>
| @@ -0,0 +1,6 @@ | |||
| import { expect, test } from '@playwright/test'; | |||
|
|
|||
| test('about page has expected h1', async ({ page }) => { | |||
There was a problem hiding this comment.
Does playwrigt support writing your code in TypeScript? If yes, should we add a variant for TS users?
There was a problem hiding this comment.
Yeah, playwright does support typescript ootb, down to the playwright config too.
There was a problem hiding this comment.
I can't seem to get it to work. I keep seeing errors like this:
> [email protected] 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?
|
Let's do the TS stuff in a follow-up |
|
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". |
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 testrunstest/test.jswith 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 likepage.clickandwaitForNavigationidiomatically, we need to wait until navigation has occurred before doingpushState. This isn't just the tail wagging the dog — prematurepushStatealso 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:
Tests
pnpm testand lint the project withpnpm lintandpnpm checkChangesets
pnpx changesetand following the prompts. All changesets should bepatchuntil SvelteKit 1.0