test: E2E playwright tests for web app

[shibbas]

Purpose

Introduces E2E Playwright tests that can be run on either the local dev server or the deployed web app by changing the baseUrl in the playwright.config.

Includes the following tests

The tests run against the local server via github action on each pull request
Playwright tests

Does this introduce a breaking change?

[ ] Yes
[X] No

Pull Request Type

What kind of change does this Pull Request introduce?

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

How to Test

• Get the code

git clone [repo-address]
cd [repo-name]
git checkout [branch-name]
npm install

• Test the code
  npx playwright test Or run the tests in the Test Explorer

[sinedied]

Thanks for this addition!

I have a few questions regarding the approach:

• why in some case you use a class locator, and sometimes you add a specific ID locator? is that because the class couldn't be used in that case, or maybe because of the shadow DOM?

• I like the idea of screenshots as part of the test, but I don't think these should be stored as part of the repo as PNG are huge and will quickly make the repo size problematic.
  Maybe we could we keep the screenshots out of the repo for now and store them as a build artifact of the GH workflow?

[sinedied]

Also for next time, could you use the conventional commits convention for your commits? see https://www.conventionalcommits.org/
We need to update the contributing guidelines to add this.

Don't bother to fix the one in this PR, we'll squash it to fix the issue.

[shibbas]

Thanks for this addition!

I have a few questions regarding the approach:

• why in some case you use a class locator, and sometimes you add a specific ID locator? is that because the class couldn't be used in that case, or maybe because of the shadow DOM?

Yes, in some cases the classes had dynamic identifiers or were used for styling multiple buttons. In those cases I explicitly added test IDs. Now i have updated the code so that explicit elements that require action in the UX have test IDs and use those instead of classes there.

• I like the idea of screenshots as part of the test, but I don't think these should be stored as part of the repo as PNG are huge and will quickly make the repo size problematic.
  Maybe we could we keep the screenshots out of the repo for now and store them as a build artifact of the GH workflow?

The purpose of the screenshots is to test against the layout at a particular point in time - I.e. does the current change layout break anything from the known good version. If we build those artifacts we lose the point in time comparison. I understand on the size issue though. I've removed the screenshots as I have a few equivalent though less accurate assertions in the tests.