feat: add playwright e2e test for chat page with new and old data structure (#99)

You can run npx playwright test --ui locally to check the test

<img width="1582" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/3f6d2db5-c2d4-4190-92e9-b152894788bc">

<img width="1264" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/2429efe1-56e0-4f3f-9694-599475097f83">

.github/workflows/playwright.yml

@@ -0,0 +1,34 @@
+name: Playwright Tests
+on:
+  deployment_status:
+jobs:
+  run-e2es:
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+    if: github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success'
+    steps:
+    - uses: actions/checkout@v4
+    - name: Setup pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        version: 9.1.1
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'pnpm'
+    - name: Install dependencies
+      run: pnpm i --frozen-lockfile
+    - name: Install Playwright Browsers
+      run: pnpm exec playwright install --with-deps
+    - name: Run Playwright tests
+      run: pnpm exec playwright test
+      env:
+        BASE_URL: ${{ github.event.deployment_status.environment_url }}
+        VERCEL_AUTOMATION_BYPASS_SECRET: ${{ secrets.VERCEL_AUTOMATION_BYPASS_SECRET }}
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 7

.gitignore

@@ -39,4 +39,8 @@ yarn-error.log*
 
 # ts
 tsconfig.tsbuildinfo
-certificates
+certificates
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

app/page.tsx

@@ -2,29 +2,13 @@
 
 import { useRouter } from 'next/navigation';
 
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 import Composer, { ComposerRef } from '@/components/chat/Composer';
 import { dbPostCreateChat } from '@/lib/db/functions';
 import { nanoid } from '@/lib/utils';
 import Chip from '@/components/ui/Chip';
 import { IconArrowUpRight } from '@/components/ui/Icons';
-
-const EXAMPLES = [
-  {
-    title: 'Counting flowers in image',
-    mediaUrl:
-      'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/flower.png',
-    prompt:
-      'Detect flowers in this image, draw boxes and output the image, also return total number of flowers',
-  },
-  {
-    title: 'Detecting sharks in video',
-    mediaUrl:
-      'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/shark3_short.mp4',
-    prompt:
-      'Can you detect any surfboards or sharks in the video, draw a green line between the shark and the nearest surfboard and add the distance between them in meters assuming 30 pixels is 1 meter. Make the line red if the shark is within 10 meters of a surfboard. Sample the video at 1 frames per second and save the output video as output.mp4.',
-  },
-];
+import { EXAMPLES } from '@/lib/constants';
 
 export default function Page() {
   const router = useRouter();

components/CodeResultDisplay.tsx

@@ -53,13 +53,21 @@ const CodeResultDisplay: React.FC<{
   const finalResult = results?.find(_ => _.is_main_result)?.text;
 
   return (
-    <div className="rounded-lg overflow-hidden relative max-w-5xl">
+    <div
+      className="rounded-lg overflow-hidden relative max-w-5xl"
+      data-testid="code-result-display-container"
+    >
       <CodeBlock language="python" value={code} />
       <div className="rounded-lg relative">
         <div className="absolute left-1/2 -translate-x-1/2 -top-4 z-10">
           <Dialog>
             <DialogTrigger asChild>
-              <Button variant="ghost" size="icon" className="size-8">
+              <Button
+                data-testid="open-final-test-code-dialog-button"
+                variant="ghost"
+                size="icon"
+                className="size-8"
+              >
                 <IconTerminalWindow className="text-teal-500 size-4" />
               </Button>
             </DialogTrigger>
@@ -111,7 +119,11 @@ const CodeResultDisplay: React.FC<{
             <p>image output</p>
             <Dialog>
               <DialogTrigger asChild>
-                <Button variant="outline" size="sm">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  data-testid="view-all-result-images-button"
+                >
                   View all
                 </Button>
               </DialogTrigger>
@@ -120,7 +132,11 @@ const CodeResultDisplay: React.FC<{
                   <CarouselContent>
                     {imageResults.map((png, index) => (
                       <CarouselItem key={'png' + index}>
-                        <Img src={png!} width={1200} alt="result-image" />
+                        <Img
+                          src={png!}
+                          width={1200}
+                          alt={`detail-result-image-${index}`}
+                        />
                       </CarouselItem>
                     ))}
                   </CarouselContent>
@@ -136,7 +152,7 @@ const CodeResultDisplay: React.FC<{
                 key={'png' + index}
                 src={png!}
                 width={200}
-                alt="result-image"
+                alt={`result-image-${index}`}
               />
             ))}
           </div>

components/chat/ChatMessage.tsx

@@ -29,6 +29,14 @@ import { Message } from '@prisma/client';
 import { Separator } from '../ui/Separator';
 import { cn } from '@/lib/utils';
 import toast from 'react-hot-toast';
+import {
+  EXECUTE_CODE_FAILURE_TITLE,
+  EXECUTE_CODE_SUCCESS_TITLE,
+  EXECUTE_CODE_TITLE,
+  GENERATE_CODE_TITLE,
+  PLAN_TITLE,
+  TOOLS_TITLE,
+} from '@/lib/constants';
 
 export interface ChatMessageProps {
   message: Message;
@@ -218,16 +226,42 @@ const ChunkTypeToText: React.FC<{
     ? `(${Math.round(displayMs / 100) / 10}s)`
     : '';
 
-  if (type === 'plans') return <p>Creating instructions {durationDisplay}</p>;
-  if (type === 'tools') return <p>Retrieving tools {durationDisplay}</p>;
+  if (type === 'plans')
+    return (
+      <p>
+        {PLAN_TITLE} {durationDisplay}
+      </p>
+    );
+  if (type === 'tools')
+    return (
+      <p>
+        {TOOLS_TITLE} {durationDisplay}
+      </p>
+    );
   if (type === 'code' && status === 'started')
-    return <p>Generating code {durationDisplay}</p>;
+    return (
+      <p>
+        {GENERATE_CODE_TITLE} {durationDisplay}
+      </p>
+    );
   if (type === 'code' && status === 'running')
-    return <p>Executing code {durationDisplay}</p>;
+    return (
+      <p>
+        {EXECUTE_CODE_TITLE} {durationDisplay}
+      </p>
+    );
   if (type === 'code' && status === 'completed')
-    return <p>Code execution success {durationDisplay}</p>;
+    return (
+      <p>
+        {EXECUTE_CODE_SUCCESS_TITLE} {durationDisplay}
+      </p>
+    );
   if (type === 'code' && status === 'failed')
-    return <p>Code execution failure {durationDisplay}</p>;
+    return (
+      <p>
+        {EXECUTE_CODE_FAILURE_TITLE} {durationDisplay}
+      </p>
+    );
 
   return null;
 };

components/ui/Dialog.tsx

@@ -38,9 +38,10 @@ const DialogContent: React.ForwardRefExoticComponent<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg max-h-[1000px] overflow-auto -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg overflow-auto -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
         className,
       )}
+      style={{ maxHeight: '100vh' }}
       {...props}
     >
       {children}

lib/constants.ts

@@ -1 +1,23 @@
-export const CLEANED_SEPARATOR = '|CLEANED|';
+export const EXAMPLES = [
+  {
+    title: 'Counting flowers in image',
+    mediaUrl:
+      'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/flower.png',
+    prompt:
+      'Detect flowers in this image, draw boxes and output the image, also return total number of flowers',
+  },
+  {
+    title: 'Detecting sharks in video',
+    mediaUrl:
+      'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/shark3_short.mp4',
+    prompt:
+      'Can you detect any surfboards or sharks in the video, draw a green line between the shark and the nearest surfboard and add the distance between them in meters assuming 30 pixels is 1 meter. Make the line red if the shark is within 10 meters of a surfboard. Sample the video at 1 frames per second and save the output video as output.mp4.',
+  },
+];
+
+export const PLAN_TITLE = 'Creating instructions';
+export const TOOLS_TITLE = 'Retrieving tools';
+export const GENERATE_CODE_TITLE = 'Generating code';
+export const EXECUTE_CODE_TITLE = 'Executing code';
+export const EXECUTE_CODE_SUCCESS_TITLE = 'Code execution success';
+export const EXECUTE_CODE_FAILURE_TITLE = 'Code execution failure';

package.json

@@ -11,7 +11,8 @@
     "preview": "next build && next start",
     "type-check": "tsc --noEmit",
     "format:write": "prettier --write \"{app,lib,components}/**/*.{ts,tsx,mdx}\" --cache",
-    "format:check": "prettier --check \"{app,lib,components}**/*.{ts,tsx,mdx}\" --cache"
+    "format:check": "prettier --check \"{app,lib,components}**/*.{ts,tsx,mdx}\" --cache",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.556.0",
@@ -65,6 +66,7 @@
     "uuid": "^9.0.1"
   },
   "devDependencies": {
+    "@playwright/test": "^1.44.1",
     "@tailwindcss/typography": "^0.5.10",
     "@types/node": "^20.11.5",
     "@types/react": "^18.2.48",
@@ -80,10 +82,10 @@
     "eslint-plugin-tailwindcss": "^3.14.0",
     "postcss": "^8.4.33",
     "prettier": "^3.2.4",
-    "tailwind-merge": "^2.2.2",
-    "tailwindcss": "^3.4.1",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.3.3"
   },
   "packageManager": "[email protected]"
-}
+}

