Merge pull request #10850 from appwrite/browser-bump

Bump: browser version for tests.

app/views/install/compose.phtml

@@ -859,7 +859,7 @@ $image = $this->getParam('image', '');
       - _APP_ASSISTANT_OPENAI_API_KEY
       
   appwrite-browser:
-    image: appwrite/browser:0.3.1
+    image: appwrite/browser:0.3.2
     container_name: appwrite-browser
     <<: *x-logging
     restart: unless-stopped

docker-compose.yml

@@ -958,7 +958,7 @@ services:
 
   appwrite-browser:
     container_name: appwrite-browser
-    image: appwrite/browser:0.3.1
+    image: appwrite/browser:0.3.2
     networks:
       - appwrite
 

tests/e2e/Services/Avatars/AvatarsBase.php

@@ -1293,4 +1293,32 @@ trait AvatarsBase
 
         return [];
     }
+
+    public function testGetScreenshotComparison(): array
+    {
+        /**
+         * Test screenshot comparison with stable domain (example.com)
+         * This test captures a screenshot of example.com and compares it
+         * against a reference image to ensure consistent rendering.
+         */
+        $response = $this->client->call(Client::METHOD_GET, '/avatars/screenshots', [
+            'x-appwrite-project' => $this->getProject()['$id'],
+        ], [
+            'url' => 'https://example.com',
+            'width' => 800,
+            'height' => 600,
+        ]);
+
+        $this->assertEquals(200, $response['headers']['status-code']);
+        $this->assertEquals('image/png', $response['headers']['content-type']);
+        $this->assertNotEmpty($response['body']);
+
+        // Compare with reference screenshot
+        $referencePath = \realpath(__DIR__ . '/../../../resources/avatars');
+        $referenceScreenshot = $referencePath . '/screenshot-example-com.png';
+        $this->assertFileExists($referenceScreenshot, 'Reference example.com screenshot not found');
+        $this->assertSamePixels($referenceScreenshot, $response['body']);
+
+        return [];
+    }
 }

tests/e2e/Services/Sites/SitesConsoleClientTest.php

@@ -74,8 +74,11 @@ class SitesConsoleClientTest extends Scope
         $this->assertGreaterThan(1, $file['headers']['content-length']);
         $this->assertEquals('image/png', $file['headers']['content-type']);
 
-        $screenshotHash = \md5($file['body']);
-        $this->assertNotEmpty($screenshotHash);
+        // Compare with reference screenshots
+        $referencePath = \realpath(__DIR__ . '/../../../resources/sites/static-themed');
+        $referenceScreenshotLight = $referencePath . '/screenshot-light.png';
+        $this->assertFileExists($referenceScreenshotLight, 'Reference light screenshot not found');
+        $this->assertSamePixels($referenceScreenshotLight, $file['body']);
 
         $screenshotId = $deployment['body']['screenshotDark'];
         $file = $this->client->call(Client::METHOD_GET, "/storage/buckets/screenshots/files/$screenshotId/view?project=console", array_merge($this->getHeaders(), [
@@ -87,10 +90,9 @@ class SitesConsoleClientTest extends Scope
         $this->assertGreaterThan(1, $file['headers']['content-length']);
         $this->assertEquals('image/png', $file['headers']['content-type']);
 
-        $screenshotDarkHash = \md5($file['body']);
-        $this->assertNotEmpty($screenshotDarkHash);
-
-        $this->assertNotEquals($screenshotDarkHash, $screenshotHash);
+        $referenceScreenshotDark = $referencePath . '/screenshot-dark.png';
+        $this->assertFileExists($referenceScreenshotDark, 'Reference dark screenshot not found');
+        $this->assertSamePixels($referenceScreenshotDark, $file['body']);
 
         $screenshotId = $deployment['body']['screenshotLight'];
         $file = $this->client->call(Client::METHOD_GET, "/storage/buckets/screenshots/files/$screenshotId/view?project=console");

tests/resources/sites/static-themed/index.html

@@ -5,19 +5,70 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Themed website</title>
     <style>
-        /* Light theme */
-        body {
-            background-color: #ffffff;
-            color: #000000;
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
         }
+
+        /* Light theme */
+        :root {
+            --bg: #ffffff;
+            --text: #1a1a1a;
+            --accent: #fd366e;
+        }
+
         /* Dark theme */
         @media (prefers-color-scheme: dark) {
-            body {
-                background-color: #000000;
-                color: #ffffff;
+            :root {
+                --bg: #1a1a1a;
+                --text: #ffffff;
+                --accent: #fd366e;
             }
         }
+
+        body {
+            font-family: system-ui, sans-serif;
+            background-color: var(--bg);
+            color: var(--text);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem;
+        }
+
+        .content {
+            max-width: 500px;
+            text-align: center;
+        }
+
+        h1 {
+            font-size: 2rem;
+            margin-bottom: 1rem;
+        }
+
+        p {
+            font-size: 1rem;
+            margin-bottom: 1.5rem;
+            opacity: 0.8;
+        }
+
+        .badge {
+            display: inline-block;
+            padding: 0.5rem 1rem;
+            background-color: var(--accent);
+            color: white;
+            border-radius: 4px;
+            font-size: 0.875rem;
+        }
     </style>
 </head>
-<body></body>
+<body>
+    <div class="content">
+        <h1>Themed website</h1>
+        <p>Adaptive light and dark mode showcase</p>
+        <div class="badge">Appwrite Sites</div>
+    </div>
+</body>
 </html>