fix

__visual_tests__/utils/testUtils.ts

@@ -4,13 +4,6 @@ import { getWidgetSessionCache } from './localStorageUtils';
 import { deleteChannel, deleteUser } from './requestUtils';
 import { AppId, BotId, TestUrl, WidgetComponentIds } from '../const';
 
-export async function beforeEach(page: Page, url = TestUrl) {
-  await page.goto(url);
-
-  const widgetWindow = page.locator(WidgetComponentIds.WIDGET_BUTTON);
-  await widgetWindow.waitFor({ state: 'visible' });
-}
-
 export async function assertScreenshot(page: Page, screenshotName: string, browserName: string) {
   const name = `${screenshotName}.${browserName}.${process.platform}.png`; // Include the browser and OS architecture info in the filename
   await expect(page.locator(WidgetComponentIds.WIDGET)).toHaveScreenshot(name, {
@@ -19,13 +12,15 @@ export async function assertScreenshot(page: Page, screenshotName: string, brows
   });
 }
 
-export async function loadWidget(page: Page, testUrl?: string) {
-  await beforeEach(page, testUrl);
+export async function loadWidget(page: Page, testUrl = TestUrl) {
+  await page.goto(testUrl);
+  const widgetWindow = page.locator(WidgetComponentIds.WIDGET_BUTTON);
+  await widgetWindow.waitFor({ state: 'visible' });
 
   await page.click(WidgetComponentIds.WIDGET_BUTTON);
   // NOTE: below fails sometimes in CI.
-  const widgetWindow = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
-  await widgetWindow.waitFor({ state: 'visible' });
+  const replies = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
+  await replies.waitFor({ state: 'visible' });
 }
 
 export async function sendTextMessage(page: Page, text: string, waitTime = 1000) {

__visual_tests__/workflow-tests.spec.ts

@@ -1,13 +1,7 @@
 import { test } from '@playwright/test';
 
 import { WidgetComponentIds } from './const';
-import {
-  assertScreenshot,
-  clickNthChip,
-  deleteTestResources,
-  loadWidget,
-  sendTextMessage,
-} from './utils/testUtils';
+import { assertScreenshot, clickNthChip, deleteTestResources, loadWidget, sendTextMessage } from './utils/testUtils';
 
 test.afterEach(async ({ page }) => {
   await deleteTestResources(page);
@@ -57,7 +51,7 @@ test('100', async ({ page, browserName }) => {
   await inputs.nth(3).fill('[email protected]');
   await inputs.nth(4).fill('123-456-7890');
   await submitButton.click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(2000);
   await assertScreenshot(page, '100-4', browserName);
 });
 
@@ -157,7 +151,7 @@ test('104', async ({ page, browserName }) => {
   const fallback = page.locator(WidgetComponentIds.MARKDOWN);
   await fallback.first().waitFor({ state: 'visible' });
   let options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
-  await options.nth(3).waitFor({ state: 'visible' });
+  await options.nth(4).waitFor({ state: 'visible' });
   await assertScreenshot(page, '104-1', browserName);
 
   // 2
@@ -167,7 +161,7 @@ test('104', async ({ page, browserName }) => {
   await assertScreenshot(page, '104-2', browserName);
   await options.nth(0).click(); // Go back
   options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
-  await options.nth(3).waitFor({ state: 'visible' });
+  await options.nth(4).waitFor({ state: 'visible' });
 
   // 3
   await options.nth(1).click();
@@ -176,7 +170,7 @@ test('104', async ({ page, browserName }) => {
   await assertScreenshot(page, '104-3', browserName);
   await options.nth(0).click(); // Go back
   options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
-  await options.nth(3).waitFor({ state: 'visible' });
+  await options.nth(4).waitFor({ state: 'visible' });
 
   // 4
   await options.nth(2).click();
@@ -185,11 +179,20 @@ test('104', async ({ page, browserName }) => {
   await assertScreenshot(page, '104-4', browserName);
   await options.nth(0).click(); // Go back
   options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
-  await options.nth(3).waitFor({ state: 'visible' });
+  await options.nth(4).waitFor({ state: 'visible' });
 
   // 5
   await options.nth(3).click();
   options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
   await options.nth(0).waitFor({ state: 'visible' }); // Wait for go back button to show
   await assertScreenshot(page, '104-5', browserName);
+  await options.nth(0).click(); // Go back
+  options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
+  await options.nth(4).waitFor({ state: 'visible' });
+
+  // 6
+  await options.nth(4).click();
+  options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
+  await options.nth(0).waitFor({ state: 'visible' }); // Wait for go back button to show
+  await assertScreenshot(page, '104-6', browserName);
 });

src/components/markdown.scss

@@ -285,6 +285,10 @@ widget-markdown.widget-markdown is to increase specificity. Refer to: https://ww
   border-bottom-left-radius: 6px; /* 0.375rem */
 }
 
+.widget-markdown tbody tr:last-child td:last-child {
+  border-bottom-right-radius: 6px; /* 0.375rem */
+}
+
 .widget-markdown a {
   color: var(--sb-on-bg-1);
   font-weight: 700;