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

A solution to facilitate the writing and execution of E2E tests understandable by any human being using cucumber(BDD) and playwright

/*******************************
NE PAS MODIFIER, FICHIER GENERE
*******************************/

/**
 * Software Name : UUV
 *
 * SPDX-License-Identifier: MIT
 *
 * This software is distributed under the MIT License,
 * see the "LICENSE" file for more details
 *
 * Authors: NJAKO MOLOM Louis Fredice & SERVICAL Stanley
 * Software description: Make test writing fast, understandable by any human
 * understanding English or French.
 */

import { DEFAULT_TIMEOUT, fs, KEY_PRESS } from "@uuv/runner-commons";

import { checkA11y, injectAxe } from "axe-playwright";
import { devices, expect } from "@playwright/test";
import { Locator, Page } from "playwright";
import { DataTable } from "@cucumber/cucumber";
import {
    addCookie,
    click,
    COOKIE_NAME,
    deleteCookieByName,
    FILTER_TYPE,
    findWithRoleAndName,
    findWithRoleAndNameAndContent,
    findWithRoleAndNameAndContentDisabled,
    findWithRoleAndNameAndContentEnabled,
    findWithRoleAndNameFocused,
    getCookie,
    getPageOrElement,
    getTimeout,
    MockCookie,
    notFoundWithRoleAndName,
    SelectedElementCookie,
    TimeoutCookie,
    withinRoleAndName
} from "../core-engine";
import { Given, Then, When, World } from "../../../preprocessor/run/world";
import { ContextObject, RunOptions } from "axe-core";
import path from "path";

/**
 * Configure les dimensions de la fenêtre avec à un des préréglages définit par le moteur d'exécution à savoir pour Cypress: [lien](https://docs.cypress.io/api/commands/viewport#Preset) et pour Playwright: [lien](https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/server/deviceDescriptorsSource.json)
 * */
Given(`je redimensionne la fenêtre à la vue {string}`, async function(viewportPreset: string) {
  await this.page.setViewportSize(devices[viewportPreset].viewport);
});

/**
 * Configure les dimensions de la fenêtre à la largeur et la longueur spécifiées
 * */
Given(
 `je redimensionne la fenêtre avec une largeur de {int} px et une longueur de {int} px`, async function
 (width: number, height: number) {
   await this.page.setViewportSize({ width: width, height: height });
 }
);

/**
 * Démarre une session de navigation au clavier à partir du haut de la page<br/><a target='_blank' href='https://github.com/e2e-test-quest/uuv/blob/main/example/fr-keyboard.feature'>Exemples</a>
 * */
Given(
 `je commence une navigation au clavier depuis le haut de la page`,
 async function() {
   await this.page.mouse.click(0.5, 0.5);
 }
);

/**
 * Navigue vers l'Uri passé en paramètre (url complète étant constituée de la BASE_URL + Uri) ou navigue vers l'Url si ça commence par http:// ou https://
 * */
Given(`je visite l'Url {string}`, async function(siteUrl: string) {
  await deleteCookieByName(this, COOKIE_NAME.SELECTED_ELEMENT);
  await this.page.goto(`${siteUrl}`);
});

/**
 * Déclenche un click sur l'élément sélectionné.<br/>Assurez vous d'avoir effectué une sélection d'élément avant avec les phrases <strong>Je vais à l'intérieur...</strong>.
 * */
When(`je clique`, async function() {
  const keyBoardFocusTargetObj = keyBoardFocusTarget(this);
  if ((await keyBoardFocusTargetObj.count()) === 1) {
    await keyBoardFocusTargetObj.click({ timeout: DEFAULT_TIMEOUT });
  } else {
    await getPageOrElement(this).then((element: Locator) => element.click({ timeout: DEFAULT_TIMEOUT }));
  }
});

/**
 * Déclenche un click sur un élément avec le rôle et le nom donnés
 * */
When(`je clique sur l'élément avec le rôle {string} et le nom {string}`, async function(role: string, name: string) {
  await click(this, role, name);
});

