front: refacto old e2e tests

front/playwright.config.ts

@@ -30,8 +30,8 @@ export default defineConfig({
   workers: process.env.CI ? '50%' : 1,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
-  /* Retry up to 3 times on CI, and 1 time otherwise */
-  retries: process.env.CI ? 3 : 1,
+  /* Retry up to 2 times on CI, and 1 time otherwise */
+  retries: process.env.CI ? 2 : 1,
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */

front/src/applications/operationalStudies/Home.tsx

@@ -132,7 +132,7 @@ const HomeOperationalStudies = () => {
         <div className="col-hdp-2 col-lg-3 col-md-4 col-sm-6">
           <AddNewCard
             translationNamespaces="operationalStudies/home"
-            testId="addProject"
+            testId="add-project"
             className="project-card empty"
             modalComponent={<AddOrEditProjectModal />}
             legendTranslationKey="createProject"

front/src/applications/operationalStudies/components/Scenario/ScenarioDescription.tsx

@@ -97,7 +97,7 @@ const ScenarioDescription = ({
           </button>
         </div>
         <button
-          data-testid="editScenario"
+          data-testid="edit-scenario"
           className="update-scenario"
           type="button"
           aria-label={t('editScenario')}

front/src/applications/operationalStudies/views/Project.tsx

@@ -241,6 +241,7 @@ const Project = () => {
                       <div className="project-details-title-name">
                         {project.name}
                         <button
+                          data-testid="project-update-button"
                           className="project-details-title-modify-button"
                           type="button"
                           onClick={() =>

front/src/applications/operationalStudies/views/Study.tsx

@@ -180,7 +180,7 @@ const Study = () => {
         <div className="col-hdp-3 col-hd-4 col-lg-6">
           <AddNewCard
             translationNamespaces="operationalStudies/study"
-            testId="addScenario"
+            testId="add-scenario-button"
             className="scenario-card empty"
             modalComponent={<AddOrEditScenarioModal />}
             legendTranslationKey="createScenario"

front/src/common/BootstrapSNCF/CardSNCF/CardSNCF.tsx

@@ -20,7 +20,9 @@ const Card = ({ link, img, title, disabledLink = false, openInNewTab = false }:
   >
     <img className="card-img-top" alt={title} src={img} />
     <div className="card-body text-center">
-      <h5 className="card-title mb-0 text-base font-weight-normal">{title}</h5>
+      <h5 data-testid="page-title" className="card-title mb-0 text-base font-weight-normal">
+        {title}
+      </h5>
     </div>
   </Link>
 );

front/src/common/BootstrapSNCF/ChipsSNCF.tsx

@@ -38,7 +38,12 @@ export default function ChipsSNCF({
     return (
       <div role="list" key={nextId()}>
         <div className="chips-group" role="listitem">
-          <span className={`chips chips-label pr-1 ${chipColor}`}>{label}</span>
+          <span
+            data-testid="scenario-details-tag"
+            className={`chips chips-label pr-1 ${chipColor}`}
+          >
+            {label}
+          </span>
           <button
             type="button"
             className={`chips chips-btn chips-only-icon ${chipColor}`}

front/src/common/BootstrapSNCF/NavBarSNCF.tsx

@@ -34,7 +34,7 @@ const LegacyNavBarSNCF = ({ appName, logo = getLogo() }: Props) => {
     <div className="mastheader">
       <div className="mastheader-logo flex-grow-0">
         <Link to="/">
-          <img src={logo} alt="OSRD Logo" />
+          <img src={logo} data-testid="osrd-logo" alt="OSRD Logo" />
         </Link>
       </div>
       <header role="banner" className="mastheader-title d-flex flex-grow-1">

front/src/common/BootstrapSNCF/SelectImprovedSNCF.tsx

@@ -171,7 +171,7 @@ function SelectImproved<T extends string | SelectOptionObject>({
             </div>
           )}
           <div
-            id="-selecttoggle"
+            id="select-toggle"
             className={cx('select-menu', {
               'add-border-top': noTogglingHeader,
               'position-relative': blockMenu,

front/src/modules/infra/components/InfraSelector/InfraSelectorModalBodyStandard.tsx

@@ -84,7 +84,7 @@ export default function InfraSelectorModalBodyStandard({
       <div className="text-center small text-muted infras-count">
         {infrasList && t('infraManagement:infrasFound', { count: infrasList.length })}
       </div>
-      <div className="infraslist" data-testid="infraslist">
+      <div className="infraslist" data-testid="infra-list">
         {infrasList.map((infra) => (
           <button
             data-testid={`infraslist-item-${infra.id}`}

front/src/modules/project/components/AddOrEditProjectModal.tsx

@@ -435,6 +435,7 @@ export default function AddOrEditProjectModal({
         <div className="d-flex justify-content-end w-100">
           {editionMode && (
             <button
+              data-testid="delete-project"
               className="btn btn-outline-danger mr-auto"
               type="button"
               onClick={removeProject}
@@ -450,7 +451,7 @@ export default function AddOrEditProjectModal({
           </button>
           {editionMode ? (
             <button
-              data-testid="updateProject"
+              data-testid="update-project"
               className="btn btn-warning"
               type="button"
               onClick={updateProject}
@@ -462,7 +463,7 @@ export default function AddOrEditProjectModal({
             </button>
           ) : (
             <button
-              data-testid="createProject"
+              data-testid="create-project"
               className="btn btn-primary"
               type="button"
               onClick={createProject}

front/src/modules/scenario/components/AddOrEditScenarioModal.tsx

@@ -369,7 +369,7 @@ const AddOrEditScenarioModal = ({ editionMode = false, scenario }: AddOrEditScen
         <div className="d-flex justify-content-end w-100 mt-3">
           {editionMode && (
             <button
-              data-testid="deleteScenario"
+              data-testid="delete-scenario"
               className="btn btn-sm btn-outline-danger mr-auto"
               type="button"
               onClick={removeScenario}
@@ -385,7 +385,7 @@ const AddOrEditScenarioModal = ({ editionMode = false, scenario }: AddOrEditScen
           </button>
           {editionMode ? (
             <button
-              data-testid="updateScenario"
+              data-testid="update-scenario"
               className="btn btn-sm btn-warning"
               type="button"
               onClick={updateScenario}
@@ -397,7 +397,7 @@ const AddOrEditScenarioModal = ({ editionMode = false, scenario }: AddOrEditScen
             </button>
           ) : (
             <button
-              data-testid="createScenario"
+              data-testid="create-scenario"
               className="btn btn-sm btn-primary"
               type="button"
               onClick={createScenario}

front/src/modules/simulationResult/components/ChartHelpers/__tests__/ChartHelpers.spec.ts

@@ -2,8 +2,8 @@ import { describe, it, expect } from 'vitest';
 
 import { LIST_VALUES, CHART_AXES } from 'modules/simulationResult/consts';
 
-import simulationTrain from '../../../../../../tests/assets/operationStudies/simulationTrain';
-import train from '../../../../../../tests/assets/operationStudies/trainExample';
+import simulationTrain from '../../../../../assets/operationStudies/simulationTrain';
+import train from '../../../../../assets/operationStudies/trainExample';
 import { interpolateOnTime, getAxis } from '../ChartHelpers';
 
 describe('interpolateOnTime', () => {

front/tests/001-home-page.spec.ts

@@ -1,63 +1,62 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 
 import HomePage from './pages/home-page-model';
+import test from './test-logger';
+import enTranslations from '../public/locales/en/home/home.json';
+import frTranslations from '../public/locales/fr/home/home.json';
 
-// Describe the test suite for the home page of OSRD
 test.describe('Home page OSRD', () => {
   let homePage: HomePage;
-
-  test.beforeEach(async ({ page }) => {
-    // Create an instance of the HomePage class
+  let OSRDLanguage: string;
+  test.beforeEach('Navigate to the home page', async ({ page }) => {
     homePage = new HomePage(page);
-    // Go to the home page of OSRD
     await homePage.goToHomePage();
+    OSRDLanguage = await homePage.getOSRDLanguage();
   });
 
-  test.afterEach(async () => {
-    // Navigate back to the home page of OSRD
+  test.afterEach('Returns to the home page', async () => {
     await homePage.backToHomePage();
   });
 
-  // Test that the home page of OSRD displays links to other pages
-  test('should display links in the home page', async () => {
-    await homePage.getDisplayLinks();
+  /** *************** Test 1 **************** */
+  test('Verify the links for different pages in Home Page', async () => {
+    // Determine the correct translations based on the selected language
+    const translations = OSRDLanguage === 'English' ? enTranslations : frTranslations;
+
+    // List of expected links on the home page
+    const expectedLinks = [
+      translations.operationalStudies,
+      translations.stdcm,
+      translations.editor,
+      translations.rollingStockEditor,
+      translations.map,
+    ];
+
+    // Verify that the displayed links match the expected ones
+    await expect(homePage.linksTitle).toHaveText(expectedLinks);
   });
 
-  test('should be correctly redirected to the  "Operational Studies" page after clicking on the link', async () => {
-    // Navigate to the "Operational Studies" page
+  /** *************** Test 2 **************** */
+  test('Verify redirection to the Operational Studies page', async () => {
     await homePage.goToOperationalStudiesPage();
-    // Check that the URL of the page matches the expected pattern
-    await expect(homePage.page).toHaveURL(/.*\/operational-studies/);
+    await expect(homePage.page).toHaveURL(/.*\/operational-studies/); // Check the URL
   });
 
-  test('should be correctly redirected to the  "Map" page after clicking on the link', async () => {
-    // Navigate to the "Map" page
+  /** *************** Test 3 **************** */
+  test('Verify redirection to the Map page', async () => {
     await homePage.goToCartoPage();
-
-    // Check that the URL of the page matches the expected pattern
     await expect(homePage.page).toHaveURL(/.*\/map/);
   });
 
-  test('should be correctly redirected to the  "Editor" page after clicking on the link', async () => {
-    // Navigate to the "Editor" page
+  /** *************** Test 4 **************** */
+  test('Verify redirection to the Infrastructure editor page', async () => {
     await homePage.goToEditorPage();
-
-    // Check that the URL of the page matches the expected pattern
     await expect(homePage.page).toHaveURL(/.*\/editor\/*/);
   });
 
-  test('should be correctly redirected to the  "STDCM" page after clicking on the link', async ({
-    context,
-  }) => {
-    // Start waiting for new page before clicking. Note no await.
-    const pagePromise = context.waitForEvent('page');
-
-    // Navigate to the "STDCM" page
-    await homePage.goToSTDCMPage();
-
-    const newPage = await pagePromise;
-
-    // Check that the URL of the page matches the expected pattern
-    await expect(newPage).toHaveURL(/.*\/stdcm/);
+  /** *************** Test 5 **************** */
+  test('Verify redirection to the STDCM page', async ({ context }) => {
+    const stdcmPage = await homePage.goToSTDCMPage(context);
+    await expect(stdcmPage).toHaveURL(/.*\/stdcm/);
   });
 });