Bring back Playwright-Electron Workbench's on-failure screenshot + new PLAYWRIGHT_RECORD_VIDEO (#5464)

* Fix playwright-electron screenshots on failure and add PLAYWRIGHT_RECORD_VIDEO

* yarn tsc

Author: lf94

e2e/playwright/fixtures/fixtureSetup.ts

@@ -59,18 +59,25 @@ export interface Fixtures {
   homePage: HomePageFixture
 }
 export class AuthenticatedTronApp {
-  public readonly _page: Page
+  public originalPage: Page
   public page: Page
+  public browserContext: BrowserContext
   public context: BrowserContext
   public readonly testInfo: TestInfo
   public electronApp: ElectronApplication | undefined
   public readonly viewPortSize = { width: 1200, height: 500 }
   public dir: string = ''
 
-  constructor(context: BrowserContext, page: Page, testInfo: TestInfo) {
-    this._page = page
-    this.page = page
-    this.context = context
+  constructor(
+    browserContext: BrowserContext,
+    originalPage: Page,
+    testInfo: TestInfo
+  ) {
+    this.page = originalPage
+    this.originalPage = originalPage
+    this.browserContext = browserContext
+    // Will be overwritten in the initializer
+    this.context = browserContext
     this.testInfo = testInfo
   }
   async initialise(
@@ -86,9 +93,16 @@ export class AuthenticatedTronApp {
       folderSetupFn: arg.folderSetupFn,
       cleanProjectDir: arg.cleanProjectDir,
       appSettings: arg.appSettings,
+      viewport: this.viewPortSize,
     })
     this.page = page
+
+    // These assignments "fix" some brokenness in the Playwright Workbench when
+    // running against electron applications.
+    // The timeline is still broken but failure screenshots work again.
     this.context = context
+    Object.assign(this.browserContext, this.context)
+
     this.electronApp = electronApp
     this.dir = dir
 

e2e/playwright/test-utils.ts

@@ -937,11 +937,16 @@ export async function setupElectron({
   testInfo,
   cleanProjectDir = true,
   appSettings,
+  viewport,
 }: {
   testInfo: TestInfo
   folderSetupFn?: (projectDirName: string) => Promise<void>
   cleanProjectDir?: boolean
   appSettings?: Partial<SaveSettingsPayload>
+  viewport: {
+    width: number
+    height: number
+  }
 }): Promise<{
   electronApp: ElectronApplication
   context: BrowserContext
@@ -972,6 +977,14 @@ export async function setupElectron({
     ...(process.env.ELECTRON_OVERRIDE_DIST_PATH
       ? { executablePath: process.env.ELECTRON_OVERRIDE_DIST_PATH + 'electron' }
       : {}),
+    ...(process.env.PLAYWRIGHT_RECORD_VIDEO
+      ? {
+          recordVideo: {
+            dir: testInfo.snapshotPath(),
+            size: viewport,
+          },
+        }
+      : {}),
   }
 
   // Do this once and then reuse window on subsequent calls.

e2e/playwright/zoo-test.ts

@@ -68,13 +68,6 @@ type PWFunction = (
 
 let firstUrl = ''
 
-// The below error is due to the extreme type spaghetti going on. playwright/
-// types/test.d.ts does not export 2 functions (below is one of them) but tsc
-// is trying to use a interface name it can't see.
-// e2e/playwright/zoo-test.ts:64:14 - error TS4023: Exported variable 'test' has
-// or is using name 'TestFunction' from external module
-// "/home/lee/Code/Zoo/modeling-app/dirty2/node_modules/playwright/types/test"
-// but cannot be named.
 export const test = (
   desc: string,
   objOrFn: PWFunction | TestDetails,