// TODO : permet de gérer les label accessibles donc pas que les aria : https://playwright.dev/docs/api/class-locator#locator-get-by-label
/**
 * Sélectionne l'élément dont l'aria-label est spécifié <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 l'élément ayant pour aria-label {string}`, async function(expectedAriaLabel: string) {
  const sanitizedExpectedAriaLabel = encodeURIComponent(expectedAriaLabel).replaceAll("%20", " ");
  await getPageOrElement(this).then(async (element) => {
    const locator = element.getByLabel(sanitizedExpectedAriaLabel, { exact: true });
    await expect(locator).toHaveCount(1, { timeout: await getTimeout(this) });
    await locator.focus({ timeout: 10000 });
  });
  await addCookie(this, COOKIE_NAME.SELECTED_ELEMENT, new SelectedElementCookie(FILTER_TYPE.ARIA_LABEL, sanitizedExpectedAriaLabel));
});

/**
 * Supprime l'élément sélectionné et le timeout du contexte
 * */
When(`je reinitialise le contexte`, async function() {
  await deleteCookieByName(this, COOKIE_NAME.SELECTED_ELEMENT);
  await deleteCookieByName(this, COOKIE_NAME.TIMEOUT);
  const keyBoardFocusTargetObj = keyBoardFocusTarget(this);
  if ((await keyBoardFocusTargetObj.count()) === 1) {
    await keyBoardFocusTargetObj.blur();
  }
});

/**
 * Sélectionne l'élément dont le sélecteur est spécifié <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 l'élément ayant pour sélecteur {string}`, async function(selector: string) {
  await getPageOrElement(this).then(async (element) => {
    const locator = element.locator(selector);
    await expect(locator).toHaveCount(1, { timeout: await getTimeout(this) });
    await locator.focus({ timeout: 10000 });
  });
  await addCookie(this, COOKIE_NAME.SELECTED_ELEMENT, new SelectedElementCookie(FILTER_TYPE.SELECTOR, selector));
});

/**
 * Saisit de la phrase passée en paramètre (utile par exemple pour remplir un champ de formulaire).<br/>Assurez vous d'avoir effectué une sélection d'élément avant avec les phrases <strong>je vais à l'intérieur...</strong>.
 * */
When(`je saisie le(s) mot(s) {string}`, async function(textToType: string) {
    await type(this, textToType);
});

/**
 * Saisit de la phrase passée en paramètre (utile par exemple pour remplir un champ de formulaire).<br/>Assurez vous d'avoir effectué une sélection d'élément avant avec les phrases <strong>je vais à l'intérieur...</strong>.
 * */
When(`j'entre la valeur {string}`, async function(textToType: string) {
    await type(this, textToType);
});

/**
 * Sélectionne l'option passée en paramètre (utile par exemple pour remplir un champ le liste déroulante).<br/>Assurez vous d'avoir effectué une sélection d'élément avant avec les phrases <strong>je vais à l'intérieur de la liste déroulante nommée 'maListeDeroulante'</strong>.
 * */
When(`je sélectionne la valeur {string}`, async function(valueToSet: string) {
    const keyBoardFocusTargetObj = keyBoardFocusTarget(this);
    if ((await keyBoardFocusTargetObj.count()) === 1) {
        await keyBoardFocusTargetObj.selectOption({ label: valueToSet });
    } else {
        await getPageOrElement(this).then(async (element: Locator) => {
            // console.debug(element);
            await element.focus({ timeout: 10000 });
            await element.selectOption({ label: valueToSet });
        });
    }
});

/**
 * Check that the current page have the following partial [result](https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/) based on RGAA standard
 * */
When(`je dois voir une liste déroulante nommée {string} avec la valeur {string}`, async function(name: string, expectedValue: string) {
    await getPageOrElement(this).then(async (element) => {
        const byRole = await element.getByRole("combobox", { name: name, exact: true });
        await expect(byRole).toHaveCount(1, { timeout: await getTimeout(this) });
        await expect(byRole.getByRole("option", { name: expectedValue, selected: true, exact: true }))
            .toHaveCount(1, { timeout: await getTimeout(this) });
        await deleteCookieByName(this, COOKIE_NAME.SELECTED_ELEMENT);
    });
});

