Skip to content

End-to-end Guidelines

This file explains how we plan to do end-to-end testing using Playwright. Our first goal is to test that each page in the app loads and works as expected.

This guide should be updated as the time passes with new use-cases we encounter.

Why End-to-end Tests

End-to-end tests are one part of our testing setup. They are used to check that everything works together.

  • We already test our design-kit components with unit tests (although not all of them)
  • End-to-end tests will focus on checking that the full page is shown correctly to the user
  • End-to-end will assert that when a button is pressed an API call is performed

What We Will Test

  • We will write tests for full pages
  • These tests will check that the page loads, important parts are visible, and basic content appears correctly

What We Will Not Test (for now)

  • We will be writing tests for feature flows as a first step
  • We will see how much testing pages are viable and maybe include them

Where Tests Will Run

  • We'll use the anonymous dump to set up the environment. This keeps data the same in all places and helps PMs find problems faster
  • Test data will also come from the anonymous dump, not from fixtures or data created on-the-fly. We can add Playwright-specific data later if needed

Login in Tests

  • Endpoint TBD will be used to login a user into the app. This endpoint will only be available on environments where end-to-end is enabled

Running Tests in CI

  • End-to-end tests can be run by adding the label TBD to your pull requests

Folder Structure

Since we will start with testing flows we will have a folder named flow:

Test flow file: laravel/resources/e2e/flows/ssf.spec.ts

Then, when we introduce page tests the file should follow the same folder path as the Vue page it tests

Page component: laravel/resources/inertia/views/pages/dealers/dashboard/Page.vue Test file: laravel/resources/e2e/pages/dealers/dashboard/Page.spec.ts

Targeting Elements

  • We will use data-testid attributes to find elements in the test
  • Do not use CSS classes or text content to find elements

Naming Rules

  • Test files must follow the folder structure of the pages

Who Writes Tests

  • Developers must write tests for new pages
  • Product managers can also help write or change tests
  • Include tests when product managers request them

Test example

import { setInputSelectValue } from './utils/forms/input-select';
import { expect, test } from '@playwright/test';
import * as path from 'node:path';
import { fileURLToPath } from 'node:url';

test('it can submit advert through ssf (italian)', async ({ page }) => {
    await page.goto('/it');

    await page.getByTestId('nav-sell-your-classic').click();
    await page.waitForURL('/it/vendere-il-mio-veicolo');
});