ChatQnA UT Playwright (#121)

Signed-off-by: Yue, Wenjiao <wenjiao.yue@intel.com>

.gitignore

@@ -1,5 +1,7 @@
 **/node_modules
 **/.svelte-kit
 **/package-lock.json
+**/playwright-report/
+**/playwright/.cache/
 
 __pycache__/

AudioQnA/ui/svelte/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "vite dev --port 5175 --host 0.0.0.0",
+    "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

ChatQnA/ui/svelte/.env

@@ -1 +1 @@
-DOC_BASE_URL = 'http://localhost:8000/v1/rag'
+DOC_BASE_URL = 'http://10.7.4.144:8000/v1/rag'

ChatQnA/ui/svelte/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "vite dev --port 80 --host 0.0.0.0",
+    "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -12,6 +12,7 @@
     "format": "prettier --write ."
   },
   "devDependencies": {
+    "@playwright/test": "^1.33.0",
     "@fortawesome/free-solid-svg-icons": "6.2.0",
     "@sveltejs/adapter-auto": "1.0.0-next.75",
     "@sveltejs/kit": "^1.30.4",
@@ -53,6 +54,7 @@
     "ramda": "^0.29.0",
     "sse.js": "^0.6.1",
     "svelte-notifications": "^0.9.98",
+    "playwright": "^1.44.0",
     "svrollbar": "^0.12.0"
   }
 }

ChatQnA/ui/svelte/playwright.config.ts

@@ -0,0 +1,83 @@
+// Copyright (C) 2024 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: "./tests",
+	/* Maximum time one test can run for. */
+	timeout: 30 * 1000,
+	expect: {
+		/**
+		 * Maximum time expect() should wait for the condition to be met.
+		 * For example in `await expect(locator).toHaveText();`
+		 */
+		timeout: 5000,
+	},
+	/* 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", { open: "never" }]],
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+		actionTimeout: 0,
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		baseURL: "http://localhost:80",
+
+		/* 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: { channel: 'msedge' },
+		// },
+		// {
+		//   name: 'Google Chrome',
+		//   use: { channel: 'chrome' },
+		// },
+	],
+
+	/* Folder for test artifacts such as screenshots, videos, traces, etc. */
+	// outputDir: 'test-results/',
+
+	/* Run your local dev server before starting the tests */
+	// webServer: {
+	//   command: 'npm run start',
+	//   port: 3000,
+	// },
+});

ChatQnA/ui/svelte/src/lib/network/chat/Network.ts

@@ -23,7 +23,6 @@ export async function fetchTextStream(query: string, knowledge_base_id: string)
 
 	payload = {
 		query: query,
-		knowledge_base_id: knowledge_base_id,
 	};
 	url = `${DOC_BASE_URL}/chat_stream`;
 

ChatQnA/ui/svelte/src/routes/+page.svelte

@@ -177,6 +177,7 @@
 						class="text-md block w-full border-0 border-b-2 border-gray-300 px-1 py-4
 						text-gray-900 focus:border-gray-300 focus:ring-0 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
 						type="text"
+						id="chat-input"
 						placeholder="Enter prompt here"
 						disabled={loading}
 						maxlength="1200"
@@ -195,6 +196,7 @@
 							}
 						}}
 						type="submit"
+						id="send"
 						class="absolute bottom-2.5 end-2.5 px-4 py-2 text-sm font-medium text-white dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
 						><PaperAirplane /></button
 					>

ChatQnA/ui/svelte/tests/chatQnA.spec.ts

@@ -0,0 +1,27 @@
+// Copyright (C) 2024 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { test, expect, type Page } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+	await page.goto("/");
+});
+
+const CHAT_ITEMS = ["What is the total revenue of Nike in 2023?"];
+
+test.describe("New Chat", () => {
+	test("should enter message to chat", async ({ page }) => {
+		const newChat = page.getByPlaceholder("Enter prompt here");
+		console.log("newChat", newChat);
+
+		await newChat.fill(CHAT_ITEMS[0]);
+		await newChat.press("Enter");
+
+		// Wait for the result to appear on the page
+		//  await page.waitForSelector('#msg-time', { timeout: 60000 });
+
+		//  // Make sure the result is displayed as expected
+		//  const msgContent = await page.$eval('#msg-time', (element) => element.textContent);
+		//  expect(msgContent).toBeTruthy();
+	});
+});

SearchQnA/ui/svelte/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "vite dev --port 5174 --host 0.0.0.0",
+    "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

SearchQnA/ui/svelte/src/lib/modules/chat/MessageTimer.svelte

@@ -58,7 +58,8 @@
 				/></svg
 			>
 		</div>
-		<div class="flex items-center space-x-1 text-base text-gray-800">
+		<div class="flex items-center space-x-1 text-base text-gray-800" id='msg-time'
+		>
 			<strong>End to End Time: </strong>
 			<p>{time}s</p>
 		</div>