📝 Add End-to-End Testing with Playwright to frontend README.md (#1279)

Co-authored-by: Sebastián Ramírez <[email protected]>

Author: alejsdev

README.md

@@ -13,6 +13,7 @@
     - 💃 Using TypeScript, hooks, Vite, and other parts of a modern frontend stack.
     - 🎨 [Chakra UI](https://chakra-ui.com) for the frontend components.
     - 🤖 An automatically generated frontend client.
+    - 🧪 [Playwright](https://playwright.dev) for End-to-End testing.
     - 🦇 Dark mode support.
 - 🐋 [Docker Compose](https://www.docker.com) for development and production.
 - 🔒 Secure password hashing by default.

frontend/README.md

@@ -115,3 +115,33 @@ The frontend code is structured as follows:
 * `frontend/src/hooks` - Custom hooks.
 * `frontend/src/routes` - The different routes of the frontend which include the pages.
 * `theme.tsx` - The Chakra UI custom theme.
+
+## End-to-End Testing with Playwright
+
+The frontend includes initial end-to-end tests using Playwright. To run the tests, you need to have the Docker Compose stack running. Start the stack with the following command:
+
+```bash
+docker compose up -d
+```
+
+Then, you can run the tests with the following command:
+
+```bash
+npx playwright test
+```
+
+You can also run your tests in UI mode to see the browser and interact with it running:
+
+```bash
+npx playwright test --ui
+```
+
+To stop and remove the Docker Compose stack and clean the data created in tests, use the following command:
+
+```bash
+docker compose down -v
+```
+
+To update the tests, navigate to the tests directory and modify the existing test files or add new ones as needed.
+
+For more information on writing and running Playwright tests, refer to the official [Playwright documentation](https://playwright.dev/docs/intro).