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');
});