added capability to save playwright trace (#18)

added capability to save playwright trace

Author: AlexGalichenko

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## 0.0.8
 - :beetle: fixed issue that opens page from browser, not from context
 - :rocket: added mock steps
+- :rocket: added playwright traces
 
 ## 0.0.7
 - :rocket: added capability to connect via CDP

README.md

@@ -13,7 +13,7 @@ const App = require('./page_object');
 module.exports = {
     default: {
         require: [
-            '@qavajs/steps-playwright'
+            'node_modules/@qavajs/steps-playwright'
         ],
         browser: {
             timeout: {
@@ -66,3 +66,17 @@ module.exports = {
     }
 }
 ```
+
+## Playwright traces
+@qavajs support capturing playwright traces. https://playwright.dev/docs/next/trace-viewer-intro
+```typescript
+{
+    browser: {
+        trace: {
+            event: 'onFail', // Event to save trace. Possible value onFail or AfterScenario 
+            dir: 'dirToStoreTraces' // Dir to store traces. Default is traces/
+            attach: true // Define if trace need to be attached to cucumber report. Default false
+        }
+    }
+}
+```

src/hooks.ts

@@ -1,9 +1,10 @@
-import { After, AfterStep, Before, BeforeStep, Status } from '@cucumber/cucumber';
+import { After, AfterStep, Before, BeforeStep } from '@cucumber/cucumber';
 import defaultTimeouts from './defaultTimeouts';
 import { Browser, BrowserContext, Page } from 'playwright';
 import { po } from '@qavajs/po-playwright';
-import { ScreenshotEvent } from './screenshotEvent';
 import { driverProvider } from './driverProvider';
+import { saveScreenshotAfterStep, saveScreenshotBeforeStep, saveTrace, traceArchive } from './utils/utils';
+import { readFile } from 'fs/promises';
 
 declare global {
     var browser: Browser;
@@ -19,16 +20,23 @@ Before(async function () {
         defaultTimeouts,
         ...driverConfig.timeout
     }
-    global.browser = await driverProvider(driverConfig);
+    config.driverConfig = driverConfig;
+    global.browser = await driverProvider(config.driverConfig);
     global.context = await browser.newContext({ viewport: null });
+    if (config.driverConfig.trace) {
+        await context.tracing.start({
+            screenshots: true,
+            snapshots: true
+        })
+    }
     global.page = await context.newPage();
     global.driver = global.browser;
-    po.init(page, { timeout: driverConfig.timeout.present });
+    po.init(page, { timeout: config.driverConfig.timeout.present });
     po.register(config.pageObject);
 });
 
 BeforeStep(async function () {
-    if (config.screenshot === ScreenshotEvent.BEFORE_STEP) {
+    if (saveScreenshotBeforeStep(config)) {
         try {
             this.attach(await page.screenshot(), 'image/png');
         } catch (err) {
@@ -39,18 +47,23 @@ BeforeStep(async function () {
 
 AfterStep(async function (step) {
     try {
-        if (
-            (config.screenshot === ScreenshotEvent.ON_FAIL && step.result.status === Status.FAILED) ||
-            config.screenshot === ScreenshotEvent.AFTER_STEP
-        ) {
+        if (saveScreenshotAfterStep(config, step)) {
             this.attach(await page.screenshot(), 'image/png');
         }
     } catch (err) {
         console.warn(err)
     }
 });
 
-After(async function () {
+After(async function (scenario) {
+    if (saveTrace(config.driverConfig, scenario)) {
+        const path = traceArchive(config.driverConfig, scenario);
+        await context.tracing.stop({ path });
+        if (config.driverConfig?.trace.attach) {
+            const zipBuffer: Buffer = await readFile(path);
+            this.attach(zipBuffer.toString('base64'), 'base64:application/zip');
+        }
+    }
     if (global.browser) {
         await browser.close();
     }

src/screenshotEvent.ts renamed to src/utils/screenshotEvent.ts

@@ -0,0 +1,4 @@
+export enum TraceEvent {
+    ON_FAIL = 'onFail',
+    AFTER_SCENARIO = 'afterScenario'
+}

src/utils/traceEvent.ts

@@ -0,0 +1,31 @@
+import { ScreenshotEvent } from './screenshotEvent';
+import { TraceEvent } from './traceEvent';
+import { Status, ITestStepHookParameter, ITestCaseHookParameter } from '@cucumber/cucumber';
+import { join } from 'path';
+
+export function saveScreenshotAfterStep(config: any, step: ITestStepHookParameter): boolean {
+    return (config.screenshot === ScreenshotEvent.ON_FAIL && step.result.status === Status.FAILED) ||
+    config.screenshot === ScreenshotEvent.AFTER_STEP
+}
+
+export function saveScreenshotBeforeStep(config: any): boolean {
+    return config.screenshot === ScreenshotEvent.BEFORE_STEP
+}
+
+export function saveTrace(driverConfig: any, scenario: ITestCaseHookParameter): boolean {
+    return driverConfig?.trace && (
+        (driverConfig?.trace.event === TraceEvent.AFTER_SCENARIO) ||
+        (scenario.result?.status === Status.FAILED && driverConfig?.trace.event === TraceEvent.ON_FAIL)
+    )
+}
+
+function normalizeScenarioName(name: string): string {
+    return name.replace(/\W/g, '-')
+}
+
+export function traceArchive(driverConfig: any, scenario: ITestCaseHookParameter): string {
+    return join(
+        driverConfig.trace?.dir ?? 'traces',
+        `${normalizeScenarioName(scenario.pickle.name)}-${scenario.testCaseStartedId}.zip`
+    )
+}

src/utils/utils.ts

@@ -14,6 +14,7 @@ const common = {
         }
     },
     format: [
+        'json:test-e2e/report.json',
         '@qavajs/xunit-formatter:test-e2e/report.xml'
     ],
     memory: new Memory(),
@@ -35,6 +36,11 @@ export const debug = {
         capabilities: {
             browserName: 'chromium',
             headless: false
+        },
+        trace: {
+            event: 'onFail',
+            dir: 'customDir',
+            attach: true
         }
     }
 }