setup e2e testing using playwright #1918
Conversation
mayank99
force-pushed
the
mayank/e2e
branch
3 times, most recently
from
02ecf84 to
b08b5a7
Compare
There was a problem hiding this comment.
I've deleted this example test that Playwright created upon initialization, but it's worth skimming through, just to understand how to do some pretty advanced things with playwright.
mayank99
requested review from
r100-stack and
Ben-Pusey-Bentley
and removed request for
a team
| @@ -4,7 +4,8 @@ | |||
| "streetsidesoftware.code-spell-checker", | |||
| "esbenp.prettier-vscode", | |||
| "dbaeumer.vscode-eslint", | |||
| "astro-build.astro-vscode" | |||
| "astro-build.astro-vscode", | |||
| "ms-playwright.playwright" | |||
There was a problem hiding this comment.
The vscode extension is pretty neat
Screen.Recording.2024-03-13.at.12.50.27.PM.mov
There was a problem hiding this comment.
Wow, that seems incredibly useful for debugging tests.
|
|
||
| The `testing/e2e` workspace facilitates testing of complex scenarios in a real browser. This is achieved by running [Playwright](https://playwright.dev/) tests against a [Remix](https://remix.run/) app. | ||
|
|
||
| - **To run tests**, use this command: `pnpm run test --filter=e2e`. |
There was a problem hiding this comment.
Should we mention running pnpm exec playwright install? Because without running that, I got the below error:
There was a problem hiding this comment.
You mean running pnpm install was not enough?
Edit: To make it work automatically I've added it to the postinstall script: aa6a44d
There was a problem hiding this comment.
Yes, pnpm install was not sufficient for me.
There was a problem hiding this comment.
Should work fine after latest commit.
@Ben-Pusey-Bentley Can you also test?
There was a problem hiding this comment.
Can confirm that this is working for me now.
Changes
Adds a new
e2eworkspace, where Playwright e2e testing has been set up in a Remix app.It actually turned out to be quite straightforward specifically because of remix's file-based routing. To add a new test, we only need to create a new route and add a
spec.tsfile to visit that route! Each route/test can be completely independent of one another.This PR is just opening the path to adding tests in the future. No real tests have been added so far.
Testing
Tested a hello world scenario locally (
pnpm run test --filter=e2e) and in CI.Docs
Added basic instructions in
CONTRIBUTING.md.