/**
 * Check that the current page have the following partial [result](https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/) based on RGAA standard
 * */
When(`je sélectionne la valeur {string} dans la liste déroulante nommée {string}`, async function(valueToSet: string, name: string) {
    await getPageOrElement(this).then(async (element) => {
        const byRole = await element.getByRole("combobox", { name: name, exact: true });
        await expect(byRole).toHaveCount(1, { timeout: await getTimeout(this) });
        await byRole.selectOption({ label: valueToSet });
        await deleteCookieByName(this, COOKIE_NAME.SELECTED_ELEMENT);
    });
});

/**
 * Répète la touche le nombre de fois spécifié en utilisant | comme ceci : num|{key}
 * */
When(`j'appuie {int} fois sur {string}`, async function(nbTimes: number, key: string) {
  for (let i = 1; i <= nbTimes; i++) {
    await pressKey(this, key);
  }
});

/**
 * Simule un appui sur la touche spécifiée : <table><thead><tr><th>Touche</th><th>Description</th></tr></thead><tbody><tr><td>{tab}</td><td>Tabulation</td></tr><tr><td>{reverseTab}</td><td>Tabulation arrière</td></tr><tr><td>{down}</td><td>Flèche du bas</td></tr><tr><td>{right}</td><td>Flèche de droite</td></tr><tr><td>{left}</td><td>Flèche de gauche</td></tr><tr><td>{up}</td><td>Flèche du haut</td></tr></tbody></table>.<br/>Assurez vous d'avoir effectué une sélection d'élément avant avec les phrases <strong>Je vais à l'intérieur...</strong>.
 * */
When(`j'appuie sur {string}`, async function(key: string) {
  await pressKey(this, key);
});

/**
 * se déplace au précédent élément HTML atteignable avec la tabulation retour<br/><a target='_blank' href='https://github.com/e2e-test-quest/uuv/blob/main/example/fr-keyboard.feature'>Exemples</a>
 * */
When(`je vais au précédent élément au clavier`, async function() {
  await this.page.keyboard.press("ShiftLeft+Tab");
});

/**
 * se déplace au prochain élément HTML atteignable avec la tabulation<br/><a target='_blank' href='https://github.com/e2e-test-quest/uuv/blob/main/example/fr-keyboard.feature'>Exemples</a>
 * */
When(`je vais au prochain élément au clavier`, async function() {
  await this.page.keyboard.press("Tab");
});

/**
 * Positionne le timeout (en milliseconde) pour la recherche des éléments dans le dom <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 positionne le timeout à {int} secondes`, async function(newTimeout: number) {
  await addCookie(this, COOKIE_NAME.TIMEOUT, new TimeoutCookie("timeout", newTimeout));
});

/**
 * Sélectionne l'élément dont le [rôle accessible](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#aria_role_types) 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 l'élément ayant pour rôle {string} et pour nom {string}`, async function(role: string, name: string) {
  await withinRoleAndName(this, role, name);
});

/**
 * Sélectionne l'élément dont l'attribut data-testId est spécifié <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 l'élément ayant pour testId {string}`, async function(testId: string) {
  testId = encodeURIComponent(testId);
  await getPageOrElement(this).then(async (element) => {
    const locator = element.getByTestId(testId);
    await expect(locator).toHaveCount(1, { timeout: await getTimeout(this) });
    await locator.focus({ timeout: 10000 });
  });
  await addCookie(this, COOKIE_NAME.SELECTED_ELEMENT, new SelectedElementCookie(FILTER_TYPE.TEST_ID, testId));
});

/**
 * Simule une réponse d'API avec un contenu spécifique. <i>Si vous utilisez Playwright comme moteur d'exécution, les attributs <b>méthode de requête</b> et <b>nom</b> ne sont pas utilisés.</i>
 * */
When(
 `je simule une requête {} sur l'url {string} nommée {string} avec le contenu suivant {}`,
 async function(verb: string, url: string, name: string, body: any) {
   await addCookie(this, COOKIE_NAME.MOCK_URL, new MockCookie(name, url, verb));
   await this.page.route(url, async route => {
     await route.fulfill({ body });
     await afterMock(this, url, verb, name);
   });
 }
);

