Skip to content

Task 6 of the automated tests framework - Advanced API tests

Ticket #172: Implementation of Task 6 - Advanced API tests (Monitoring, Interception, and Mocking)
Type: Automation / API Testing / Reliability
Affected Component: e2e/src/tests/apiNetwork.spec.ts

1. Context and objective

This Task 6 API-testing implementation is part of the direct continuation of previous work: Ticket #167, Ticket #168, Ticket #169, Ticket #170, and Ticket #171.

The main objective of this task is to control browser network traffic so E2E scenarios become more stable, more predictable, and less dependent on back-end API availability.

2. Phase 1 - API Monitoring (network exchange observability)

The first phase focused on instrumenting the page to observe outgoing calls and incoming responses.

The scenario sets up:

  • page.on('request') to log HTTP method and request URL;
  • page.on('response') to log HTTP status code and response URL.

This monitoring provides immediate visibility into network flows, which accelerates UI/API integration troubleshooting.

3. Phase 2 - API Intercepting (in-flight interception and modification)

The second phase introduces global traffic interception with page.route('**/*').

For each intercepted request, the test:

  • reads existing headers;
  • injects a custom header X-Custom-Header: Integration-Check;
  • forwards the modified request to the real server through route.continue().

This approach makes it possible to simulate specific integration conditions without changing front-end application code.

4. Phase 3 - API Mocking (full server-response simulation)

The third phase targets a specific API route to decouple the test from external services.

The scenario intercepts the target endpoint, blocks the real call, and returns a synthetic JSON payload using route.fulfill({ json: fakeResponse }).

The outcome is deterministic:

  • the UI receives controlled data;
  • the test remains executable even if the back-end is unavailable;
  • costs and instability from third-party APIs are avoided.

5. Validation and results

Validation confirmed successful execution of the mocking scenario by targeting only the relevant test (Test 3) on Chromium.

Validated points:

  • effective interception of the API route;
  • proper injection of mocked response data;
  • stable execution with network isolation (--no-deps);
  • successful targeted test run.

6. Incidents encountered and resolution

CLI option --slow-mo not recognized
The npx playwright test command did not accept this flag as used, causing execution failure.
Resolution: use PowerShell debug mode ($env:PWDEBUG='1') and launch in --headed mode to visualize execution.

7. Conclusion and roadmap

Task 6 delivers a robust API-testing foundation for E2E scenarios: network monitoring, controlled interception, and full response simulation.

The framework can now test the UI in a more isolated, faster, and more reliable way while reducing false positives caused by back-end infrastructure variability.

Final step (Task 7): consolidate execution traceability, retry mechanisms, and CI/CD integration.