[Testing]: Set up Playwright E2E testing for core user flows

[Aditya948351]

We need robust automated testing to catch regressions before they hit production. Set up Playwright in the repository and write End to End tests for the 3 most critical user flows: User Login, Navigating a Roadmap, and Updating Profile Settings. Integrate this into a GitHub Actions workflow so it runs on every PR.

[shivani11jadhav]

Hi @Aditya948351,

Here is my proposed implementation strategy to set up Playwright and automate the core flows:

🛠️ Proposed Strategy:

1. Setup & Configuration:

   • Install Playwright dependency (@playwright/test) and initialize the configuration (playwright.config.ts).
   • Configure basic parameters (baseUrl, timeouts, and running tests in headless mode for CI/CD).
   • Set up support for major browsers (Chromium, Firefox, WebKit).

2. Core User Flows Automation (E2E):

   • User Login: Write tests for successful authentication using mock or test credentials, validating proper state redirection and local storage/cookie setup.
   • Navigating a Roadmap: Automate interactions with the roadmap UI elements, verifying component rendering, path traversal, and dynamic loading.
   • Updating Profile Settings: Create a script to simulate form inputs (updating username/avatar/preferences), submit the form, and assert success toasts or state persistence.

3. CI/CD Integration (GitHub Actions):

   • Create a .github/workflows/playwright.yml file.
   • Configure it to trigger on pull_request to the main branches.
   • Include steps for: Checkout repository, Setup Node.js, Install dependencies, Install Playwright Browsers, Run tests, and Upload HTML test reports as artifacts if tests fail.

Please assign this issue to me so I can start working on the PR!