/**
 * Simule une réponse d'API avec un code http spécifique
 * */
When(
 `je simule une requête {} sur l'url {string} nommée {string} avec le code http {int}`,
 async function(verb: string, url: string, name: string, statusCode: number) {
   await addCookie(this, COOKIE_NAME.MOCK_URL, new MockCookie(name, url, verb));
   await this.page.route(url, async route => {
     await route.fulfill({ status: statusCode });
     await afterMock(this, url, verb, name);
   });
 }
);

/**
 * Simule une réponse d'API avec un fichier spécifique ayant pour extension .json, .js, .coffee, .html, .txt, .csv, .png, .jpg, .jpeg, .gif, .tif, .tiff, .zip
 * */
When(
 `je simule une requête {} sur l'url {string} nommée {string} avec le fichier suivant {}`,
 async function(verb: string, url: string, name: string, fixture: any) {
   await addCookie(this, COOKIE_NAME.MOCK_URL, new MockCookie(name, url, verb));
   const data = fs.readFileSync(path.join(getConfigDir(), `playwright/fixtures/${fixture}`), "utf8");
   await this.page.route(url, async route => {
     await route.fulfill({ body: data });
     await afterMock(this, url, verb, name);

   });
 }
);

/**
 * Vérifie qu'un élément Html existe avec le sélecteur spécifié
 * */
Then(`je dois voir un élément ayant pour sélecteur {string}`, async function(selector: string) {
  await getPageOrElement(this).then(async (element) => expect(element.locator(selector)).toHaveCount(1, { timeout: await getTimeout(this) }));
});

/**
 * Positionne un ou plusieurs headers à la requête http indiquée et uniquement pour la méthode Http (GET / POST / etc...) passée en paramètre. <i>Si le moteur d'exécution est playwright, la <b>méthode</b> n'est pas gérée.</i>
 * */
When(
 `je saisie le(s) header(s) pour l'Uri {string} et la methode {string}`,
 async function(url: string, method: string, headersToSet: DataTable) {
   await this.page.route(url, async route => {
     const headers = route.request().headers();
     await route.continue({ headers: { ...headers, ...headersToSet.rowsHash() } });
   });
 }
);

/**
 * Positionne un ou plusieurs headers à la requête http indiquée
 * */
When(
 `je saisie le(s) header(s) pour l'Uri {string}`,
 async function(url: string, headersToSet: DataTable) {
   await this.page.route(url, async route => {
     const headers = route.request().headers();
     await route.continue({ headers: { ...headers, ...headersToSet.rowsHash() } });
   });
 }
);

/**
 * Vérifie que la page courante a le bon titre
 * */
Then(`je dois voir le titre de page {string}`, async function(pageTitle: string) {
    await expect(this.page).toHaveTitle(pageTitle);
});

/**
 * Vérifie qu'un élément Html existe avec le [rôle accessible](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#aria_role_types) et le [nom accessible](https://russmaxdesign.github.io/html-elements-names/) spécifiés
 * */
Then(`je dois voir un élément avec le rôle {string} et le nom {string}`, async function(role: string, name: string) {
  await findWithRoleAndName(this, role, name);
});

/**
 * Vérifie qu'un élément Html existe avec le contenu spécifié
 * */
Then(`je dois voir un élément qui contient {string}`, async function(textContent: string) {
  // TODO partie pris de faire en exactitude. A voir si on doit faire 2 phrases https://playwright.dev/docs/api/class-locator#locator-get-by-text
  await getPageOrElement(this).then(async (element) => expect(element.getByText(textContent, { exact: true })).toHaveCount(1, { timeout: await getTimeout(this) }));
});

/**
 * Vérifie qu'un élément Html n'existe pas avec le contenu spécifié
 * */
Then(`je ne dois pas voir un élément qui contient {string}`, async function(textContent: string) {
  await getPageOrElement(this).then(async (element) => expect(element.getByText(textContent, { exact: true })).toHaveCount(0, { timeout: await getTimeout(this) }));
});

