fix: vrt test cases of popover (#18181)

* fix: vrt test cases of popover * fix: trying test again * fix: testing again * fix: scroll issue * fix: added timeout * fix: added poll * fix: increase timeout * fix: changed time * fix: changed time * fix: change id * fix: testing again * fix: increase timeout * fix: testing again
carbon-design-system · Dec 10, 2024 · a022b9a · a022b9a
1 parent 0a94f86
commit a022b9a
Showing 1 changed file with 61 additions and 1 deletion.
diff --git a/e2e/components/Popover/Popover-test.e2e.js b/e2e/components/Popover/Popover-test.e2e.js
@@ -7,7 +7,7 @@
 
 'use strict';
 
-const { test } = require('@playwright/test');
+const { test, expect } = require('@playwright/test');
 const { themes } = require('../../test-utils/env');
 const { snapshot } = require('../../test-utils/snapshot');
 const { snapshotStory, visitStory } = require('../../test-utils/storybook');
@@ -42,6 +42,21 @@ test.describe('Popover', () => {
         await page.evaluate(() => {
           window.scrollBy(-500, 0); // Scroll 500px to the left
         });
+
+        await expect
+          .poll(
+            async () => {
+              const scrollPosition = await page.evaluate(() => {
+                return window.scrollX;
+              });
+              return scrollPosition;
+            },
+            {
+              timeout: 2000,
+            }
+          )
+          .toBe(1376);
+
         await snapshot(page, {
           component: 'popover',
           story: 'experimental-auto-align-left',
@@ -60,6 +75,21 @@ test.describe('Popover', () => {
         await page.evaluate(() => {
           window.scrollBy(500, 0); // Scroll 500px to the right
         });
+
+        await expect
+          .poll(
+            async () => {
+              const scrollPosition = await page.evaluate(() => {
+                return window.scrollX;
+              });
+              return scrollPosition;
+            },
+            {
+              timeout: 2000,
+            }
+          )
+          .toBe(2376);
+
         await snapshot(page, {
           component: 'popover',
           story: 'experimental-auto-align-right',
@@ -78,6 +108,21 @@ test.describe('Popover', () => {
         await page.evaluate(() => {
           window.scrollBy(0, -350); // Scroll 350px to the top
         });
+
+        await expect
+          .poll(
+            async () => {
+              const scrollPosition = await page.evaluate(() => {
+                return window.scrollY;
+              });
+              return scrollPosition;
+            },
+            {
+              timeout: 2000,
+            }
+          )
+          .toBe(1806);
+
         await snapshot(page, {
           component: 'popover',
           story: 'experimental-auto-align-top',
@@ -96,6 +141,21 @@ test.describe('Popover', () => {
         await page.evaluate(() => {
           window.scrollBy(0, 350); // Scroll 350px to the bottom
         });
+
+        await expect
+          .poll(
+            async () => {
+              const scrollPosition = await page.evaluate(() => {
+                return window.scrollY;
+              });
+              return scrollPosition;
+            },
+            {
+              timeout: 2000,
+            }
+          )
+          .toBe(2506);
+
         await snapshot(page, {
           component: 'popover',
           story: 'experimental-auto-align-bottom',