playwright.config.ts

@@ -0,0 +1,69 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+const BASE_URL = process.env.BASE_URL || `http://localhost:3000`;
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests/e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: BASE_URL,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'pnpm dev',
+    url: BASE_URL,
+    reuseExistingServer: true,
+  },
+});

pnpm-lock.yaml

@@ -156,9 +156,12 @@ importers:
         specifier: ^9.0.1
         version: 9.0.1
     devDependencies:
+      '@playwright/test':
+        specifier: ^1.44.1
+        version: 1.44.1
       '@tailwindcss/typography':
         specifier: ^0.5.10
-        version: 0.5.12([email protected].3)
+        version: 0.5.12([email protected].4)
       '@types/node':
         specifier: ^20.11.5
         version: 20.12.7
@@ -194,7 +197,7 @@ importers:
         version: 9.1.0([email protected])
       eslint-plugin-tailwindcss:
         specifier: ^3.14.0
-        version: 3.15.1([email protected].3)
+        version: 3.15.1([email protected].4)
       postcss:
         specifier: ^8.4.33
         version: 8.4.38
@@ -202,14 +205,14 @@ importers:
         specifier: ^3.2.4
         version: 3.2.5
       tailwind-merge:
-        specifier: ^2.2.2
-        version: 2.2.2
+        specifier: ^2.3.0
+        version: 2.3.0
       tailwindcss:
