diff --git a/test/e2e/specs/multiplePlayersPage.spec.ts b/test/e2e/specs/multiplePlayersPage.spec.ts new file mode 100644 index 00000000..bb0c6357 --- /dev/null +++ b/test/e2e/specs/multiplePlayersPage.spec.ts @@ -0,0 +1,28 @@ +import { vpTest } from '../fixtures/vpTest'; +import { expect, test } from '@playwright/test'; +import { waitForPageToLoadWithTimeout } from '../src/helpers/waitForPageToLoadWithTimeout'; +import { getLinkByName } from '../testData/pageLinksData'; +import { ExampleLinkName } from '../testData/ExampleLinkNames'; + +const link = getLinkByName(ExampleLinkName.MultiplePlayers); + +vpTest(`Test if 3 videos on multiple players page are playing as expected`, async ({ page, pomPages }) => { + await test.step('Navigate to multiple players page by clicking on link', async () => { + await pomPages.mainPage.clickLinkByName(link.name); + await waitForPageToLoadWithTimeout(page, 5000); + }); + await test.step('Validating that player 1 video is playing', async () => { + await pomPages.multiplePlayersPage.multiplePlayersPlayer1VideoComponent.validateVideoIsPlaying(true); + }); + await test.step('Validating that player 2 video video is playing', async () => { + await pomPages.multiplePlayersPage.multiplePlayersPlayer2VideoComponent.validateVideoIsPlaying(true); + }); + await test.step('Scroll until player 3 video element is visible', async () => { + await pomPages.colorsApiPage.colorsApiLightSkinVideoComponent.locator.scrollIntoViewIfNeeded(); + }); + await test.step('Validating that player 3 video is playing', async () => { + await expect(async () => { + await pomPages.multiplePlayersPage.multiplePlayersPlayer3VideoComponent.validateVideoIsPlaying(true); + }).toPass({ intervals: [500], timeout: 3000 }); + }); +}); diff --git a/test/e2e/src/pom/PageManager.ts b/test/e2e/src/pom/PageManager.ts index 146adbe9..694142d9 100644 --- a/test/e2e/src/pom/PageManager.ts +++ b/test/e2e/src/pom/PageManager.ts @@ -15,6 +15,7 @@ import { DisplayConfigurationsPage } from './displayConfigurationsPage'; import { FloatingPlayerPage } from './floatingPlayerPgae'; import { FluidLayoutsPage } from './fluidLayoutsPage'; import { ForceHlsSubtitlesPage } from './forceHlsSubtitlesPage'; +import { MultiplePlayersPage } from './multiplePlayersPage'; /** * Page manager, @@ -126,5 +127,9 @@ export class PageManager { public get forceHlsSubtitlesPage(): ForceHlsSubtitlesPage { return this.getPage(ForceHlsSubtitlesPage); } + + public get multiplePlayersPage(): MultiplePlayersPage { + return this.getPage(MultiplePlayersPage); + } } export default PageManager; diff --git a/test/e2e/src/pom/multiplePlayersPage.ts b/test/e2e/src/pom/multiplePlayersPage.ts new file mode 100644 index 00000000..d00d466c --- /dev/null +++ b/test/e2e/src/pom/multiplePlayersPage.ts @@ -0,0 +1,22 @@ +import { Page } from '@playwright/test'; +import { VideoComponent } from '../../components/videoComponent'; +import { BasePage } from './BasePage'; +const MULTIPLE_PLAYERS_PAGE_PLAYER_1_VIDEO_SELECTOR = '//*[@id="vjs_video_3_html5_api"]'; +const MULTIPLE_PLAYERS_PAGE_PLAYER_2_VIDEO_SELECTOR = '//*[@id="vjs_video_627_html5_api"]'; +const MULTIPLE_PLAYERS_PAGE_PLAYER_3_VIDEO_SELECTOR = '//*[@id="vjs_video_1229_html5_api"]'; + +/** + * Video player examples colors API page object + */ +export class MultiplePlayersPage extends BasePage { + public multiplePlayersPlayer1VideoComponent: VideoComponent; + public multiplePlayersPlayer2VideoComponent: VideoComponent; + public multiplePlayersPlayer3VideoComponent: VideoComponent; + + constructor(page: Page) { + super(page); + this.multiplePlayersPlayer1VideoComponent = new VideoComponent(page, MULTIPLE_PLAYERS_PAGE_PLAYER_1_VIDEO_SELECTOR); + this.multiplePlayersPlayer2VideoComponent = new VideoComponent(page, MULTIPLE_PLAYERS_PAGE_PLAYER_2_VIDEO_SELECTOR); + this.multiplePlayersPlayer3VideoComponent = new VideoComponent(page, MULTIPLE_PLAYERS_PAGE_PLAYER_3_VIDEO_SELECTOR); + } +}