front: update e2e tests readme

Signed-off-by: maymanaf <[email protected]>

front/README.md

@@ -4,7 +4,7 @@
 
 - go inside `/front/` from OSRD main project
 - you'll need [`npm`](https://nodejs.org/en/download/package-manager)
-- exec `npm install` (hope you have a good connexion and a good cup of tea)
+- exec `npm install` (hope you have a good connection and a good cup of tea)
 - exec `npm start` (perhaps you'll need `NODE_OPTIONS="--openssl-legacy-provider"` if your node
   version is too new)
 - enjoy
@@ -38,35 +38,42 @@ Launches end to end tests.
 
 It requires:
 
-- Install playwright dependencies `cd ./front/ && npx playwright install --with-deps`
+- Install Playwright dependencies `cd ./front/ && npx playwright install --with-deps`
 - Backend containers to be up:
+
   `docker compose up --no-build --detach valkey postgres gateway core editoast`
+
 - Running front with `docker compose up --build --detach front`
 
 Now you can run the test with `cd front/ && npm run e2e-tests`.
 
-If you are using a Linux distribution not supported by playwright (which only supports Windows,
-macOS and Ubuntu/Debian), you can instead start the tests inside a docker container using
-`osrd/scripts/run-front-playwright-container.sh`. You may pass the same options and arguments to
-this script as you would to `npm run e2e-tests` or `npx playwright test`.
+If you are using a Linux distribution not supported by Playwright (Playwright only supports Windows,
+macOS and Ubuntu/Debian), you can start the tests inside a Docker container using:
+`osrd/scripts/run-front-playwright-container.sh`. This script accepts the same options and arguments
+as `npm run e2e-tests` or `npx playwright test`.
 
 > [!CAUTION] If you try to run `npm run start` instead of running it through docker, you'll notice
 > it doesn't work because the gateway can't access your local port from inside a container. 2
 > solutions:
 >
-> - run all the components locally (you might keep Postgres and Valkey in containers)
-> - if on Linux, you can also launch all the containers on the host network: you can replace the
+> - Run all the components locally (you might keep Postgres and Valkey in containers)
+> - If on Linux, you can also launch all the containers on the host network: you can replace the
 >   `docker compose <something>` above with `osrd/scripts/host-compose.sh <something>`
 
