BabylonJS · RaananW · Nov 27, 2024 · Nov 25, 2024 · Nov 25, 2024 · Nov 25, 2024
diff --git a/package.json b/package.json
@@ -83,11 +83,11 @@
         "build:test-tools": "npm run build -w @tools/test-tools",
         "test": "jest --runInBand",
         "test:unit": "jest --selectProjects=unit",
-        "test:visualization": "playwright test -c ./packages/tools/tests/playwright.config.ts",
-        "test:visualization:ui": "playwright test -c ./packages/tools/tests/playwright.config.ts --ui",
+        "test:visualization": "playwright test -c ./playwright.config.ts",
+        "test:visualization:ui": "playwright test -c ./playwright.config.ts --ui",
         "test:integration": "jest --selectProjects=integration --runInBand && npm run test -w @tools/memory-leak-tests",
-        "test:performance": "playwright test -c ./packages/tools/tests/playwright.config.ts --project=performance",
-        "test:interactions": "playwright test -c ./packages/tools/tests/playwright.config.ts --project=interaction",
+        "test:performance": "playwright test -c ./playwright.config.ts --project=performance",
+        "test:interactions": "playwright test -c ./playwright.config.ts --project=interaction",
         "test:escheck": "nx run-many --target=test:escheck --parallel --maxParallel=6",
         "test:docs": "node ./scripts/typedoc-generator.js",
         "prepare": "ts-patch install -s && npm run build:tools && npm i @dev/build-tools -D && npm run build:assets && npm run build:test-tools",

diff --git a/packages/tools/playground/public/index.html b/packages/tools/playground/public/index.html
@@ -1,14 +1,16 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <!-- Google tag (gtag.js) -->
         <script async src="https://www.googletagmanager.com/gtag/js?id=UA-41767310-2"></script>
         <script>
             window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
+            function gtag() {
+                dataLayer.push(arguments);
+            }
+            gtag("js", new Date());
 
-            gtag('config', 'UA-41767310-2');
+            gtag("config", "UA-41767310-2");
         </script>
         <title>Babylon.js Playground</title>
         <meta charset="utf-8" />
@@ -38,8 +40,8 @@
         <!-- DatGUI -->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
         <!-- jszip -->
-        <script src="/libs/jszip.min.js"></script>
-        <script src="/libs/fileSaver.js"></script>
+        <script src="libs/jszip.min.js"></script>
+        <script src="libs/fileSaver.js"></script>
 
         <!-- jQuery -->
         <script src="https://code.jquery.com/jquery.js"></script>

