me-17957: test if video on autoplay on scroll page is playing (#763)

* vp test: test if video on autoplay on scroll page is playing

* vp test: remove waitForTimeout and use expect toPass

* vp test: remove waitForTimeout and use expect toPass

* vp test: added BaseComponent and modified accordingly

Author: ShayLevi

test/e2e/components/BaseComponent.ts

@@ -0,0 +1,49 @@
+import { Locator, Page } from '@playwright/test';
+
+/**
+ * Base component constructor interface
+ *
+ * selector is optional in order to allow default selector usage.
+ * For example:
+ *
+ * constructor(dataProps: IBaseComponent) {
+ *     const baseComponentProps: IBaseComponent = dataProps;
+ *     baseComponentProps.selector = dataProps?.selector ??  "//*<SOME DEFAULT SELECTOR>";
+ *     super(baseComponentProps);
+ *     ...
+ *   }
+ */
+export interface IBaseComponent {
+  page: Page;
+  selector: string;
+  parentSelector?: string;
+  iframeSelector?: string;
+}
+/**
+ * Base class for an POM component class
+ * such as buttons, dropList, etc
+ */
+export class BaseComponent {
+  get locator(): Locator {
+    return this._locator;
+  }
+
+  get props(): IBaseComponent {
+    return this._props;
+  }
+
+  private readonly _locator: Locator;
+  private readonly _props: IBaseComponent;
+
+  constructor(basePageProps: IBaseComponent) {
+    if (!basePageProps.selector) {
+      throw Error(`Missing selector in basePageProps`);
+    }
+    const elementSelector: string = basePageProps.parentSelector ? `${basePageProps.parentSelector}${basePageProps.selector}` : basePageProps.selector;
+
+    this._props = basePageProps;
+    this._locator = basePageProps.iframeSelector
+      ? basePageProps.page.frameLocator(basePageProps.iframeSelector).locator(elementSelector)
+      : basePageProps.page.locator(elementSelector);
+  }
+}

test/e2e/components/videoComponent.ts

@@ -1,22 +1,20 @@
 import { Page } from '@playwright/test';
+import { BaseComponent } from './BaseComponent';
 
 /**
  * Video component
  */
-export class VideoComponent {
-    private page: Page;
-    private readonly videoSelector: string;
+export class VideoComponent extends BaseComponent{
 
     constructor(page: Page, videoSelector: string) {
-        this.page = page;
-        this.videoSelector = videoSelector;
+        super({ page, selector: 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")]`);
+        const videoPlayButtonLocator = this.props.page.locator(`${this.props.selector}/following-sibling::button[contains(@class, "vjs-big-play-button")]`);
         // Click the play button to start the video
         return videoPlayButtonLocator.click();
     }
@@ -25,11 +23,11 @@ export class VideoComponent {
      * Checks if video element is paused
      */
     public async isPaused(): Promise<boolean> {
-        return this.page.evaluate((selector: string) => {
+        return this.props.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);
+        }, this.props.selector);
     }
 }

test/e2e/specs/autoplayOnScrollPage.spec.ts

@@ -0,0 +1,30 @@
+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';
+
+// Link to autoplay on scroll page
+const link = getLinkByName(ExampleLinkName.AutoplayOnScroll);
+/**
+ * Testing if video on autoplay on scroll page is playing.
+ * First making sure that video is not playing before scrolling.
+ * Then, scroll until video element is visible and make sure video is playing by checking that is pause return false.
+ */
+vpTest(`Test if video on autoplay on scroll page is playing as expected`, async ({ page, pomPages }) => {
+  await test.step('Navigate to autoplay on scroll page by clicking on link', 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('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 expect(async () => {
+      expect(await pomPages.autoplayOnScrollPage.autoplayOnScrollVideoComponent.isPaused()).toEqual(false);
+    }).toPass({ intervals: [500], timeout: 3000 });
+  })
+});

test/e2e/src/pom/PageManager.ts

@@ -5,6 +5,7 @@ import { MainPage } from './mainPage';
 import { AnalyticsPage } from './analyticsPage';
 import { ApiAndEventsPage } from './apiAndEventsPage';
 import { AudioPlayerPage } from './audioPlayerPage';
+import { AutoplayOnScrollPage } from './autoplayOnScrollPage';
 
 /**
  * Page manager,
@@ -64,5 +65,12 @@ export class PageManager {
     public get audioPlayerPage(): AudioPlayerPage {
         return this.getPage(AudioPlayerPage);
     }
+
+    /**
+     * Returns autoplay on scroll page object
+     */
+    public get autoplayOnScrollPage(): AutoplayOnScrollPage {
+        return this.getPage(AutoplayOnScrollPage);
+    }
 }
 export default PageManager;

test/e2e/src/pom/autoplayOnScrollPage.ts

@@ -0,0 +1,16 @@
+import { Page } from '@playwright/test';
+import { VideoComponent } from '../../components/videoComponent';
+import { BasePage } from './BasePage';
+const AUTOPLAY_ON_SCROLL_PAGE_VIDEO_SELECTOR = '//*[@id="player_html5_api"]';
+
+/**
+ * Video player examples autoplay on scroll page object
+ */
+export class AutoplayOnScrollPage extends BasePage {
+  public autoplayOnScrollVideoComponent: VideoComponent;
+
+  constructor(page: Page) {
+    super(page);
+    this.autoplayOnScrollVideoComponent = new VideoComponent(page, AUTOPLAY_ON_SCROLL_PAGE_VIDEO_SELECTOR);
+  }
+}