added grouping by steps in traces

CHANGELOG.md

@@ -14,6 +14,10 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 
 :microscope: - experimental
 
+## [2.1.0]
+- :rocket: added grouping by steps in traces
+- :beetle: added `FrameLocator` as possible return type for `locator.native`
+
 ## [2.0.0]
 - :pencil: added memory processor to playwrightLocator parameter type
 - :pencil: added page object end-to-end tests

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qavajs/steps-playwright",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "steps to interact with playwright",
   "main": "./index.js",
   "scripts": {
@@ -26,24 +26,24 @@
   },
   "homepage": "https://github.com/qavajs/steps-playwright#readme",
   "devDependencies": {
-    "@cucumber/cucumber": "^11.0.1",
+    "@cucumber/cucumber": "^11.1.1",
     "@qavajs/core": "^2.1.1",
     "@qavajs/console-formatter": "^0.8.0",
     "@qavajs/html-formatter": "^0.18.1",
-    "@qavajs/memory": "^1.9.0",
+    "@qavajs/memory": "^1.10.2",
     "@qavajs/webstorm-adapter": "^8.0.0",
     "@types/chai": "^4.3.20",
     "@types/express": "^5.0.0",
-    "@vitest/coverage-v8": "^2.1.2",
-    "@vitest/ui": "^2.1.2",
-    "electron": "^32.2.0",
+    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/ui": "^2.1.8",
+    "electron": "^33.2.1",
     "express": "^5.0.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.6.2",
-    "vitest": "^2.0.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8",
     "@qavajs/validation": "^0.10.0"
   },
   "dependencies": {
-    "@playwright/test": "^1.48.1"
+    "@playwright/test": "^1.49.1"
   }
 }

src/hooks.ts

@@ -42,21 +42,29 @@ Before({ name: 'Init playwright driver' }, async function () {
     this.element = element;
 });
 
-BeforeStep(async function () {
-    if (saveScreenshotBeforeStep(this.config)) {
-        try {
-            this.attach(await this.playwright.page.screenshot(), 'image/png');
-        } catch (err) {
-            console.warn(err)
+BeforeStep(async function (step) {
+    try {
+        if (tracingManager.isTracingStarted) {
+            await tracingManager.tracing.group(step.pickleStep.text);
+        }
+        if (saveScreenshotBeforeStep(this.config)) {
+            this.attach(await this.playwright.page.screenshot({
+                    fullPage: this.config.driverConfig?.screenshot?.fullPage
+            }), 'image/png');
         }
+    } catch (err) {
+        console.warn(err)
     }
 });
 
 AfterStep(async function (step: ITestStepHookParameter) {
     try {
+        if (tracingManager.isTracingStarted) {
+            await tracingManager.tracing.groupEnd();
+        }
         if (saveScreenshotAfterStep(this.config, step)) {
             this.attach(await this.playwright.page.screenshot({
-                fullPage:this.config.driverConfig?.screenshot?.fullPage
+                fullPage: this.config.driverConfig?.screenshot?.fullPage
             }), 'image/png');
         }
     } catch (err) {

src/pageObject.ts

@@ -1,11 +1,11 @@
-import { type Browser, type BrowserContext, type Page, Locator } from '@playwright/test';
+import {type Browser, type BrowserContext, type Page, Locator, FrameLocator} from '@playwright/test';
 
 export class Selector {
-    selector: string | ((argument: string) => string) | ((x: any) => any);
+    selector: string | ((argument: string) => string) | ((argument: any) => any);
     component!: Function;
     type: string = 'simple';
 
-    constructor(selector: string | ((argument: string) => string) | ((x: any) => any), type?: string) {
+    constructor(selector: string | ((argument: string) => string) | ((argument: any) => any), type?: string) {
         this.selector = selector;
         if (type) {
             this.type = type;
@@ -47,7 +47,7 @@ export interface LocatorDefinition {
      * Define selector using native playwright API
      * @param {(argument: string) => string} selector - selector function
      */
-    native: (selector: (params: NativeSelectorParams) => Locator) => Selector;
+    native: (selector: (params: NativeSelectorParams) => Locator | FrameLocator) => Selector;
 }
 
 export const locator: LocatorDefinition = function locator(selector: any): Selector {
@@ -58,7 +58,7 @@ locator.template = function(selector: (argument: string) => string) {
     return new Selector(selector, 'template');
 }
 
-locator.native = function(selector: (params: NativeSelectorParams) => Locator) {
+locator.native = function(selector: (params: NativeSelectorParams) => Locator | FrameLocator): Selector {
     return new Selector(selector, 'native');
 }
 

src/playwright.ts

@@ -83,6 +83,7 @@ export class Playwright {
         if (!currentContext) throw new Error(`Context '${key}' was not found`);
         return currentContext;
     }
+
     async closeDriver(driverKey: string) {
         const currentDriver = this.drivers[driverKey];
         if (!currentDriver) throw new Error(`Driver '${driverKey}' was not found`);

src/utils/tracingManager.ts

@@ -1,14 +1,18 @@
 import { saveTrace, traceArchive } from './utils';
 import { readFile } from 'node:fs/promises';
+import { Tracing } from '@playwright/test';
 
 class TracingManager {
 
     isTracingStarted = false;
+    tracing!: Tracing;
+
     async start(driverConfig: any, world: any) {
         if (driverConfig.trace) {
             if (!driverConfig.reuseSession || (driverConfig.reuseSession && !this.isTracingStarted)) {
                 this.isTracingStarted = true;
-                await world.playwright.context.tracing.start({
+                this.tracing = world.playwright.context.tracing;
+                await this.tracing.start({
                     screenshots: driverConfig.trace.screenshots ?? true,
                     snapshots: driverConfig.trace.snapshots ?? true,
                     sources: false
@@ -22,7 +26,7 @@ class TracingManager {
         if (saveTrace(driverConfig, scenario)) {
             const path = traceArchive(driverConfig, scenario);
             try {
-                await world.playwright.context.tracing.stopChunk({ path });
+                await this.tracing.stopChunk({ path });
                 if (driverConfig?.trace.attach) {
                     const zipBuffer: Buffer = await readFile(path);
                     world.attach(zipBuffer.toString('base64'), 'base64:application/zip');

src/utils/utils.ts

@@ -1,8 +1,8 @@
-import {ScreenshotEvent} from './screenshotEvent';
-import {TraceEvent} from './traceEvent';
-import {VideoEvent} from './videoEvent';
-import {Status, ITestStepHookParameter, ITestCaseHookParameter} from '@cucumber/cucumber';
-import {join} from 'path';
+import { ScreenshotEvent } from './screenshotEvent';
+import { TraceEvent } from './traceEvent';
+import { VideoEvent } from './videoEvent';
+import { Status, ITestStepHookParameter, ITestCaseHookParameter } from '@cucumber/cucumber';
+import { join } from 'node:path';
 
 export function saveScreenshotAfterStep(config: any, step: ITestStepHookParameter): boolean {
     const screenshotEvent = getEventValue(config?.driverConfig?.screenshot);

test-e2e/webui.ts

@@ -18,7 +18,7 @@ const common = {
             hasTouch: true
         },
         trace: {
-            event: ['onFail'],
+            event: ['afterScenario'],
             dir: 'traces',
             attach: true
         },