diff --git a/packages/tools/playground/test/interactions.playground.test.ts b/packages/tools/playground/test/interactions.playground.test.ts
@@ -0,0 +1,80 @@
+import { test, expect } from "@playwright/test";
+
+test("Playground is loaded (Desktop)", async ({ page }) => {
+    await page.goto("https://playground.babylonjs.com/", {
+        waitUntil: "networkidle",
+    });
+    page.setViewportSize({
+        width: 1920,
+        height: 1080,
+    });
+    // check visibility of both canvas AND the editor
+    expect(page.locator("#canvasZone")).toBeVisible();
+    expect(page.locator("#monacoHost")).toBeVisible();
+    expect(page.locator("#pg-header")).toBeVisible();
+});
+
+test("Playground is loaded (Mobile)", async ({ page }) => {
+    await page.goto("https://playground.babylonjs.com/", {
+        waitUntil: "networkidle",
+    });
+    page.setViewportSize({
+        width: 800,
+        height: 1080,
+    });
+    // check visibility of both canvas AND the editor
+    expect(page.locator("#canvasZone")).toBeVisible();
+    expect(page.locator("#monacoHost")).not.toBeVisible();
+    expect(page.locator(".hamburger-button")).toBeVisible();
+
+    // click the "Switch to code" link
+    await page.getByTitle("Switch to code").click();
+    expect(page.locator("#canvasZone")).not.toBeVisible();
+    expect(page.locator("#monacoHost")).toBeVisible();
+});
+
+test("Examples can be loaded", async ({ page }) => {
+    await page.goto("https://playground.babylonjs.com/", {
+        waitUntil: "networkidle",
+    });
+    page.setViewportSize({
+        width: 1920,
+        height: 1080,
+    });
+
+    // click the "Examples" button
+    await page.getByTitle("Examples").click();
+
+    expect(page.locator("#examples")).toBeVisible();
+
+    await page.locator(".example").nth(3).click();
+
+    expect(page.url()).toContain("#7V0Y1I#2");
+});
+
+test("User can interact with the playground", async ({ page }) => {
+    await page.goto("https://playground.babylonjs.com/", {
+        waitUntil: "networkidle",
+    });
+    page.setViewportSize({
+        width: 1920,
+        height: 1080,
+    });
+
+    await page.locator(".view-lines > div:nth-child(16)").click();
+    await page.keyboard.type("camera", { delay: 50 });
+    expect(page.locator(".editor-widget")).toBeVisible();
+    await page.waitForTimeout(100);
+    await page.getByLabel("camera", { exact: true }).locator("span").filter({ hasText: "camera" }).first().click();
+
+    // change light's intensity to 0.2
+    await page.getByText("0.7").click();
+    await page.keyboard.press("ArrowRight");
+    await page.keyboard.press("ArrowRight");
+    await page.keyboard.press("Backspace");
+    await page.keyboard.press("2");
+
+    await page.getByTitle("Run\nAlt+Enter").getByRole("img").click();
+
+    await expect(page.locator("#canvasZone")).toHaveScreenshot();
+});
diff --git a/packages/tools/tests/browserstack.config.ts b/packages/tools/tests/browserstack.config.ts
@@ -24,7 +24,7 @@ export const BS_LOCAL_ARGS = {
 export const bsLocal = new BrowserStackLocal.Local();
 
 // Patching the capabilities dynamically according to the project name.
-const patchCaps = (name, title) => {
+const patchCaps = (name: string, title: string) => {
     let combination = name.split(/@browserstack/)[0];
     let [browerCaps, osCaps] = combination.split(/:/);
     let [browser, browser_version] = browerCaps.split(/@/);
@@ -43,4 +43,3 @@ export const getCdpEndpoint = (name: string, title: string) => {
     const cdpUrl = `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify(caps))}`;
     return cdpUrl;
 };
-
diff --git a/packages/tools/tests/package.json b/packages/tools/tests/package.json
@@ -16,7 +16,7 @@
         "build": "node ./build.js",
         "analyse": "webpack --profile --json > stats.json",
         "generate-file-size-report": "node ./scripts/generateFileSizes.js",
-        "test:playwright": "playwright test"
+        "test:playwright": "playwright test --config ../../../playwright.config.ts"
     },
     "devDependencies": {
         "@dev/core": "^1.0.0",

diff --git a/packages/tools/tests/playwright.config.ts b/packages/tools/tests/playwright.config.ts
diff --git a/packages/tools/tests/test/playwright/performance.test.ts b/packages/tools/tests/test/playwright/performance.test.ts
@@ -37,9 +37,9 @@ export const checkPerformanceOfScene = async (page: Page, baseUrl: string, numbe
 
 export const evaluateRenderScene = async ({ renderCount }: { renderCount: number }): Promise<number> => {
     window.BABYLON.SceneLoader.ShowLoadingScreen = false;
-    window.scene.useConstantAnimationDeltaTime = true;
+    (window.scene as any).useConstantAnimationDeltaTime = true;
 
-    await window.scene.whenReadyAsync();
+    await (window.scene as any).whenReadyAsync();
 
     if (window.scene && window.engine) {
         const now = performance.now();
@@ -202,4 +202,3 @@ export const performanceTests = async (engineType = "webgl2", testFileName = "co
 };
 
 performanceTests("webgl2", "config", false, false, true, false);
-
diff --git a/.../test/visualization/ReferenceImages/User-can-interact-with-the-playground-1.png b/.../test/visualization/ReferenceImages/User-can-interact-with-the-playground-1.png
diff --git a/packages/tools/tests/test/visualization/visualization.webgl2.test.ts b/packages/tools/tests/test/visualization/visualization.webgl2.test.ts
diff --git a/packages/tools/tests/test/visualization/visualization.webgpu.test.ts b/packages/tools/tests/test/visualization/visualization.webgpu.test.ts