Implement Initial Playwright E2E Tests

[arkid15r]

Objective

Set up Playwright for end-to-end (E2E) testing in the OWASP Nest frontend project using a JavaScript/TypeScript environment. The tests should be Dockerized and initially run against the staging environment at https://nest.owasp.dev/, with a plan to implement proper test/environment isolation in the future.

Requirements

• Set up Playwright: Install and configure Playwright in the existing JavaScript/TypeScript test setup.
• Dockerize the testing process: Ensure tests can run inside a Docker container.
• Run against Staging: Initially target https://nest.owasp.dev.
• Plan for Future Isolation: Document steps for implementing proper test environment isolation later.
• Implement Basic Tests: Add at least three simple tests as part of the proof of concept (PoC).
• Separate Test Structures: Ensure unit and E2E tests are structured in separate directories to avoid conflicts and maintain clarity.

Implementation Steps

1. Install Playwright

• Install Playwright as a development dependency in the project.
• Ensure required browsers are installed for Playwright.

2. Configure Playwright

• Set up a Playwright configuration file that specifies the base URL as https://nest.owasp.dev.
• Define basic settings such as headless mode and test directory.

3. Organize Test Structure

• Create separate directories for unit and E2E tests:
  • __tests__/unit/ for Jest-based unit tests.
  • __tests__/e2e/ for Playwright-based end-to-end tests.
• Ensure Playwright tests are not executed by Jest and vice versa.

4. Write Initial Tests

• Implement at least three simple tests to verify the following:
  1. The homepage loads successfully and has the correct title.
  2. The projects page is accessible and displays expected content.
  3. The search functionality works as expected.
• Place these tests in the __tests__/e2e/ directory.

5. Dockerize the Tests

• Create a Dockerfile to containerize the Playwright test execution.
• Ensure all necessary dependencies are installed inside the container.
• Define a command to run the Playwright test suite inside the container.

6. Run Tests in Docker

• Build the Docker image containing the Playwright test setup.
• Execute the tests within the container and ensure they run successfully.

Future Enhancements

• Implement a dedicated test environment instead of using staging.
• Integrate with the existing frontend test setup.
• Automate test execution in CI/CD pipelines.
• Expand test coverage for more critical flows.

Deliverables

• Playwright setup integrated into the project.
• Dockerized test execution.
• At least three working E2E tests.
• Clearly separated unit and E2E test structures.
• Documentation on running tests and future improvements.

Notes

This PoC aims to validate the feasibility of Playwright for E2E testing. Feedback from initial runs will guide further refinements.

[Rajgupta36]

@arkid15r , could you assign this issue to me

[yashgoyal0110]

Would like to contribute to it.

[Naveen-Pal]

Interested