/**
 * Vérifie qu'un élément Html existe avec l'attribut data-testid spécifié
 * */
Then(`je dois voir un élément ayant pour testId {string}`, async function(testId: string) {
  testId = encodeURIComponent(testId);
  await getPageOrElement(this).then(async (element) => expect(element.getByTestId(testId, { exact: true })).toHaveCount(1, { timeout: await getTimeout(this) }));
});

/**
 * Vérifie qu'un élément Html n'existe pas avec l'attribut data-testid spécifié
 * */
Then(`je ne dois pas voir un élément ayant pour testId {string}`, async function(testId: string) {
  testId = encodeURIComponent(testId);
  await getPageOrElement(this).then(async (element) => expect(element.getByTestId(testId, { exact: true })).toHaveCount(0, { timeout: await getTimeout(this) }));
});

/**
 * Vérifie sur la page courante qu'il n'y a aucune erreur d'accessibilité [axe-core](https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md)
 * */
Then(
 `je ne dois pas avoir de problèmes d'accessibilité axe-core`,
 async function() {
   await injectAxe(this.page as Page);
   await checkA11y(this.page as Page);
 });

/**
 * Vérifie sur la page courante qu'il n'y a aucune erreur d'accessibilité [axe-core](https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md) [avec l'option](https://github.com/dequelabs/axe-core/blob/HEAD/doc/API.md#options-parameter)
 * */
Then(
 `je ne dois pas avoir de problèmes d'accessibilité axe-core avec le fichier json suivant d'option {}`,
 async function(option: any) {
   await injectAxe(this.page as Page);
   const optionFile = await fs.readFileSync(path.join(getConfigDir(), `playwright/fixtures/${option}`));
   const optionJson = JSON.parse(optionFile.toString());
   await checkA11y(this.page as Page, undefined, {
     axeOptions: optionJson as RunOptions
   });
 });

function getConfigDir(): string {
  // eslint-disable-next-line dot-notation
  return process.env["CONFIG_DIR"] ? process.env["CONFIG_DIR"] : "";
}

/**
 * Vérifie sur la page courante qu'il n'y a aucune erreur d'accessibilité [axe-core](https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md) [avec l'option](https://github.com/dequelabs/axe-core/blob/HEAD/doc/API.md#options-parameter) sur le [contexte donné](https://github.com/dequelabs/axe-core/blob/HEAD/doc/API.md#context-parameter)
 * */
Then(
 `je ne dois pas avoir de problèmes d'accessibilité axe-core sur le fichier json suivant de contexte {} et avec le fichier json suivant d'option {}`,
 async function(context: any, option: any) {
   await injectAxe(this.page as Page);
   const contextFile = await fs.readFileSync(path.join(getConfigDir(), `playwright/fixtures/${context}`));
   const optionFile = await fs.readFileSync(path.join(getConfigDir(), `playwright/fixtures/${option}`));
   const optionJson = JSON.parse(optionFile.toString());
   await checkA11y(this.page as Page, JSON.parse(contextFile.toString()) as ContextObject, {
     axeOptions: optionJson as RunOptions
   });
 });

/**
 * Vérifie sur la page courante qu'il n'y a aucune erreur d'accessibilité [axe-core](https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md) de niveau critique
 * */
Then(
 `je ne dois pas avoir de problèmes d'accessibilité axe-core de niveau critique`,
 async function() {
   await injectAxe(this.page as Page);
   await checkA11y(this.page as Page, undefined, {
     includedImpacts: ["critical"]
   });
 });

/**
 * Vérifie sur la page courante qu'il n'y a aucune erreur d'accessibilité [axe-core](https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md)avec un ou plusieurs impacts parmi : 'minor','moderate','serious','critical'
 * */
Then(
 `je ne dois pas avoir de problèmes d'accessibilité axe-core avec l(es) impact(s) {}`,
 async function(impacts: any) {
   await injectAxe(this.page as Page);
   await checkA11y(this.page as Page, undefined, {
     includedImpacts: [impacts]
   });
 });

