@uuv/playwright 1.6.0 → 1.7.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@uuv/playwright",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "type": "commonjs",
   "author": "Louis Fredice NJAKO MOLOM (https://github.com/luifr10) & Stanley SERVICAL (https://github.com/stanlee974)",
   "description": "A solution to run E2E tests written in cucumber(BDD) with playwright.",
-  "license": "Apache-2.0",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/e2e-test-quest/uuv"
@@ -44,10 +44,10 @@
     "test": "npm run test:run"
   },
   "dependencies": {
-    "@cucumber/cucumber": "9.1.2",
+    "@cucumber/cucumber": "9.3.0",
     "@playwright/test": "1.33.0",
-    "@uuv/runner-commons": "1.5.0",
-    "axe-core": "4.7.0",
+    "@uuv/runner-commons": "1.6.0",
+    "axe-core": "4.7.2",
     "axe-playwright": "1.2.3",
     "chalk": "4.1.2",
     "chalk-table": "^1.0.2",
@@ -55,7 +55,7 @@
     "figlet": "1.6.0",
     "minimist": "1.2.8",
     "multiple-cucumber-html-reporter": "3.3.0",
-    "nanoid": "3.1.31",
+    "nanoid": "3.3.6",
     "ts-node": "10.9.1",
     "typescript": "4.9.5"
   },
@@ -89,13 +89,13 @@
   },
   "devDependencies": {
     "@types/minimist": "1.2.2",
-    "@types/node": "18.15.11",
+    "@types/node": "16.18.39",
     "cross-env": "7.0.3",
     "eslint-plugin-cucumber": "2.0.0",
-    "eslint-plugin-jest": "27.2.1",
+    "eslint-plugin-jest": "27.2.3",
     "eslint-plugin-playwright": "0.12.0",
     "ts-loader": "9.4.2",
     "tsconfig-paths": "4.2.0",
-    "webpack": "5.81.0"
+    "webpack": "5.88.2"
   }
 }

package/postinstall.js

@@ -1,18 +1,17 @@
 /**
- * Copyright UUV.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+* Software Name : UUV
+*
+* SPDX-FileCopyrightText: Copyright (c) 2022-2023 Orange
+* SPDX-License-Identifier: MIT
+*
+* This software is distributed under the MIT License,
+* the text of which is available at https://spdx.org/licenses/MIT.html
+* or 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.
+*/
 
 const fs = require("fs");
 const { execSync } = require("child_process");

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

