vp test: test if videos on multiple players page are playing (#780)

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 });
+    });
+});

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;

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);
+    }
+}