From 52d253a1db037d4d610338340f229989245b8c42 Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Wed, 21 May 2025 12:41:34 +0200 Subject: [PATCH] ov-components: add E2E tests for screensharing features --- .../screensharing.test.ts | 138 +++++++++--------- openvidu-components-angular/package.json | 2 +- 2 files changed, 73 insertions(+), 67 deletions(-) rename openvidu-components-angular/e2e/{webcomponent-e2e => }/screensharing.test.ts (73%) diff --git a/openvidu-components-angular/e2e/webcomponent-e2e/screensharing.test.ts b/openvidu-components-angular/e2e/screensharing.test.ts similarity index 73% rename from openvidu-components-angular/e2e/webcomponent-e2e/screensharing.test.ts rename to openvidu-components-angular/e2e/screensharing.test.ts index 604ea50a..3abefa57 100644 --- a/openvidu-components-angular/e2e/webcomponent-e2e/screensharing.test.ts +++ b/openvidu-components-angular/e2e/screensharing.test.ts @@ -1,19 +1,19 @@ import { Builder, WebDriver } from 'selenium-webdriver'; -import { OPENVIDU_CALL_SERVER } from '../config'; -import { WebComponentConfig } from '../selenium.conf'; -import { OpenViduComponentsPO } from '../utils.po.test'; +import { TestAppConfig } from './selenium.conf'; +import { OpenViduComponentsPO } from './utils.po.test'; -const url = `${WebComponentConfig.appUrl}?OV_URL=${OPENVIDU_CALL_SERVER}`; +const url = TestAppConfig.appUrl; -describe('Testing screenshare features', () => { +describe('E2E: Screensharing features', () => { let browser: WebDriver; let utils: OpenViduComponentsPO; + async function createChromeBrowser(): Promise { return await new Builder() - .forBrowser(WebComponentConfig.browserName) - .withCapabilities(WebComponentConfig.browserCapabilities) - .setChromeOptions(WebComponentConfig.browserOptions) - .usingServer(WebComponentConfig.seleniumAddress) + .forBrowser(TestAppConfig.browserName) + .withCapabilities(TestAppConfig.browserCapabilities) + .setChromeOptions(TestAppConfig.browserOptions) + .usingServer(TestAppConfig.seleniumAddress) .build(); } @@ -23,95 +23,89 @@ describe('Testing screenshare features', () => { }); afterEach(async () => { + try { + await utils.leaveRoom(); + } catch (error) {} await browser.quit(); }); - it('should toggle screensharing twice', async () => { + it('should toggle screensharing on and off twice, updating video count', async () => { await browser.get(`${url}&prejoin=false`); await utils.checkLayoutPresent(); - // Clicking to screensharing button + // Enable screensharing await utils.waitForElement('#screenshare-btn'); await utils.clickOn('#screenshare-btn'); - await browser.sleep(500); await utils.waitForElement('.OV_big'); expect(await utils.getNumberOfElements('video')).toEqual(2); - // expect(await utils.getNumberOfElements('.OV_stream.speaking')).toEqual(1); - + // Disable screensharing await utils.disableScreenShare(); - expect(await utils.getNumberOfElements('video')).toEqual(1); - // toggle screenshare again + // Enable again await utils.clickOn('#screenshare-btn'); await browser.sleep(500); - await utils.waitForElement('.OV_big'); expect(await utils.getNumberOfElements('video')).toEqual(2); + // Disable again await utils.disableScreenShare(); - expect(await utils.getNumberOfElements('video')).toEqual(1); }); - it('should show screen and muted camera', async () => { + it('should show screenshare and muted camera (camera off, screenshare on)', async () => { await browser.get(`${url}&prejoin=false`); - await utils.checkLayoutPresent(); + // Mute camera await utils.waitForElement('#camera-btn'); await utils.clickOn('#camera-btn'); - // Clicking to screensharing button + // Enable screensharing const screenshareButton = await utils.waitForElement('#screenshare-btn'); expect(await screenshareButton.isDisplayed()).toBeTrue(); await screenshareButton.click(); - await browser.sleep(500); await utils.waitForElement('.OV_big'); expect(await utils.getNumberOfElements('video')).toEqual(2); + // Disable screensharing await utils.disableScreenShare(); - expect(await utils.getNumberOfElements('video')).toEqual(1); }); - it('should screensharing with PINNED video', async () => { + it('should display screensharing with a single pinned video', async () => { await browser.get(`${url}&prejoin=false`); await utils.checkLayoutPresent(); - // Clicking to screensharing button + // Enable screensharing const screenshareButton = await utils.waitForElement('#screenshare-btn'); expect(await screenshareButton.isDisplayed()).toBeTrue(); await screenshareButton.click(); - await utils.waitForElement('.OV_big'); expect(await utils.getNumberOfElements('.OV_big')).toEqual(1); }); - it('should screensharing with PINNED video and replace the existing one', async () => { + it('should replace pinned video when a second participant starts screensharing', async () => { const roomName = 'screensharingE2E'; const fixedUrl = `${url}&roomName=${roomName}&prejoin=false`; await browser.get(fixedUrl); await utils.checkLayoutPresent(); - // Clicking to screensharing button + // First participant screenshares await utils.waitForElement('#screenshare-btn'); await utils.clickOn('#screenshare-btn'); await utils.waitForElement('.OV_big'); expect(await utils.getNumberOfElements('.OV_big')).toEqual(1); - // Starting new browser for adding the second participant + // Second participant joins and screenshares const newTabScript = `window.open("${fixedUrl}")`; await browser.executeScript(newTabScript); const tabs = await browser.getAllWindowHandles(); await browser.switchTo().window(tabs[1]); - await utils.checkLayoutPresent(); - - // Clicking to screensharing button await utils.waitForElement('#screenshare-btn'); await utils.clickOn('#screenshare-btn'); await browser.sleep(500); @@ -119,7 +113,7 @@ describe('Testing screenshare features', () => { await utils.waitForElement('.OV_big'); expect(await utils.getNumberOfElements('.OV_big')).toEqual(1); - // Go to first tab + // Switch back to first tab and check await browser.switchTo().window(tabs[0]); await browser.sleep(500); expect(await utils.getNumberOfElements('video')).toEqual(4); @@ -127,39 +121,37 @@ describe('Testing screenshare features', () => { expect(await utils.getNumberOfElements('.OV_big')).toEqual(1); }); - it('should disabled a screensharing and pinned the previous one', async () => { + it('should unpin screensharing and restore previous pinned video when disabled', async () => { const roomName = 'screensharingtwoE2E'; const fixedUrl = `${url}&roomName=${roomName}&prejoin=false`; await browser.get(fixedUrl); await utils.checkLayoutPresent(); - // Clicking to screensharing button + // First participant screenshares await utils.waitForElement('#screenshare-btn'); await utils.clickOn('#screenshare-btn'); await browser.sleep(500); await utils.waitForElement('.OV_big'); expect(await utils.getNumberOfElements('.OV_big')).toEqual(1); - // Starting new browser for adding the second participant + // Second participant joins and screenshares const tabs = await utils.openTab(fixedUrl); await browser.switchTo().window(tabs[1]); - await utils.checkLayoutPresent(); - - // Clicking to screensharing button await utils.waitForElement('#screenshare-btn'); await utils.clickOn('#screenshare-btn'); await browser.sleep(500); expect(await utils.getNumberOfElements('video')).toEqual(4); await utils.waitForElement('.OV_big'); expect(await utils.getNumberOfElements('.OV_big')).toEqual(1); - // Disable screensharing + + // Disable screensharing for second participant await utils.disableScreenShare(); expect(await utils.getNumberOfElements('video')).toEqual(3); await utils.waitForElement('.OV_big'); expect(await utils.getNumberOfElements('.OV_big')).toEqual(1); - // Go to first tab + // Switch back to first tab and check await browser.switchTo().window(tabs[0]); await browser.sleep(500); expect(await utils.getNumberOfElements('video')).toEqual(3); @@ -167,38 +159,52 @@ describe('Testing screenshare features', () => { expect(await utils.getNumberOfElements('.OV_big')).toEqual(1); }); - // it('should screensharing with audio muted', async () => { - // let isAudioEnabled; - // const getAudioScript = (className: string) => { - // return `return document.getElementsByClassName('${className}')[0].srcObject.getAudioTracks()[0].enabled;`; - // }; - // await browser.get(`${url}&prejoin=false`); + it('should correctly share screen with microphone muted and maintain proper track state', async () => { + // Helper for inspecting stream tracks + const getMediaTracks = (className: string) => { + return ` + const tracks = document.getElementsByClassName('${className}')[0].srcObject.getTracks(); + return tracks.map(track => ({ + kind: track.kind, + enabled: track.enabled, + id: track.id, + label: track.label + }));`; + }; - // await utils.checkLayoutPresent(); + // Setup: Navigate to room and skip prejoin + await browser.get(`${url}&prejoin=false`); + await utils.checkLayoutPresent(); - // const micButton = await utils.waitForElement('#mic-btn'); - // await micButton.click(); + // Step 1: First mute the microphone + const micButton = await utils.waitForElement('#mic-btn'); + await micButton.click(); - // // Clicking to screensharing button - // const screenshareButton = await utils.waitForElement('#screenshare-btn'); - // expect(await utils.isPresent('#screenshare-btn')).toBeTrue(); - // await screenshareButton.click(); + // Step 2: Start screen sharing + await utils.clickOn('#screenshare-btn'); - // await utils.waitForElement('.screen-type'); - // expect(await utils.getNumberOfElements('video')).toEqual(2); + // Step 3: Verify both streams are present + await utils.waitForElement('.screen-type'); + expect(await utils.getNumberOfElements('video')).toEqual(2); - // isAudioEnabled = await browser.executeScript(getAudioScript('screen-type')); - // expect(isAudioEnabled).toBeFalse(); + // Step 4: Verify screen share track properties + const screenTracks: any[] = await browser.executeScript(getMediaTracks('screen-type')); + expect(screenTracks.length).toEqual(1); + expect(screenTracks[0].kind).toEqual('video'); + expect(screenTracks[0].enabled).toBeTrue(); - // await utils.waitForElement('#status-mic'); - // expect(await utils.getNumberOfElements('#status-mic')).toEqual(2); - - // // Clicking to screensharing button - // await screenshareButton.click(); - // expect(await utils.getNumberOfElements('video')).toEqual(1); - - // }); + // Step 5: Verify microphone status indicators for both streams + // await utils.waitForElement('#status-mic'); + // const micStatusCount = await utils.getNumberOfElements('#status-mic'); + // expect(micStatusCount).toEqual(2); + // Step 6: Stop screen sharing and verify stream count + await utils.clickOn('#screenshare-btn'); + await browser.sleep(500); + await utils.clickOn('#disable-screen-button'); + await browser.sleep(500); + expect(await utils.getNumberOfElements('video')).toEqual(1); + }); // it('should show and hide CAMERA stream when muting video with screensharing', async () => { // await browser.get(`${url}&prejoin=false`); diff --git a/openvidu-components-angular/package.json b/openvidu-components-angular/package.json index 0c3e1bcf..5295fc14 100644 --- a/openvidu-components-angular/package.json +++ b/openvidu-components-angular/package.json @@ -95,10 +95,10 @@ "e2e:lib-events": "tsc --project ./e2e && npx jasmine ./e2e/dist/events.test.js", "e2e:lib-media-devices": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/media-devices.test.js", "e2e:lib-panels": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/panels.test.js", + "e2e:lib-screensharing": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/screensharing.test.js", "e2e:webcomponent-all": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/webcomponent-e2e/**/*.test.js", "e2e:webcomponent-captions": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/webcomponent-e2e/captions.test.js", - "e2e:webcomponent-screensharing": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/webcomponent-e2e/screensharing.test.js", "e2e:webcomponent-stream": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/webcomponent-e2e/stream.test.js", "e2e:webcomponent-toolbar": "tsc --project ./e2e && npx jasmine --fail-fast ./e2e/dist/webcomponent-e2e/toolbar.test.js", "webcomponent:testing-build": "./node_modules/@angular/cli/bin/ng.js build openvidu-webcomponent --configuration testing && node ./openvidu-webcomponent-build.js",