me-17993: test if videos are playing on ESM colors api page and adding… (#837)

* vp test: test if videos are playing on ESM colors api page and adding ids to video elements on ESM colors api page

* vp test: test if videos are playing on ESM colors api page

Author: ShayLevi

docs/es-modules/colors.html

@@ -28,6 +28,7 @@ <h3 class="text-primary">Player 1</h3>
           data-cld-source='{ "publicId": "dog", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
           data-cld-colors='{ "base": "#0b602b", "accent": "#cddc39", "text": "#fff" }'
           class="cld-video-player cld-fluid"
+          id="player-1"
         ></video>
       </div>
       <h3 class="text-primary">Player 2</h3>
@@ -38,6 +39,7 @@ <h3 class="text-primary">Player 2</h3>
           data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
           data-cld-colors='{ "base": "#111", "accent": "#03a9f4", "text": "#ffeb3b" }'
           class="cld-video-player cld-fluid cld-video-player-skin-dark"
+          id="player-2"
         ></video>
       </div>
 
@@ -49,6 +51,7 @@ <h3 class="text-primary">Player 3</h3>
           data-cld-source='{ "publicId": "elephants", "info": { "title": "Elephants", "subtitle": "Short movie about elephants" } }'
           data-cld-colors='{ "base": "#ffffff", "accent": "#676a46", "text": "#007d29" }'
           class="cld-video-player cld-fluid cld-video-player-skin-light"
+          id="player-3"
         ></video>
       </div>
 

test/e2e/specs/ESM/esmColorsApiPage.spec.ts

@@ -0,0 +1,12 @@
+import { vpTest } from '../../fixtures/vpTest';
+import { ExampleLinkName } from '../../testData/ExampleLinkNames';
+import { getEsmLinkByName } from '../../testData/esmPageLinksData';
+import { ESM_URL } from '../../testData/esmUrl';
+import { testColorsApiPageVideoIsPlaying } from '../commonSpecs/colorsApiPageVideoPlaying';
+
+const link = getEsmLinkByName(ExampleLinkName.ColorsAPI);
+
+vpTest(`Test if 3 videos on ESM colors API page are playing as expected`, async ({ page, pomPages }) => {
+    await page.goto(ESM_URL);
+    await testColorsApiPageVideoIsPlaying(page, pomPages, link);
+});

test/e2e/specs/NonESM/colorsApiPage.spec.ts

@@ -1,26 +1,10 @@
 import { vpTest } from '../../fixtures/vpTest';
-import { test } from '@playwright/test';
-import { waitForPageToLoadWithTimeout } from '../../src/helpers/waitForPageToLoadWithTimeout';
 import { getLinkByName } from '../../testData/pageLinksData';
 import { ExampleLinkName } from '../../testData/ExampleLinkNames';
+import { testColorsApiPageVideoIsPlaying } from '../commonSpecs/colorsApiPageVideoPlaying';
 
 const link = getLinkByName(ExampleLinkName.ColorsAPI);
 
 vpTest(`Test if 3 videos on colors API page are playing as expected`, async ({ page, pomPages }) => {
-    await test.step('Navigate to colors API page by clicking on link', async () => {
-        await pomPages.mainPage.clickLinkByName(link.name);
-        await waitForPageToLoadWithTimeout(page, 5000);
-    });
-    await test.step('Validating that modified color video is playing', async () => {
-        await pomPages.colorsApiPage.colorsApiColorSkinVideoComponent.validateVideoIsPlaying(true);
-    });
-    await test.step('Validating that dark skin video video is playing', async () => {
-        await pomPages.colorsApiPage.colorsApiDarkSkinVideoComponent.validateVideoIsPlaying(true);
-    });
-    await test.step('Scroll until light skin video element is visible', async () => {
-        await pomPages.colorsApiPage.colorsApiLightSkinVideoComponent.locator.scrollIntoViewIfNeeded();
-    });
-    await test.step('Validating that light skin video is playing', async () => {
-        await pomPages.colorsApiPage.colorsApiLightSkinVideoComponent.validateVideoIsPlaying(true);
-    });
+    await testColorsApiPageVideoIsPlaying(page, pomPages, link);
 });

test/e2e/specs/commonSpecs/colorsApiPageVideoPlaying.ts

@@ -0,0 +1,23 @@
+import { Page, test } from '@playwright/test';
+import { waitForPageToLoadWithTimeout } from '../../src/helpers/waitForPageToLoadWithTimeout';
+import PageManager from '../../src/pom/PageManager';
+import { ExampleLinkType } from '../../types/exampleLinkType';
+
+export async function testColorsApiPageVideoIsPlaying(page: Page, pomPages: PageManager, link: ExampleLinkType) {
+    await test.step('Navigate to colors API page by clicking on link', async () => {
+        await pomPages.mainPage.clickLinkByName(link.name);
+        await waitForPageToLoadWithTimeout(page, 5000);
+    });
+    await test.step('Validating that modified color video is playing', async () => {
+        await pomPages.colorsApiPage.colorsApiColorSkinVideoComponent.validateVideoIsPlaying(true);
+    });
+    await test.step('Validating that dark skin video video is playing', async () => {
+        await pomPages.colorsApiPage.colorsApiDarkSkinVideoComponent.validateVideoIsPlaying(true);
+    });
+    await test.step('Scroll until light skin video element is visible', async () => {
+        await pomPages.colorsApiPage.colorsApiLightSkinVideoComponent.locator.scrollIntoViewIfNeeded();
+    });
+    await test.step('Validating that light skin video is playing', async () => {
+        await pomPages.colorsApiPage.colorsApiLightSkinVideoComponent.validateVideoIsPlaying(true);
+    });
+}