/**
 * Vérifie sur la page courante qu'il n'y a aucune erreur d'accessibilité [axe-core](https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md) [avec le ou les standards d'accessibilité](https://github.com/dequelabs/axe-core/blob/HEAD/doc/API.md#axe-core-tags)
 * */
Then(
 `je ne dois pas avoir de problèmes d'accessibilité axe-core avec le(s) standard(s) {}`,
 async function(tags: any) {
   await injectAxe(this.page as Page);
   await checkA11y(this.page as Page, undefined, {
     axeOptions: {
       runOnly: {
         type: "tag",
         values: [tags]
       }
     }
   });
 });

/**
 * Vérifie qu'un élément Html n'existe pas avec le [rôle accessible](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#aria_role_types) et le [nom accessible](https://russmaxdesign.github.io/html-elements-names/) spécifiés
 * */
Then(
 `je ne dois pas voir un élément avec le rôle {string} et le nom {string}`,
 async function(role: string, name: string) {
   await notFoundWithRoleAndName(this, role, name);
 }
);

/**
 * Vérifie qu'un élément Html existe avec le [rôle accessible](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#aria_role_types), le [nom accessible](https://russmaxdesign.github.io/html-elements-names/) et le contenu spécifiés
 * */
Then(
 `je dois voir un élément avec le rôle {string} et le nom {string} et pour contenu {string}`,
 async function(expectedRole: string, name: string, expectedTextContent: string) {
   await findWithRoleAndNameAndContent(this, expectedRole, name, expectedTextContent);
 }
);

/**
 * Vérifie que l'élément Html avec le [rôle accessible](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#aria_role_types) et le [nom accessible](https://russmaxdesign.github.io/html-elements-names/) est focus<br/><a target='_blank' href='https://github.com/e2e-test-quest/uuv/blob/main/example/fr-keyboard.feature'>Exemples</a>
 * */
Then(
 `l'élément avec le rôle {string} et le nom {string} doit avoir le focus clavier`,
 async function(expectedRole: string, name: string) {
   await findWithRoleAndNameFocused(this, expectedRole, name);
 }
);

/**
 * Vérifie que l'élément Html avec le sélecteur est focus<br/><a target='_blank' href='https://github.com/e2e-test-quest/uuv/blob/main/example/fr-keyboard.feature'>Exemples</a>
 * */
Then(
 `l'élément avec le sélecteur {string} doit avoir le focus clavier`,
 async function(selector: string) {
   await getPageOrElement(this).then(async (element) => {
     const locator = element.locator(selector);
     await locator.focus({ timeout: 10000 });
     await expect(locator).toHaveCount(1, { timeout: await getTimeout(this) });
     await expect(locator).toBeFocused();
   });
 });

/**
 * Vérifie qu'un élément Html existe avec le [rôle accessible](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#aria_role_types), le [nom accessible](https://russmaxdesign.github.io/html-elements-names/) et le contenu spécifiés, et avec l'attribut disabled à true
 * */
Then(
 `je dois voir un élément avec le rôle {string} et le nom {string} et pour contenu {string} désactivé`,
 async function(expectedRole: string, name: string, expectedTextContent: string) {
   await findWithRoleAndNameAndContentDisabled(this, expectedRole, name, expectedTextContent);
 }
);

/**
 * Vérifie qu'un élément Html existe avec le [rôle accessible](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#aria_role_types), le [nom accessible](https://russmaxdesign.github.io/html-elements-names/) et le contenu spécifiés et avec l'attribut disabled à false
 * */
Then(
 `je dois voir un élément avec le rôle {string} et le nom {string} et pour contenu {string} activé`,
 async function(expectedRole: string, name: string, expectedTextContent: string) {
   await findWithRoleAndNameAndContentEnabled(this, expectedRole, name, expectedTextContent);
 }
);

/**
 * Vérifie qu'un élément Html existe avec l'attribut aria-label spécifié
 * */
