chore(test): Extend playground test (#2952)

* test: test

Signed-off-by: Anton Misskii <amisskii@redhat.com>

* chore(test): extend playground test

Signed-off-by: Anton Misskii <amisskii@redhat.com>

* fix: fix

Signed-off-by: Anton Misskii <amisskii@redhat.com>

* fix: fix

Signed-off-by: Anton Misskii <amisskii@redhat.com>

* test: test

Signed-off-by: Anton Misskii <amisskii@redhat.com>

* chore: get assistant message by index

Signed-off-by: Anton Misskii <amisskii@redhat.com>

---------

Signed-off-by: Anton Misskii <amisskii@redhat.com>

Author: amisskii

packages/frontend/src/lib/conversation/ChatMessage.svelte

@@ -29,6 +29,7 @@ function getMessageParagraphs(message: ChatMessage): string[] {
     {roles[message.role]}
   </div>
   <div
+    aria-label={`${roles[message.role]} message`}
     class="p-4 rounded-md text-[var(--pd-content-card-text)]"
     class:bg-[var(--pd-content-card-bg)]={isUserChat(message)}
     class:bg-[var(--pd-content-bg)]={isSystemPrompt(message)}

tests/playwright/src/ai-lab-extension.spec.ts

@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ***********************************************************************/
 
-import type { Page } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
 import type { NavigationBar, ExtensionsPage } from '@podman-desktop/tests-playwright';
 import {
   expect as playExpect,
@@ -350,13 +350,15 @@ test.describe.serial(`AI Lab extension installation and verification`, () => {
     });
   });
 
-  ['instructlab/granite-7b-lab-GGUF'].forEach(modelName => {
+  ['lmstudio-community/granite-3.0-8b-instruct-GGUF'].forEach(modelName => {
     test.describe.serial(`AI Lab playground creation and deletion`, () => {
       let catalogPage: AILabCatalogPage;
       let playgroundsPage: AILabPlaygroundsPage;
       let playgroundDetailsPage: AILabPlaygroundDetailsPage;
+      let assistantResponse: Locator;
 
       const playgroundName = 'test playground';
+      const systemPrompt = 'Always respond with: "Hello, I am Chat Bot"';
 
       test.beforeAll(`Open AI Lab Catalog`, async ({ runner, page, navigationBar }) => {
         [page, webview] = await handleWebview(runner, page, navigationBar);
@@ -402,9 +404,17 @@ test.describe.serial(`AI Lab extension installation and verification`, () => {
         await playExpect(playgroundDetailsPage.deletePlaygroundButton).toBeEnabled();
       });
 
-      test(`Define prompt for ${modelName}`, async () => {
-        const prompt = 'Hello, how are you?';
-        await playgroundDetailsPage.definePrompt(prompt);
+      test('Set system prompt, submit user input, and verify assistant response is visible', async () => {
+        test.setTimeout(100_000);
+        await playgroundDetailsPage.defineSystemPrompt(systemPrompt);
+        await playgroundDetailsPage.submitUserInput('Hello');
+        // Get the first assistant response
+        assistantResponse = await playgroundDetailsPage.getAssistantResponse(0);
+        await playExpect(assistantResponse).toBeVisible();
+      });
+
+      test('Verify assistant response contains the expected system prompt', async () => {
+        playExpect(await assistantResponse.innerText()).toContain('Hello, I am Chat Bot');
       });
 
       test(`Delete AI Lab playground for ${modelName}`, async () => {

tests/playwright/src/model/ai-lab-playground-details-page.ts

@@ -31,9 +31,11 @@ export class AILabPlaygroundDetailsPage extends AILabBasePage {
   readonly temperatureSliderLocator: Locator;
   readonly maxTokensSliderLocator: Locator;
   readonly topPSliderLocator: Locator;
-  readonly promptTextAreaLoctor: Locator;
+  readonly systemPromptTextAreaLocator: Locator;
   readonly clearSystemPromptButtonLocator: Locator;
   readonly editSystemPromptButtonLocator: Locator;
+  readonly promptTextAreaLocator: Locator;
+  readonly sendPromptButton: Locator;
 
   constructor(page: Page, webview: Page, playgroundName: string) {
     super(page, webview, playgroundName);
@@ -46,24 +48,26 @@ export class AILabPlaygroundDetailsPage extends AILabBasePage {
     this.temperatureSliderLocator = this.parametersSectionLocator.getByLabel('temperature slider', { exact: true });
     this.maxTokensSliderLocator = this.parametersSectionLocator.getByLabel('max tokens slider', { exact: true });
     this.topPSliderLocator = this.parametersSectionLocator.getByLabel('top-p slider', { exact: true });
-    this.promptTextAreaLoctor = this.conversationSectionLocator.getByLabel('system-prompt-textarea');
+    this.systemPromptTextAreaLocator = this.conversationSectionLocator.getByLabel('system-prompt-textarea');
     this.clearSystemPromptButtonLocator = this.conversationSectionLocator.getByTitle('Clear', { exact: true });
     this.editSystemPromptButtonLocator = this.conversationSectionLocator.getByTitle('Edit system prompt', {
       exact: true,
     });
+    this.promptTextAreaLocator = this.webview.getByLabel('prompt', { exact: true });
+    this.sendPromptButton = this.webview.getByRole('button', { name: 'Send prompt' });
   }
 
   async waitForLoad(): Promise<void> {
     await playExpect(this.heading).toBeVisible();
   }
 
-  async definePrompt(prompt: string): Promise<void> {
+  async defineSystemPrompt(systemPrompt: string): Promise<void> {
     await playExpect(this.editSystemPromptButtonLocator).toBeVisible();
     await this.editSystemPromptButtonLocator.click();
-    await playExpect(this.promptTextAreaLoctor).toBeVisible();
-    await this.promptTextAreaLoctor.fill(prompt);
+    await playExpect(this.systemPromptTextAreaLocator).toBeVisible();
+    await this.systemPromptTextAreaLocator.fill(systemPrompt);
     await this.editSystemPromptButtonLocator.click();
-    await playExpect(this.promptTextAreaLoctor).not.toBeVisible();
+    await playExpect(this.systemPromptTextAreaLocator).not.toBeVisible();
   }
 
   async deletePlayground(): Promise<AILabPlaygroundsPage> {
@@ -72,4 +76,17 @@ export class AILabPlaygroundDetailsPage extends AILabBasePage {
     await handleConfirmationDialog(this.page, 'Podman AI Lab', true, 'Confirm');
     return new AILabPlaygroundsPage(this.page, this.webview);
   }
+
+  async submitUserInput(prompt: string): Promise<void> {
+    await this.promptTextAreaLocator.fill(prompt);
+    await playExpect(this.promptTextAreaLocator).toHaveValue(prompt);
+    await playExpect(this.sendPromptButton).toBeEnabled({ timeout: 30_000 });
+    await this.sendPromptButton.click();
+  }
+
+  async getAssistantResponse(index: number): Promise<Locator> {
+    await playExpect(this.sendPromptButton).toBeVisible({ timeout: 100_000 });
+    const assistantResponse = this.conversationSectionLocator.getByLabel('Assistant message').nth(index);
+    return assistantResponse;
+  }
 }