tests: enhance e2e tests configuration and update test helpers for improved URL handling and participant management

This commit is contained in:
juancarmore 2025-07-09 00:00:16 +02:00
parent 28ac4b0d8c
commit c023fe6521
6 changed files with 97 additions and 123 deletions

View File

@ -1,2 +1,6 @@
export const WEBCOMPONENT_ROOM_URL = 'http://localhost:5080/';
export const RUN_MODE = process.env['RUN_MODE'] || 'development';
export const RUN_MODE = process.env['RUN_MODE'] || 'development';
export const MEET_API_URL = process.env['MEET_API_URL'] || 'http://localhost:6080';
export const MEET_API_KEY = process.env['MEET_API_KEY'] || 'meet-api-key';
export const MEET_ADMIN_USER = process.env['MEET_ADMIN_USER'] || 'admin';
export const MEET_ADMIN_PASSWORD = process.env['MEET_ADMIN_PASSWORD'] || 'admin';
export const MEET_TESTAPP_URL = process.env['MEET_TESTAPP_URL'] || 'http://localhost:5080';

View File

@ -1,27 +1,29 @@
import { test, expect } from '@playwright/test';
import { expect, test } from '@playwright/test';
import { MEET_TESTAPP_URL } from '../../config';
import {
deleteAllRecordings,
deleteAllRooms,
joinRoomAs,
leaveRoom,
waitForElementInIframe
prepareForJoiningRoom
} from '../../helpers/function-helpers';
let subscribedToAppErrors = false;
test.describe('Web Component E2E Tests', () => {
const testAppUrl = 'http://localhost:5080';
const testRoomPrefix = 'test-room';
let participantName: string;
test.beforeAll(async ({ browser }) => {
// Create a test room before all tests
const tempContext = await browser.newContext();
const tempPage = await tempContext.newPage();
await tempPage.goto(testAppUrl);
await tempPage.goto(MEET_TESTAPP_URL);
await tempPage.waitForSelector('.create-room');
await tempPage.fill('#room-id-prefix', testRoomPrefix);
await tempPage.click('.create-room-btn');
await tempPage.waitForSelector(`#${testRoomPrefix}`);
await tempPage.close();
await tempContext.close();
});
@ -35,12 +37,9 @@ test.describe('Web Component E2E Tests', () => {
});
subscribedToAppErrors = true;
}
await page.goto(testAppUrl);
await page.waitForSelector('.rooms-container');
await page.waitForSelector(`#${testRoomPrefix}`);
await page.click('.dropdown-button');
await page.waitForSelector('#join-as-moderator');
await page.waitForSelector('#join-as-publisher');
await prepareForJoiningRoom(page, MEET_TESTAPP_URL, testRoomPrefix);
participantName = `P-${Math.random().toString(36).substring(2, 9)}`;
});
test.afterEach(async ({ context }) => {
@ -59,21 +58,21 @@ test.describe('Web Component E2E Tests', () => {
test.describe('Event Handling', () => {
test('should successfully join as moderator and receive JOIN event', async ({ page }) => {
await joinRoomAs('moderator', `P-${Math.random().toString(36).substring(2, 9)}`, page);
await joinRoomAs('moderator', participantName, page);
await page.waitForSelector('.event-JOIN');
const joinElements = await page.locator('.event-JOIN').all();
expect(joinElements.length).toBe(1);
});
test('should successfully join as publisher and receive JOIN event', async ({ page }) => {
await joinRoomAs('publisher', `P-${Math.random().toString(36).substring(2, 9)}`, page);
await joinRoomAs('publisher', participantName, page);
await page.waitForSelector('.event-JOIN');
const joinElements = await page.locator('.event-JOIN').all();
expect(joinElements.length).toBe(1);
});
test('should successfully join to room and receive LEFT event when using leave command', async ({ page }) => {
await joinRoomAs('moderator', `P-${Math.random().toString(36).substring(2, 9)}`, page);
await joinRoomAs('moderator', participantName, page);
await page.click('#leave-room-btn');
await page.waitForSelector('.event-LEFT');
@ -84,7 +83,7 @@ test.describe('Web Component E2E Tests', () => {
test('should successfully join to room and receive LEFT event when using disconnect button', async ({
page
}) => {
await joinRoomAs('moderator', `P-${Math.random().toString(36).substring(2, 9)}`, page);
await joinRoomAs('moderator', participantName, page);
await leaveRoom(page, 'moderator');
await page.waitForSelector('.event-LEFT');
@ -95,7 +94,7 @@ test.describe('Web Component E2E Tests', () => {
test('should successfully join to room and receive MEETING_ENDED event when using end meeting command', async ({
page
}) => {
await joinRoomAs('moderator', `P-${Math.random().toString(36).substring(2, 9)}`, page);
await joinRoomAs('moderator', participantName, page);
await page.click('#end-meeting-btn');
await page.waitForSelector('.event-MEETING_ENDED');

View File

@ -1,7 +1,8 @@
import { test, expect } from '@playwright/test';
import { expect, test } from '@playwright/test';
import * as fs from 'fs';
import { PNG } from 'pngjs';
import pixelmatch from 'pixelmatch';
import { PNG } from 'pngjs';
import { MEET_TESTAPP_URL } from '../../config.js';
import {
applyVirtualBackground,
deleteAllRecordings,
@ -21,9 +22,8 @@ let subscribedToAppErrors = false;
// Test suite for room functionality in OpenVidu Meet
test.describe('Room Functionality Tests', () => {
const testAppUrl = 'http://localhost:5080';
const testRoomPrefix = 'testing-room';
let participantName = `P-${Math.random().toString(36).substring(2, 9)}`;
let participantName: string;
// ==========================================
// SETUP & TEARDOWN
@ -33,11 +33,12 @@ test.describe('Room Functionality Tests', () => {
// Create a test room before all tests
const tempContext = await browser.newContext();
const tempPage = await tempContext.newPage();
await tempPage.goto(testAppUrl);
await tempPage.goto(MEET_TESTAPP_URL);
await tempPage.waitForSelector('.create-room');
await tempPage.fill('#room-id-prefix', testRoomPrefix);
await tempPage.click('.create-room-btn');
await tempPage.waitForSelector(`#${testRoomPrefix}`);
await tempPage.close();
await tempContext.close();
});
@ -51,7 +52,8 @@ test.describe('Room Functionality Tests', () => {
});
subscribedToAppErrors = true;
}
await prepareForJoiningRoom(page, testAppUrl, testRoomPrefix);
await prepareForJoiningRoom(page, MEET_TESTAPP_URL, testRoomPrefix);
participantName = `P-${Math.random().toString(36).substring(2, 9)}`;
});
@ -73,9 +75,10 @@ test.describe('Room Functionality Tests', () => {
// ==========================================
// COMPONENT RENDERING TESTS
// ==========================================
test.describe('Component Rendering', () => {
test('should load the web component with proper iframe', async ({ page }) => {
await joinRoomAs('moderator', `P-${Math.random().toString(36).substring(2, 9)}`, page);
await joinRoomAs('moderator', participantName, page);
const component = page.locator('openvidu-meet');
await expect(component).toBeVisible();
@ -94,7 +97,7 @@ test.describe('Room Functionality Tests', () => {
test.describe('Basic Room Features', () => {
test('should show the toolbar and media buttons', async ({ page }) => {
await joinRoomAs('publisher', `P-${Math.random().toString(36).substring(2, 9)}`, page);
await joinRoomAs('publisher', participantName, page);
await waitForElementInIframe(page, '#toolbar');
// Check media buttons are present
@ -105,7 +108,7 @@ test.describe('Room Functionality Tests', () => {
});
test('should start a videoconference and display video elements', async ({ page, browser }) => {
// First participant joins
// First participant (publisher) joins
await joinRoomAs('publisher', participantName, page);
// Check local video element
@ -115,7 +118,7 @@ test.describe('Room Functionality Tests', () => {
// Second participant (moderator) joins
const context = await browser.newContext();
const moderatorPage = await context.newPage();
await prepareForJoiningRoom(moderatorPage, testAppUrl, testRoomPrefix);
await prepareForJoiningRoom(moderatorPage, MEET_TESTAPP_URL, testRoomPrefix);
await joinRoomAs('moderator', 'moderator', moderatorPage);

View File

@ -1,21 +1,29 @@
import { test, expect } from '@playwright/test';
import { deleteAllRecordings, deleteAllRooms, joinRoomAs, startStopRecording } from '../../helpers/function-helpers';
import { expect, test } from '@playwright/test';
import { MEET_TESTAPP_URL } from '../../config.js';
import {
deleteAllRecordings,
deleteAllRooms,
joinRoomAs,
prepareForJoiningRoom,
startStopRecording
} from '../../helpers/function-helpers';
let subscribedToAppErrors = false;
test.describe('Web Component E2E Tests', () => {
const testAppUrl = 'http://localhost:5080';
const testRoomPrefix = 'test-room';
let participantName: string;
test.beforeAll(async ({ browser }) => {
// Create a test room before all tests
const tempContext = await browser.newContext();
const tempPage = await tempContext.newPage();
await tempPage.goto(testAppUrl);
await tempPage.goto(MEET_TESTAPP_URL);
await tempPage.waitForSelector('.create-room');
await tempPage.fill('#room-id-prefix', testRoomPrefix);
await tempPage.click('.create-room-btn');
await tempPage.waitForSelector(`#${testRoomPrefix}`);
await tempPage.close();
await tempContext.close();
});
@ -29,12 +37,9 @@ test.describe('Web Component E2E Tests', () => {
});
subscribedToAppErrors = true;
}
await page.goto(testAppUrl);
await page.waitForSelector('.rooms-container');
await page.waitForSelector(`#${testRoomPrefix}`);
await page.click('.dropdown-button');
await page.waitForSelector('#join-as-moderator');
await page.waitForSelector('#join-as-publisher');
await prepareForJoiningRoom(page, MEET_TESTAPP_URL, testRoomPrefix);
participantName = `P-${Math.random().toString(36).substring(2, 9)}`;
});
test.afterEach(async ({ context }) => {
@ -53,7 +58,7 @@ test.describe('Web Component E2E Tests', () => {
test.describe('Webhook Handling', () => {
test('should successfully receive meetingStarted and meetingEnded webhooks', async ({ page }) => {
await joinRoomAs('moderator', `P-${Math.random().toString(36).substring(2, 9)}`, page);
await joinRoomAs('moderator', participantName, page);
await page.waitForSelector('.webhook-meetingStarted');
const meetingStartedElements = await page.locator('.webhook-meetingStarted').all();
@ -66,10 +71,10 @@ test.describe('Web Component E2E Tests', () => {
expect(meetingEndedElements.length).toBe(1);
});
test('should successfully receive recordingStarted, recordingUpdated and recordingEnded webhooks', async ({
test('should successfully receive recordingStarted, recordingUpdated and recordingEnded webhooks', async ({
page
}) => {
await joinRoomAs('moderator', `P-${Math.random().toString(36).substring(2, 9)}`, page);
await joinRoomAs('moderator', participantName, page);
// Start recording
await startStopRecording(page, 'start');

View File

@ -1,11 +1,12 @@
import { test, expect } from '@playwright/test';
import { expect, test } from '@playwright/test';
import { MeetRecordingAccess } from '../../../../typings/src/room-preferences';
import { MEET_TESTAPP_URL } from '../config';
import {
applyVirtualBackground,
closeMoreOptionsMenu,
createTestRoom,
deleteAllRecordings,
deleteAllRooms,
deleteTestRoom,
interactWithElementInIframe,
isVirtualBackgroundApplied,
joinRoomAs,
@ -17,12 +18,10 @@ import {
waitForElementInIframe,
waitForVirtualBackgroundToApply
} from '../helpers/function-helpers';
import { MeetRecordingAccess } from '../../../../typings/src/room-preferences';
let subscribedToAppErrors = false;
test.describe('UI Feature Preferences Tests', () => {
const testAppUrl = 'http://localhost:5080';
const testRoomPrefix = 'ui-feature-testing-room';
let participantName: string;
let roomId: string;
@ -35,7 +34,6 @@ test.describe('UI Feature Preferences Tests', () => {
test.beforeAll(async () => {
// Login as admin to get authentication cookie
adminCookie = await loginAsAdmin();
// Create test room
});
test.beforeEach(async ({ page }) => {
@ -83,8 +81,7 @@ test.describe('UI Feature Preferences Tests', () => {
});
await page.reload();
await prepareForJoiningRoom(page, testAppUrl, testRoomPrefix);
await prepareForJoiningRoom(page, MEET_TESTAPP_URL, testRoomPrefix);
await joinRoomAs('publisher', participantName, page);
// Check that chat button is visible
@ -104,11 +101,11 @@ test.describe('UI Feature Preferences Tests', () => {
});
await page.reload();
await prepareForJoiningRoom(page, testAppUrl, testRoomPrefix);
await prepareForJoiningRoom(page, MEET_TESTAPP_URL, testRoomPrefix);
await joinRoomAs('publisher', participantName, page);
// Check that chat button is not visible
const chatButton = page.frameLocator('openvidu-meet >>> iframe').locator('#chat-panel-btn');
const chatButton = await waitForElementInIframe(page, '#chat-panel-btn', { state: 'hidden' });
await expect(chatButton).toBeHidden();
});
});
@ -129,8 +126,7 @@ test.describe('UI Feature Preferences Tests', () => {
});
await page.reload();
await prepareForJoiningRoom(page, testAppUrl, testRoomPrefix);
await prepareForJoiningRoom(page, MEET_TESTAPP_URL, testRoomPrefix);
await joinRoomAs('moderator', participantName, page);
await openMoreOptionsMenu(page);
@ -150,22 +146,21 @@ test.describe('UI Feature Preferences Tests', () => {
});
test('should not show recording button for publisher', async ({ page }) => {
// Ensure recording is enabled but only for moderators
roomId = await createTestRoom(testRoomPrefix, {
chatPreferences: { enabled: true },
recordingPreferences: {
enabled: true,
allowAccessTo: MeetRecordingAccess.ADMIN_MODERATOR
allowAccessTo: MeetRecordingAccess.ADMIN_MODERATOR_PUBLISHER
},
virtualBackgroundPreferences: { enabled: true }
});
await page.reload();
await prepareForJoiningRoom(page, testAppUrl, testRoomPrefix);
await prepareForJoiningRoom(page, MEET_TESTAPP_URL, testRoomPrefix);
await joinRoomAs('publisher', participantName, page);
// Check that recording button is not visible for publisher
const recordingButton = page.frameLocator('openvidu-meet >>> iframe').locator('#recording-btn');
const recordingButton = await waitForElementInIframe(page, '#recording-btn', { state: 'hidden' });
await expect(recordingButton).toBeHidden();
await leaveRoom(page);
});
@ -182,7 +177,7 @@ test.describe('UI Feature Preferences Tests', () => {
});
await page.reload();
await prepareForJoiningRoom(page, testAppUrl, testRoomPrefix);
await prepareForJoiningRoom(page, MEET_TESTAPP_URL, testRoomPrefix);
await joinRoomAs('moderator', participantName, page);
// Check that recording button is not visible
@ -219,7 +214,7 @@ test.describe('UI Feature Preferences Tests', () => {
});
await page.reload();
await prepareForJoiningRoom(page, testAppUrl, testRoomPrefix);
await prepareForJoiningRoom(page, MEET_TESTAPP_URL, testRoomPrefix);
await joinRoomAs('publisher', participantName, page);
// Click more options to reveal virtual background button
@ -244,7 +239,7 @@ test.describe('UI Feature Preferences Tests', () => {
});
await page.reload();
await prepareForJoiningRoom(page, testAppUrl, testRoomPrefix);
await prepareForJoiningRoom(page, MEET_TESTAPP_URL, testRoomPrefix);
await joinRoomAs('publisher', participantName, page);
// Click more options to reveal virtual background button
@ -269,11 +264,10 @@ test.describe('UI Feature Preferences Tests', () => {
});
await page.reload();
await prepareForJoiningRoom(page, testAppUrl, testRoomPrefix);
await prepareForJoiningRoom(page, MEET_TESTAPP_URL, testRoomPrefix);
await joinRoomAs('publisher', participantName, page);
await applyVirtualBackground(page, '2');
await waitForVirtualBackgroundToApply(page);
// Now disable virtual backgrounds
@ -294,54 +288,12 @@ test.describe('UI Feature Preferences Tests', () => {
await leaveRoom(page);
await page.reload();
await prepareForJoiningRoom(page, testAppUrl, testRoomPrefix);
await prepareForJoiningRoom(page, MEET_TESTAPP_URL, testRoomPrefix);
await joinRoomAs('publisher', participantName, page);
await page.waitForTimeout(2000);
const isVBApplied = await isVirtualBackgroundApplied(page);
const isVBApplied = await isVirtualBackgroundApplied(page);
expect(isVBApplied).toBe(false);
});
});
// ==========================================
// ROLE-BASED FEATURE TESTS
// ==========================================
// test.describe('Role-based Feature Access', () => {
// test('should show different features for moderator vs publisher', async ({ page, browser }) => {
// // Setup recording to be available for moderators only
// await updateRoomPreferences({
// ...getDefaultRoomPreferences(),
// recordingPreferences: {
// enabled: true,
// allowAccessTo: 'admin-moderator'
// }
// });
// // Test as moderator
// await joinRoomAs('moderator', `moderator-${participantName}`, page);
// // Moderator should see recording button
// const moderatorRecordingButton = await waitForElementInIframe(page, '#recording-btn', { state: 'visible' });
// await expect(moderatorRecordingButton).toBeVisible();
// await leaveRoom(page);
// // Test as publisher in a new context
// const publisherContext = await browser.newContext();
// const publisherPage = await publisherContext.newPage();
// await prepareForJoiningRoom(publisherPage, testAppUrl, testRoomPrefix);
// await joinRoomAs('publisher', `publisher-${participantName}`, publisherPage);
// // Publisher should not see recording button
// const publisherRecordingButton = publisherPage
// .frameLocator('openvidu-meet >>> iframe')
// .locator('#recording-btn');
// await expect(publisherRecordingButton).toBeHidden();
// await leaveRoom(publisherPage);
// await publisherContext.close();
// });
// });
});

View File

@ -1,8 +1,8 @@
import { MeetRecordingAccess, MeetRoomPreferences } from '../../../../typings/src/room-preferences';
import { Page, Locator, FrameLocator } from '@playwright/test';
import { expect } from '@playwright/test';
import { PNG } from 'pngjs';
import { expect, FrameLocator, Locator, Page } from '@playwright/test';
import * as fs from 'fs';
import { PNG } from 'pngjs';
import { MeetRecordingAccess, MeetRoomPreferences } from '../../../../typings/src/room-preferences';
import { MEET_ADMIN_PASSWORD, MEET_ADMIN_USER, MEET_API_KEY, MEET_API_URL, MEET_TESTAPP_URL } from '../config';
/**
* Gets a FrameLocator for an iframe inside a Shadow DOM
@ -55,11 +55,10 @@ export async function waitForElementInIframe(
// Wait for the element with the specified state
await elementLocator.waitFor({ state, timeout });
return elementLocator;
}
// Interacti with an element inside an iframe within Shadow DOM
// Interact with an element inside an iframe within Shadow DOM
export async function interactWithElementInIframe(
page: Page,
elementSelector: string,
@ -74,7 +73,8 @@ export async function interactWithElementInIframe(
}
): Promise<void> {
const { action, value = '', timeout = 30000 } = options;
const element = await waitForElementInIframe(page, elementSelector);
const element = await waitForElementInIframe(page, elementSelector, { timeout });
// Perform the specified action
switch (action) {
case 'click':
@ -87,6 +87,7 @@ export async function interactWithElementInIframe(
throw new Error(`Unsupported action: ${action}`);
}
}
// Helper function to get default room preferences
const getDefaultRoomPreferences = (): MeetRoomPreferences => ({
recordingPreferences: {
@ -102,11 +103,11 @@ export const createTestRoom = async (
roomIdPrefix: string,
preferences: MeetRoomPreferences = getDefaultRoomPreferences()
) => {
const response = await fetch(`http://localhost:6080/api/v1/rooms`, {
const response = await fetch(`${MEET_API_URL}/api/v1/rooms`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': 'meet-api-key'
'x-api-key': MEET_API_KEY
},
body: JSON.stringify({
roomIdPrefix,
@ -127,7 +128,7 @@ export const createTestRoom = async (
// Helper function to update room preferences via REST API
export const updateRoomPreferences = async (roomId: string, preferences: any, adminCookie: string) => {
const response = await fetch(`http://localhost:6080/internal-api/v1/rooms/${roomId}`, {
const response = await fetch(`${MEET_API_URL}/internal-api/v1/rooms/${roomId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
@ -145,14 +146,14 @@ export const updateRoomPreferences = async (roomId: string, preferences: any, ad
// Helper function to login and get admin cookie
export const loginAsAdmin = async (): Promise<string> => {
const response = await fetch(`http://localhost:6080/internal-api/v1/auth/login`, {
const response = await fetch(`${MEET_API_URL}/internal-api/v1/auth/login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: 'admin',
password: 'admin'
username: MEET_ADMIN_USER,
password: MEET_ADMIN_PASSWORD
})
});
@ -168,7 +169,6 @@ export const loginAsAdmin = async (): Promise<string> => {
// Extract the access token cookie
const accessTokenCookie = cookies.split(';').find((cookie) => cookie.trim().startsWith('OvMeetAccessToken='));
if (!accessTokenCookie) {
throw new Error('Access token cookie not found');
}
@ -177,23 +177,23 @@ export const loginAsAdmin = async (): Promise<string> => {
};
// Helper function to delete a room
export const deleteTestRoom = async (roomIdToDelete: string) => {
await fetch(`http://localhost:6080/api/v1/rooms/${roomIdToDelete}`, {
export const deleteTestRoom = async (roomId: string) => {
await fetch(`${MEET_API_URL}/api/v1/rooms/${roomId}`, {
method: 'DELETE',
headers: {
'x-api-key': 'meet-api-key'
'x-api-key': MEET_API_KEY
}
});
};
export const deleteAllRecordings = async (page: Page) => {
await page.goto('http://localhost:5080/');
await page.goto(MEET_TESTAPP_URL);
await page.waitForSelector('#delete-all-recordings-btn', { state: 'visible' });
await page.click('#delete-all-recordings-btn');
};
export const deleteAllRooms = async (page: Page) => {
await page.goto('http://localhost:5080/');
await page.goto(MEET_TESTAPP_URL);
await page.waitForSelector('#delete-all-rooms-btn', { state: 'visible' });
await page.click('#delete-all-rooms-btn');
};
@ -203,9 +203,11 @@ export const startStopRecording = async (page: Page, action: 'start' | 'stop') =
if (action === 'start') {
await openMoreOptionsMenu(page);
}
await waitForElementInIframe(page, buttonSelector, { state: 'visible' });
await interactWithElementInIframe(page, buttonSelector, { action: 'click' });
await page.waitForTimeout(500); // Wait for recording action to complete
if (action === 'start') {
await page.waitForSelector('.webhook-recordingUpdated', { timeout: 10000 });
}
@ -213,6 +215,7 @@ export const startStopRecording = async (page: Page, action: 'start' | 'stop') =
await page.waitForSelector('.webhook-recordingEnded', { timeout: 10000 });
}
};
export const prepareForJoiningRoom = async (page: Page, url: string, roomPrefix: string) => {
await page.goto(url);
await page.waitForSelector('.rooms-container');
@ -241,6 +244,12 @@ export const joinRoomAs = async (role: 'moderator' | 'publisher', pName: string,
await waitForElementInIframe(page, 'ov-session', { state: 'visible' });
};
export const accessRoomAs = async (role: 'moderator' | 'publisher', page: Page) => {
await page.click('#join-as-' + role);
const component = page.locator('openvidu-meet');
await expect(component).toBeVisible();
};
export const viewRecordingsAs = async (role: 'moderator' | 'publisher', page: Page) => {
await page.click('#join-as-' + role);
const component = page.locator('openvidu-meet');
@ -252,11 +261,13 @@ export const viewRecordingsAs = async (role: 'moderator' | 'publisher', page: Pa
export const leaveRoom = async (page: Page, role: 'moderator' | 'publisher' = 'publisher') => {
const button = await waitForElementInIframe(page, '#leave-btn');
await button.click();
if (role === 'moderator') {
await page.waitForTimeout(500); // Wait for leave animation
const option = await waitForElementInIframe(page, '#leave-option');
await option.click();
}
await page.waitForSelector('.event-LEFT');
};