save trace file when test failed

.gitignore

@@ -66,6 +66,8 @@ typings/
 reports/*.html
 reports/*.json
 
+traces/
+
 #build
 build
 dist/

package.json

@@ -35,28 +35,30 @@
   "homepage": "https://github.com/tallyb/cucumber-playwright#readme",
   "dependencies": {
     "@cucumber/cucumber": "^7.3.1",
-    "@cucumber/pretty-formatter": "^1.0.0-alpha.1",
     "@cucumber/html-formatter": "17.0.0",
+    "@cucumber/pretty-formatter": "^1.0.0-alpha.1",
     "cucumber-console-formatter": "1.0.0",
-    "cucumber-pretty": "^6.0.0",
     "cucumber-html-reporter": "^5.5.0",
+    "cucumber-pretty": "^6.0.0",
     "expect": "27.2.0",
     "playwright": "^1.14.1"
   },
   "devDependencies": {
     "@types/expect": "24.3.0",
+    "@types/fs-extra": "^9.0.13",
     "@types/lodash": "4.14.173",
     "@types/node": "16.9.1",
     "@typescript-eslint/eslint-plugin": "4.31.1",
     "@typescript-eslint/parser": "4.31.1",
-    "rimraf": "3.0.2",
     "eslint": "7.32.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-import": "2.24.2",
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-react": "7.25.2",
+    "fs-extra": "^10.0.0",
     "open": "8.2.1",
     "prettier": "2.4.1",
+    "rimraf": "3.0.2",
     "standard-version": "9.3.1",
     "ts-node": "10.2.1",
     "typescript": "4.4.3"

src/support/common-hooks.ts

@@ -10,9 +10,12 @@ import {
   WebKitBrowser,
 } from 'playwright';
 import { ITestCaseHookParameter } from '@cucumber/cucumber/lib/support_code_library_builder/types';
+import { ensureDir } from 'fs-extra';
 
 // eslint-disable-next-line no-var
 var browser: ChromiumBrowser | FirefoxBrowser | WebKitBrowser;
+var testName: string;
+var tracesDir: string = 'traces';
 
 declare global {
   // eslint-disable-next-line no-var
@@ -32,6 +35,7 @@ BeforeAll(async function () {
     default:
       browser = await chromium.launch(browserOptions);
   }
+  await ensureDir(tracesDir);
 });
 
 Before({ tags: '@ignore' }, async function () {
@@ -44,12 +48,16 @@ Before({ tags: '@debug' }, async function (this: ICustomWorld) {
 });
 
 Before(async function (this: ICustomWorld, { pickle }: ITestCaseHookParameter) {
+  const time = new Date().toISOString().split('.')[0];
+  const suffix = time.replace(/:|T/g, '-');
+  testName = pickle.name.replace(/\W/g, '-')+'-' + suffix;
   // customize the [browser context](https://playwright.dev/docs/next/api/class-browser#browsernewcontextoptions)
   this.context = await browser.newContext({
     acceptDownloads: true,
     recordVideo: process.env.PWVIDEO ? { dir: 'screenshots' } : undefined,
   });
 
+  await this.context.tracing.start({ screenshots: true, snapshots: true });
   this.page = await this.context.newPage();
   this.page.on('console', async (msg) => {
     if (msg.type() === 'log') {
@@ -66,6 +74,7 @@ After(async function (this: ICustomWorld, { result }: ITestCaseHookParameter) {
     if (result.status !== Status.PASSED) {
       const image = await this.page?.screenshot();
       image && (await this.attach(image, 'image/png'));
+      await this.context?.tracing.stop({ path: `${tracesDir}/${testName}-trace.zip` });
     }
   }
   await this.page?.close();