@uuv/playwright 3.38.0 → 3.40.0

package/dist/cucumber/step_definitions/playwright/generated/_en-generated-cucumber-steps-definition.js

@@ -456,6 +456,56 @@ function getConfigDir() {
         await (0, test_1.expect)(foundedElement).toEqual(expectedElementsOfList.raw());
     });
 });
+/**
+ * Checks that there is a grid with the specified [name](https://russmaxdesign.github.io/html-elements-names/) containing list items.<br/> <u>Example</u>\n```gherkin\nWhen I visit path "https://e2e-test-quest.github.io/simple-webapp/grid.html"\nThen I should see a grid named "HTML Grid Example" and containing\n| Make         | Model   | Price  |\n| ------------ | ------- | ------ |\n| Toyota       | Celica  | 35000  |\n| Ford         | Mondeo  | 32000  |\n| Porsche      | Boxster | 72000  |\n| BMW          | M50     | 60000  |\n| Aston Martin | DBX     | 190000 |\n```
+ * */
+(0, world_1.Then)(`I should see a grid named {string} and containing`, async function (expectedListName, pExpectedElementsOfList) {
+    const expectedElementsOfList = removeHeaderSeparatorLine(pExpectedElementsOfList);
+    await (0, core_engine_1.findWithRoleAndName)(this, "grid", expectedListName);
+    await (0, core_engine_1.getPageOrElement)(this).then(async (element) => {
+        await expectTableToHaveContent(element, expectedElementsOfList, "gridcell");
+    });
+});
+/**
+ * Checks that there is a treegrid with the specified [name](https://russmaxdesign.github.io/html-elements-names/) containing list items.<br/> <u>Example</u>\n```gherkin\nWhen I visit path "https://e2e-test-quest.github.io/simple-webapp/treegrid.html"\nThen I should see a treegrid named "HTML Treegrid Example" and containing\n| Make         | Model   | Price  |\n| ------------ | ------- | ------ |\n| Toyota       | Celica  | 35000  |\n| Ford         | Mondeo  | 32000  |\n| Porsche      | Boxster | 72000  |\n| BMW          | M50     | 60000  |\n| Aston Martin | DBX     | 190000 |\n```
+ * */
+(0, world_1.Then)(`I should see a treegrid named {string} and containing`, async function (expectedListName, pExpectedElementsOfList) {
+    const expectedElementsOfList = removeHeaderSeparatorLine(pExpectedElementsOfList);
+    await (0, core_engine_1.findWithRoleAndName)(this, "treegrid", expectedListName);
+    await (0, core_engine_1.getPageOrElement)(this).then(async (element) => {
+        await expectTableToHaveContent(element, expectedElementsOfList, "gridcell");
+    });
+});
+/**
+ * Checks that there is a table with the specified [name](https://russmaxdesign.github.io/html-elements-names/) containing list items.<br/> <u>Example</u>\n```gherkin\nWhen I visit path "https://e2e-test-quest.github.io/simple-webapp/table.html"\nThen I should see a table named "test-list" and containing\n| Company                       | Contact          | Country |\n| ----------------------------- | ---------------- | ------- |\n| Alfreds Futterkiste           | Maria Anders     | Germany |\n| Centro comercial Moctezuma    | Francisco Chang  | Mexico  |\n| Ernst Handel                  | Roland Mendel    | Austria |\n| Island Trading                | Helen Bennett    | UK      |\n| Laughing Bacchus Winecellars  | Yoshi Tannamuri  | Canada  |\n| Magazzini Alimentari Riuniti  | Giovanni Rovelli | Italy   |\n```
+ * */
+(0, world_1.Then)(`I should see a table named {string} and containing`, async function (expectedListName, pExpectedElementsOfList) {
+    const expectedElementsOfList = removeHeaderSeparatorLine(pExpectedElementsOfList);
+    await (0, core_engine_1.findWithRoleAndName)(this, "table", expectedListName);
+    await (0, core_engine_1.getPageOrElement)(this).then(async (element) => {
+        await expectTableToHaveContent(element, expectedElementsOfList, "cell");
+    });
+});
+function removeHeaderSeparatorLine(pExpectedElementsOfList) {
+    const expectedElementsOfList = pExpectedElementsOfList.raw();
+    if (expectedElementsOfList.length > 1) {
+        expectedElementsOfList.splice(1, 1);
+    }
+    return expectedElementsOfList;
+}
+async function expectTableToHaveContent(element, expectedElementsOfList, pCellAccessibleRole) {
+    const rows = await element.getByRole("row", { exact: true }).all();
+    return await Promise.all(rows.map(async (row, rowNumber) => {
+        const cellAccessibleRole = rowNumber === 0 ? "columnheader" : pCellAccessibleRole;
+        const cellsElement = await row.getByRole(cellAccessibleRole, { exact: true }).all();
+        let cellNumber = 0;
+        return await Promise.all(cellsElement.map((cell) => {
+            const expectedValue = expectedElementsOfList[rowNumber][cellNumber];
+            (0, test_1.expect)(cell, { message: `${cellAccessibleRole} at index [${rowNumber}, ${cellNumber}] should be ${expectedValue}` }).toHaveAccessibleName(expectedValue);
+            cellNumber++;
+        }));
+    }));
+}
 async function pressKey(world, key) {
     switch (key) {
         case runner_commons_1.KEY_PRESS.TAB:

package/dist/cucumber/step_definitions/playwright/generated/_fr-generated-cucumber-steps-definition.js

@@ -456,6 +456,56 @@ function getConfigDir() {
         await (0, test_1.expect)(foundedElement).toEqual(expectedElementsOfList.raw());
     });
 });
