From d047a9e30a15d8dc91991c9ebb6cf6df5f4ebe81 Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Tue, 20 Feb 2024 15:06:20 +0900
Subject: [PATCH] Fix the Lite dev mode only to create an app and expose the
 controller for Playwright, without editors etc.

---
 js/app/src/lite/dev/App.svelte |  4 ----
 js/app/src/lite/index.ts       | 34 ++++++++++++++++++++++++++++------
 js/app/vite.config.ts          |  1 +
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/js/app/src/lite/dev/App.svelte b/js/app/src/lite/dev/App.svelte
index 5b46c90083b0..76b1e6347b95 100644
--- a/js/app/src/lite/dev/App.svelte
+++ b/js/app/src/lite/dev/App.svelte
@@ -79,12 +79,8 @@ def hi(name):
 			controlPageTitle: false,
 			appMode: true
 		});
-		// @ts-ignore
-		window.controller = controller; // For Playwright
 	});
 	onDestroy(() => {
-		// @ts-ignore
-		window.controller = undefined;
 		controller.unmount();
 	});
 
diff --git a/js/app/src/lite/index.ts b/js/app/src/lite/index.ts
index 0e046e8dcdde..19841e8176fd 100644
--- a/js/app/src/lite/index.ts
+++ b/js/app/src/lite/index.ts
@@ -261,12 +261,34 @@ globalThis.createGradioApp = create;
 bootstrap_custom_element(create);
 
 declare let BUILD_MODE: string;
+declare let GRADIO_E2E_TEST_LITE: string;
 if (BUILD_MODE === "dev") {
-	(async function () {
-		const DevApp = (await import("./dev/App.svelte")).default;
-
-		const app = new DevApp({
-			target: document.getElementById("dev-app")!
+	if (GRADIO_E2E_TEST_LITE) {
+		// For the Playwright E2E tests, we create an app and expose the controller to the global scope.
+		const controller = create({
+			target: document.getElementById("gradio-app")!,
+			code: "import gradio as gr; demo = gr.Interface(lambda x: x, 'text', 'text'); demo.launch()",
+			requirements: [],
+			sharedWorkerMode: true,
+			info: true,
+			container: true,
+			isEmbed: false,
+			initialHeight: "300px",
+			eager: false,
+			themeMode: null,
+			autoScroll: false,
+			controlPageTitle: false,
+			appMode: true
 		});
-	})();
+		// @ts-ignore
+		window.controller = controller;
+	} else {
+		(async function () {
+			const DevApp = (await import("./dev/App.svelte")).default;
+
+			const app = new DevApp({
+				target: document.getElementById("dev-app")!
+			});
+		})();
+	}
 }
diff --git a/js/app/vite.config.ts b/js/app/vite.config.ts
index 3564c751cc0f..1b8313fce024 100644
--- a/js/app/vite.config.ts
+++ b/js/app/vite.config.ts
@@ -100,6 +100,7 @@ export default defineConfig(({ mode }) => {
 
 		define: {
 			BUILD_MODE: production ? JSON.stringify("prod") : JSON.stringify("dev"),
+			GRADIO_E2E_TEST_LITE: process.env.GRADIO_E2E_TEST_LITE,
 			BACKEND_URL: production
 				? JSON.stringify("")
 				: JSON.stringify("http://localhost:7860/"),