me-17961: test if videos on colors api page are playing (#770)

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

* vp test: modifying test steps description based on review comments

test/e2e/specs/colorsApiPage.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.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 (in case isPause is false)', async () => {
+        expect(await pomPages.colorsApiPage.colorsApiColorSkinVideoComponent.validateVideoPaused(false));
+    });
+    await test.step('Validating that dark skin video video is playing (in case isPause is false)', async () => {
+        expect(await pomPages.colorsApiPage.colorsApiDarkSkinVideoComponent.validateVideoPaused(false));
+    });
+    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 (in case isPause is false)', async () => {
+        await expect(async () => {
+            expect(await pomPages.colorsApiPage.colorsApiLightSkinVideoComponent.validateVideoPaused(false));
+        }).toPass({ intervals: [500], timeout: 3000 });
+    });
+});

test/e2e/src/pom/PageManager.ts

@@ -9,6 +9,7 @@ import { AutoplayOnScrollPage } from './autoplayOnScrollPage';
 import { ChaptersPage } from './chaptersPage';
 import { CldAnalyticsPage } from './cldAnalyticsPage';
 import { CodecsAndFormats } from './codecsAndFormats';
+import { ColorsApiPage } from './colorsApiPage';
 
 /**
  * Page manager,
@@ -96,5 +97,9 @@ export class PageManager {
     public get codecsAndFormatsPage(): CodecsAndFormats {
         return this.getPage(CodecsAndFormats);
     }
+
+    public get colorsApiPage(): ColorsApiPage {
+        return this.getPage(ColorsApiPage);
+    }
 }
 export default PageManager;

test/e2e/src/pom/colorsApiPage.ts

@@ -0,0 +1,22 @@
+import { Page } from '@playwright/test';
+import { VideoComponent } from '../../components/videoComponent';
+import { BasePage } from './BasePage';
+const COLORS_API_PAGE_COLOR_SKIN_VIDEO_SELECTOR = '//*[@id="vjs_video_3_html5_api"]';
+const COLORS_API_PAGE_DARK_SKIN_VIDEO_SELECTOR = '//*[@id="vjs_video_627_html5_api"]';
+const COLORS_API_PAGE_LIGHT_SKIN_VIDEO_SELECTOR = '//*[@id="vjs_video_1229_html5_api"]';
+
+/**
+ * Video player examples colors API page object
+ */
+export class ColorsApiPage extends BasePage {
+    public colorsApiColorSkinVideoComponent: VideoComponent;
+    public colorsApiDarkSkinVideoComponent: VideoComponent;
+    public colorsApiLightSkinVideoComponent: VideoComponent;
+
+    constructor(page: Page) {
+        super(page);
+        this.colorsApiColorSkinVideoComponent = new VideoComponent(page, COLORS_API_PAGE_COLOR_SKIN_VIDEO_SELECTOR);
+        this.colorsApiDarkSkinVideoComponent = new VideoComponent(page, COLORS_API_PAGE_DARK_SKIN_VIDEO_SELECTOR);
+        this.colorsApiLightSkinVideoComponent = new VideoComponent(page, COLORS_API_PAGE_LIGHT_SKIN_VIDEO_SELECTOR);
+    }
+}