-If the tests fail, you'll find a `front/test-results` folder that will contain videos of the fail
-test executions. They might be of help to understand what's going on. Note that the CI also exports
-these videos as artifacts.
+If the tests fail, a `front/test-results` folder will be created, containing videos and traces of
+the failed test executions. These files can help you understand what went wrong. Additionally, the
+CI system exports these videos and traces as artifacts. You can view the trace files using the
+[Playwright trace viewer](https://trace.playwright.dev/).
+
+If visual comparisons tests fail due to UI changes, new snapshots are required as the baseline. You
+can automatically update snapshots by running tests with the `--update-snapshots` flag:
+`npx playwright test --update-snapshots`.
 
-You may also want to explore the documentation of the test framework
-[Playwright](https://playwright.dev/). For example, try launching each test independently using
-`npm run playwright test --ui`, debug a test with `npm run playwright test --debug`, or launch a
-specified test of a specified test file with a specified browser once with for example
-`npm run playwright test 011-op-times-and-stops-tab.spec.ts -g "should correctly set and display times and stops tables" --project=firefox  --retries=0`.
+You may also want to explore [Playwright documentation](https://playwright.dev/docs/intro) for more
+insights. For example: Launch each test independently using: `npx playwright test --ui`. Debug a
+test with: `npx playwright test --debug`. Run a specific test in a specific test file with a
+specific browser and no retries using:
+`npx playwright test 011-op-times-and-stops-tab.spec.ts -g "should correctly set and display times and stops tables" --project=firefox  --retries=0`.
 
 ## Design rules
 
@@ -209,10 +216,12 @@ All common code (and shared components) supposed to be in `common/`.
 
 ### Javascript / Javascript-React
 
+### Javascript / Javascript-React
+
 - ESLint is used as linter and prettier as formatter. Both are configured as devDependencies to
-  enforce default eslint configuration eventually overidden by
+  enforce default eslint configuration eventually overridden by
   [airbnb rules](https://airbnb.io/javascript/) translation. A few rules (see eslintrc) has been
-  disabled and will be re-enabled in the near future):
+  disabled and will be re-enabled in the near future:
   - 'no-named-as-default': 'off',
   - 'react/jsx-props-no-spreading': 0,
   - 'react/static-property-placement': 0,
@@ -262,6 +271,7 @@ To fix this, follow these steps:
 1. After pulling new changes, run `npm install` to update local dependencies.
 2. If issues persist, delete `node_modules` and run `npm install` again.
 3. Run `docker compose build --no-cache` to rebuild Docker images from scratch with new
+
    dependencies.
 
 This ensures developers can run the app with the latest dependencies using Docker.

front/src/common/BootstrapSNCF/ToastSNCF.tsx

@@ -56,7 +56,12 @@ const ToastSNCF = ({ title, date, type, text }: Notification) => {
           {title || type}
         </strong>
         {date && <small>{dateToFromAgo(date)}</small>}
-        <button type="button" className="ml-2 close" onClick={() => setOpen(false)}>
+        <button
+          data-testid="close-toast-button"
+          type="button"
+          className="ml-2 close"
+          onClick={() => setOpen(false)}
+        >
           <span>&times;</span>
         </button>
       </div>

front/tests/012-op-simulation-settings-tab.spec.ts

@@ -19,7 +19,7 @@ import OperationalStudiesTimetablePage from './pages/op-timetable-page-model';
 import OperationalStudiesPage from './pages/operational-studies-page-model';
 import RollingStockSelectorPage from './pages/rollingstock-selector-page-model';
 import test from './test-logger';
-import { readJsonFile, waitForInfraStateToBeCached } from './utils';
+import { performOnSpecificOSAndBrowser, readJsonFile, waitForInfraStateToBeCached } from './utils';
 import { deleteApiRequest, getInfra, setElectricalProfile } from './utils/api-setup';
 import { cleanWhitespace, type StationData } from './utils/dataNormalizer';
 import createScenario from './utils/scenario';
@@ -115,7 +115,7 @@ test.describe('Simulation Settings Tab Verification', () => {
       // Add a new train and set its properties
       await operationalStudiesPage.clickOnAddTrainButton();
       await operationalStudiesPage.setTrainScheduleName('Train-name-e2e-test');
-      await page.waitForTimeout(500);
+      await page.waitForTimeout(stabilityTimeout);
       await operationalStudiesPage.setTrainStartTime('11:22:40');
       // Select electric rolling stock
       await rollingStockPage.selectRollingStock(improbableRollingStockName);
@@ -131,7 +131,7 @@ test.describe('Simulation Settings Tab Verification', () => {
     await deleteScenario(project.id, study.id, scenario.name);
   });
 
-  test('Activate electrical profiles', async ({ page }) => {
+  test('Activate electrical profiles', async ({ page, browserName }) => {
     const [
       operationalStudiesPage,
       opInputTablePage,
@@ -212,7 +212,7 @@ test.describe('Simulation Settings Tab Verification', () => {
     );
     await opOutputTablePage.getOutputTableData(expectedCellDataElectricalProfileOFF, OSRDLanguage);
   });
-  test('Activate composition code', async ({ page }) => {
+  test('Activate composition code', async ({ page, browserName }) => {
     const [
       operationalStudiesPage,
       opInputTablePage,
@@ -292,7 +292,7 @@ test.describe('Simulation Settings Tab Verification', () => {
     );
     await opOutputTablePage.getOutputTableData(expectedCellDataCodeCompoOFF, OSRDLanguage);
   });
-  test('Activate linear and mareco margin', async ({ page }) => {
+  test('Activate linear and mareco margin', async ({ page, browserName }) => {
     const [
       operationalStudiesPage,
       opInputTablePage,
@@ -381,7 +381,7 @@ test.describe('Simulation Settings Tab Verification', () => {
     );
     await opOutputTablePage.getOutputTableData(expectedCellDataMarecoMargin, OSRDLanguage);
   });
-  test('Add all the simulation settings', async ({ page }) => {
+  test('Add all the simulation settings', async ({ page, browserName }) => {
     const [
       operationalStudiesPage,
       opInputTablePage,

front/tests/pages/common-page-model.ts

@@ -13,13 +13,16 @@ class CommonPage {
 
   readonly toastSNCF: Locator;
 
+  readonly closeToastButton: Locator;
+
   constructor(page: Page) {
     this.page = page;
     this.toastContainer = page.getByTestId('toast-SNCF');
     this.toastTitle = this.toastContainer.getByTestId('toast-SNCF-title');
     this.tagField = page.getByTestId('chips-input');
     this.viteOverlay = page.locator('vite-plugin-checker-error-overlay');
     this.toastSNCF = page.getByTestId('toast-SNCF');
+    this.closeToastButton = page.getByTestId('close-toast-button');
   }
 
   // Set the tag of project, study or scenario

front/tests/pages/op-simulation-results-page-model.ts

@@ -1,13 +1,13 @@
-import { expect, type Locator, type Page } from '@playwright/test';
+import { type Locator, type Page } from '@playwright/test';
 
 class OpSimulationResultPage {
   readonly page: Page;
 
   private readonly speedSpaceChartSettingsButton: Locator;
 
-  private readonly sscCloseEllipsis: Locator;
+  private readonly speedSpaceChartCheckboxItems: Locator;
 
-  private readonly sscCheckmarks: Locator;
+  readonly speedSpaceChartTabindexElement: Locator;
 
   readonly speedSpaceChartCloseSettingsButton: Locator;
 
@@ -22,31 +22,21 @@ class OpSimulationResultPage {
   }
 
   private async openSettingsPanel(): Promise<void> {
-    await this.sscEllipsisButton.click();
+    await this.speedSpaceChartSettingsButton.click();
   }
 
   private async closeSettingsPanel(): Promise<void> {
-    await this.sscCloseEllipsis.click();
-  }
-
-  // Toggles the checkbox at a specific index if it is not already checked.
-  private async toggleCheckboxIfUnchecked(index: number): Promise<void> {
-    const checkbox = this.sscCheckboxes.nth(index);
-    const isChecked = await checkbox.isChecked();
-
-    if (!isChecked) {
-      await this.sscCheckmarks.nth(index).click();
-    }
-    await expect(checkbox).toBeChecked();
+    await this.speedSpaceChartCloseSettingsButton.click();
   }
 
   // Ensures all checkboxes in the settings panel are checked.
-  async checkAllSscCheckboxes(): Promise<void> {
+  async selectAllSpeedSpaceChartCheckboxes(): Promise<void> {
     await this.openSettingsPanel();
 
     const checkboxes = await this.speedSpaceChartCheckboxItems.all();
     await Promise.all(checkboxes.map((checkbox) => checkbox.setChecked(true, { force: true })));
     await this.closeSettingsPanel();
+    await this.speedSpaceChartSettingsButton.hover(); // Hover over the element to prevent the tooltip from displaying
   }
 }
 

front/tests/pages/op-timetable-page-model.ts

@@ -3,17 +3,16 @@ import { type Locator, type Page, expect } from '@playwright/test';
 import enTranslations from '../../public/locales/en/operationalStudies/scenario.json';
 import frTranslations from '../../public/locales/fr/operationalStudies/scenario.json';
 import { clickWithDelay } from '../utils';
+import CommonPage from './common-page-model';
 
-class OperationalStudiesTimetablePage {
-  readonly page: Page;
-
+class OperationalStudiesTimetablePage extends CommonPage {
   readonly invalidTrainsMessage: Locator;
 
   readonly timetableTrains: Locator;
 
   readonly selectedTimetableTrain: Locator;
 
-  // TODO: remove this commented code when the design of simationBar has been changed
+  // TODO: remove this commented code when the design of simulation bar has been changed
   // readonly simulationBar: Locator;
 
   readonly manchetteSpaceTimeChart: Locator;
@@ -43,11 +42,11 @@ class OperationalStudiesTimetablePage {
   readonly scenarioSideMenu: Locator;
 
   constructor(page: Page) {
-    this.page = page;
+    super(page);
     this.invalidTrainsMessage = page.getByTestId('invalid-trains-message');
     this.timetableTrains = page.getByTestId('scenario-timetable-train');
     this.selectedTimetableTrain = page.locator('[data-testid="scenario-timetable-train"].selected');
-    // TODO: remove this commented code when the design of simationBar has been changed
+    // TODO: remove this commented code when the design of simulation bar has been changed
     // this.simulationBar = page.locator('.osrd-simulation-sticky-bar');
     this.manchetteSpaceTimeChart = page.locator('.manchette-space-time-chart-wrapper');
     this.speedSpaceChart = page.locator('#container-SpeedSpaceChart');
@@ -224,6 +223,7 @@ class OperationalStudiesTimetablePage {
 
   async clickOnEditTrainSchedule() {
     await this.editTrainScheduleButton.click();
+    await this.closeToastNotification();
   }
 
   async getTrainArrivalTime(expectedArrivalTime: string) {

front/tests/pages/operational-studies-page-model.ts

@@ -123,6 +123,7 @@ class OperationalStudiesPage extends CommonPage {
 
   async addTrainSchedule() {
     await this.addTrainScheduleButton.click();
+    await this.closeToastNotification();
   }
 
   async setTrainScheduleName(name: string) {