@@ -3,284 +3,382 @@ NE PAS MODIFIER, FICHIER GENERE
 *******************************/
 
 /**
- * Copyright UUV.
+ * Software Name : UUV
  *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
+ * SPDX-FileCopyrightText: Copyright (c) 2022-2023 Orange
+ * SPDX-License-Identifier: MIT
  *
- * http://www.apache.org/licenses/LICENSE-2.0
+ * This software is distributed under the MIT License,
+ * the text of which is available at https://spdx.org/licenses/MIT.html
+ * or see the "LICENSE" file for more details.
  *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
+ * 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 } from "@uuv/runner-commons";
-import { checkA11y, injectAxe } from "axe-playwright";
+import { DEFAULT_TIMEOUT, fs, key, KEY_PRESS } from "@uuv/runner-commons";
+import { checkA11y, configureAxe, injectAxe } from "axe-playwright";
 import { Locator } from "playwright";
 import { devices, expect } from "@playwright/test";
 import { Page } from "playwright";
 import { DataTable } from "@cucumber/cucumber";
 import {
-    addCookieWhenValueIsList,
-    COOKIE_NAME, deleteCookieByName,
-    deleteCookieByValue,
-    FILTER_TYPE,
-    findWithRoleAndName,
-    findWithRoleAndNameAndContent,
-    findWithRoleAndNameAndContentDisable,
-    findWithRoleAndNameAndContentEnable,
-    getCookie,
-    getPageOrElement,
-    MockType,
-    notFoundWithRoleAndName,
-    withinRoleAndName
+  addCookieWhenValueIsList,
+  COOKIE_NAME, deleteCookieByName,
+  deleteCookieByValue,
+  FILTER_TYPE,
+  findWithRoleAndName,
+  findWithRoleAndNameAndContent,
+  findWithRoleAndNameAndContentDisable,
+  findWithRoleAndNameAndContentEnable,
+  getCookie,
+  getPageOrElement,
+  MockType,
+  notFoundWithRoleAndName,
+  withinRoleAndName
 } from "../core-engine";
 
 import { Given, When, Then } from "@cucumber/cucumber";
 import { World } from "../../../preprocessor/run/world";
+import { ContextObject, RunOptions } from "axe-core";
 
 Given(`I set viewport to preset {string}`, async function(this: World, viewportPreset: string) {
-    await this.page.setViewportSize(devices[viewportPreset].viewport);
+  await this.page.setViewportSize(devices[viewportPreset].viewport);
 });
 
 Given(
-    `I set viewport with width {int} and height {int}`, async function
-    (this: World, width: number, height: number) {
-        await this.page.setViewportSize({ width: width, height: height });
-    }
+ `I set viewport with width {int} and height {int}`, async function
+ (this: World, width: number, height: number) {
+   await this.page.setViewportSize({ width: width, height: height });
+ }
 );
 
-Given(`I visit path {string}`, { timeout: 60 * 1000 }, async function (this: World, siteUrl: string) {
-    await deleteCookieByName(this, COOKIE_NAME.SELECTED_ELEMENT);
-    await this.page.goto(`${siteUrl}`);
+Given(`I visit path {string}`, { timeout: 60 * 1000 }, async function(this: World, siteUrl: string) {
+  await deleteCookieByName(this, COOKIE_NAME.SELECTED_ELEMENT);
+  await this.page.goto(`${siteUrl}`);
 });
 
-When(`I click`, async function (this: World) {
-    await getPageOrElement(this).then((element: Locator) => element.click({ timeout: DEFAULT_TIMEOUT }));
+When(`I click`, async function(this: World) {
+  await getPageOrElement(this).then((element: Locator) => element.click({ timeout: DEFAULT_TIMEOUT }));
 });
 
 // TODO : permet de gérer les label accessibles donc pas que les aria : https://playwright.dev/docs/api/class-locator#locator-get-by-label
-When(`Within the element with aria-label {string}`, async function (this: World, expectedAriaLabel: string) {
-    const sanitizedExpectedAriaLabel = encodeURIComponent(expectedAriaLabel).replaceAll("%20", " ");
-    await getPageOrElement(this).then((element) => expect(element.getByLabel(sanitizedExpectedAriaLabel)).toHaveCount(1));
-    await addCookieWhenValueIsList(this, COOKIE_NAME.SELECTED_ELEMENT, { name: FILTER_TYPE.ARIA_LABEL, value: sanitizedExpectedAriaLabel });
+When(`Within the element with aria-label {string}`, async function(this: World, expectedAriaLabel: string) {
+  const sanitizedExpectedAriaLabel = encodeURIComponent(expectedAriaLabel).replaceAll("%20", " ");
+  await getPageOrElement(this).then((element) => expect(element.getByLabel(sanitizedExpectedAriaLabel)).toHaveCount(1));
+  await addCookieWhenValueIsList(this, COOKIE_NAME.SELECTED_ELEMENT, { name: FILTER_TYPE.ARIA_LABEL, value: sanitizedExpectedAriaLabel });
 });
-When(`I reset context`, async function (this: World) {
-    await this.context.clearCookies();
+When(`I reset context`, async function(this: World) {
+  await this.context.clearCookies();
 });
 
-When(`Within the element with selector {string}`, async function (this: World, selector: string) {
-    await getPageOrElement(this).then((element) => expect(element.locator(selector)).toHaveCount(1));
-    await addCookieWhenValueIsList(this, COOKIE_NAME.SELECTED_ELEMENT, { name: FILTER_TYPE.SELECTOR, value: selector });
+When(`Within the element with selector {string}`, async function(this: World, selector: string) {
+  await getPageOrElement(this).then((element) => expect(element.locator(selector)).toHaveCount(1));
+  await addCookieWhenValueIsList(this, COOKIE_NAME.SELECTED_ELEMENT, { name: FILTER_TYPE.SELECTOR, value: selector });
 });
 
-When(`I type the sentence {string}`, async function (this: World, textToType: string) {
+When(`I type the sentence {string}`, async function(this: World, textToType: string) {
+  await getPageOrElement(this).then(async (element: Locator) => {
+    await element.focus({ timeout: 10000 });
+    await element.type(textToType);
+    // console.debug(await showAttributesInLocator(element));
+  });
+});
+
+
+When(`I press {int} times on {string}`, async function(this: World, nbTimes: number, key: string) {
+  for (let i = 1; i <= nbTimes; i++) {
     await getPageOrElement(this).then(async (element: Locator) => {
-        await element.focus({ timeout: 10000 });
-        await element.fill(textToType);
-         // console.debug(await showAttributesInLocator(element));
+      await element.focus({ timeout: 10000 });
+      await pressKey(this, element, key);
     });
+  }
 });
 
-When(`I set timeout with value {int}`,  async function (this: World, newTimeout: number) {
-    await this.testInfo.setTimeout(newTimeout);
+When(`I press {string}`, async function(this: World, key: string) {
+  await getPageOrElement(this).then(async (element: Locator) => {
+    await element.focus({ timeout: 10000 });
+    await pressKey(this, element, key);
+  });
+});
+When(`I set timeout with value {int}`, async function(this: World, newTimeout: number) {
+  await this.testInfo.setTimeout(newTimeout);
 });
 
 
-When(`Within the element with role {string} and name {string}`, async function (this: World, role: string, name: string) {
-    await withinRoleAndName(this, role, name);
+When(`Within the element with role {string} and name {string}`, async function(this: World, role: string, name: string) {
+  await withinRoleAndName(this, role, name);
 });
 
-When(`Within the element with testId {string}`, async function (this: World, testId: string) {
-    testId = encodeURIComponent(testId);
-    await getPageOrElement(this).then(async (element) => await expect(element.getByTestId(testId)).toHaveCount(1));
-    await addCookieWhenValueIsList(this, COOKIE_NAME.SELECTED_ELEMENT, { name: FILTER_TYPE.TEST_ID, value: testId });
+When(`Within the element with testId {string}`, async function(this: World, testId: string) {
+  testId = encodeURIComponent(testId);
+  await getPageOrElement(this).then(async (element) => await expect(element.getByTestId(testId)).toHaveCount(1));
+  await addCookieWhenValueIsList(this, COOKIE_NAME.SELECTED_ELEMENT, { name: FILTER_TYPE.TEST_ID, value: testId });
 });
 
 
 When(
-    `I mock a request {} on url {string} named {string} with content {}`,
-    async function (this: World, verb: string, url: string, name: string, body: any) {
-        await addCookieWhenValueIsList(this, COOKIE_NAME.MOCK_URL, { name: name, url: url });
-        await this.page.route(url, async route => {
-            const json = body;
-            await route.fulfill({ json });
-        });
-    }
+ `I mock a request {} on url {string} named {string} with content {}`,
+ async function(this: World, verb: string, url: string, name: string, body: any) {
+   await addCookieWhenValueIsList(this, COOKIE_NAME.MOCK_URL, { name: name, url: url });
+   await this.page.route(url, async route => {
+     const json = body;
+     await route.fulfill({ json });
+   });
+ }
 );
 
 When(
-    `I mock a request {} on url {string} named {string} with status code {int}`,
-    async function (this: World, verb: string, url: string, name: string, statusCode: number) {
-        await addCookieWhenValueIsList(this, COOKIE_NAME.MOCK_URL, { name: name, url: url });
-        await this.page.route(url, async route => {
-            await route.fulfill({ status: statusCode });
-        });
-    }
+ `I mock a request {} on url {string} named {string} with status code {int}`,
+ async function(this: World, verb: string, url: string, name: string, statusCode: number) {
+   await addCookieWhenValueIsList(this, COOKIE_NAME.MOCK_URL, { name: name, url: url });
+   await this.page.route(url, async route => {
+     await route.fulfill({ status: statusCode });
+   });
+ }
 );
 
 When(
-    `I mock a request {} on url {string} named {string} with fixture {}`,
-    async function (this: World, verb: string, url: string, name: string, fixture: any) {
-        await addCookieWhenValueIsList(this, COOKIE_NAME.MOCK_URL, { name: name, url: url });
-        const data = await fs.readFileSync(`playwright/fixtures/${fixture}`);
-        await this.page.route(url, async route => {
-            await route.fulfill({ body: data });
-        });
-    }
+ `I mock a request {} on url {string} named {string} with fixture {}`,
+ async function(this: World, verb: string, url: string, name: string, fixture: any) {
+   await addCookieWhenValueIsList(this, COOKIE_NAME.MOCK_URL, { name: name, url: url });
+   const data = await fs.readFileSync(`playwright/fixtures/${fixture}`);
+   await this.page.route(url, async route => {
+     await route.fulfill({ body: data });
+   });
+ }
 );
 
-Then(`I should see an element with selector {string}`, async function (this: World, selector: string) {
-    await getPageOrElement(this).then((element) => expect(element.locator(selector)).toHaveCount(1));
+Then(`I should see an element with selector {string}`, async function(this: World, selector: string) {
+  await getPageOrElement(this).then((element) => expect(element.locator(selector)).toHaveCount(1));
 });
 
 When(
-    `I set header(s) for uri {string} and method {string}`,
-    async function (this: World, 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() } });
-        });
-    }
+ `I set header(s) for uri {string} and method {string}`,
+ async function(this: World, 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() } });
+   });
+ }
 );
 
 When(
-    `I set header(s) for uri {string}`,
-    async function (this: World, url: string, headersToSet: DataTable) {
-        await this.page.route(url, async route => {
-            const headers = route.request().headers();
-            await route.continue({ headers: { ...headers, ...headersToSet.rowsHash() } });
-        });
-    }
+ `I set header(s) for uri {string}`,
+ async function(this: World, url: string, headersToSet: DataTable) {
+   await this.page.route(url, async route => {
+     const headers = route.request().headers();
+     await route.continue({ headers: { ...headers, ...headersToSet.rowsHash() } });
+   });
+ }
 );
 
-Then(`I should see an element with role {string} and name {string}`, async function (this: World, role: string, name: string) {
-    await findWithRoleAndName(this, role, name);
+Then(`I should see an element with role {string} and name {string}`, async function(this: World, role: string, name: string) {
+  await findWithRoleAndName(this, role, name);
 });
 
-Then(`I should see an element with content {string}`, async function (this: World, 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((element) => expect(element.getByText(textContent, { exact: true })).toHaveCount(1));
+Then(`I should see an element with content {string}`, async function(this: World, 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((element) => expect(element.getByText(textContent, { exact: true })).toHaveCount(1));
 });
 
 Then(`I should not see an element with content {string}`, async function(this: World, textContent: string) {
-    await getPageOrElement(this).then((element) => expect(element.getByText(textContent, { exact: true })).toHaveCount(0));
+  await getPageOrElement(this).then((element) => expect(element.getByText(textContent, { exact: true })).toHaveCount(0));
 });
 
 Then(`I should see an element with testId {string}`, async function(this: World, testId: string) {
-    testId = encodeURIComponent(testId);
-    await getPageOrElement(this).then((element) => expect(element.getByTestId(testId, { exact: true })).toHaveCount(1));
+  testId = encodeURIComponent(testId);
+  await getPageOrElement(this).then((element) => expect(element.getByTestId(testId, { exact: true })).toHaveCount(1));
 });
 
 Then(`I should not see an element with testId {string}`, async function(this: World, testId: string) {
-    testId = encodeURIComponent(testId);
-    await getPageOrElement(this).then((element) => expect(element.getByTestId(testId, { exact: true })).toHaveCount(0));
+  testId = encodeURIComponent(testId);
+  await getPageOrElement(this).then((element) => expect(element.getByTestId(testId, { exact: true })).toHaveCount(0));
 });
 
 Then(
-    `I should not have any accessibility issue`,
-    async function (this: World) {
-        await injectAxe(this.page as Page);
-        await checkA11y(this.page as Page);
-    });
+ `I should not have any accessibility issue`,
+ async function(this: World) {
+   await injectAxe(this.page as Page);
+   await checkA11y(this.page as Page);
+ });
+
+Then(
+ `I should not have any accessibility issue with option json fixture {}`,
+ async function(this: World, option: any) {
+   await injectAxe(this.page as Page);
+   const optionFile = await fs.readFileSync(`playwright/fixtures/${option}`);
+   const optionJson = JSON.parse(optionFile.toString());
+   await checkA11y(this.page as Page, undefined, {
+     axeOptions: optionJson as RunOptions
+   });
+ });
+
+Then(
+ `I should not have any accessibility issue with context json fixture {} and option json fixture {}`,
+ async function(this: World, context: any, option: any) {
+   await injectAxe(this.page as Page);
+   const contextFile = await fs.readFileSync(`playwright/fixtures/${context}`);
+   const optionFile = await fs.readFileSync(`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
+   });
+ });
+
+Then(
+ `I should not have any critical accessibility issue`,
+ async function(this: World) {
+   await injectAxe(this.page as Page);
+   await checkA11y(this.page as Page, undefined, {
+     includedImpacts: ["critical"]
+   });
+ });
+
+Then(
+ `I should not have any accessibility issue with {} impact(s)`,
+ async function(this: World, impacts: any) {
+   await injectAxe(this.page as Page);
+   await checkA11y(this.page as Page, undefined, {
+     includedImpacts: [impacts]
+   });
+ });
+Then(
+ `I should not have any accessibility issue with accessibility standard(s) {}`,
+ async function(this: World, tags: any) {
+   await injectAxe(this.page as Page);
+   await checkA11y(this.page as Page, undefined, {
+     axeOptions: {
+       runOnly: {
+         type: "tag",
+         values: [tags]
+       }
+     }
+   });
+ });
 
 Then(
-    `I should not see an element with role {string} and name {string}`,
-    async function(this: World, role: string, name: string) {
-        await notFoundWithRoleAndName(this, role, name);
-    }
+ `I should not see an element with role {string} and name {string}`,
+ async function(this: World, role: string, name: string) {
+   await notFoundWithRoleAndName(this, role, name);
+ }
 );
 Then(
-    `I should see an element with role {string} and name {string} and content {string}`,
-    async function(this: World, expectedRole: string, name: string, expectedTextContent: string) {
-        await findWithRoleAndNameAndContent(this, expectedRole, name, expectedTextContent);
-    }
+ `I should see an element with role {string} and name {string} and content {string}`,
+ async function(this: World, expectedRole: string, name: string, expectedTextContent: string) {
+   await findWithRoleAndNameAndContent(this, expectedRole, name, expectedTextContent);
+ }
 );
 
 Then(
-    `I should see an element with role {string} and name {string} and content {string} disabled`,
-    async function(this: World, expectedRole: string, name: string, expectedTextContent: string)  {
-        await findWithRoleAndNameAndContentDisable(this, expectedRole, name, expectedTextContent);
-    }
+ `I should see an element with role {string} and name {string} and content {string} disabled`,
+ async function(this: World, expectedRole: string, name: string, expectedTextContent: string) {
+   await findWithRoleAndNameAndContentDisable(this, expectedRole, name, expectedTextContent);
+ }
 );
 
 Then(
-    `I should see an element with role {string} and name {string} and content {string} not disabled`,
-    async function(this: World, expectedRole: string, name: string, expectedTextContent: string)  {
-        await findWithRoleAndNameAndContentEnable(this, expectedRole, name, expectedTextContent);
-    }
+ `I should see an element with role {string} and name {string} and content {string} not disabled`,
+ async function(this: World, expectedRole: string, name: string, expectedTextContent: string) {
+   await findWithRoleAndNameAndContentEnable(this, expectedRole, name, expectedTextContent);
+ }
 );
 
-Then(`I should see an element with aria-label {string}`, async function(this: World, expectedAriaLabel: string)  {
-    expectedAriaLabel = encodeURIComponent(expectedAriaLabel);
-    await getPageOrElement(this).then((element) => expect(element.getByLabel(expectedAriaLabel)).toHaveCount(1));
+Then(`I should see an element with aria-label {string}`, async function(this: World, expectedAriaLabel: string) {
+  expectedAriaLabel = encodeURIComponent(expectedAriaLabel);
+  await getPageOrElement(this).then((element) => expect(element.getByLabel(expectedAriaLabel)).toHaveCount(1));
 });
 
 Then(`I should not see an element with aria-label {string}`, async function(this: World, expectedAriaLabel: string) {
-    expectedAriaLabel = encodeURIComponent(expectedAriaLabel);
-    await getPageOrElement(this).then((element) => expect(element.getByLabel(expectedAriaLabel)).toHaveCount(0));
+  expectedAriaLabel = encodeURIComponent(expectedAriaLabel);
+  await getPageOrElement(this).then((element) => expect(element.getByLabel(expectedAriaLabel)).toHaveCount(0));
 });
 
-Then(`I should see an element with aria-label {string} and content {string}`, async function(this: World, expectedAriaLabel: string, expectedTextContent: string)  {
-    expectedAriaLabel = encodeURIComponent(expectedAriaLabel);
-    await getPageOrElement(this).then(async (element) => {
-            const byLabel = await element.getByLabel(expectedAriaLabel);
-            await expect(byLabel).toHaveCount(1);
-            await expect(byLabel.filter({ hasText: expectedTextContent })).toHaveCount(1);
-    });
+Then(`I should see an element with aria-label {string} and content {string}`, async function(this: World, expectedAriaLabel: string, expectedTextContent: string) {
+  expectedAriaLabel = encodeURIComponent(expectedAriaLabel);
+  await getPageOrElement(this).then(async (element) => {
+    const byLabel = await element.getByLabel(expectedAriaLabel);
+    await expect(byLabel).toHaveCount(1);
+    await expect(byLabel.filter({ hasText: expectedTextContent })).toHaveCount(1);
+  });
 });
 
 Then(`I should consume a mock named {string}`, async function(this: World, name: string) {
-    const cookie = await getCookie(this, COOKIE_NAME.MOCK_URL);
-    const mockUrls: MockType[] = JSON.parse(cookie.value);
-    const mockUrl: MockType | undefined = mockUrls.find(mock => mock.name === name);
-    await expect(mockUrl).not.toBeUndefined();
-    const requestPromise = await this.page.waitForResponse(mockUrl?.url);
-    const request = await requestPromise;
-    await deleteCookieByValue(this, COOKIE_NAME.MOCK_URL, mockUrl);
-    // console.debug("request: ", request);
+  const cookie = await getCookie(this, COOKIE_NAME.MOCK_URL);
+  const mockUrls: MockType[] = JSON.parse(cookie.value);
+  const mockUrl: MockType | undefined = mockUrls.find(mock => mock.name === name);
+  await expect(mockUrl).not.toBeUndefined();
+  const requestPromise = await this.page.waitForResponse(mockUrl?.url);
+  const request = await requestPromise;
+  await deleteCookieByValue(this, COOKIE_NAME.MOCK_URL, mockUrl);
+  // console.debug("request: ", request);
 });
 //
-Then(`I wait {int} ms`, async function (this: World, ms: number) {
-    await this.page.waitForTimeout(ms);
+Then(`I wait {int} ms`, async function(this: World, ms: number) {
+  await this.page.waitForTimeout(ms);
 });
 
 Then(
-    `I should see these attributes with values`,
-    async function (this: World, 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);
-                expect(await element.getAttribute(attributeName)).toEqual(attributeValue);
-            }
-        });
-    }
+ `I should see these attributes with values`,
+ async function(this: World, 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);
+       expect(await element.getAttribute(attributeName)).toEqual(attributeValue);
+     }
+   });
+ }
 );
 
 Then(
-    `I should see elements of the list with name {string}`,
-    async function(this: World, expectedListName: string, expectedElementsOfList: DataTable) {
-        await withinRoleAndName(this, "list", expectedListName);
-        await getPageOrElement(this).then(async (element) => {
-            const listitem = await element.getByRole("listitem").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());
-        });
-    }
+ `I should see elements of the list with name {string}`,
+ async function(this: World, expectedListName: string, expectedElementsOfList: DataTable) {
+   await withinRoleAndName(this, "list", expectedListName);
+   await getPageOrElement(this).then(async (element) => {
+     const listitem = await element.getByRole("listitem").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());
+   });
+ }
 );
 
+async function pressKey(world: World, element: Locator, key: string) {
+  switch (key) {
+    case KEY_PRESS.TAB:
+      await element.press("Tab");
+      break;
+    case KEY_PRESS.REVERSE_TAB:
+      await element.press("ShiftLeft+Tab");
+      break;
+    case KEY_PRESS.UP:
+      await element.press("ArrowUp");
+      break;
+    case KEY_PRESS.DOWN:
+      await element.press("ArrowDown");
+      break;
+    case KEY_PRESS.LEFT:
+      await element.press("ArrowLeft");
+      break;
+    case KEY_PRESS.RIGHT:
+      await element.press("ArrowRight");
+      break;
+    default:
+      console.error("the command" + key + " is unrecognized.");
+      break;
+  }
+  await deleteCookieByName(world, COOKIE_NAME.SELECTED_ELEMENT);
+  await addCookieWhenValueIsList(world, COOKIE_NAME.SELECTED_ELEMENT, { name: FILTER_TYPE.SELECTOR_PARENT, value: "*:focus" });
+}
+