Lazily set up ElementAppPage subfixtures to avoid conflicting on network routing

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Author: t3chguy

playwright/pages/ElementAppPage.ts

@@ -24,9 +24,23 @@ import { Spotlight } from "./Spotlight";
 export class ElementAppPage {
     public constructor(public readonly page: Page) {}
 
-    public settings = new Settings(this.page);
-    public client: Client = new Client(this.page);
-    public timeline: Timeline = new Timeline(this.page);
+    // We create these lazily on first access to avoid calling setup code which might cause conflicts,
+    // e.g. the network routing code in the client subfixture.
+    private _settings?: Settings;
+    public get settings(): Settings {
+        if (!this._settings) this._settings = new Settings(this.page);
+        return this._settings;
+    }
+    private _client?: Client;
+    public get client(): Client {
+        if (!this._client) this._client = new Client(this.page);
+        return this._client;
+    }
+    private _timeline?: Timeline;
+    public get timeline(): Timeline {
+        if (!this._timeline) this._timeline = new Timeline(this.page);
+        return this._timeline;
+    }
 
     /**
      * Open the top left user menu, returning a Locator to the resulting context menu.