fix(e2e): fix flaky settings screenshots by waiting for tooltips to dismiss (#3276)

* fix(e2e): fix flaky settings screenshots by waiting for tooltips to dismiss

Add waitForTooltipsToDismiss helper function to ensure tooltips are fully dismissed before taking screenshots, preventing inconsistent visual states in settings tests.

* 'chore: WIP'

* fix(e2e): increase wait timeout to fix flaky chat test

Increase the page wait timeout from 1000ms to 3000ms in the chat E2E test to reduce flakiness and improve test reliability.

Author: hassoncs

apps/playwright-e2e/helpers/webview-helpers.ts

@@ -100,6 +100,18 @@ export async function clickSaveSettingsButton(webviewFrame: FrameLocator): Promi
 	}
 }
 
+/**
+ * Waits for all tooltips to be dismissed before proceeding.
+ * This is necessary when tooltips appear after clicking elements and need to animate away
+ * before taking screenshots to avoid inconsistent visual states.
+ */
+export async function waitForTooltipsToDismiss(webviewFrame: FrameLocator): Promise<void> {
+	const tooltipContent = webviewFrame.locator('[data-slot="tooltip-content"]')
+	await tooltipContent.waitFor({ state: "detached", timeout: 3000 }).catch(() => {
+		// If timeout, tooltips should be gone by now anyway
+	})
+}
+
 /**
  * Freezes all GIFs on the page by converting them to static PNG images.
  * Also sets up a MutationObserver to handle dynamically added GIFs.

apps/playwright-e2e/tests/chat.test.ts

@@ -17,7 +17,7 @@ test.describe("E2E Chat Test", () => {
 		await waitForWebviewText(page, "Generate, refactor, and debug code with AI assistance")
 
 		await (await getChatInput(page)).focus()
-		await page.waitForTimeout(1000) // Let the page settle to avoid flakes
+		await page.waitForTimeout(3000) // Let the page settle to avoid flakes
 		await takeScreenshot("ready-to-chat")
 
 		// Don't take any more screenshots after the reponse starts-

apps/playwright-e2e/tests/settings.test.ts

@@ -1,5 +1,11 @@
 import { test, expect, type TestFixtures } from "./playwright-base-test"
-import { findWebview, upsertApiConfiguration, verifyExtensionInstalled, clickSaveSettingsButton } from "../helpers"
+import {
+	findWebview,
+	upsertApiConfiguration,
+	verifyExtensionInstalled,
+	clickSaveSettingsButton,
+	waitForTooltipsToDismiss,
+} from "../helpers"
 
 test.describe("Settings", () => {
 	test("screenshots", async ({ workbox: page, takeScreenshot }: TestFixtures) => {
@@ -8,9 +14,10 @@ test.describe("Settings", () => {
 
 		// Open the settings then move the mouse to avoid triggering the tooltip
 		const webviewFrame = await findWebview(page)
-		page.locator('[aria-label*="Settings"], [title*="Settings"]').first().click()
-		await clickSaveSettingsButton(webviewFrame)
+		await page.locator('[aria-label*="Settings"], [title*="Settings"]').first().click()
+		await page.mouse.move(0, 0) // Move cursor to top-left corner to avoid triggering hover states
 
+		await clickSaveSettingsButton(webviewFrame)
 		await expect(webviewFrame.locator('[role="tablist"]')).toBeVisible({ timeout: 10000 })
 		console.log("✅ Settings view loaded")
 
@@ -35,6 +42,7 @@ test.describe("Settings", () => {
 			const sectionId = testId?.replace("tab-", "") || `section-${i}`
 
 			await clickSaveSettingsButton(webviewFrame) // To avoid flakey screenshots
+			await waitForTooltipsToDismiss(webviewFrame) // Wait for tooltips to dismiss before screenshot
 			await takeScreenshot(`${i}-settings-${sectionId}-${tabName.toLowerCase().replace(/\s+/g, "-")}`)
 		}