neoris/openvidu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test: refactor E2E tests to use existing browser context and improve structure

Browse Source
This commit is contained in:
Carlos Santos 2025-05-14 13:24:30 +02:00
parent 0870a0b459
commit 26d7d40cbd
1 changed files with 14 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/webcomponent/tests/e2e/openvidu-meet.test.ts
View File

@ -1,4 +1,4 @@
import { test, expect, BrowserContext, Browser, Page, chromium } from '@playwright/test'; import { test, expect } from '@playwright/test';
import { waitForElementInIframe } from '../helpers/function-helpers'; import { waitForElementInIframe } from '../helpers/function-helpers';
import fs from 'fs'; import fs from 'fs';
import defaultConfig from '../../playwright.config'; import defaultConfig from '../../playwright.config';
@ -7,34 +7,20 @@ test.describe('Web Component E2E Tests', () => {
const testAppUrl = 'http://localhost:5080'; const testAppUrl = 'http://localhost:5080';
const testRoomPrefix = 'test-room'; const testRoomPrefix = 'test-room';
let browser: Browser; test.beforeAll(async ({ browser }) => {
let context: BrowserContext;
let page: Page;
test.beforeAll(async () => {
// Create a test room before all tests // Create a test room before all tests
const tempBrowser = await chromium.launch({ const tempContext = await browser.newContext();
headless: defaultConfig.use?.headless || false
});
const tempContext = await tempBrowser.newContext();
const tempPage = await tempContext.newPage(); const tempPage = await tempContext.newPage();
await tempPage.goto(testAppUrl); await tempPage.goto(testAppUrl);
await tempPage.waitForSelector('.create-room'); await tempPage.waitForSelector('.create-room');
await tempPage.fill('#room-id-prefix', testRoomPrefix); await tempPage.fill('#room-id-prefix', testRoomPrefix);
await tempPage.click('.create-room-btn'); await tempPage.click('.create-room-btn');
await tempPage.waitForSelector(`#${testRoomPrefix}`); await tempPage.waitForSelector(`#${testRoomPrefix}`);
await tempBrowser.close(); await tempPage.close();
await tempContext.close();
}); });
test.beforeEach(async () => { test.beforeEach(async ({ page }) => {
browser = await chromium.launch({
headless: defaultConfig.use?.headless || false
});
const storageState = fs.existsSync('test_localstorage_state.json')
? { storageState: 'test_localstorage_state.json' }
: {};
context = await browser.newContext(storageState);
page = await context.newPage();
page.on('console', (msg) => { page.on('console', (msg) => {
if (msg.type() === 'error') { if (msg.type() === 'error') {
console.error(`Console Error: ${msg.text()}`); console.error(`Console Error: ${msg.text()}`);
@ -48,7 +34,7 @@ test.describe('Web Component E2E Tests', () => {
await page.waitForSelector('#join-as-publisher'); await page.waitForSelector('#join-as-publisher');
}); });
test.afterEach(async ({}, testInfo) => { test.afterEach(async ({ page, context }, testInfo) => {
if (testInfo.status !== testInfo.expectedStatus) { if (testInfo.status !== testInfo.expectedStatus) {
console.error(`FAIL: ${testInfo.title}`); console.error(`FAIL: ${testInfo.title}`);
@ -70,11 +56,10 @@ test.describe('Web Component E2E Tests', () => {
} }
} }
await context.storageState({ path: 'test_localstorage_state.json' }); await context.storageState({ path: 'test_localstorage_state.json' });
await browser.close();
}); });
test.describe('Component Rendering', () => { test.describe('Component Rendering', () => {
test('should load the web component with proper iframe', async () => { test('should load the web component with proper iframe', async ({ page }) => {
await page.click('#join-as-moderator'); await page.click('#join-as-moderator');
const component = page.locator('openvidu-meet'); const component = page.locator('openvidu-meet');
await expect(component).toBeVisible(); await expect(component).toBeVisible();
@ -88,7 +73,7 @@ test.describe('Web Component E2E Tests', () => {
}); });
test.describe('Event Handling', () => { test.describe('Event Handling', () => {
test('should successfully join as moderator and receive JOIN event', async () => { test('should successfully join as moderator and receive JOIN event', async ({ page }) => {
await page.click('#join-as-moderator'); await page.click('#join-as-moderator');
await waitForElementInIframe(page, 'ov-session'); await waitForElementInIframe(page, 'ov-session');
await page.waitForSelector('.event-JOIN'); await page.waitForSelector('.event-JOIN');
@ -96,7 +81,7 @@ test.describe('Web Component E2E Tests', () => {
expect(joinElements.length).toBe(1); expect(joinElements.length).toBe(1);
}); });
test('should successfully join as publisher and receive JOIN event', async () => { test('should successfully join as publisher and receive JOIN event', async ({ page }) => {
await page.click('#join-as-publisher'); await page.click('#join-as-publisher');
await waitForElementInIframe(page, 'ov-session'); await waitForElementInIframe(page, 'ov-session');
await page.waitForSelector('.event-JOIN'); await page.waitForSelector('.event-JOIN');
@ -104,7 +89,7 @@ test.describe('Web Component E2E Tests', () => {
expect(joinElements.length).toBe(1); expect(joinElements.length).toBe(1);
}); });
test('should successfully join to room and receive LEFT event when using leave command', async () => { test('should successfully join to room and receive LEFT event when using leave command', async ({ page }) => {
await page.click('#join-as-moderator'); await page.click('#join-as-moderator');
await waitForElementInIframe(page, 'ov-session'); await waitForElementInIframe(page, 'ov-session');
await page.click('#leave-room-btn'); await page.click('#leave-room-btn');
@ -113,7 +98,7 @@ test.describe('Web Component E2E Tests', () => {
expect(leftElements.length).toBe(1); expect(leftElements.length).toBe(1);
}); });
test('should successfully join to room and receive LEFT event when using disconnect button', async () => { test('should successfully join to room and receive LEFT event when using disconnect button', async ({ page }) => {
await page.click('#join-as-moderator'); await page.click('#join-as-moderator');
await waitForElementInIframe(page, 'ov-session'); await waitForElementInIframe(page, 'ov-session');
const button = await waitForElementInIframe(page, '#leave-btn'); const button = await waitForElementInIframe(page, '#leave-btn');
@ -123,7 +108,7 @@ test.describe('Web Component E2E Tests', () => {
expect(leftElements.length).toBe(1); expect(leftElements.length).toBe(1);
}); });
test('should successfully join to room and receive MEETING_ENDED event when using end meeting command', async () => { test('should successfully join to room and receive MEETING_ENDED event when using end meeting command', async ({ page }) => {
await page.click('#join-as-moderator'); await page.click('#join-as-moderator');
await waitForElementInIframe(page, 'ov-session'); await waitForElementInIframe(page, 'ov-session');
await page.click('#end-meeting-btn'); await page.click('#end-meeting-btn');
@ -138,7 +123,7 @@ test.describe('Web Component E2E Tests', () => {
}); });
test.describe('Webhook Handling', () => { test.describe('Webhook Handling', () => {
test('should successfully receive meetingStarted and meetingEnded webhooks', async () => { test('should successfully receive meetingStarted and meetingEnded webhooks', async ({ page }) => {
await page.click('#join-as-moderator'); await page.click('#join-as-moderator');
await page.waitForTimeout(1000); // Wait for 1 second to ensure the meeting has started await page.waitForTimeout(1000); // Wait for 1 second to ensure the meeting has started