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

This commit is contained in:
Carlos Santos 2025-05-14 13:24:30 +02:00
parent 0870a0b459
commit 26d7d40cbd

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