diff --git a/test/e2e/components/videoComponent.ts b/test/e2e/components/videoComponent.ts new file mode 100644 index 00000000..267d02c5 --- /dev/null +++ b/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 { + 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 { + 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); + } +} diff --git a/test/e2e/specs/mainPageVideoIsPlaying.spec.ts b/test/e2e/specs/mainPageVideoIsPlaying.spec.ts new file mode 100644 index 00000000..b113842e --- /dev/null +++ b/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); + }); +}); diff --git a/test/e2e/src/pom/mainPage.ts b/test/e2e/src/pom/mainPage.ts index a540ebac..dbcd7c58 100644 --- a/test/e2e/src/pom/mainPage.ts +++ b/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); } /**