chore: add playwright

[stephenkilbourn]

Related Ticket: #1024 #1197

Description of Changes

This adds Playwright tests of some key user flows. The tests are set to run on the github action. On failure, an html report along with traces containing screenshots and network calls will be attached to the action's step.

The tests will run only on release branches (branches starting with release).

Notes & Questions About Changes

Validation / Testing

tests can be run locally with yarn test:e2e and they can also be seen in the github action.

[netlify]

✅ Deploy Preview for veda-ui ready!

Name	Link
🔨 Latest commit	e4da6a8
🔍 Latest deploy log	https://app.netlify.com/sites/veda-ui/deploys/67164ae0b2a0730008a9e8c1
😎 Deploy Preview	https://deploy-preview-1139--veda-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[stephenkilbourn]

It looks like I don't have access to view/change github secrets. This is expecting a mapbox token stored as MAPBOX_TOKEN like in the veda-config.

[dzole0311]

Thanks @stephenkilbourn for the great work and getting the tests green! I'm considering adjusting the github job to run on release branches only instead of each feature branch, to keep the fast development lifecycle. @sandrahoang686 @AliceR @hanbyul-here @snmln – any opinions before we merge these?

[sandrahoang686]

@stephenkilbourn thanks for setting this up, tests will be pretty crucial going forward and we could definitely spend more time here. Just a few thoughts -

• Do we want routing tests here? For those tests, we'd probably want at the instance level?
  • Path would eventually change - was looking at this line await page.goto('/data-catalog'); for example this path would eventually come from instance
• At the instance level we would orchestrate the e2e behavior of an entire route/page view, so would we want to move more towards integration testing?

cc @dzole0311 maybe you have already thought about this though

[stephenkilbourn]

@sandrahoang686 @dzole0311

We do have existing tests at the instance level in veda-config and GHG. My intent was to move the common ones down to the UI level to remove duplication. We can then have tests against anything unique to that instance live in the config repos.

I can set up the routes to read from an env if you think that makes sense. I can set in the playwright config to read from the env and default to the route that is in the current UI.
something along the lines of

const catalogRoute = process.env.CATALOG_ROUTE ? process.env.CATALOG_ROUTE : 'data-catalog`
await page.goto(catalogRoute);

[dzole0311]

@sandrahoang686 Yes I think we can move away from routing in the tests as we break out the components. But for consistency with our current architecture, I propose we keep it for now.

Since this PR provides a solid base for more extensive Playwright tests in the veda-ui, I’ll go ahead and merge it so we can start playing with them and using them into our dev workflow, and make modifications as needed. Thanks @stephenkilbourn for setting these up!

We have a follow-up here: #1200