From ea178b3c87de957fe488944e6f4375127e7805e2 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Wed, 24 Sep 2025 13:09:44 +0200
Subject: [PATCH] e2e-tests: update virtual background tests to ensure element
 visibility

---
 frontend/webcomponent/tests/e2e/core/room.test.ts     |  3 +--
 .../webcomponent/tests/helpers/function-helpers.ts    | 11 +++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/webcomponent/tests/e2e/core/room.test.ts b/frontend/webcomponent/tests/e2e/core/room.test.ts
index 03031de..160277e 100644
--- a/frontend/webcomponent/tests/e2e/core/room.test.ts
+++ b/frontend/webcomponent/tests/e2e/core/room.test.ts
@@ -239,7 +239,7 @@ test.describe('Room Functionality Tests', () => {
 	// ==========================================
 
 	test.describe('Advanced Features', () => {
-		test('should apply virtual background and detect visual changes', async ({ page }) => {
+		test.only('should apply virtual background and detect visual changes', async ({ page }) => {
 			await joinRoomAs('speaker', participantName, page);
 
 			// Wait for video element to be ready
@@ -250,7 +250,6 @@ test.describe('Room Functionality Tests', () => {
 
 			// Apply virtual background
 			await applyVirtualBackground(page, '2');
-			await page.waitForTimeout(1000); // Allow background processing time
 
 			// Capture post-change screenshot
 			await saveScreenshot(page, 'after.png', '.OV_video-element');
diff --git a/frontend/webcomponent/tests/helpers/function-helpers.ts b/frontend/webcomponent/tests/helpers/function-helpers.ts
index ca44419..edc65eb 100644
--- a/frontend/webcomponent/tests/helpers/function-helpers.ts
+++ b/frontend/webcomponent/tests/helpers/function-helpers.ts
@@ -78,9 +78,11 @@ export async function interactWithElementInIframe(
 	// Perform the specified action
 	switch (action) {
 		case 'click':
+			await expect(element).toBeVisible({ timeout });
 			await element.click();
 			break;
 		case 'fill':
+			await expect(element).toBeVisible({ timeout });
 			await element.fill(value);
 			break;
 		default:
@@ -256,13 +258,11 @@ export const viewRecordingsAs = async (role: 'moderator' | 'speaker', page: Page
 };
 
 export const leaveRoom = async (page: Page, role: 'moderator' | 'speaker' = 'speaker') => {
-	const button = await waitForElementInIframe(page, '#leave-btn');
-	await button.click();
+	await interactWithElementInIframe(page, '#leave-btn', { action: 'click' });
 
 	if (role === 'moderator') {
 		await page.waitForTimeout(500); // Wait for leave animation
-		const option = await waitForElementInIframe(page, '#leave-option');
-		await option.click();
+		await interactWithElementInIframe(page, '#leave-option', { action: 'click' });
 	}
 
 	await page.waitForSelector('.event-left');
@@ -286,7 +286,10 @@ export const applyVirtualBackground = async (page: Page, backgroundId: string) =
 	await interactWithElementInIframe(page, '#virtual-bg-btn', { action: 'click' });
 	await waitForElementInIframe(page, 'ov-background-effects-panel', { state: 'visible' });
 	await interactWithElementInIframe(page, `#effect-${backgroundId}`, { action: 'click' });
+	await page.waitForTimeout(2000); // Allow background processing time
 	await interactWithElementInIframe(page, '.panel-close-button', { action: 'click' });
+	await page.waitForTimeout(1000); // Wait panel to close
+
 };
 
 export const removeVirtualBackground = async (page: Page) => {