ME-17952: test if video is playing on main page (#733)

* vp test: test if video is playing on main page

* vp test: rename playVideo to clickPlay

Author: ShayLevi

test/e2e/components/videoComponent.ts

@@ -0,0 +1,35 @@
+import { Page } from '@playwright/test';
+
+/**
+ * Video component
+ */
+export class VideoComponent {
+    private page: Page;
+    private readonly videoSelector: string;
+
+    constructor(page: Page, videoSelector: string) {
+        this.page = page;
+        this.videoSelector = videoSelector;
+    }
+
+    /**
+     * Click the play button if necessary in case video is not autoplay
+     */
+    public async clickPlay(): Promise<void> {
+        const videoPlayButtonLocator = this.page.locator(`${this.videoSelector}/following-sibling::button[contains(@class, "vjs-big-play-button")]`);
+        // Click the play button to start the video
+        return videoPlayButtonLocator.click();
+    }
+
+    /**
+     * Checks if video element is paused
+     */
+    public async isPaused(): Promise<boolean> {
+        return this.page.evaluate((selector: string) => {
+            console.log('Evaluating selector in browser context:', selector); // Logs selector in browser context
+            const xpathResult = document.evaluate(selector, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
+            const video = xpathResult.singleNodeValue as HTMLVideoElement | null;
+            return video.paused;
+        }, this.videoSelector);
+    }
+}

test/e2e/specs/mainPageVideoIsPlaying.spec.ts

@@ -0,0 +1,18 @@
+import { vpTest } from '../fixtures/vpTest';
+import { expect, test } from '@playwright/test';
+import { waitForPageToLoadWithTimeout } from '../src/helpers/waitForPageToLoadWithTimeout';
+
+/**
+ * Testing if video on main page is playing by checking that is pause return false.
+ * The video in the main page is not configured as autoplay so first need to click on play button.
+ */
+vpTest(`Test if video on main page is playing`, async ({ page, vpExamples }) => {
+    await test.step('Click on play button to play video', async () => {
+        //making sure the page is loaded
+        await waitForPageToLoadWithTimeout(page, 5000);
+        return vpExamples.videoMainPage.clickPlay();
+    });
+    await test.step('Validating that the video is playing (in case isPause is false)', async () => {
+        expect(await vpExamples.videoMainPage.isPaused()).toEqual(false);
+    });
+});

test/e2e/src/pom/mainPage.ts

@@ -1,13 +1,17 @@
 import { Page } from '@playwright/test';
+import { VideoComponent } from '../../components/videoComponent';
+const MAIN_PAGE_VIDEO_SELECTOR = '//*[@id="player_html5_api"]';
 
 /**
  * Video player examples main page object
  */
 export class MainPage {
     private page: Page;
+    public videoMainPage: VideoComponent;
 
     constructor(page: Page) {
         this.page = page;
+        this.videoMainPage = new VideoComponent(page, MAIN_PAGE_VIDEO_SELECTOR);
     }
 
     /**