Test: Make Playwright UI mode work with Docker environment

[crishpeen]

Description

So. We had these problems:

1. We need to run UI mode in docker as in non UI mode because otherwise the outputs differ.
2. The make test-e2e-ui command with XVFB just hangs and never does anything.
3. When run without XVFB, Playwright complains that it needs an Xserver or to be run in headless mode.

I didn't want to install XQuartz or anything (because I don't really understand it :D). So I tried to make it work so that the npm command is pointed into the Docker, and Docker expects it on some port.

Now it works, except:

1. Maybe only MacOS solution (but as discovered earlier, we are not cross-platform compatible in e2e anyway).
2. It does not work for Twig tests. It will need another networking magic because the Twig runs in another Docker.

I didn't need to modify any tests, and I didn't need to install any other packages. 🪄

It would be great if anyone else could test this on their machine :)

1. Pull this branch
2. Run make test-e2e-ui
3. Open http://localhost:9323
4. Try to run some (non-Twig) tests.

Thanks!

Additional context

Issue reference

[netlify]

✅ Deploy Preview for spirit-design-system ready!

Name	Link
🔨 Latest commit	55e3a54
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system/deploys/67b1bf4f5905eb0008217e44
😎 Deploy Preview	https://deploy-preview-1945--spirit-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 96 (no change from production) Accessibility: 91 (no change from production) Best Practices: 100 (no change from production) SEO: 91 (no change from production) PWA: - View the detailed breakdown and full score reports

---

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

[netlify]

✅ Deploy Preview for spirit-design-system-storybook canceled.

Name	Link
🔨 Latest commit	55e3a54
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-storybook/deploys/67b1bf4f203cef000894716a

[curdaj]

Good job! It works on my machine

[literat]

I have discovered that when using --ui-host=0.0.0.0 instead of just --ui the xvfb will not hang and on the 127.0.0.1 + port you can open the UI. You can try it in #1914

https://playwright.dev/docs/test-ui-mode#docker--github-codespaces