Configure Playwright for End-to-End Testing

[DevonGifford]

Description

The application requires comprehensive end-to-end tests that cover critical user workflows and scenarios. The task at hand involves configuring Playwright to automate these tests.

Actionable Items

• [x] Set up Playwright for end-to-end testing.
• [x] Identify critical user workflows and scenarios for testing.
• [x] Develop end-to-end tests for these workflows and scenarios using Playwright.

Testing Considerations

• [x] Ensure the successful passing of all end-to-end tests, validating accurate testing of user workflows and scenarios.

[DevonGifford]

End-to-End Tests

---

moved to the following issue:

• 12

[DevonGifford]

PlayWright Testing - End to End Testing

Summary

This pull request introduces a comprehensive end-to-end (E2E) testing environment using Playwright. The goal is to automate the testing of user flows and interactions across the application, ensuring a robust and reliable user experience.

Click here to see more:

## Changes - Added Playwright as a dev dependency. - Set up a basic testing structure in the `tests/e2e` directory. - Configured Playwright to automatically run a local dev server before starting the tests. - Wrote initial E2E tests for key user flows such as registering, logging in, updating settings, and logging out. - Added scripts to `package.json` for running the tests and viewing test reports.

## Environment Testing Tests ✅ Created tests to verify the environment setup: 1. **Test 1: Page Renders Correctly** - Checks rendering of the landing page. 2. **Test 2: Navigation to Login Page** - Verifies navigation to the login page after clicking the “Get Started Now” button.

## Running Tests 🏃‍♂️ The E2E tests can be run using the `yarn playwright test` command or `npm run test:e2e`. Test reports can be viewed using the `npx playwright show-report` command.

Future Work

Testing Backlog

We have identified a comprehensive list of components, utilities, and application functionalities that require unit and integration testing. Will write unit tests to verify isolated functionality and integration tests to confirm correct interaction with other parts of the application.

Reference to new ticket created:

• 12

CI/CD Actions w/Testing

In the future, we plan to integrate these E2E tests with our CI/CD pipeline. This will allow us to run tests automatically on every code push, ensuring that any breaking changes are caught immediately.

Therefore the new and unused: .github/workflows/playwright.yml

Reference to new ticket created:

• 14

Documentation

Overview

End-to-end testing is a methodology used to test whether the flow of an application is performing as designed from start to finish. The purpose of carrying out end-to-end tests is to identify system dependencies and to ensure that the right information is passed between various system components and systems.

Test Scenarios

Our end-to-end tests cover key user flows and functionalities such as:

• User Interaction Flow: Registering, logging in, updating settings, and logging out.
• Persistence: Local storage handling to verify user settings persist between sessions.
• Application Error Scenarios: Local storage save failures and network error handling.

Test Tools

We use Playwright for end-to-end testing in our application. Playwright is a Node.js library to automate Chromium, Firefox, and WebKit browsers with a single API.

Test Setup

We use the npm init playwright@latest command to set up Playwright. This command sets up a testing environment, including installing necessary dependencies and setting up a basic test structure.

Writing Tests

Tests are written in the tests/e2e directory. We use the .spec extension for end-to-end tests to distinguish them from unit and integration tests (which use the .test extension).

When writing tests, we aim to cover all the key user flows and functionalities mentioned in the test scenarios. Each test should be atomic, testing one functionality or flow, and should be independent of other tests.

Running Tests

Tests can be run using the yarn playwright test command. We’ve also added a script to our package.json for convenience, so tests can also be run with npm run test:e2e.

Test Reports

Playwright provides a command npx playwright show-report to view the test report. This report includes information on passed and failed tests, as well as any errors or logs.

CI/CD Integration

In the future, we plan to integrate our end-to-end tests with our CI/CD pipeline. This will allow us to run tests automatically on every code push, ensuring that any breaking changes are caught immediately.