Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setup Playwright for end-to-end testing #1392

Merged
merged 7 commits into from
Apr 5, 2024

Conversation

aashu16
Copy link
Collaborator

@aashu16 aashu16 commented Apr 5, 2024

I emailed a few months ago because I wanted to add e2e testing to the app. It has been a while (sorry) but here is my first PR.

What's been done?

  • Set up Playwright.
  • Added a few basic tests and some hard-coded data for mocking APIs (plan to remove this in the future, more below).

What's next?

  • Add more tests: Adding tests for each view will take a while. If there are any bits of the app that you would like to prioritise, please let me know.
  • Create abstractions: It's too early to do this, but once a few pages have achieved satisfactory coverage, would be ideal to spend some time on this.
  • Use a live test server instead of mocking the Lemmy API: Definitely worth doing, but mocking does the job for now.

I intend to contribute regularly going forward. Depending on the number of testing scenarios and their complexity, I might split tests for a page/view into more than one PR.

aashu16 added 3 commits April 5, 2024 02:52
* Vite tries to run all test files by default. The directory containing
  Playwright tests (`e2e/`) and `node_modules/` need to be excluded in
  vite.config.ts.
* Tests currently depend on locally stored test data.
Copy link
Owner

@aeharding aeharding left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi! Thanks so much, this is a pleasant surprise! The PR looks great, just a small thing to get the build passing.

I'd love to get this running in CI - could you add a Github Action to .github folder? Otherwise, I am happy to look into it.

Also we should probably document in README.md but if you want to add in a follow up PR I am fine with that too.

vite.config.ts Outdated Show resolved Hide resolved
aashu16 and others added 3 commits April 5, 2024 07:19
Co-authored-by: Alexander Harding <2166114+aeharding@users.noreply.github.com>
* Add e2e.yml to run Playwright tests in a container using an image
  provided by the Playwright team.
* Update Playwright config to run tests against a production build of
  the app instead of the dev server.
* Add script to package.json to run Playwright tests.
@aashu16
Copy link
Collaborator Author

aashu16 commented Apr 5, 2024

Hi! Thanks so much, this is a pleasant surprise!

Appreciate the welcome. Looking forward to making meaningful contributions to the project.

The PR looks great, just a small thing to get the build passing.

Can't believe I missed that. Fixed.

I'd love to get this running in CI - could you add a Github Action to .github folder? Otherwise, I am happy to look into it.

Done.

Also we should probably document in README.md but if you want to add in a follow up PR I am fine with that too.

Wondering if it might be better to wait until a somewhat acceptable test coverage has been achieved? Or did I completely misunderstand what you were suggesting?

Copy link
Owner

@aeharding aeharding left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wondering if it might be better to wait until a somewhat acceptable test coverage has been achieved? Or did I completely misunderstand what you were suggesting?

Yes I'm totally fine with waiting until later. :) I mostly am asking because I wasn't sure how best to run e2e tests locally - but I found npx playwright test works well. Probably just because I haven't used playwright before!

e2e/testdata/posts.ts Outdated Show resolved Hide resolved
@aeharding aeharding merged commit dfbe1f7 into aeharding:main Apr 5, 2024
3 checks passed
@aashu16
Copy link
Collaborator Author

aashu16 commented Apr 5, 2024

I mostly am asking because I wasn't sure how best to run e2e tests locally - but I found npx playwright test works well.

I changed Playwright's config to run off vite preview because it's significantly quicker - which is important for CI. For local testing, it's probably better to use the dev server and use the --ui flag. I will create a PR for this.

On a somewhat related note, do you have any preference regarding the size of PRs? If you usually squash and merge, I am guessing smaller and more frequent PRs would make sense.

@aeharding
Copy link
Owner

On a somewhat related note, do you have any preference regarding the size of PRs? If you usually squash and merge, I am guessing smaller and more frequent PRs would make sense.

The main reason I squash is to remove invalid/intermediate commits like "progress" or whatever that would add noise to main. Ideally every commit in main is a standalone bit of work. If you would prefer to merge without squashing for larger PRs I can totally do that, assuming the commits for the PR are cleaned up before merging (git rebase -i HEAD~3 or whatever to remove the "progress"/"fix build"/"pr feedback" intermediate commits) so that every commit in the PR is a specific feature/bugfix/improvement.

@aashu16
Copy link
Collaborator Author

aashu16 commented Apr 5, 2024

That makes sense. I will try and keep PRs small and focused so we don't have to worry preserving commit history.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants