npm - @uuv/playwright - Versions diffs - 1.3.3 → 1.4.0 - Mend

@uuv/playwright 1.3.3 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md +96 -10
package/dist/lib/runner-playwright.js +10 -5
package/dist/reporter/uuv-playwright-reporter-helper.d.ts +8 -6
package/dist/reporter/uuv-playwright-reporter-helper.js +57 -6
package/dist/reporter/uuv-playwright-reporter.d.ts +0 -3
package/dist/reporter/uuv-playwright-reporter.js +4 -20
package/package.json +2 -3
package/target-config/playwright.config.ts +3 -1

package/README.md CHANGED Viewed

@@ -1,5 +1,4 @@
 # @uuv/runner-playwright
 <p align="center">
 <a href="https://e2e-test-quest.github.io/uuv/">
@@ -8,9 +7,6 @@
 </picture>
 </a>
 </p>
-<p align="center">
-<a href="https://e2e-test-quest.github.io/uuv/"><img src="https://img.shields.io/badge/documentation-black?&style=for-the-badge&logo=github&logoColor=white" alt="documentation"/></a>
-</p>
 <h3 align="center">
 Test as final user
@@ -35,7 +31,41 @@ Make test writing fast, understandable by any human understanding English or Fre
 </a><br />
 </p>
-## What is @uuv/playwright ?
+## Benefits
+- If used correctly, integrates accessibility from the development stage
+- A living documentation is possible because we propose an unified language for developers and non-developers with a rich dictionary of ready-to-use sentences
+- A wizard that facilitates the writing of tests by suggesting the most accessible sentences
+- Integrates several runtime engines: Cypress / Playwright
+- User-friendly and standardized execution report
+  ### <u>Comparison</u>
+| Criteria | Cypress | Playwright | Testing library | UUV |
+|:-: |:-: |:-: |:-: |:-: |
+| User centrism | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
+| Native accessibility | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
+| Easy setup configuration for BDD test | :warning: | :warning: | :heavy_minus_sign: | :heavy_check_mark: |
+| Understandable by everyone <br> (included non dev) | :x: | :x: | :x: | :heavy_check_mark: |
+### <u>Syntax example</u>
+With this dom example :
+  ```html
+  <body>
+  <h1>Result<h1>
+  </body>
+```
+we see that the sentence proposed by **UUV is the most understandable** of all
+| Library | Syntax |
+|:--|:--|
+| Cypress  | cy.get('result').should('exist') |
+| Playwright| await expect(page.getByTitle('Result')).toHaveCount(1) |
+| Testing library  | expect(screen.getByTitle(/Result/i)).toBeTruthy() |
+| UUV | Then I should see a title named "Result"|
+## Documentation
+<a href="https://e2e-test-quest.github.io/uuv/"><img src="https://img.shields.io/badge/documentation-black?&style=for-the-badge&logo=github&logoColor=white" alt="documentation"/></a>
+## What is @uuv/playwright?
 <p align="center">
@@ -43,20 +73,76 @@ The `@uuv` library (User centric Usecases Validator) is an ecosystem that simpli
 We can use the playwright engine to run test or cypress with [@uuv/cypress](https://www.npmjs.com/package/@uuv/cypress)
 </p>
-## Installing
-<a href="https://e2e-test-quest.github.io/uuv/docs/getting-started/installation#playwright"><img src="https://img.shields.io/badge/Install%20Playwright%20doc-red?&style=for-the-badge&logo=github&logoColor=white" alt="documentation for install uuv playwright"/></a>
+## Installation
+```bash
+npm install --save-dev @uuv/playwright
+```
+or
+```bash
+yarn add -D @uuv/playwright
+```
+## Configuration  (optional)
 <a href="https://e2e-test-quest.github.io/uuv/docs/getting-started/configuration"><img src="https://img.shields.io/badge/Configure%20Playwright%20doc-red?&style=for-the-badge&logo=github&logoColor=white" alt="documentation for configure uuv playwright"/></a>
+## Usage
+### Write test
+To write your first test, create the file `uuv/e2e/first-test.feature` in the project root with the following content :
+  ```gherkin
+  Feature: Hello World
+  Scenario: Search - Successful case
+    When I visit path "/"
+    Then I should see an element with role "heading" and name "My app title"
+  ```
+For more details, please go to the documentation:
 <a href="https://e2e-test-quest.github.io/uuv/docs/test/first-test"><img src="https://img.shields.io/badge/Write%20test%20doc-red?&style=for-the-badge&logo=github&logoColor=white" alt="documentation for write test"/></a>
+### Run test
+#### browser mode
+```bash
+npx uuv open
+```
+or
+```bash
+yarn uuv open
+```
+#### headless mode
+##### without args
+```bash
+npx uuv e2e
+```
+or
+```bash
+yarn uuv e2e
+```
+##### with args
+```bash
+npx uuv e2e --browser=edge --env="{'TAGS':'@mobile'}" --generateHtmlReport
+```
+or
+```bash
+yarn uuv e2e --browser=edge --env="{'TAGS':'@mobile'}" --generateHtmlReport
+```
+For more details, please go to the documentation:
 <a href="https://e2e-test-quest.github.io/uuv/docs/test/running-test"><img src="https://img.shields.io/badge/Run%20test%20doc-red?&style=for-the-badge&logo=github&logoColor=white" alt="documentation for run test"/></a>
 ## License
-[<a href="https://www.npmjs.com/package/@uuv/playwright">
-<img src="https://img.shields.io/badge/license-Apache%202.0-blue" alt="npm"/>
+[<a href="https://github.com/e2e-test-quest/uuv/blob/main/LICENSE">
+<img src="https://img.shields.io/badge/license-Apache%202.0-blue" alt="apache license"/>
 </a>](https://www.apache.org/licenses/LICENSE-2.0)
-This project is licensed under the terms of the [Apache 2.0 license](https://www.apache.org/licenses/LICENSE-2.0).
+This project is licensed under the terms of the [Apache 2.0 license](https://github.com/e2e-test-quest/uuv/blob/main/LICENSE).
+## Authors
+- [@luifr10](https://github.com/luifr10)
+- [@stanlee974](https://github.com/stanlee974)

package/dist/lib/runner-playwright.js CHANGED Viewed

@@ -40,7 +40,6 @@ async function bddGen(tempDir) {
             }
         });
         fs_1.default.writeFileSync(`${tempDir}/${exports.UUVPlaywrightCucumberMapFile}`, JSON.stringify(content, null, 4), { encoding: "utf8" });
-        console.log("bddgen executed");
     }
     catch (err) {
         console.error(chalk_1.default.red("Something went wrong..."));
@@ -87,7 +86,7 @@ function translateFeatures(tempDir, configDir) {
             "*******************************/\n\n" +
             data;
         fs_1.default.writeFileSync(generatedFile, data);
-        console.log(`[WRITE] ${generatedFile} written successfully`);
+        console.log(chalk_1.default.gray(`[WRITE] ${generatedFile} written successfully`));
     });
 }
 function runPlaywright(mode, configDir, generateHtmlReport = false) {
@@ -100,16 +99,22 @@ function runPlaywright(mode, configDir, generateHtmlReport = false) {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         process.env.CONFIG_DIR = configDir;
-        console.log(`Running: npx playwright test --project=chromium -c ${configFile} ${mode === "open" ? "--ui" : ""}`);
-        (0, child_process_1.execSync)(`npx playwright test --project=chromium -c ${configFile} ${mode === "open" ? "--ui" : ""}`, { stdio: "inherit" });
+        const command = `npx playwright test --project=chromium -c ${configFile} ${mode === "open" ? "--ui" : ""}`;
+        console.log(chalk_1.default.gray(`Running ${command}`));
+        (0, child_process_1.execSync)(command, { stdio: "inherit" });
     }
     catch (err) {
         process.exit(-1);
     }
 }
-async function run(mode, tempDir = "uuv/.features-gen/e2e", configDir = "uuv", generateHtmlReport = false) {
+async function executePreprocessor(tempDir, configDir) {
+    console.log("running preprocessor...");
     await bddGen(tempDir);
     translateFeatures(tempDir, configDir);
+    console.log("preprocessor executed");
+}
+async function run(mode, tempDir = "uuv/.features-gen/e2e", configDir = "uuv", generateHtmlReport = false) {
+    await executePreprocessor(tempDir, configDir);
     runPlaywright(mode, configDir, generateHtmlReport);
 }
 exports.run = run;

package/dist/reporter/uuv-playwright-reporter-helper.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { FullConfig, FullResult, Suite, TestCase, TestResult } from "@playwright/test/reporter";
 import { Envelope } from "@cucumber/messages";
 import { TestStep } from "@playwright/test/types/testReporter";
@@ -6,10 +5,6 @@ export declare enum GeneratedReportType {
     CONSOLE = "console",
     HTML = "html"
 }
-interface TestError {
-    scenario: string;
-    error: string | Buffer;
-}
 declare class UuvPlaywrightReporterHelper {
     private UUVPlaywrightCucumberMap;
     testDir: string;
@@ -21,6 +16,7 @@ declare class UuvPlaywrightReporterHelper {
     private testStepLocationAndTestStepIdMap;
     private consoleReportMap;
     private errors;
+    private currentFeatureFile;
     createTestRunStartedEnvelope(config: FullConfig, suite: Suite, startTimestamp: {
         seconds: number;
         nanos: number;
@@ -40,6 +36,8 @@ declare class UuvPlaywrightReporterHelper {
     }): void;
     private getTestStepKey;
     createTestCaseFinishedEnvelope(test: TestCase, result: TestResult, featureFile: string, endTimestamp: any): void;
+    private addResultErrors;
+    private createTestCaseErrorAttachmentsEnvelope;
     private initConsoleReportIfNotExists;
     private updateConsoleReport;
     createTestRunFinishedEnvelope(result: FullResult): void;
@@ -50,7 +48,7 @@ declare class UuvPlaywrightReporterHelper {
     };
     getOriginalFeatureFile(generateFile: string): string | undefined;
     getCurrentRunningScenario(test: TestCase, featureFile: string): string;
-    addError(newError: TestError): void;
+    private addError;
     private getStatus;
     private createEnvelope;
     private createCucumberNdJsonFile;
@@ -65,5 +63,9 @@ declare class UuvPlaywrightReporterHelper {
     private generateHtmlReport;
     private createdDirIfNeeded;
     private displayConsoleReport;
+    logTestBegin(testCase: TestCase, featureFile: string): void;
+    logTestEnd(testCase: TestCase, result: TestResult): void;
+    private getResultIcon;
+    private getTestCaseTitle;
 }
 export default UuvPlaywrightReporterHelper;

package/dist/reporter/uuv-playwright-reporter-helper.js CHANGED Viewed

@@ -48,6 +48,7 @@ class UuvPlaywrightReporterHelper {
     testStepLocationAndTestStepIdMap = new Map();
     consoleReportMap = new Map();
     errors = [];
+    currentFeatureFile;
     createTestRunStartedEnvelope(config, suite, startTimestamp) {
         this.testDir = config.projects[0].testDir;
         this.loadUUVPlaywrightCucumberMap();
@@ -121,7 +122,7 @@ class UuvPlaywrightReporterHelper {
                     .find(pickle => pickle.id === pickleId)
                     ?.steps
                     .filter((value, index) => index >= (newIndexStep - 1))
-                    .forEach((pickleStep, index) => {
+                    .forEach((pickleStep) => {
                     const newTestStepStartedEnvelope = this.createEnvelope({
                         testStepStarted: {
                             testStepId: pickleStep.id,
@@ -164,7 +165,9 @@ class UuvPlaywrightReporterHelper {
                             duration: {
                                 seconds: result.duration / 1000,
                                 nanos: result.duration * NANOS_IN_MILLISSECOND
-                            }
+                            },
+                            // eslint-disable-next-line no-control-regex
+                            message: step.error?.message?.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, "")
                         },
                         timestamp: startTimestamp
                     }
@@ -182,9 +185,10 @@ class UuvPlaywrightReporterHelper {
             if (result.status === "skipped" || result.status === "failed") {
                 this.createTestStepSkippedEnvelope(test, featureFile, endTimestamp);
             }
+            const testCaseStartedId = this.testCasesAndTestCasesStartedIdMap.get(test.id);
             const newTestCaseFinishedEnvelope = this.createEnvelope({
                 testCaseFinished: {
-                    testCaseStartedId: this.testCasesAndTestCasesStartedIdMap.get(test.id),
+                    testCaseStartedId: testCaseStartedId,
                     attempt: result.retry,
                     timestamp: endTimestamp
                 }
@@ -192,8 +196,39 @@ class UuvPlaywrightReporterHelper {
             currentQuery.update(newTestCaseFinishedEnvelope);
             this.envelopes.push(newTestCaseFinishedEnvelope);
             this.updateConsoleReport(featureFile, result);
+            this.addResultErrors(result, test, featureFile);
+            this.createTestCaseErrorAttachmentsEnvelope(testCaseStartedId, result);
         }
     }
+    addResultErrors(result, test, featureFile) {
+        result.errors.forEach(error => {
+            const scenario = this.getCurrentRunningScenario(test, featureFile);
+            this.addError({
+                scenario: scenario,
+                error: error.message
+            });
+        });
+    }
+    createTestCaseErrorAttachmentsEnvelope(testCaseStartedId, result) {
+        result.attachments.forEach(attachment => {
+            if (attachment.path && attachment.path.endsWith("test-failed-1.png")) {
+                const attachmentBody = fs_1.default.readFileSync(attachment.path, { encoding: "base64" });
+                const failedStep = result.steps.find(step => step.error);
+                if (failedStep?.location) {
+                    const testCaseAttachmentEnvelope = this.createEnvelope({
+                        attachment: {
+                            testCaseStartedId: testCaseStartedId,
+                            testStepId: this.testStepLocationAndTestStepIdMap.get(this.getTestStepKey(failedStep.location)),
+                            body: attachmentBody,
+                            contentEncoding: messages_1.AttachmentContentEncoding.BASE64,
+                            mediaType: attachment.contentType
+                        }
+                    });
+                    this.envelopes.push(testCaseAttachmentEnvelope);
+                }
+            }
+        });
+    }
     initConsoleReportIfNotExists(featureFile) {
         if (!this.consoleReportMap.get(featureFile)) {
             this.consoleReportMap.set(featureFile, new ReportOfFeature());
@@ -341,7 +376,7 @@ class UuvPlaywrightReporterHelper {
     async generateHtmlReport() {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        const reportDir = `${process.env.CONFIG_DIR}/reports`;
+        const reportDir = `${process.env.CONFIG_DIR}/reports/e2e`;
         const outputMessageFile = `${reportDir}/cucumber-messages.ndjson`;
         const reportDirHtml = `${reportDir}/html`;
         const reportDirJson = `${reportDir}/json`;
@@ -368,7 +403,7 @@ class UuvPlaywrightReporterHelper {
                 { field: "file", name: "File" },
                 { field: "passed", name: chalk_1.default.green("Passed") },
                 { field: "skipped", name: chalk_1.default.yellow("Skipped") },
-                { field: "failed", name: chalk_1.default.red("Failed") }
+                { field: "failed", name: chalk_1.default.redBright("Failed") }
             ]
         };
         let index = 1;
@@ -378,7 +413,7 @@ class UuvPlaywrightReporterHelper {
                 file: key,
                 passed: chalk_1.default.green(value.passed),
                 skipped: chalk_1.default.yellow(value.skipped),
-                failed: chalk_1.default.red(value.failed)
+                failed: value.failed ? chalk_1.default.redBright(value.failed) : chalk_1.default.red(value.failed)
             });
             index++;
         });
@@ -396,5 +431,21 @@ class UuvPlaywrightReporterHelper {
         console.log((0, chalk_table_1.default)(chalkTableOptions, consoleReport));
         console.log("\n\n");
     }
+    logTestBegin(testCase, featureFile) {
+        if (this.currentFeatureFile !== featureFile) {
+            console.info(chalk_1.default.blueBright(`  Feature: ${featureFile}`));
+            this.currentFeatureFile = featureFile;
+        }
+    }
+    logTestEnd(testCase, result) {
+        console.info(`    ${this.getResultIcon(testCase)} ${this.getTestCaseTitle(testCase, result)}`);
+    }
+    getResultIcon(testCase) {
+        return !testCase.ok() ? chalk_1.default.redBright("\u166D") : chalk_1.default.green("\u2713");
+    }
+    getTestCaseTitle(testCase, result) {
+        const message = `${testCase.title}  (${result.duration}ms)`;
+        return !testCase.ok() ? chalk_1.default.redBright(message) : chalk_1.default.gray(message);
+    }
 }
 exports.default = UuvPlaywrightReporterHelper;

package/dist/reporter/uuv-playwright-reporter.d.ts CHANGED Viewed

@@ -1,12 +1,9 @@
-/// <reference types="node" />
 import { FullConfig, FullResult, Reporter, Suite, TestCase, TestResult } from "@playwright/test/reporter";
 import { TestError, TestStep } from "@playwright/test/types/testReporter";
 declare class UuvPlawrightReporter implements Reporter {
     private helper;
-    private reporterStaticConsoleLogger;
     onBegin(config: FullConfig, suite: Suite): void;
     onError?(error: TestError): void;
-    onStdErr?(chunk: string | Buffer, test: void | TestCase, result: void | TestResult): void;
     onTestBegin(test: TestCase, result: TestResult): void;
     onStepBegin(test: TestCase, result: TestResult, step: TestStep): void;
     onStepEnd(test: TestCase, result: TestResult, step: TestStep): void;

package/dist/reporter/uuv-playwright-reporter.js CHANGED Viewed

@@ -5,40 +5,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const uuv_playwright_reporter_helper_1 = __importDefault(require("./uuv-playwright-reporter-helper"));
 const chalk_1 = __importDefault(require("chalk"));
-const draftlog_1 = __importDefault(require("draftlog"));
 class UuvPlawrightReporter {
     helper = new uuv_playwright_reporter_helper_1.default();
-    reporterStaticConsoleLogger;
     onBegin(config, suite) {
         const startTimestamp = this.helper.getTimestamp();
         // console.log(`Starting the run with ${suite.allTests().length} tests`);
         this.helper.createTestRunStartedEnvelope(config, suite, startTimestamp);
-        (0, draftlog_1.default)(console).addLineListener(process.stdin);
-        console.log(chalk_1.default.yellow(`Starting the run with ${suite.allTests().length} tests`));
-        this.reporterStaticConsoleLogger = console.draft(chalk_1.default.yellow("!!! Fasten seat belt !!!"));
+        console.info(chalk_1.default.yellow(`Starting the run with ${suite.allTests().length} tests`));
     }
     onError(error) {
         console.dir(chalk_1.default.red(error));
     }
-    onStdErr(chunk, test, result) {
-        let scenario = "unknown";
-        if (test?.id !== undefined) {
-            const featureFile = this.helper.getOriginalFeatureFile(test.location.file);
-            if (featureFile) {
-                scenario = this.helper.getCurrentRunningScenario(test, featureFile);
-            }
-        }
-        this.helper.addError({
-            scenario: scenario,
-            error: chunk
-        });
-    }
     onTestBegin(test, result) {
         const startTimestamp = this.helper.getTimestamp(result.startTime);
         // console.log(`Starting test ${test.title} - ${test.parent.location?.file}`);
         const featureFile = this.helper.getOriginalFeatureFile(test.location.file);
         if (featureFile) {
-            this.reporterStaticConsoleLogger(chalk_1.default.blueBright(`Running > ${this.helper.getCurrentRunningScenario(test, featureFile)}`));
+            this.helper.logTestBegin(test, featureFile);
             this.helper.createTestCaseStartedEnvelope(test, result, featureFile, startTimestamp);
         }
     }
@@ -64,12 +47,13 @@ class UuvPlawrightReporter {
         const featureFile = this.helper.getOriginalFeatureFile(test.location.file);
         if (featureFile) {
             this.helper.createTestCaseFinishedEnvelope(test, result, featureFile, endTimestamp);
+            this.helper.logTestEnd(test, result);
         }
     }
     async onEnd(result) {
         // console.debug(`Finished the run: ${result.status}`);
         this.helper.createTestRunFinishedEnvelope(result);
-        console.log(chalk_1.default.yellow("End of the tests execution"));
+        console.log(chalk_1.default.yellow("End of the tests execution\n"));
         await this.helper.generateReport(
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@uuv/playwright",
-  "version": "1.3.3",
+  "version": "1.4.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.",
@@ -41,13 +41,12 @@
   "dependencies": {
     "@cucumber/cucumber": "9.1.2",
     "@playwright/test": "1.33.0",
-    "@uuv/runner-commons": "1.3.3",
+    "@uuv/runner-commons": "1.4.0",
     "axe-core": "4.7.0",
     "axe-playwright": "1.2.3",
     "chalk": "4.1.2",
     "chalk-table": "^1.0.2",
     "cucumber-json-report-formatter": "0.1.4",
-    "draftlog": "1.0.13",
     "figlet": "1.6.0",
     "minimist": "1.2.8",
     "multiple-cucumber-html-reporter": "3.3.0",

package/target-config/playwright.config.ts CHANGED Viewed

@@ -6,11 +6,13 @@ export default defineConfig({
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
+  outputDir: "reports/playwright",
+  workers: 1,
   reporter: "@uuv/playwright/uuv-playwright-reporter",
   use: {
     baseURL: "http://localhost:4200",
     trace: "on-first-retry",
+    screenshot: "only-on-failure"
   },
   projects: [