chore(tests): added tracing functionality from pw (podman-desktop#5519)

* chore(tests): added tracing functionality from pw

tests/src/container-smoke.spec.ts

@@ -37,7 +37,7 @@ const containerToRun = 'alpine-container';
 beforeAll(async () => {
   pdRunner = new PodmanDesktopRunner();
   page = await pdRunner.start();
-  pdRunner.setVideoName('containers-e2e');
+  pdRunner.setVideoAndTraceName('containers-e2e');
   const welcomePage = new WelcomePage(page);
   await welcomePage.handleWelcomePage(true);
   // wait giving a time to podman desktop to load up

tests/src/image-smoke.spec.ts

@@ -33,7 +33,7 @@ let navBar: NavigationBar;
 beforeAll(async () => {
   pdRunner = new PodmanDesktopRunner();
   page = await pdRunner.start();
-  pdRunner.setVideoName('pull-image-e2e');
+  pdRunner.setVideoAndTraceName('pull-image-e2e');
 
   const welcomePage = new WelcomePage(page);
   await welcomePage.handleWelcomePage(true);

tests/src/pod-smoke.spec.ts

@@ -42,7 +42,7 @@ const isMac = os.platform() === 'darwin';
 beforeAll(async () => {
   pdRunner = new PodmanDesktopRunner();
   page = await pdRunner.start();
-  pdRunner.setVideoName('pods-e2e');
+  pdRunner.setVideoAndTraceName('pods-e2e');
   const welcomePage = new WelcomePage(page);
   await welcomePage.handleWelcomePage(true);
   // wait giving a time to podman desktop to load up

tests/src/podman-extension-smoke.spec.ts

@@ -47,7 +47,7 @@ let navigationBar: NavigationBar;
 beforeAll(async () => {
   pdRunner = new PodmanDesktopRunner();
   page = await pdRunner.start();
-  pdRunner.setVideoName('settings-extensions-e2e');
+  pdRunner.setVideoAndTraceName('settings-extensions-e2e');
 
   const welcomePage = new WelcomePage(page);
   await welcomePage.handleWelcomePage(true);

tests/src/runner/podman-desktop-runner.ts

@@ -36,15 +36,15 @@ export class PodmanDesktopRunner {
   private readonly _profile: string;
   private readonly _customFolder;
   private readonly _testOutput: string;
-  private _videoName: string | undefined;
+  private _videoAndTraceName: string | undefined;
 
   constructor(profile = '', customFolder = 'podman-desktop') {
     this._running = false;
     this._profile = profile;
     this._testOutput = join('tests', 'output', this._profile);
     this._customFolder = join(this._testOutput, customFolder);
     this._options = this.defaultOptions();
-    this._videoName = undefined;
+    this._videoAndTraceName = undefined;
   }
 
   public async start(): Promise<Page> {
@@ -62,6 +62,9 @@ export class PodmanDesktopRunner {
     // Direct Electron console to Node terminal.
     this.getPage().on('console', console.log);
 
+    // Start playwright tracing
+    await this.startTracing();
+
     // also get stderr from the node process
     this._app.process().stderr?.on('data', data => {
       console.log(`STDERR: ${data}`);
@@ -99,6 +102,20 @@ export class PodmanDesktopRunner {
     await this.getPage().screenshot({ path: join(this._testOutput, 'screenshots', filename) });
   }
 
+  public async startTracing() {
+    await this.getPage().context().tracing.start({ screenshots: true, snapshots: true });
+  }
+
+  public async stopTracing() {
+    let name = '';
+    if (this._videoAndTraceName) name = this._videoAndTraceName;
+
+    name = name + '_trace.zip';
+    await this.getPage()
+      .context()
+      .tracing.stop({ path: join(this._testOutput, 'traces', name) });
+  }
+
   public async getBrowserWindowState(): Promise<WindowState> {
     return await (
       await this.getBrowserWindow()
@@ -139,12 +156,17 @@ export class PodmanDesktopRunner {
     if (!this.isRunning()) {
       throw Error('Podman Desktop is not running');
     }
+
+    // Stop playwright tracing
+    await this.stopTracing();
+
     if (this.getElectronApp()) {
       const elapsed = await this.trackTime(async () => await this.getElectronApp().close());
       console.log(`Elapsed time of closing the electron app: ${elapsed} ms`);
     }
-    if (this._videoName) {
-      const videoPath = join(this._testOutput, 'videos', `${this._videoName}.webm`);
+
+    if (this._videoAndTraceName) {
+      const videoPath = join(this._testOutput, 'videos', `${this._videoAndTraceName}.webm`);
       const elapsed = await this.trackTime(async () => await this.saveVideoAs(videoPath));
       console.log(`Saving a video file took: ${elapsed} ms`);
       console.log(`Video file saved as: ${videoPath}`);
@@ -165,6 +187,7 @@ export class PodmanDesktopRunner {
 
   private defaultOptions() {
     const directory = join(this._testOutput, 'videos');
+    const tracesDir = join(this._testOutput, 'traces', 'raw');
     console.log(`video will be written to: ${directory}`);
     const env = this.setupPodmanDesktopCustomFolder();
     const recordVideo = {
@@ -186,6 +209,7 @@ export class PodmanDesktopRunner {
       executablePath,
       env,
       recordVideo,
+      tracesDir,
     };
   }
 
@@ -223,8 +247,8 @@ export class PodmanDesktopRunner {
     this._options = value;
   }
 
-  public setVideoName(name: string) {
-    this._videoName = name;
+  public setVideoAndTraceName(name: string) {
+    this._videoAndTraceName = name;
   }
 
   public getTestOutput(): string {

tests/src/welcome-page-smoke.spec.ts

@@ -31,7 +31,7 @@ let page: Page;
 beforeAll(async () => {
   pdRunner = new PodmanDesktopRunner('', 'welcome-podman-desktop');
   page = await pdRunner.start();
-  pdRunner.setVideoName('welcome-page-e2e');
+  pdRunner.setVideoAndTraceName('welcome-page-e2e');
 });
 
 afterAll(async () => {

tests/src/yaml-smoke.spec.ts

@@ -36,7 +36,7 @@ const backendImage = 'podify-demo-backend';
 beforeAll(async () => {
   pdRunner = new PodmanDesktopRunner();
   page = await pdRunner.start();
-  pdRunner.setVideoName('play-yaml-e2e');
+  pdRunner.setVideoAndTraceName('play-yaml-e2e');
 
   await new WelcomePage(page).handleWelcomePage(true);
 });