Skip to content

Task 1 of the automated tests framework - Establishing the technical foundations

Ticket #167: Establishing the technical foundations of the Playwright framework
Type: Automation / Quality / Test Infrastructure
Affected Component: e2e/src/package.json, e2e/src/playwright.config.ts, e2e/src/eslint.config.mts, e2e/src/tests/example.spec.ts, e2e/src/.gitignore

1. Context

As part of developing the Augmented Financial Analyst SaaS application, several critical processes needed to be secured and automated in a reliable way, especially authentication and in-app navigation.

The decision was therefore made to build a real End-to-End framework rather than accumulate isolated test scripts. This approach answers a more mature quality engineering need: having a foundation able to support application growth, parallel test execution, future multi-environment management, continuous integration (CI/CD), and eventually resilience mechanisms such as retries and self-healing.

Task 1 corresponded to this foundation phase. Before automating business journeys, it was necessary to establish a stable, clean, and maintainable working structure so that the framework could evolve without becoming fragile or difficult to operate.

2. Objective

The purpose of this first task was to put in place the minimum essential building blocks for an E2E automated test framework that can remain viable over time, rather than simply work on a one-off basis.

Concretely, this meant:

  • initializing the project with Node.js and NPM, in order to provide the runtime environment needed to execute TypeScript code locally and later in CI/CD, while ensuring reliable and reproducible dependency installation;
  • installing the Playwright browser engines, so tests can run quickly on rendering engines (Chromium, Firefox, WebKit) without depending on full heavyweight graphical browsers;
  • structuring the framework into dedicated folders (config, pages, utils, data, tests) to prepare a clear architecture, compatible with the Page Object Model and easier to maintain as the interface evolves;
  • setting up an initial quality gate with ESLint, to detect syntax issues early and enforce consistent coding standards;
  • adding a smoke test, to validate from the first iteration that the runner, browsers, and execution mechanics are working correctly.

3. Delivered implementation

3.1 — Initializing the Node + Playwright foundation

The file e2e/src/package.json introduces the base dependencies required to build the framework:

  • @playwright/test
  • typescript
  • eslint
  • typescript-eslint
  • @eslint/js
  • globals
  • @types/node

This immediately provides an environment aligned with E2E testing, static quality, and maintainability.

3.2 — Initial framework structure

The e2e/src/ directory was prepared with a modular structure:

  • config/
  • data/
  • pages/
  • utils/
  • tests/

Even if these folders are still at the foundation stage, the separation of responsibilities is already in place. This prepares the next steps of the initiative, especially for Page Object Model, fixtures, and data handling.

3.3 — Multi-browser execution configuration

The file e2e/src/playwright.config.ts already includes several structuring decisions:

  • test directory definition
  • forbidOnly protection in CI
  • retries enabled for CI runs
  • limited workers in continuous integration
  • HTML report generation
  • trace capture on first retry
  • prepared execution on:
  • chromium
  • firefox
  • webkit

This shows that the initial foundation was designed from the start for a more robust and professional use than a simple local script.

3.4 — Integrating quality control with ESLint

The file e2e/src/eslint.config.mts introduces linting for JavaScript and TypeScript code.

This quality gate is important because it establishes code discipline from the birth of the framework rather than postponing it to a later phase.

3.5 — Adding an initial smoke test

The file e2e/src/tests/example.spec.ts provides two starter tests:

  • checking the page title on playwright.dev
  • navigating to the “Get started” page

This test is not meant to cover a business need of the product; it serves to validate the framework bootstrap, the test runner behavior, and the readiness of the automation groundwork.

3.6 — Git hygiene and artifact control

The file e2e/src/.gitignore excludes generated elements that should not pollute the repository:

  • node_modules/
  • test-results/
  • playwright-report/
  • blob-report/
  • Playwright caches
  • local authentication-related data

This directly supports the need for repository cleanliness and minimum protection around the E2E perimeter.

4. Operational outcome

Task #167 moved the project from a simple framework intention to a versioned and structured technical foundation.

At the end of this first delivery, the repository now includes:

  • a dedicated E2E workspace
  • an installed Playwright base
  • an initial execution configuration
  • a first quality guard with ESLint
  • an initial smoke test
  • Git hygiene adapted to test artifacts

This base is not yet the full business-ready framework, but it is the concrete anchor point on which the next layers can now be added: Page Object Model, custom fixtures, environment management, DDT, robustness, and CI/CD.