Merge pull request PrestaShop#36673 from jolelievre/debug-classic

Screenshot on each steps in UI tests
PululuK · Aug 29, 2024 · c719b30 · c719b30
2 parents 8aa72a0 + adc8314
commit c719b30
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 14 deletions.
diff --git a/.github/actions/ui-test/action.yml b/.github/actions/ui-test/action.yml
@@ -30,6 +30,10 @@ inputs:
     required: false
     description: Database Server (mysql/mariadb)
     default: 'mysql'
+  TAKE_SCREENSHOT_AFTER_EACH_STEP:
+    required: false
+    description: Take screenshot after each step
+    default: 'false'
 
 runs:
   using: 'composite'
@@ -42,7 +46,9 @@ runs:
     - name: Use .env.ci
       working-directory: ${{ inputs.TESTS_DIR }}
       shell: bash
-      run: cp .env.ci .env
+      run: |
+        cp .env.ci .env
+        sed -i -e "s/TAKE_SCREENSHOT_AFTER_EACH_STEP.*/TAKE_SCREENSHOT_AFTER_EACH_STEP=${{ inputs.TAKE_SCREENSHOT_AFTER_EACH_STEP == 'false' && 'false' || 'true' }}/g" .env
 
     - name: Install dependencies
       working-directory: ${{ inputs.TESTS_DIR }}

diff --git a/tests/UI/.env.ci b/tests/UI/.env.ci
@@ -32,6 +32,7 @@ INTERCEPT_ERRORS=false
 
 # Screenshots
 TAKE_SCREENSHOT_AFTER_FAIL=true
+TAKE_SCREENSHOT_AFTER_EACH_STEP=false
 
 # Mocha
 GENERATE_FAILED_STEPS=false

diff --git a/tests/UI/.env.local b/tests/UI/.env.local
@@ -33,6 +33,7 @@ INTERCEPT_ERRORS=false
 
 # Screenshots
 TAKE_SCREENSHOT_AFTER_FAIL=true
+TAKE_SCREENSHOT_AFTER_EACH_STEP=false
 
 # Mocha
 GENERATE_FAILED_STEPS=false

diff --git a/tests/UI/package-lock.json b/tests/UI/package-lock.json
diff --git a/tests/UI/pages/FO/classic/checkout/index.ts b/tests/UI/pages/FO/classic/checkout/index.ts
@@ -765,7 +765,7 @@ class CheckoutPage extends FOBasePage {
    * @returns {Promise<void>}
    */
   async fillAddressForm(page: Page, address: FakerAddress): Promise<void> {
-    if (await this.elementVisible(page, this.addressStepAliasInput)) {
+    if (await this.elementVisible(page, this.addressStepAliasInput, 500)) {
       await this.setValue(page, this.addressStepAliasInput, address.alias);
     }
     await this.setValue(page, this.addressStepPhoneInput, address.phone);

diff --git a/tests/UI/types/global.d.ts b/tests/UI/types/global.d.ts
@@ -60,7 +60,8 @@ type GlobalBrowserErrors = {
 
 type GlobalScreenshot = {
   FOLDER: string
-  AFTER_FAIL: any
+  AFTER_FAIL: boolean
+  EACH_STEP: boolean
 }
 
 type GlobalMaildevConfig = {

diff --git a/tests/UI/utils/globals.ts b/tests/UI/utils/globals.ts
@@ -61,6 +61,7 @@ global.GENERATE_FAILED_STEPS = process.env.GENERATE_FAILED_STEPS ? JSON.parse(pr
 global.SCREENSHOT = {
   FOLDER: process.env.SCREENSHOT_FOLDER || './screenshots',
   AFTER_FAIL: process.env.TAKE_SCREENSHOT_AFTER_FAIL ? JSON.parse(process.env.TAKE_SCREENSHOT_AFTER_FAIL) : false,
+  EACH_STEP: process.env.TAKE_SCREENSHOT_AFTER_EACH_STEP ? JSON.parse(process.env.TAKE_SCREENSHOT_AFTER_EACH_STEP) : false,
 };
 
 global.maildevConfig = {

diff --git a/tests/UI/utils/setup.ts b/tests/UI/utils/setup.ts
@@ -1,4 +1,5 @@
 import {
+  utilsCore,
   utilsFile,
   utilsPlaywright,
 } from '@prestashop-core/ui-testing';
@@ -47,25 +48,44 @@ after(async function () {
   }
 });
 
+const takeScreenShotAfterStep = async (browser: any, screenshotPath: string) => {
+  const currentTab = await utilsPlaywright.getLastOpenedTab(browser);
+
+  // Take a screenshot
+  if (currentTab !== null) {
+    await currentTab.screenshot(
+      {
+        path: screenshotPath,
+        fullPage: true,
+      },
+    );
+  }
+};
+
 /**
  * @function afterEach
  * @description Take a screenshot if a step is failed
  */
 afterEach(async function () {
   // Take screenshot if demanded after failed step
   if (global.SCREENSHOT.AFTER_FAIL && this.currentTest?.state === 'failed') {
-    const currentTab = await utilsPlaywright.getLastOpenedTab(this.browser);
+    await takeScreenShotAfterStep(this.browser, `${global.SCREENSHOT.FOLDER}/fail_test_${screenshotNumber}.png`);
+    screenshotNumber += 1;
+  }
+  if (global.SCREENSHOT.EACH_STEP) {
+    const testPath = this.currentTest?.file;
+    // eslint-disable-next-line no-unsafe-optional-chaining
+    const folderPath = testPath?.slice(testPath?.indexOf('tests/UI') + 8).slice(0, -3);
+    let stepId: string = `screenshot-${screenshotNumber}`;
 
-    // Take a screenshot
-    if (currentTab !== null) {
-      await currentTab.screenshot(
-        {
-          path: `${global.SCREENSHOT.FOLDER}/fail_test_${screenshotNumber}.png`,
-          fullPage: true,
-        },
-      );
+    if (this.currentTest?.title) {
+      stepId = `${screenshotNumber}-${this.currentTest?.title}`;
     }
 
+    const screenshotPath = `${global.SCREENSHOT.FOLDER}${folderPath}/${utilsCore.slugify(stepId)}.png`;
+    await takeScreenShotAfterStep(this.browser, screenshotPath).catch((err) => {
+      console.log(`screenshot for ${this.currentTest?.title} failed`, err);
+    });
     screenshotNumber += 1;
   }
 });