Page Object Model for Playwright tests

[jessabean]

Description

Adding page objects and fixtures for our existing Playwright tests. Hoping that this can be a template for creating readable e2e tests in the Playwright ecosystem.

This is a precursor to completing the test for filling out the WP, because that PR got huge and I would like for us to carefully review and comment on general approach in a more gradual fashion!

Related ticket(s)

N/A

---

How to test

• Run the playwright tests
  • From the root of the MFP project, you can run yarn test:e2e or yarn test:e2e-ui
• They should all pass

Notes

Some pros (imo)

• functions that are specific to an area of the report (e.g., filling out specific fields) are contained to that area instead of plopped into one bit test
• breaks up the many pages of a report so it feels easier to follow the user's journey in the test
• shorter LOC in the tests because the area-specific functions are abstracted away into the page objects

Some cons (imo)

• it's a lot of extra files, feels like more LOC === more complexity

Some questions

• Thing to explore: using soft assertions
• Should we start thinking about and documenting general e2e best practices and opinions somewhere?
  • For instance, while researching page object model for this PR, I saw many sources state that a best practice is to not use expect in page objects and keep them in the tests. I tried to follow that philosophy here (with the exception of the isReady() functions)

Resources:

• Playwright docs: POM
• Playwright docs: Fixtures
• Github discussion on using the POM and specifically this comment
• Reddit discussion about POM organization

[gmrabian]

I like the page model! I have some ideas/preferences that I noted below

[bangbay-bluetiger]

I like the fixtures!

[gmrabian]

I think I'm still a fan of having the path expectation part of isReady
await expect(wpDashboard.page).toHaveURL(wpDashboard.path);

looks good so far!

[gmrabian]

non-blocking comments and curiosities below :)

[codeclimate]

Code Climate has analyzed commit 862fbc1 and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 100.0% (90% is the threshold).

This pull request will bring the total coverage in the repository to 92.6% (0.0% change).

View more on Code Climate.