Then(`je dois voir un élément ayant pour aria-label {string}`, async function(expectedAriaLabel: string) {
  expectedAriaLabel = encodeURIComponent(expectedAriaLabel);
  await getPageOrElement(this).then(async (element) => expect(element.getByLabel(expectedAriaLabel, { exact: true })).toHaveCount(1, { timeout: await getTimeout(this) }));
});

/**
 * Vérifie qu'un élément Html n'existe pas avec l'attribut aria-label spécifié
 * */
Then(`je ne dois pas voir un élément ayant pour aria-label {string}`, async function(expectedAriaLabel: string) {
  expectedAriaLabel = encodeURIComponent(expectedAriaLabel);
  await getPageOrElement(this).then(async (element) => expect(element.getByLabel(expectedAriaLabel, { exact: true })).toHaveCount(0, { timeout: await getTimeout(this) }));
});

/**
 * Vérifie qu'un élément Html existe avec l'attribut aria-label et le contenu spécifiés
 * */
Then(`je dois voir un élément ayant pour aria-label {string} et pour contenu {string}`, async function(expectedAriaLabel: string, expectedTextContent: string) {
  expectedAriaLabel = encodeURIComponent(expectedAriaLabel);
  await getPageOrElement(this).then(async (element) => {
    const byLabel = element.getByLabel(expectedAriaLabel, { exact: true });
    await expect(byLabel).toHaveCount(1, { timeout: await getTimeout(this) });
    await expect(byLabel.filter({ hasText: expectedTextContent })).toHaveCount(1);
  });
});

/**
 * Se déplace au précédent élément HTML atteignable avec la tabulation et vérifie que l'élément Html avec le [rôle accessible](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#aria_role_types) et le [nom accessible](https://russmaxdesign.github.io/html-elements-names/) a le focus clavier<br/><a target='_blank' href='https://github.com/e2e-test-quest/uuv/blob/main/example/fr-keyboard.feature'>Exemples</a>
 * */
When(`le précédent élément avec le focus clavier doit avoir le role {string} et le nom {string}`, async function(expectedRole: string, name: string) {
  await this.page.keyboard.press("ShiftLeft+Tab");
  await findWithRoleAndNameFocused(this, expectedRole, name);
});

/**
 * "Se déplace au prochain élément HTML atteignable avec la tabulation et vérifie que l'élément Html avec le [rôle accessible](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#aria_role_types) et le [nom accessible](https://russmaxdesign.github.io/html-elements-names/) a le focus clavier<br/><a target='_blank' href='https://github.com/e2e-test-quest/uuv/blob/main/example/fr-keyboard.feature'>Exemples</a>
 * */
When(`le prochain élément avec le focus clavier doit avoir le role {string} et le nom {string}`, async function(expectedRole: string, name: string) {
  await this.page.keyboard.press("Tab");
  await findWithRoleAndNameFocused(this, expectedRole, name);
});


/**
 * Vérifie qu'un bouchon nommé ait bien été consommé
 * */
Then(`je dois consommer le bouchon nommé {string}`, async function(name: string) {
  const cookie = await getCookie(this, COOKIE_NAME.MOCK_URL);
  expect(() => {
    if (!cookie.isValid()) {
      throw new Error(`Mock ${name} must be defined before use this sentence`);
    }
  }).not.toThrow();

  await expect.poll(async () => {
    const cookie = await getCookie(this, COOKIE_NAME.MOCK_URL);
    const mockUrls: MockCookie[] = JSON.parse(cookie.value);
    const mockUrl = mockUrls.find(mock => mock.name === name);
    if (mockUrl) {
      return mockUrl?.isConsumed;
    }
    return false;
  }).toBeDefined();
});

/**
 * Attends un nombre de millisecondes. <b>Attention:</b> Utiliser cette phrase <b>en production</b> peut rendre votre <b>test <i>flaky</i></b>.
 * */
Then(`j'attends {int} ms`, async function(ms: number) {
  await this.page.waitForTimeout(ms);
});

/**
 * Vérifie des attributs Html de l'élément sélectionné
 * */
