From 021bd122215f68f1bb0c5db0e20cbe6c2bc7c691 Mon Sep 17 00:00:00 2001
From: shaylevi <shay.levi@cloudinary.com>
Date: Tue, 10 Dec 2024 14:42:24 +0200
Subject: [PATCH] vp test: test if video on autoplay on scroll page is playing

---
 test/e2e/specs/autoplayOnScrollPage.spec.ts | 28 +++++++++++++++++++++
 test/e2e/src/pom/PageManager.ts             |  8 ++++++
 test/e2e/src/pom/autoplayOnScrollPage.ts    | 26 +++++++++++++++++++
 3 files changed, 62 insertions(+)
 create mode 100644 test/e2e/specs/autoplayOnScrollPage.spec.ts
 create mode 100644 test/e2e/src/pom/autoplayOnScrollPage.ts

diff --git a/test/e2e/specs/autoplayOnScrollPage.spec.ts b/test/e2e/specs/autoplayOnScrollPage.spec.ts
new file mode 100644
index 00000000..87369c2a
--- /dev/null
+++ b/test/e2e/specs/autoplayOnScrollPage.spec.ts
@@ -0,0 +1,28 @@
+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.scrollToVideoElement();
+  });
+  await test.step('Validating that the video is auto playing after scrolling (in case isPause is false)', async () => {
+    expect(await pomPages.autoplayOnScrollPage.autoplayOnScrollVideoComponent.isPaused()).toEqual(false);
+  });
+});
diff --git a/test/e2e/src/pom/PageManager.ts b/test/e2e/src/pom/PageManager.ts
index 1bc9e469..fee10058 100644
--- a/test/e2e/src/pom/PageManager.ts
+++ b/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;
diff --git a/test/e2e/src/pom/autoplayOnScrollPage.ts b/test/e2e/src/pom/autoplayOnScrollPage.ts
new file mode 100644
index 00000000..ddb4585a
--- /dev/null
+++ b/test/e2e/src/pom/autoplayOnScrollPage.ts
@@ -0,0 +1,26 @@
+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);
+  }
+  /**
+   * Scrolls the page until the video element is visible using scrollIntoViewIfNeeded method.
+   * This action ensures the autoplay behavior is triggered when the video comes into view.
+   * It waits briefly after scrolling to give the video enough time to load and trigger autoplay.
+   */
+  async scrollToVideoElement() {
+    await this.page.locator(AUTOPLAY_ON_SCROLL_PAGE_VIDEO_SELECTOR).scrollIntoViewIfNeeded();
+    // Wait briefly to give time for the autoplay to apply
+    await this.page.waitForTimeout(1000);
+  }
+}