+/**
+ * Vérifie qu'il existe une grille (grid) avec le nom et les éléments spécifiés.<br/> <u>Exemple</u>\n```gherkin\nQuand je visite l'Url "https://e2e-test-quest.github.io/simple-webapp/grid.html"\nAlors je dois voir une liste nommée "HTML Grid Example" et contenant\n| Make         | Model   | Price  |\n| ------------ | ------- | ------ |\n| Toyota       | Celica  | 35000  |\n| Ford         | Mondeo  | 32000  |\n| Porsche      | Boxster | 72000  |\n| BMW          | M50     | 60000  |\n| Aston Martin | DBX     | 190000 |\n```
+ * */
+(0, world_1.Then)(`je dois voir une grille nommée {string} et contenant`, async function (expectedListName, pExpectedElementsOfList) {
+    const expectedElementsOfList = removeHeaderSeparatorLine(pExpectedElementsOfList);
+    await (0, core_engine_1.findWithRoleAndName)(this, "grid", expectedListName);
+    await (0, core_engine_1.getPageOrElement)(this).then(async (element) => {
+        await expectTableToHaveContent(element, expectedElementsOfList, "gridcell");
+    });
+});
+/**
+ * Vérifie qu'il existe une grille arborescente (treegrid) avec le nom et les éléments spécifiés.<br/> <u>Exemple</u>\n```gherkin\nQuand je visite l'Url "https://e2e-test-quest.github.io/simple-webapp/treegrid.html"\nAlors je dois voir une liste nommée "HTML Treegrid Example" et contenant\n| Make         | Model   | Price  |\n| ------------ | ------- | ------ |\n| Toyota       | Celica  | 35000  |\n| Ford         | Mondeo  | 32000  |\n| Porsche      | Boxster | 72000  |\n| BMW          | M50     | 60000  |\n| Aston Martin | DBX     | 190000 |\n```
+ * */
+(0, world_1.Then)(`je dois voir une grille arborescente nommée {string} et contenant`, async function (expectedListName, pExpectedElementsOfList) {
+    const expectedElementsOfList = removeHeaderSeparatorLine(pExpectedElementsOfList);
+    await (0, core_engine_1.findWithRoleAndName)(this, "treegrid", expectedListName);
+    await (0, core_engine_1.getPageOrElement)(this).then(async (element) => {
+        await expectTableToHaveContent(element, expectedElementsOfList, "gridcell");
+    });
+});
+/**
+ * Vérifie qu'il existe un tableau (table) avec le nom et les éléments spécifiés.<br/> <u>Exemple</u>\n```gherkin\nQuand je visite l'Url "https://e2e-test-quest.github.io/simple-webapp/table.html"\nAlors je dois voir un tableau nommée "HTML Table Example" et contenant\n| Company                       | Contact          | Country |\n| ----------------------------- | ---------------- | ------- |\n| Alfreds Futterkiste           | Maria Anders     | Germany |\n| Centro comercial Moctezuma    | Francisco Chang  | Mexico  |\n| Ernst Handel                  | Roland Mendel    | Austria |\n| Island Trading                | Helen Bennett    | UK      |\n| Laughing Bacchus Winecellars  | Yoshi Tannamuri  | Canada  |\n| Magazzini Alimentari Riuniti  | Giovanni Rovelli | Italy   |\n```
+ * */
+(0, world_1.Then)(`je dois voir un tableau nommé {string} et contenant`, async function (expectedListName, pExpectedElementsOfList) {
+    const expectedElementsOfList = removeHeaderSeparatorLine(pExpectedElementsOfList);
+    await (0, core_engine_1.findWithRoleAndName)(this, "table", expectedListName);
+    await (0, core_engine_1.getPageOrElement)(this).then(async (element) => {
+        await expectTableToHaveContent(element, expectedElementsOfList, "cell");
+    });
+});
+function removeHeaderSeparatorLine(pExpectedElementsOfList) {
+    const expectedElementsOfList = pExpectedElementsOfList.raw();
+    if (expectedElementsOfList.length > 1) {
+        expectedElementsOfList.splice(1, 1);
+    }
+    return expectedElementsOfList;
+}
+async function expectTableToHaveContent(element, expectedElementsOfList, pCellAccessibleRole) {
+    const rows = await element.getByRole("row", { exact: true }).all();
+    return await Promise.all(rows.map(async (row, rowNumber) => {
+        const cellAccessibleRole = rowNumber === 0 ? "columnheader" : pCellAccessibleRole;
+        const cellsElement = await row.getByRole(cellAccessibleRole, { exact: true }).all();
+        let cellNumber = 0;
+        return await Promise.all(cellsElement.map((cell) => {
+            const expectedValue = expectedElementsOfList[rowNumber][cellNumber];
+            (0, test_1.expect)(cell, { message: `${cellAccessibleRole} at index [${rowNumber}, ${cellNumber}] should be ${expectedValue}` }).toHaveAccessibleName(expectedValue);
+            cellNumber++;
+        }));
+    }));
+}
 async function pressKey(world, key) {
     switch (key) {
         case runner_commons_1.KEY_PRESS.TAB:

package/dist/cucumber/step_definitions/playwright/generated/enriched/fr/_fr-generated-steps-definition_table.js

@@ -22,19 +22,19 @@ const test_1 = require("@playwright/test");
 /**
  * Sélectionne l'élément ayant le rôle table et le [nom accessible](https://russmaxdesign.github.io/html-elements-names/) sont spécifiés <br />⚠ pensez à déselectionner l'élement avec <b>[je reinitialise le contexte](#je-reinitialise-le-contexte)</b> si vous n'agissez plus dessus
  * */
-(0, world_1.When)(`je vais à l'intérieur de la tableau nommée {string}`, async function (name) {
+(0, world_1.When)(`je vais à l'intérieur du tableau nommé {string}`, async function (name) {
     return await (0, core_engine_1.withinRoleAndName)(this, "table", name);
 });
 /**
  * Vérifie l'existence d'un élément Html ayant le rôle table et le [nom accessible](https://russmaxdesign.github.io/html-elements-names/) spécifiés
  * */
-(0, world_1.Then)(`je dois voir une tableau nommée {string}`, async function (name) {
+(0, world_1.Then)(`je dois voir un tableau nommé {string}`, async function (name) {
     await (0, core_engine_1.findWithRoleAndName)(this, "table", name);
 });
 /**
  * Vérifie l'inexistence d'un élément Html ayant le rôle table et le [nom accessible](https://russmaxdesign.github.io/html-elements-names/) spécifiés
  * */
-(0, world_1.Then)(`je ne dois pas voir une tableau nommée {string}`, async function (name) {
+(0, world_1.Then)(`je ne dois pas voir un tableau nommé {string}`, async function (name) {
     await (0, core_engine_1.notFoundWithRoleAndName)(this, "table", name);
 });
 // End of General Section
@@ -42,7 +42,7 @@ const test_1 = require("@playwright/test");
 /**
  * Saisie de la phrase passée en paramètre dans le champ spécifié (utile par exemple pour remplir un champ de formulaire).
  * */
-(0, world_1.When)(`je saisie le(s) mot(s) {string} dans le tableau nommée {string}`, async function (textToType, name) {
+(0, world_1.When)(`je saisie le(s) mot(s) {string} dans le tableau nommé {string}`, async function (textToType, name) {
     await (0, core_engine_1.getPageOrElement)(this).then(async (element) => {
         const byRole = await element.getByRole("table", { name: name, exact: true });
         await (0, test_1.expect)(byRole).toHaveCount(1, { timeout: await (0, core_engine_1.getTimeout)(this) });
@@ -53,7 +53,7 @@ const test_1 = require("@playwright/test");
 /**
  * Saisie de la phrase passée en paramètre dans le champ spécifié (utile par exemple pour remplir un champ de formulaire).
  * */
-(0, world_1.When)(`j'entre la valeur {string} dans le tableau nommée {string}`, async function (textToType, name) {
+(0, world_1.When)(`j'entre la valeur {string} dans le tableau nommé {string}`, async function (textToType, name) {
     await (0, core_engine_1.getPageOrElement)(this).then(async (element) => {
         const byRole = await element.getByRole("table", { name: name, includeHidden: true, exact: true });
         await (0, test_1.expect)(byRole).toHaveCount(1);
@@ -66,19 +66,19 @@ const test_1 = require("@playwright/test");
 /**
  * Vérifie l'existence d'un élément Html ayant le rôle table, le [nom accessible](https://russmaxdesign.github.io/html-elements-names/) et le contenu spécifiés
  * */
-(0, world_1.Then)(`je dois voir une tableau nommée {string} et contenant {string}`, async function (name, expectedTextContent) {
+(0, world_1.Then)(`je dois voir un tableau nommé {string} et contenant {string}`, async function (name, expectedTextContent) {
     await (0, core_engine_1.findWithRoleAndNameAndContent)(this, "table", name, expectedTextContent);
 });
 /**
  * Vérifie l'existence d'un élément Html ayant le rôle table, le [nom accessible](https://russmaxdesign.github.io/html-elements-names/), le contenu spécifiés et avec l'attribut disabled à false
  * */
-(0, world_1.Then)(`je dois voir une tableau nommée {string} et contenant {string} inactif`, async function (name, expectedTextContent) {
+(0, world_1.Then)(`je dois voir un tableau nommé {string} et contenant {string} inactif`, async function (name, expectedTextContent) {
     await (0, core_engine_1.findWithRoleAndNameAndContentDisable)(this, "table", name, expectedTextContent);
 });
 /**
  * Vérifie l'existence d'un élément Html ayant le rôle table, le [nom accessible](https://russmaxdesign.github.io/html-elements-names/), le contenu spécifiés et avec l'attribut disabled à true
  * */
-(0, world_1.Then)(`je dois voir une tableau nommée {string} et contenant {string} actif`, async function (name, expectedTextContent) {
+(0, world_1.Then)(`je dois voir un tableau nommé {string} et contenant {string} actif`, async function (name, expectedTextContent) {
     await (0, core_engine_1.findWithRoleAndNameAndContentEnable)(this, "table", name, expectedTextContent);
 });
 // End of Content Section

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uuv/playwright",
-  "version": "3.38.0",
+  "version": "3.40.0",
   "type": "commonjs",
   "author": "Louis Fredice NJAKO MOLOM (https://github.com/luifr10) & Stanley SERVICAL (https://github.com/stanlee974)",
   "description": "A solution to facilitate the writing and execution of E2E tests understandable by any human being using cucumber(BDD) and playwright",
@@ -47,7 +47,7 @@
     "@cucumber/tag-expressions": "6.2.0",
     "@playwright/test": "1.52.0",
     "@uuv/a11y": "1.0.0-beta.71",
-    "@uuv/runner-commons": "2.51.0",
+    "@uuv/runner-commons": "2.53.0",
     "axe-core": "4.10.3",
     "axe-playwright": "2.1.0",
     "chalk-table": "1.0.2",

package/src/cucumber/step_definitions/playwright/generated/_en-generated-cucumber-steps-definition.ts

@@ -34,14 +34,14 @@ import {
     findWithRoleAndNameFocused,
     getCookie,
     getPageOrElement,
+    getTimeout,
     MockCookie,
     notFoundWithRoleAndName,
     SelectedElementCookie,
     TimeoutCookie,
-    withinRoleAndName,
-    getTimeout
+    withinRoleAndName
 } from "../core-engine";
-import { World, Given, Then, When } from "../../../preprocessor/run/world";
+import { Given, Then, When, World } from "../../../preprocessor/run/world";
 import { ContextObject, RunOptions } from "axe-core";
 import path from "path";
 
@@ -586,6 +586,70 @@ Then(
  }
 );
 
+/**
+ * Checks that there is a grid with the specified [name](https://russmaxdesign.github.io/html-elements-names/) containing list items.<br/> <u>Example</u>\n```gherkin\nWhen I visit path "https://e2e-test-quest.github.io/simple-webapp/grid.html"\nThen I should see a grid named "HTML Grid Example" and containing\n| Make         | Model   | Price  |\n| ------------ | ------- | ------ |\n| Toyota       | Celica  | 35000  |\n| Ford         | Mondeo  | 32000  |\n| Porsche      | Boxster | 72000  |\n| BMW          | M50     | 60000  |\n| Aston Martin | DBX     | 190000 |\n```
+ * */
+Then(
+    `I should see a grid named {string} and containing`,
+    async function(expectedListName: string, pExpectedElementsOfList: DataTable) {
+        const expectedElementsOfList = removeHeaderSeparatorLine(pExpectedElementsOfList);
+        await findWithRoleAndName(this, "grid", expectedListName);
+        await getPageOrElement(this).then(async (element) => {
+            await expectTableToHaveContent(element, expectedElementsOfList, "gridcell");
+        });
+    }
+);
+
+/**
+ * Checks that there is a treegrid with the specified [name](https://russmaxdesign.github.io/html-elements-names/) containing list items.<br/> <u>Example</u>\n```gherkin\nWhen I visit path "https://e2e-test-quest.github.io/simple-webapp/treegrid.html"\nThen I should see a treegrid named "HTML Treegrid Example" and containing\n| Make         | Model   | Price  |\n| ------------ | ------- | ------ |\n| Toyota       | Celica  | 35000  |\n| Ford         | Mondeo  | 32000  |\n| Porsche      | Boxster | 72000  |\n| BMW          | M50     | 60000  |\n| Aston Martin | DBX     | 190000 |\n```
+ * */
+Then(
+    `I should see a treegrid named {string} and containing`,
+    async function(expectedListName: string, pExpectedElementsOfList: DataTable) {
+        const expectedElementsOfList = removeHeaderSeparatorLine(pExpectedElementsOfList);
+        await findWithRoleAndName(this, "treegrid", expectedListName);
+        await getPageOrElement(this).then(async (element) => {
+            await expectTableToHaveContent(element, expectedElementsOfList, "gridcell");
+        });
+    }
+);
+
+/**
+ * Checks that there is a table with the specified [name](https://russmaxdesign.github.io/html-elements-names/) containing list items.<br/> <u>Example</u>\n```gherkin\nWhen I visit path "https://e2e-test-quest.github.io/simple-webapp/table.html"\nThen I should see a table named "test-list" and containing\n| Company                       | Contact          | Country |\n| ----------------------------- | ---------------- | ------- |\n| Alfreds Futterkiste           | Maria Anders     | Germany |\n| Centro comercial Moctezuma    | Francisco Chang  | Mexico  |\n| Ernst Handel                  | Roland Mendel    | Austria |\n| Island Trading                | Helen Bennett    | UK      |\n| Laughing Bacchus Winecellars  | Yoshi Tannamuri  | Canada  |\n| Magazzini Alimentari Riuniti  | Giovanni Rovelli | Italy   |\n```
+ * */
+Then(
+    `I should see a table named {string} and containing`,
+    async function(expectedListName: string, pExpectedElementsOfList: DataTable) {
+        const expectedElementsOfList = removeHeaderSeparatorLine(pExpectedElementsOfList);
+        await findWithRoleAndName(this, "table", expectedListName);
+        await getPageOrElement(this).then(async (element) => {
+            await expectTableToHaveContent(element, expectedElementsOfList, "cell");
+        });
+    }
+);
+
+function removeHeaderSeparatorLine(pExpectedElementsOfList: DataTable) {
+    const expectedElementsOfList = pExpectedElementsOfList.raw();
+    if (expectedElementsOfList.length > 1) {
+        expectedElementsOfList.splice(1, 1);
+    }
+    return expectedElementsOfList;
+}
+
+async function expectTableToHaveContent(element: Locator, expectedElementsOfList: string[][], pCellAccessibleRole: string) {
+    const rows = await element.getByRole("row", { exact: true }).all();
+    return await Promise.all(rows.map(async (row: Locator, rowNumber: number) => {
+        const cellAccessibleRole = rowNumber === 0 ? "columnheader" : pCellAccessibleRole;
+        const cellsElement = await row.getByRole(cellAccessibleRole as any, { exact: true }).all();
+        let cellNumber = 0;
+        return await Promise.all(cellsElement.map((cell: Locator) => {
+            const expectedValue = expectedElementsOfList[rowNumber][cellNumber];
+            expect(cell, { message: `${cellAccessibleRole} at index [${rowNumber}, ${cellNumber}] should be ${expectedValue}` }).toHaveAccessibleName(expectedValue);
+            cellNumber++;
+        }));
+    }));
+}
+
 async function pressKey(world: World, key: string) {
   switch (key) {
     case KEY_PRESS.TAB:

package/src/cucumber/step_definitions/playwright/generated/_fr-generated-cucumber-steps-definition.ts

@@ -34,14 +34,14 @@ import {
     findWithRoleAndNameFocused,
     getCookie,
     getPageOrElement,
+    getTimeout,
     MockCookie,
     notFoundWithRoleAndName,
     SelectedElementCookie,
     TimeoutCookie,
-    withinRoleAndName,
-    getTimeout
+    withinRoleAndName
 } from "../core-engine";
-import { World, Given, Then, When } from "../../../preprocessor/run/world";
+import { Given, Then, When, World } from "../../../preprocessor/run/world";
 import { ContextObject, RunOptions } from "axe-core";
 import path from "path";
 
@@ -586,6 +586,70 @@ Then(
  }
 );
 
+/**
+ * Vérifie qu'il existe une grille (grid) avec le nom et les éléments spécifiés.<br/> <u>Exemple</u>\n```gherkin\nQuand je visite l'Url "https://e2e-test-quest.github.io/simple-webapp/grid.html"\nAlors je dois voir une liste nommée "HTML Grid Example" et contenant\n| Make         | Model   | Price  |\n| ------------ | ------- | ------ |\n| Toyota       | Celica  | 35000  |\n| Ford         | Mondeo  | 32000  |\n| Porsche      | Boxster | 72000  |\n| BMW          | M50     | 60000  |\n| Aston Martin | DBX     | 190000 |\n```
+ * */
+Then(
+    `je dois voir une grille nommée {string} et contenant`,
+    async function(expectedListName: string, pExpectedElementsOfList: DataTable) {
+        const expectedElementsOfList = removeHeaderSeparatorLine(pExpectedElementsOfList);
+        await findWithRoleAndName(this, "grid", expectedListName);
+        await getPageOrElement(this).then(async (element) => {
+            await expectTableToHaveContent(element, expectedElementsOfList, "gridcell");
+        });
+    }
+);
+
+/**
+ * Vérifie qu'il existe une grille arborescente (treegrid) avec le nom et les éléments spécifiés.<br/> <u>Exemple</u>\n```gherkin\nQuand je visite l'Url "https://e2e-test-quest.github.io/simple-webapp/treegrid.html"\nAlors je dois voir une liste nommée "HTML Treegrid Example" et contenant\n| Make         | Model   | Price  |\n| ------------ | ------- | ------ |\n| Toyota       | Celica  | 35000  |\n| Ford         | Mondeo  | 32000  |\n| Porsche      | Boxster | 72000  |\n| BMW          | M50     | 60000  |\n| Aston Martin | DBX     | 190000 |\n```
+ * */
+Then(
+    `je dois voir une grille arborescente nommée {string} et contenant`,
+    async function(expectedListName: string, pExpectedElementsOfList: DataTable) {
+        const expectedElementsOfList = removeHeaderSeparatorLine(pExpectedElementsOfList);
+        await findWithRoleAndName(this, "treegrid", expectedListName);
+        await getPageOrElement(this).then(async (element) => {
+            await expectTableToHaveContent(element, expectedElementsOfList, "gridcell");
+        });
+    }
+);
+
+/**
+ * Vérifie qu'il existe un tableau (table) avec le nom et les éléments spécifiés.<br/> <u>Exemple</u>\n```gherkin\nQuand je visite l'Url "https://e2e-test-quest.github.io/simple-webapp/table.html"\nAlors je dois voir un tableau nommée "HTML Table Example" et contenant\n| Company                       | Contact          | Country |\n| ----------------------------- | ---------------- | ------- |\n| Alfreds Futterkiste           | Maria Anders     | Germany |\n| Centro comercial Moctezuma    | Francisco Chang  | Mexico  |\n| Ernst Handel                  | Roland Mendel    | Austria |\n| Island Trading                | Helen Bennett    | UK      |\n| Laughing Bacchus Winecellars  | Yoshi Tannamuri  | Canada  |\n| Magazzini Alimentari Riuniti  | Giovanni Rovelli | Italy   |\n```
+ * */
+Then(
+    `je dois voir un tableau nommé {string} et contenant`,
+    async function(expectedListName: string, pExpectedElementsOfList: DataTable) {
+        const expectedElementsOfList = removeHeaderSeparatorLine(pExpectedElementsOfList);
+        await findWithRoleAndName(this, "table", expectedListName);
+        await getPageOrElement(this).then(async (element) => {
+            await expectTableToHaveContent(element, expectedElementsOfList, "cell");
+        });
+    }
+);
+
+function removeHeaderSeparatorLine(pExpectedElementsOfList: DataTable) {
+    const expectedElementsOfList = pExpectedElementsOfList.raw();
+    if (expectedElementsOfList.length > 1) {
+        expectedElementsOfList.splice(1, 1);
+    }
+    return expectedElementsOfList;
+}
+
+async function expectTableToHaveContent(element: Locator, expectedElementsOfList: string[][], pCellAccessibleRole: string) {
+    const rows = await element.getByRole("row", { exact: true }).all();
+    return await Promise.all(rows.map(async (row: Locator, rowNumber: number) => {
+        const cellAccessibleRole = rowNumber === 0 ? "columnheader" : pCellAccessibleRole;
+        const cellsElement = await row.getByRole(cellAccessibleRole as any, { exact: true }).all();
+        let cellNumber = 0;
+        return await Promise.all(cellsElement.map((cell: Locator) => {
+            const expectedValue = expectedElementsOfList[rowNumber][cellNumber];
+            expect(cell, { message: `${cellAccessibleRole} at index [${rowNumber}, ${cellNumber}] should be ${expectedValue}` }).toHaveAccessibleName(expectedValue);
+            cellNumber++;
+        }));
+    }));
+}
+
 async function pressKey(world: World, key: string) {
   switch (key) {
     case KEY_PRESS.TAB:

package/src/cucumber/step_definitions/playwright/generated/enriched/fr/_fr-generated-steps-definition_table.ts

@@ -40,14 +40,14 @@ import { expect } from "@playwright/test";
 /**
  * Sélectionne l'élément ayant le rôle table et le [nom accessible](https://russmaxdesign.github.io/html-elements-names/) sont spécifiés <br />⚠ pensez à déselectionner l'élement avec <b>[je reinitialise le contexte](#je-reinitialise-le-contexte)</b> si vous n'agissez plus dessus
  * */
-When(`je vais à l'intérieur de la tableau nommée {string}`, async function(name: string) {
+When(`je vais à l'intérieur du tableau nommé {string}`, async function(name: string) {
   return await withinRoleAndName(this, "table", name);
 });
 
 /**
  * Vérifie l'existence d'un élément Html ayant le rôle table et le [nom accessible](https://russmaxdesign.github.io/html-elements-names/) spécifiés
  * */
-Then(`je dois voir une tableau nommée {string}`, async function(name: string) {
+Then(`je dois voir un tableau nommé {string}`, async function(name: string) {
   await findWithRoleAndName(this, "table", name);
 });
 
@@ -55,7 +55,7 @@ Then(`je dois voir une tableau nommée {string}`, async function(name: string) {
  * Vérifie l'inexistence d'un élément Html ayant le rôle table et le [nom accessible](https://russmaxdesign.github.io/html-elements-names/) spécifiés
  * */
 Then(
- `je ne dois pas voir une tableau nommée {string}`,
+ `je ne dois pas voir un tableau nommé {string}`,
  async function(name: string) {
    await notFoundWithRoleAndName(this, "table", name);
  }
@@ -68,7 +68,7 @@ Then(
 /**
  * Saisie de la phrase passée en paramètre dans le champ spécifié (utile par exemple pour remplir un champ de formulaire).
  * */
-When(`je saisie le(s) mot(s) {string} dans le tableau nommée {string}`, async function(textToType: string, name: string) {
+When(`je saisie le(s) mot(s) {string} dans le tableau nommé {string}`, async function(textToType: string, name: string) {
   await getPageOrElement(this).then(async (element) => {
     const byRole = await element.getByRole("table", { name: name, exact: true });
     await expect(byRole).toHaveCount(1, { timeout: await getTimeout(this) });
@@ -80,7 +80,7 @@ When(`je saisie le(s) mot(s) {string} dans le tableau nommée {string}`, async f
 /**
  * Saisie de la phrase passée en paramètre dans le champ spécifié (utile par exemple pour remplir un champ de formulaire).
  * */
-When(`j'entre la valeur {string} dans le tableau nommée {string}`, async function(textToType: string, name: string) {
+When(`j'entre la valeur {string} dans le tableau nommé {string}`, async function(textToType: string, name: string) {
     await getPageOrElement(this).then(async (element) => {
         const byRole = await element.getByRole("table", { name: name, includeHidden: true, exact: true });
         await expect(byRole).toHaveCount(1);
@@ -96,7 +96,7 @@ When(`j'entre la valeur {string} dans le tableau nommée {string}`, async functi
  * Vérifie l'existence d'un élément Html ayant le rôle table, le [nom accessible](https://russmaxdesign.github.io/html-elements-names/) et le contenu spécifiés
  * */
 Then(
- `je dois voir une tableau nommée {string} et contenant {string}`,
+ `je dois voir un tableau nommé {string} et contenant {string}`,
  async function(name: string, expectedTextContent: string) {
    await findWithRoleAndNameAndContent(this, "table", name, expectedTextContent);
  }
@@ -106,7 +106,7 @@ Then(
  * Vérifie l'existence d'un élément Html ayant le rôle table, le [nom accessible](https://russmaxdesign.github.io/html-elements-names/), le contenu spécifiés et avec l'attribut disabled à false
  * */
 Then(
- `je dois voir une tableau nommée {string} et contenant {string} inactif`,
+ `je dois voir un tableau nommé {string} et contenant {string} inactif`,
  async function(name: string, expectedTextContent: string) {
    await findWithRoleAndNameAndContentDisable(this, "table", name, expectedTextContent);
  }
@@ -116,7 +116,7 @@ Then(
  * Vérifie l'existence d'un élément Html ayant le rôle table, le [nom accessible](https://russmaxdesign.github.io/html-elements-names/), le contenu spécifiés et avec l'attribut disabled à true
  * */
 Then(
- `je dois voir une tableau nommée {string} et contenant {string} actif`,
+ `je dois voir un tableau nommé {string} et contenant {string} actif`,
  async function(name: string, expectedTextContent: string) {
    await findWithRoleAndNameAndContentEnable(this, "table", name, expectedTextContent);
  }