test: add playwright test for ask interaction (#94)

Author: shibbas

packages/chat-component/src/main.ts

@@ -340,7 +340,7 @@ export class ChatComponent extends LitElement {
  }
  // Render text entries in bubbles
  renderTextEntry(textEntry: ChatMessageText) {
- const entries = [html`<p>${unsafeHTML(textEntry.value)}</p>`];
+ const entries = [html`<p class="chat__txt--entry">${unsafeHTML(textEntry.value)}</p>`];
 
  // render steps
  if (textEntry.followingSteps && textEntry.followingSteps.length > 0) {

tests/e2e/hars/default-ask-response.har

@@ -0,0 +1,75 @@
+{
+ "log": {
+ "version": "1.2",
+ "creator": {
+ "name": "Playwright",
+ "version": "1.39.0"
+ },
+ "browser": {
+ "name": "chromium",
+ "version": "119.0.6045.9"
+ },
+ "entries": [
+ {
+ "startedDateTime": "2023-10-27T08:26:30.487Z",
+ "time": 260.506,
+ "request": {
+ "method": "POST",
+ "url": "http://localhost:5173/ask",
+ "httpVersion": "HTTP/2.0",
+ "cookies": [],
+ "headers": [
+ { "name": ":authority", "value": "http://localhost:5173" },
+ { "name": ":method", "value": "POST" },
+ { "name": ":path", "value": "/ask" },
+ { "name": ":scheme", "value": "https" },
+ { "name": "accept", "value": "*/*" },
+ { "name": "accept-encoding", "value": "gzip, deflate, br" },
+ { "name": "accept-language", "value": "en-US" },
+ { "name": "content-length", "value": "416" },
+ { "name": "content-type", "value": "application/json" },
+ { "name": "origin", "value": "http://localhost:5173" },
+ { "name": "sec-fetch-dest", "value": "empty" },
+ { "name": "sec-fetch-mode", "value": "cors" },
+ { "name": "sec-fetch-site", "value": "cross-site" },
+ {
+ "name": "user-agent",
+ "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.6045.9 Safari/537.36"
+ }
+ ],
+ "queryString": [],
+ "headersSize": -1,
+ "bodySize": -1,
+ "postData": {
+ "mimeType": "application/json",
+ "text": "{\"messages\":[{\"content\":\"How to search and book rentals?\",\"role\":\"user\"}],\"context\":{\"retrieval_mode\":\"hybrid\",\"semantic_ranker\":true,\"semantic_captions\":false,\"suggest_followup_questions\":true,\"retrievalMode\":\"hybrid\",\"retrieveCount\":3,\"useSemanticRanker\":true,\"useSemanticCaptions\":false,\"excludeCategory\":\"\",\"promptTemplate\":\"\",\"promptTemplatePrefix\":\"\",\"promptTemplateSuffix\":\"\",\"approach\":\"rrr\"},\"stream\":false}",
+ "params": []
+ }
+ },
+ "response": {
+ "status": 200,
+ "statusText": "",
+ "httpVersion": "HTTP/2.0",
+ "cookies": [],
+ "headers": [
+ { "name": "access-control-allow-origin", "value": "http://localhost:5173" },
+ { "name": "content-length", "value": "277" },
+ { "name": "content-type", "value": "application/json; charset=utf-8" },
+ { "name": "date", "value": "Fri, 27 Oct 2023 08:26:31 GMT" },
+ { "name": "vary", "value": "Origin" }
+ ],
+ "content": {
+ "size": -1,
+ "mimeType": "application/json; charset=utf-8",
+ "text": "{\"choices\":[{\"index\":0,\"message\":{\"content\":\"I don't know the answer to that question.\",\"role\":\"assistant\",\"context\":{\"data_points\":[],\"thoughts\":\"[chain/start] [<b>1:chain:AgentExecutor</b>] Entering chain<br><br>[chain/end] Finished chain<br>\"}}}],\"object\":\"chat.completion\"}"
+ },
+ "headersSize": -1,
+ "bodySize": -1,
+ "redirectURL": ""
+ },
+ "cache": {},
+ "timings": { "send": -1, "wait": -1, "receive": 260.506 }
+ }
+ ]
+ }
+}

tests/e2e/webapp.spec.ts

@@ -29,6 +29,7 @@ test.describe('default', () => {
  await page.routeFromHAR('./tests/e2e/hars/default-chat-response-stream.har', {
  url: '/chat',
  update: false,
+ updateContent: 'embed',
  });
 
  const showThoughtProcess = page.getByTestId('chat-show-thought-process');
@@ -58,6 +59,64 @@ test.describe('default', () => {
  });
  });
 
+ test('ask interaction', async ({ page }) => {
+ await page.goto('/');
+ const chatLink = page.getByRole('link', { name: 'Chat' });
+ const askLink = page.getByRole('link', { name: 'Ask a question' });
+
+ await expect(chatLink).toHaveAttribute('aria-current', 'page');
+ await expect(askLink).not.toHaveAttribute('aria-current');
+ await askLink.click();
+ await expect(chatLink).not.toHaveAttribute('aria-current');
+ await expect(askLink).toHaveAttribute('aria-current', 'page');
+
+ const defaultQuestions = page.getByTestId('default-question');
+
+ // expect there to be at least 3 default question buttons on page load
+ await test.step('Get default questions', async () => {
+ await expect(defaultQuestions).toHaveCount(3);
+ });
+
+ const chatInput = page.getByTestId('question-input');
+ const firstQuestionButton = defaultQuestions.nth(0);
+ const firstQuestionText = ((await firstQuestionButton.textContent()) ?? '').replace('Ask now', '').trim();
+
+ // should not have any text at the start
+ await test.step('Use default question', async () => {
+ await expect(chatInput).toHaveValue('');
+
+ await firstQuestionButton.click();
+ await expect(chatInput).toHaveValue(firstQuestionText);
+ });
+
+ // Set to replay the response for a local route (will not be used for the official)
+ await page.routeFromHAR('./tests/e2e/hars/default-ask-response.har', {
+ url: '/ask',
+ update: false,
+ updateContent: 'embed',
+ });
+
+ const showThoughtProcess = page.getByTestId('chat-show-thought-process');
+ await test.step('Get answer', async () => {
+ await expect(showThoughtProcess).not.toBeVisible();
+
+ await page.getByTestId('submit-question-button').click();
+
+ // wait for the thought process button to be enabled.
+ await expect(showThoughtProcess).toBeEnabled({ timeout: 30_000 });
+
+ // expect some response
+ await expect(page.locator('.chat__txt--entry')).not.toHaveText('');
+ await expect(defaultQuestions).toHaveCount(0);
+ });
+
+ await test.step('Reset chat', async () => {
+ await page.getByTestId('chat-reset-button').click();
+ await expect(page.locator('.chat__txt--entry')).not.toBeVisible();
+ await expect(defaultQuestions).toHaveCount(3);
+ });
+ });
+
  test('waiting for response', async ({ page }) => {
  await page.goto('/');
  await page.getByTestId('default-question').nth(0).click();