Then(
 `je dois voir les attributs avec valeurs suivantes`,
 async function(expectedAttributeList: DataTable) {
   await getPageOrElement(this).then(async (element) => {
     // console.debug("expectedAttributeList.raw(),", expectedAttributeList.raw())
     for (const expectedAttribute of expectedAttributeList.raw()) {
       const attributeName = expectedAttribute[0];
       const attributeValue = expectedAttribute[1];
       // await showAttributesInLocator(element);
       await expect(element).toHaveAttribute(attributeName, attributeValue);
     }
   });
 }
);

/**
 * Vérifie qu'il existe une liste avec le nom et les éléments de liste spécifiés.<br/> <u>Exemple</u>\n```gherkin\nAlors je dois voir une liste nommée "test-list" et contenant\n| Premier élément   |\n| Deuxième élément  |\n| Troisième élément   |\n```
 * */
Then(
 `je dois voir une liste nommée {string} et contenant`,
 async function(expectedListName: string, expectedElementsOfList: DataTable) {
   await withinRoleAndName(this, "list", expectedListName);
   await getPageOrElement(this).then(async (element) => {
     const listitem = await element.getByRole("listitem", { exact: true }).all();
     const foundedElement: any[] = [];
     for (const element of listitem) {
       const textContent = await element.textContent();
       foundedElement.push([textContent]);
     }
     await expect(foundedElement.length).toBeGreaterThan(0);
     // console.debug(`expected [${expectedElementsOfList.raw()}] to be [${foundedElement}]`);
     await expect(listitem.length).toEqual(expectedElementsOfList.raw().length);
     await 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```
 * */
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");
        });
    }
);

/**
 * Vérifie l'existence d'un élément Html ayant le rôle `heading`, le [nom accessible](https://russmaxdesign.github.io/html-elements-names/) et le niveau spécifiés
 * */
Then(`je dois voir un titre nommé {string} avec le niveau {int}`, async function(name: string, level: number) {
    await findWithRoleAndName(this, "heading", name, { level });
});

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:
      await world.page.keyboard.press("Tab");
      break;
    case KEY_PRESS.REVERSE_TAB:
      await world.page.keyboard.press("ShiftLeft+Tab");
      break;
    case KEY_PRESS.UP:
      await world.page.keyboard.press("ArrowUp");
      break;
    case KEY_PRESS.DOWN:
      await world.page.keyboard.press("ArrowDown");
      break;
    case KEY_PRESS.LEFT:
      await world.page.keyboard.press("ArrowLeft");
      break;
    case KEY_PRESS.RIGHT:
      await world.page.keyboard.press("ArrowRight");
      break;
    default:
      console.error("the command" + key + " is unrecognized.");
      break;
  }
  await deleteCookieByName(world, COOKIE_NAME.SELECTED_ELEMENT);
  await addCookie(world, COOKIE_NAME.SELECTED_ELEMENT, new SelectedElementCookie(FILTER_TYPE.SELECTOR_PARENT, "*:focus"));
}

function keyBoardFocusTarget(world: World) {
  return world.page.locator(":focus");
}

async function setMockAsConsumed(name: string, mock: MockCookie, world: World) {
  const newMockCookie = new MockCookie(name, mock.url, mock.verb);
  newMockCookie.isConsumed = true;
  await addCookie(world, COOKIE_NAME.MOCK_URL, newMockCookie);
}

async function afterMock(world: World, url: string, verb: string, name: string) {
  await world.page.waitForResponse(url);
  const cookie = await getCookie(world, COOKIE_NAME.MOCK_URL);
  const mockCookie: MockCookie[] = JSON.parse(cookie.value);
  for (const mock of mockCookie) {
    if (mock.name === name && mock.verb === verb && mock.url === url) {
      await setMockAsConsumed(name, mock, world);
    }
  }
}

async function type(world: World, textToType: string) {
    const keyBoardFocusTargetObj = keyBoardFocusTarget(world);
    if ((await keyBoardFocusTargetObj.count()) === 1) {
        await keyBoardFocusTargetObj.type(textToType);
    } else {
        await getPageOrElement(world).then(async (element: Locator) => {
            // console.debug(element);
            await element.focus({ timeout: 10000 });
            await element.type(textToType);
        });
    }
}