me-18581: refactor specs to use validateVideoIsPlaying (#775)

* vp test: refactor specs to use validateVideoIsPlaying

* vp test: change step description based on review

Author: ShayLevi

test/e2e/components/videoComponent.ts

@@ -1,4 +1,4 @@
-import { Page } from '@playwright/test';
+import { expect, Page } from '@playwright/test';
 import { BaseComponent } from './BaseComponent';
 
 /**
@@ -31,13 +31,12 @@ export class VideoComponent extends BaseComponent {
     }
 
     /**
-     * Validates whether the video is paused or playing.
-     * expectedPaused - True if the video is expected to be paused, otherwise false.
+     * Validates whether the video is currently playing.
+     * This method uses the `isPaused` function to determine the current state of the video.
+     * expectedPlaying - A boolean indicating the expected playback state of the video.
+     * Pass `true` if the video is expected to be playing, or `false` if it is expected to be paused.
      */
-    public async validateVideoPaused(expectedPaused: boolean): Promise<void> {
-        const isPaused = await this.isPaused();
-        if (isPaused !== expectedPaused) {
-            throw new Error(`Video paused state mismatch. Expected: ${expectedPaused}, Actual: ${isPaused}`);
-        }
+    public async validateVideoIsPlaying(expectedPlaying: boolean): Promise<void> {
+        expect(await this.isPaused()).not.toEqual(expectedPlaying);
     }
 }

test/e2e/specs/analyticsPage.spec.ts

@@ -1,5 +1,5 @@
 import { vpTest } from '../fixtures/vpTest';
-import { expect, test } from '@playwright/test';
+import { test } from '@playwright/test';
 import { waitForPageToLoadWithTimeout } from '../src/helpers/waitForPageToLoadWithTimeout';
 import { getLinkByName } from '../testData/pageLinksData';
 import { ExampleLinkName } from '../testData/ExampleLinkNames';
@@ -14,7 +14,7 @@ vpTest(`Test if video on analytics page is playing as expected`, async ({ page,
         await pomPages.mainPage.clickLinkByName(link.name);
         await waitForPageToLoadWithTimeout(page, 5000);
     });
-    await test.step('Validating that the video is playing (in case isPause is false)', async () => {
-        expect(await pomPages.analyticsPage.analyticsVideoComponent.isPaused()).toEqual(false);
+    await test.step('Validating that the video is playing', async () => {
+        await pomPages.analyticsPage.analyticsVideoComponent.validateVideoIsPlaying(true);
     });
 });

test/e2e/specs/apiAndEventsPage.spec.ts

@@ -1,5 +1,5 @@
 import { vpTest } from '../fixtures/vpTest';
-import { expect, test } from '@playwright/test';
+import { test } from '@playwright/test';
 import { waitForPageToLoadWithTimeout } from '../src/helpers/waitForPageToLoadWithTimeout';
 import { getLinkByName } from '../testData/pageLinksData';
 import { ExampleLinkName } from '../testData/ExampleLinkNames';
@@ -14,7 +14,7 @@ vpTest(`Test if video on API and Events page is playing as expected`, async ({ p
         await pomPages.mainPage.clickLinkByName(link.name);
         await waitForPageToLoadWithTimeout(page, 5000);
     });
-    await test.step('Validating that the video is playing (in case isPause is false)', async () => {
-        expect(await pomPages.apiAndEventsPage.apiAndEventsVideoComponent.isPaused()).toEqual(false);
+    await test.step('Validating that the video is playing', async () => {
+        await pomPages.apiAndEventsPage.apiAndEventsVideoComponent.validateVideoIsPlaying(true);
     });
 });

test/e2e/specs/audioPlayerPage.spec.ts

@@ -1,5 +1,5 @@
 import { vpTest } from '../fixtures/vpTest';
-import { expect, test } from '@playwright/test';
+import { test } from '@playwright/test';
 import { waitForPageToLoadWithTimeout } from '../src/helpers/waitForPageToLoadWithTimeout';
 import { getLinkByName } from '../testData/pageLinksData';
 import { ExampleLinkName } from '../testData/ExampleLinkNames';
@@ -14,16 +14,16 @@ vpTest(`Test if 2 videos on audio player page are playing as expected`, async ({
         await pomPages.mainPage.clickLinkByName(link.name);
         await waitForPageToLoadWithTimeout(page, 5000);
     });
-    await test.step('Click on play button of first video player to play video', async () => {
+    await test.step('Click on play button of video player to play video', async () => {
         return pomPages.audioPlayerPage.audioPlayerVideoComponent.clickPlay();
     });
-    await test.step('Validating that the first video is playing (in case isPause is false)', async () => {
-        expect(await pomPages.audioPlayerPage.audioPlayerVideoComponent.isPaused()).toEqual(false);
+    await test.step('Validating that the first video player is playing', async () => {
+        await pomPages.audioPlayerPage.audioPlayerVideoComponent.validateVideoIsPlaying(true);
     });
-    await test.step('Click on play button of second video player to play video', async () => {
+    await test.step('Click on play button of audio player with transformation to play video', async () => {
         return pomPages.audioPlayerPage.audioPlayerWithTransformationVideoComponent.clickPlay();
     });
-    await test.step('Validating that the second video is playing (in case isPause is false)', async () => {
-        expect(await pomPages.audioPlayerPage.audioPlayerWithTransformationVideoComponent.isPaused()).toEqual(false);
+    await test.step('Validating that the audio player with transformation is playing', async () => {
+        await pomPages.audioPlayerPage.audioPlayerWithTransformationVideoComponent.validateVideoIsPlaying(true);
     });
 });

test/e2e/specs/autoplayOnScrollPage.spec.ts

@@ -16,15 +16,15 @@ vpTest(`Test if video on autoplay on scroll page is playing as expected`, async
         await pomPages.mainPage.clickLinkByName(link.name);
         await waitForPageToLoadWithTimeout(page, 5000);
     });
-    await test.step('Validating that the video is not playing before scrolling (in case isPause is true)', async () => {
-        expect(await pomPages.autoplayOnScrollPage.autoplayOnScrollVideoComponent.isPaused()).toEqual(true);
+    await test.step('Validating that the video is not playing before scrolling', async () => {
+        await pomPages.autoplayOnScrollPage.autoplayOnScrollVideoComponent.validateVideoIsPlaying(false);
     });
     await test.step('Scroll until the video element is visible', async () => {
         await pomPages.autoplayOnScrollPage.autoplayOnScrollVideoComponent.locator.scrollIntoViewIfNeeded();
     });
-    await test.step('Validating that the video is auto playing after scrolling (in case isPause is false)', async () => {
+    await test.step('Validating that the video is auto playing after scrolling', async () => {
         await expect(async () => {
-            expect(await pomPages.autoplayOnScrollPage.autoplayOnScrollVideoComponent.isPaused()).toEqual(false);
+            await pomPages.autoplayOnScrollPage.autoplayOnScrollVideoComponent.validateVideoIsPlaying(true);
         }).toPass({ intervals: [500], timeout: 3000 });
     });
 });

test/e2e/specs/chaptersPage.spec.ts

@@ -11,18 +11,18 @@ vpTest(`Test if 3 videos on chapters page are playing as expected`, async ({ pag
         await pomPages.mainPage.clickLinkByName(link.name);
         await waitForPageToLoadWithTimeout(page, 5000);
     });
-    await test.step('Validating that the first video is playing (in case isPause is false)', async () => {
-        expect(await pomPages.chaptersPage.chaptersVttFIleVideoComponent.isPaused()).toEqual(false);
+    await test.step('Validating that chapters vtt file video is playing', async () => {
+        await pomPages.chaptersPage.chaptersVttFIleVideoComponent.validateVideoIsPlaying(true);
     });
-    await test.step('Validating that the second video is playing (in case isPause is false)', async () => {
-        expect(await pomPages.chaptersPage.chaptersConfigObjectVideoComponent.isPaused()).toEqual(false);
+    await test.step('Validating that chapters config object video is playing', async () => {
+        await pomPages.chaptersPage.chaptersConfigObjectVideoComponent.validateVideoIsPlaying(true);
     });
-    await test.step('Scroll until the third video element is visible', async () => {
+    await test.step('Scroll until chapters auto vtt file video element is visible', async () => {
         await pomPages.chaptersPage.chapterAutoVttFileVideoComponent.locator.scrollIntoViewIfNeeded();
     });
-    await test.step('Validating that the third video is playing (in case isPause is false)', async () => {
+    await test.step('Validating that chapters auto vtt file video is playing', async () => {
         await expect(async () => {
-            expect(await pomPages.chaptersPage.chapterAutoVttFileVideoComponent.isPaused()).toEqual(false);
+            await pomPages.chaptersPage.chapterAutoVttFileVideoComponent.validateVideoIsPlaying(true);
         }).toPass({ intervals: [500], timeout: 3000 });
     });
 });

test/e2e/specs/cldAnalyticsPage.spec.ts

@@ -11,26 +11,26 @@ vpTest(`Test if 4 videos on Cloudinary analytics page are playing as expected`,
         await pomPages.mainPage.clickLinkByName(link.name);
         await waitForPageToLoadWithTimeout(page, 5000);
     });
-    await test.step('Validating that the first video is playing (in case isPause is false)', async () => {
-        expect(await pomPages.cldAnalyticsPage.cldAnalyticsVideoComponent.validateVideoPaused(false));
+    await test.step('Validating that Cloudinary analytics video is playing', async () => {
+        await pomPages.cldAnalyticsPage.cldAnalyticsVideoComponent.validateVideoIsPlaying(true);
     });
-    await test.step('Validating that the second video is playing (in case isPause is false)', async () => {
-        expect(await pomPages.cldAnalyticsPage.cldAnalyticsAdpVideoComponent.validateVideoPaused(false));
+    await test.step('Validating that Cloudinary analytics ADP video is playing', async () => {
+        await pomPages.cldAnalyticsPage.cldAnalyticsAdpVideoComponent.validateVideoIsPlaying(true);
     });
-    await test.step('Scroll until the third video element is visible', async () => {
+    await test.step('Scroll until Cloudinary analytics custom data object video element is visible', async () => {
         await pomPages.cldAnalyticsPage.cldAnalyticsCustomDataObjectVideoComponent.locator.scrollIntoViewIfNeeded();
     });
-    await test.step('Validating that the third video is playing (in case isPause is false)', async () => {
+    await test.step('Validating that Cloudinary analytics custom data object video is playing', async () => {
         await expect(async () => {
-            expect(await pomPages.cldAnalyticsPage.cldAnalyticsCustomDataObjectVideoComponent.validateVideoPaused(false));
+            await pomPages.cldAnalyticsPage.cldAnalyticsCustomDataObjectVideoComponent.validateVideoIsPlaying(true);
         }).toPass({ intervals: [500], timeout: 3000 });
     });
-    await test.step('Scroll until the fourth video element is visible', async () => {
+    await test.step('Scroll until Cloudinary analytics custom data function video element is visible', async () => {
         await pomPages.cldAnalyticsPage.cldAnalyticsCustomDataFunctionVideoComponent.locator.scrollIntoViewIfNeeded();
     });
-    await test.step('Validating that the fourth video is playing (in case isPause is false)', async () => {
+    await test.step('Validating that Cloudinary analytics custom data function video is playing', async () => {
         await expect(async () => {
-            expect(await pomPages.cldAnalyticsPage.cldAnalyticsCustomDataFunctionVideoComponent.validateVideoPaused(false));
+            await pomPages.cldAnalyticsPage.cldAnalyticsCustomDataFunctionVideoComponent.validateVideoIsPlaying(true);
         }).toPass({ intervals: [500], timeout: 3000 });
     });
 });

test/e2e/specs/codecsAndFormats.spec.ts

@@ -11,18 +11,18 @@ vpTest(`Test if 3 videos on codecs and formats page are playing as expected`, as
         await pomPages.mainPage.clickLinkByName(link.name);
         await waitForPageToLoadWithTimeout(page, 5000);
     });
-    await test.step('Validating that the first video is playing (in case isPause is false)', async () => {
-        expect(await pomPages.codecsAndFormatsPage.codecsAndFormatsFAutoVideoComponent.validateVideoPaused(false));
+    await test.step('Validating that f_auto video is playing', async () => {
+        await pomPages.codecsAndFormatsPage.codecsAndFormatsFAutoVideoComponent.validateVideoIsPlaying(true);
     });
-    await test.step('Validating that the second video is playing (in case isPause is false)', async () => {
-        expect(await pomPages.codecsAndFormatsPage.codecsAndFormatsAv1VideoComponent.validateVideoPaused(false));
+    await test.step('Validating that AV1 video is playing', async () => {
+        await pomPages.codecsAndFormatsPage.codecsAndFormatsAv1VideoComponent.validateVideoIsPlaying(true);
     });
-    await test.step('Scroll until the third video element is visible', async () => {
+    await test.step('Scroll until VP9 video element is visible', async () => {
         await pomPages.codecsAndFormatsPage.codecsAndFormatsVp9VideoComponent.locator.scrollIntoViewIfNeeded();
     });
-    await test.step('Validating that the third video is playing (in case isPause is false)', async () => {
+    await test.step('Validating that VP9 video is playing', async () => {
         await expect(async () => {
-            expect(await pomPages.codecsAndFormatsPage.codecsAndFormatsVp9VideoComponent.validateVideoPaused(false));
+            await pomPages.codecsAndFormatsPage.codecsAndFormatsVp9VideoComponent.validateVideoIsPlaying(true);
         }).toPass({ intervals: [500], timeout: 3000 });
     });
 });

test/e2e/specs/colorsApiPage.spec.ts

@@ -11,18 +11,18 @@ vpTest(`Test if 3 videos on colors API page are playing as expected`, async ({ p
         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 modified color video is playing', async () => {
+        await pomPages.colorsApiPage.colorsApiColorSkinVideoComponent.validateVideoIsPlaying(true);
     });
-    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('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 (in case isPause is false)', async () => {
+    await test.step('Validating that light skin video is playing', async () => {
         await expect(async () => {
-            expect(await pomPages.colorsApiPage.colorsApiLightSkinVideoComponent.validateVideoPaused(false));
+            await pomPages.colorsApiPage.colorsApiLightSkinVideoComponent.validateVideoIsPlaying(true);
         }).toPass({ intervals: [500], timeout: 3000 });
     });
 });

test/e2e/specs/componentsPage.spec.ts

@@ -1,5 +1,5 @@
 import { vpTest } from '../fixtures/vpTest';
-import { expect, test } from '@playwright/test';
+import { test } from '@playwright/test';
 import { waitForPageToLoadWithTimeout } from '../src/helpers/waitForPageToLoadWithTimeout';
 import { getLinkByName } from '../testData/pageLinksData';
 import { ExampleLinkName } from '../testData/ExampleLinkNames';
@@ -11,7 +11,7 @@ vpTest(`Test if video on components page is playing as expected`, async ({ page,
         await pomPages.mainPage.clickLinkByName(link.name);
         await waitForPageToLoadWithTimeout(page, 5000);
     });
-    await test.step('Validating that components video is playing (in case isPause is false)', async () => {
-        expect(await pomPages.componentsPage.componentsVideoComponent.validateVideoPaused(false));
+    await test.step('Validating that components video is playing', async () => {
+        await pomPages.componentsPage.componentsVideoComponent.validateVideoIsPlaying(true);
     });
 });