me-17976: tests if videos are playing on subtitles and captions page (#…

…792)

* vp test: tests if videos are playing on subtitles and captions page

* vp test: modify changes based on review

test/e2e/specs/subtitlesAndCaptionsPage.spec.ts

@@ -0,0 +1,44 @@
+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';
+
+const link = getLinkByName(ExampleLinkName.SubtitlesAndCaptions);
+
+vpTest(`Test if 5 videos on subtitles and captions page are playing as expected`, async ({ page, pomPages }) => {
+    await test.step('Navigate to subtitles and captions page by clicking on link', async () => {
+        await pomPages.mainPage.clickLinkByName(link.name);
+        await waitForPageToLoadWithTimeout(page, 5000);
+    });
+    await test.step('Click on play button of srt and vtt video to play video', async () => {
+        return pomPages.subtitlesAndCaptionsVideosPage.srtAndVttVideoComponent.clickPlay();
+    });
+    await test.step('Validating that srt and vtt video is playing', async () => {
+        await pomPages.subtitlesAndCaptionsVideosPage.srtAndVttVideoComponent.validateVideoIsPlaying(true);
+    });
+    await test.step('Click on play button of playlist subtitles video to play video', async () => {
+        return pomPages.subtitlesAndCaptionsVideosPage.playlistSubtitlesVideoComponent.clickPlay();
+    });
+    await test.step('Validating that playlist subtitles video is playing', async () => {
+        await pomPages.subtitlesAndCaptionsVideosPage.playlistSubtitlesVideoComponent.validateVideoIsPlaying(true);
+    });
+    await test.step('Click on play button of paced and styled captions video to play video', async () => {
+        return pomPages.subtitlesAndCaptionsVideosPage.pacedStyledVideoComponent.clickPlay();
+    });
+    await test.step('Validating that paced and styled captions video is playing', async () => {
+        await pomPages.subtitlesAndCaptionsVideosPage.pacedStyledVideoComponent.validateVideoIsPlaying(true);
+    });
+    await test.step('Click on play button of karaoke video to play video', async () => {
+        return pomPages.subtitlesAndCaptionsVideosPage.karaokeVideoComponent.clickPlay();
+    });
+    await test.step('Validating that karaoke video is playing', async () => {
+        await pomPages.subtitlesAndCaptionsVideosPage.karaokeVideoComponent.validateVideoIsPlaying(true);
+    });
+    await test.step('Click on play button of translated transcript video to play video', async () => {
+        return pomPages.subtitlesAndCaptionsVideosPage.translatedTranscriptVideoComponent.clickPlay();
+    });
+    await test.step('Validating that translated transcript video is playing', async () => {
+        await pomPages.subtitlesAndCaptionsVideosPage.translatedTranscriptVideoComponent.validateVideoIsPlaying(true);
+    });
+});

test/e2e/src/pom/PageManager.ts

@@ -24,6 +24,7 @@ import { RawUrlPage } from './rawUrlPage';
 import { RecommendationsPage } from './recommendationsPage';
 import { SeekThumbnailsPage } from './seekThumbnailsPage';
 import { ShoppableVideosPage } from './shoppableVideosPage';
+import { SubtitlesAndCaptionsPage } from './subtitlesAndCaptionsPage';
 
 /**
  * Page manager,
@@ -171,5 +172,9 @@ export class PageManager {
     public get shoppableVideosPage(): ShoppableVideosPage {
         return this.getPage(ShoppableVideosPage);
     }
+
+    public get subtitlesAndCaptionsVideosPage(): SubtitlesAndCaptionsPage {
+        return this.getPage(SubtitlesAndCaptionsPage);
+    }
 }
 export default PageManager;

test/e2e/src/pom/subtitlesAndCaptionsPage.ts

@@ -0,0 +1,27 @@
+import { Page } from '@playwright/test';
+import { VideoComponent } from '../../components/videoComponent';
+import { BasePage } from './BasePage';
+const SRT_AND_VTT_VIDEO_SELECTOR = '//*[@id="player_html5_api"]';
+const PLAYLIST_SUBTITLES_VIDEO_SELECTOR = '//*[@id="playlist_html5_api"]';
+const PACED_STYLES_CAPTIONS_VIDEO_SELECTOR = '//*[@id="paced_html5_api"]';
+const KARAOKE_VIDEO_SELECTOR = '//*[@id="karaoke_html5_api"]';
+const TRANSLATED_TRANSCRIPT_VIDEO_SELECTOR = '//*[@id="translated-transcript_html5_api"]';
+/**
+ * Video player examples subtitles and captions page object
+ */
+export class SubtitlesAndCaptionsPage extends BasePage {
+    public srtAndVttVideoComponent: VideoComponent;
+    public playlistSubtitlesVideoComponent: VideoComponent;
+    public pacedStyledVideoComponent: VideoComponent;
+    public karaokeVideoComponent: VideoComponent;
+    public translatedTranscriptVideoComponent: VideoComponent;
+
+    constructor(page: Page) {
+        super(page);
+        this.srtAndVttVideoComponent = new VideoComponent(page, SRT_AND_VTT_VIDEO_SELECTOR);
+        this.playlistSubtitlesVideoComponent = new VideoComponent(page, PLAYLIST_SUBTITLES_VIDEO_SELECTOR);
+        this.pacedStyledVideoComponent = new VideoComponent(page, PACED_STYLES_CAPTIONS_VIDEO_SELECTOR);
+        this.karaokeVideoComponent = new VideoComponent(page, KARAOKE_VIDEO_SELECTOR);
+        this.translatedTranscriptVideoComponent = new VideoComponent(page, TRANSLATED_TRANSCRIPT_VIDEO_SELECTOR);
+    }
+}