-        specifier: ^3.4.1
-        version: 3.4.3
+        specifier: ^3.4.4
+        version: 3.4.4
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7([email protected].3)
+        version: 1.0.7([email protected].4)
       typescript:
         specifier: ^5.3.3
         version: 5.4.5
@@ -442,16 +445,16 @@ packages:
     resolution: {integrity: sha512-VXAq/Jz8KIrU84+HqsOJhIKZqG0PNTdi6n6PFQ4xJf44ZQHD/5C7ouH4qCFX5XgZXcgbRIcMVVYGC6Jye0dRng==}
     engines: {node: '>=14.0.0'}
 
-  '@babel/[email protected].1':
-    resolution: {integrity: sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==}
+  '@babel/[email protected].7':
+    resolution: {integrity: sha512-7MbVt6xrwFQbunH2DNQsAP5sTGxfqQtErvBIvIMi6EQnbgUOuVYanvREcmFrOPhoXBrTtjhhP+lW+o5UfK+tDg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.22.20':
-    resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
+  '@babel/helper-validator-identifier@7.24.7':
+    resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/[email protected].4':
-    resolution: {integrity: sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==}
+  '@babel/[email protected].7':
+    resolution: {integrity: sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
@@ -459,8 +462,8 @@ packages:
     resolution: {integrity: sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/[email protected].0':
-    resolution: {integrity: sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==}
+  '@babel/[email protected].7':
+    resolution: {integrity: sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==}
     engines: {node: '>=6.9.0'}
 
   '@emnapi/[email protected]':
@@ -730,6 +733,11 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@playwright/[email protected]':
+    resolution: {integrity: sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==}
+    engines: {node: '>=16'}
+    hasBin: true
+
   '@prisma/[email protected]':
     resolution: {integrity: sha512-akMSuyvLKeoU4LeyBAUdThP/uhVP3GuLygFE3MlYzaCb3/J8SfsYBE5PkaFuLuVpLyA6sFoW+16z/aPhNAESqg==}
     engines: {node: '>=16.13'}
@@ -2209,6 +2217,11 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
+  [email protected]:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   [email protected]:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -3108,6 +3121,16 @@ packages:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
 
+  [email protected]:
+    resolution: {integrity: sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  [email protected]:
+    resolution: {integrity: sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==}
+    engines: {node: '>=16'}
+    hasBin: true
+
   [email protected]:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
@@ -3442,14 +3465,14 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  [email protected].5:
-    resolution: {integrity: sha512-8+pDC1vOedPXjKG7oz8o+iiHrtF2WswaMQJ7CKFpccvSYfrzmvKY9zOJWCg+881722wIHfwkdnRmiiDm9ym+zQ==}
+  [email protected].7:
+    resolution: {integrity: sha512-GO7TkWvodGp6buMEX9p7tNyIkbwlyuAWbI6G9Ec5bhcm7mQdu3JOK1IXbEUwb3FVzSc363GraG/wLW23NSavIw==}
     engines: {node: '>=10'}
     peerDependencies:
       seroval: ^1.0
 
-  [email protected].5:
-    resolution: {integrity: sha512-TM+Z11tHHvQVQKeNlOUonOWnsNM+2IBwZ4vwoi4j3zKzIpc5IDw8WPwCfcc8F17wy6cBcJGbZbFOR0UCuTZHQA==}
+  [email protected].7:
+    resolution: {integrity: sha512-n6ZMQX5q0Vn19Zq7CIKNIo7E75gPkGCFUEqDpa8jgwpYr/vScjqnQ6H09t1uIiZ0ZSK0ypEGvrYK2bhBGWsGdw==}
     engines: {node: '>=10'}
 
   [email protected]:
@@ -3621,16 +3644,16 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
 
-  tailwind-merge@2.2.2:
-    resolution: {integrity: sha512-tWANXsnmJzgw6mQ07nE3aCDkCK4QdT3ThPMCzawoYA2Pws7vSTCvz3Vrjg61jVUGfFZPJzxEP+NimbcW+EdaDw==}
+  tailwind-merge@2.3.0:
+    resolution: {integrity: sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==}
 
   [email protected]:
     resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
 
-  [email protected].3:
-    resolution: {integrity: sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==}
+  [email protected].4:
+    resolution: {integrity: sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
@@ -4560,22 +4583,22 @@ snapshots:
       '@smithy/types': 2.12.0
       tslib: 2.6.2
 
-  '@babel/[email protected].1': {}
+  '@babel/[email protected].7': {}
 
-  '@babel/helper-validator-identifier@7.22.20': {}
+  '@babel/helper-validator-identifier@7.24.7': {}
 
-  '@babel/[email protected].4':
+  '@babel/[email protected].7':
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/types': 7.24.7
 
   '@babel/[email protected]':
     dependencies:
       regenerator-runtime: 0.14.1
 
-  '@babel/[email protected].0':
+  '@babel/[email protected].7':
     dependencies:
-      '@babel/helper-string-parser': 7.24.1
-      '@babel/helper-validator-identifier': 7.22.20
+      '@babel/helper-string-parser': 7.24.7
+      '@babel/helper-validator-identifier': 7.24.7
       to-fast-properties: 2.0.0
 
   '@emnapi/[email protected]':
@@ -4794,6 +4817,10 @@ snapshots:
   '@pkgjs/[email protected]':
     optional: true
 
+  '@playwright/[email protected]':
+    dependencies:
+      playwright: 1.44.1
+
   '@prisma/[email protected]([email protected])':
     optionalDependencies:
       prisma: 5.14.0
@@ -5536,13 +5563,13 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
-  '@tailwindcss/[email protected]([email protected].3)':
+  '@tailwindcss/[email protected]([email protected].4)':
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.3
+      tailwindcss: 3.4.4
 
   '@types/[email protected]':
     dependencies:
@@ -5683,7 +5710,7 @@ snapshots:
 
   '@vue/[email protected]':
     dependencies:
-      '@babel/parser': 7.24.4
+      '@babel/parser': 7.24.7
       '@vue/shared': 3.4.23
       entities: 4.5.0
       estree-walker: 2.0.2
@@ -5696,7 +5723,7 @@ snapshots:
 
   '@vue/[email protected]':
     dependencies:
-      '@babel/parser': 7.24.4
+      '@babel/parser': 7.24.7
       '@vue/compiler-core': 3.4.23
       '@vue/compiler-dom': 3.4.23
       '@vue/compiler-ssr': 3.4.23
@@ -6426,11 +6453,11 @@ snapshots:
       semver: 6.3.1
       string.prototype.matchall: 4.0.11
 
-  [email protected]([email protected].3):
+  [email protected]([email protected].4):
     dependencies:
       fast-glob: 3.3.2
       postcss: 8.4.38
-      tailwindcss: 3.4.3
+      tailwindcss: 3.4.4
 
   [email protected]:
     dependencies:
@@ -6615,6 +6642,9 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    optional: true
+
   [email protected]:
     optional: true
 
@@ -7717,6 +7747,14 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
+  [email protected]:
+    dependencies:
+      playwright-core: 1.44.1
+    optionalDependencies:
+      fsevents: 2.3.2
+
   [email protected]: {}
 
   [email protected]([email protected]):
@@ -8084,11 +8122,11 @@ snapshots:
     dependencies:
       lru-cache: 6.0.0
 
-  [email protected].5([email protected].5):
+  [email protected].7([email protected].7):
     dependencies:
-      seroval: 1.0.5
+      seroval: 1.0.7
 
-  [email protected].5: {}
+  [email protected].7: {}
 
   [email protected]:
     dependencies:
@@ -8156,8 +8194,8 @@ snapshots:
   [email protected]:
     dependencies:
       csstype: 3.1.3
-      seroval: 1.0.5
-      seroval-plugins: 1.0.5([email protected].5)
+      seroval: 1.0.7
+      seroval-plugins: 1.0.7([email protected].7)
 
   [email protected]([email protected])([email protected]):
     dependencies:
@@ -8306,15 +8344,15 @@ snapshots:
 
   [email protected]: {}
 
-  tailwind-merge@2.2.2:
+  tailwind-merge@2.3.0:
     dependencies:
       '@babel/runtime': 7.24.4
 
-  [email protected]([email protected].3):
+  [email protected]([email protected].4):
     dependencies:
-      tailwindcss: 3.4.3
+      tailwindcss: 3.4.4
 
-  [email protected].3:
+  [email protected].4:
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2

tests/e2e/index.spec.ts

@@ -0,0 +1,85 @@
+import {
+  EXAMPLES,
+  EXECUTE_CODE_FAILURE_TITLE,
+  EXECUTE_CODE_SUCCESS_TITLE,
+  PLAN_TITLE,
+  TOOLS_TITLE,
+} from '@/lib/constants';
+import { test, expect, type Page } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  // https://vercel.com/docs/security/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation
+  await page.setExtraHTTPHeaders({
+    'x-vercel-protection-bypass':
+      process.env.VERCEL_AUTOMATION_BYPASS_SECRET ?? 'unknown',
+  });
+});
+
+test('Main page can be opened', async ({ page }) => {
+  await page.goto('/');
+
+  await expect(
+    page.getByRole('heading', { name: 'Vision Agent' }),
+  ).toBeVisible();
+
+  await page.getByText(EXAMPLES[0].title).click();
+  await expect(page.getByPlaceholder('Message Vision Agent')).toHaveText(
+    EXAMPLES[0].prompt,
+  );
+});
+
+const TEST_EXAMPLE_1_CHAT_ID_1 = 'jN6q4YK';
+const TEST_EXAMPLE_1_CHAT_ID_2 = 'w5ad73s';
+
+const checkMainElementVisible = async (page: Page, hasFailingCase = false) => {
+  await expect(page.getByText(EXAMPLES[0].prompt)).toBeVisible();
+  await expect(
+    page.locator(`img[alt*="${EXAMPLES[0].mediaUrl}"]`),
+  ).toBeVisible();
+
+  await expect(page.getByText(PLAN_TITLE)).toBeVisible();
+  await expect(page.getByText(TOOLS_TITLE)).toBeVisible();
+  if (hasFailingCase) {
+    await expect(page.getByText(EXECUTE_CODE_FAILURE_TITLE)).toBeVisible();
+  }
+  await expect(page.getByText(EXECUTE_CODE_SUCCESS_TITLE)).toBeVisible();
+
+  await expect(page.locator(`img[alt="result-image-0"]`).first()).toBeVisible();
+
+  const resultDisplayContainer = await page
+    .getByTestId('code-result-display-container')
+    .locator('visible=true');
+  await expect(resultDisplayContainer).toBeVisible();
+
+  await resultDisplayContainer
+    .getByTestId('open-final-test-code-dialog-button')
+    .click();
+  const dialog = await page.getByRole('dialog');
+  await expect(
+    dialog.getByRole('heading', { name: 'Test code' }),
+  ).toBeVisible();
+  await dialog
+    .getByRole('button')
+    .filter({
+      hasText: 'Close',
+    })
+    .click();
+  await resultDisplayContainer
+    .getByTestId('view-all-result-images-button')
+    .click();
+  await expect(page.locator(`img[alt="detail-result-image-0"]`)).toBeVisible();
+};
+
+test.describe('Page with example 1 can be opened', () => {
+  test('Page with old data structiure can be opened', async ({ page }) => {
+    await page.goto(`/chat/${TEST_EXAMPLE_1_CHAT_ID_1}`);
+
+    await checkMainElementVisible(page, true);
+  });
+
+  test('Page with new data structiure can be opened', async ({ page }) => {
+    await page.goto(`/chat/${TEST_EXAMPLE_1_CHAT_ID_2}`);
+
+    await checkMainElementVisible(page);
+  });
+});