added _I scroll until {string} to be visible_ step

CHANGELOG.md

@@ -8,6 +8,10 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 :beetle: - bugfix
 :x: - deprecation
 
+## [0.43.0]
+- :rocket: added _I scroll until {string} to be visible_ step
+- :rocket: added _I scroll in {string} until {string} to be visible_ step
+
 ## [0.42.0]
 - :rocket: added _I tap {string}_ step
 ```gherkin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qavajs/steps-playwright",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "description": "steps to interact with playwright",
   "main": "./index.js",
   "scripts": {
@@ -35,13 +35,13 @@
     "@qavajs/webstorm-adapter": "^8.0.0",
     "@types/chai": "^4.3.11",
     "@types/express": "^4.17.21",
-    "@vitest/coverage-v8": "^1.0.4",
-    "@vitest/ui": "^1.0.4",
+    "@vitest/coverage-v8": "^1.1.1",
+    "@vitest/ui": "^1.1.1",
     "electron": "^27.1.3",
     "express": "^4.18.2",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3",
-    "vitest": "^1.0.4"
+    "vitest": "^1.1.1"
   },
   "dependencies": {
     "@playwright/test": "^1.40.1",

src/actions.ts

@@ -2,7 +2,7 @@ import { When } from '@cucumber/cucumber';
 import { getValue, getElement } from './transformers';
 import { po } from '@qavajs/po-playwright';
 import { expect } from '@playwright/test';
-import { parseCoords, parseCoordsAsObject } from './utils/utils';
+import { parseCoords, parseCoordsAsObject, sleep } from './utils/utils';
 import { Browser, BrowserContext, Page } from 'playwright';
 
 declare global {
@@ -266,9 +266,7 @@ When(
  */
 When('I scroll by {string}', async function (offset: string) {
     const [x, y] = parseCoords(await getValue(offset));
-    await page.evaluate(function (coords) {
-        window.scrollBy(...coords as [number, number]);
-    }, [x, y]);
+    await page.mouse.wheel(x, y);
 });
 
 /**
@@ -289,11 +287,41 @@ When('I scroll to {string}', async function (alias) {
  * When I scroll by '0, 100' in 'Overflow Container'
  */
 When('I scroll by {string} in {string}', async function (offset: string, alias: string) {
-    const coords = parseCoords(await getValue(offset));
+    const [x, y] = parseCoords(await getValue(offset));
     const element = await getElement(alias);
-    await element.evaluate(function (element, coords) {
-        element.scrollBy(...coords as [number, number]);
-    }, coords);
+    await element.hover();
+    await page.mouse.wheel(x, y);
+});
+
+/**
+ * Scroll until specified element to be visible
+ * @param {string} - target element
+ * @example
+ * When I scroll until 'Row 99' to be visible
+ */
+When('I scroll until {string} to be visible', async function (targetAlias: string) {
+    const isVisible = async () => await (await getElement(targetAlias)).isVisible();
+    while (!await isVisible()) {
+        await page.mouse.wheel(0, 100);
+        await sleep(50);
+    }
+});
+
+/**
+ * Scroll in container until specified element to be visible
+ * @param {string} - scroll container
+ * @param {string} - target element
+ * @example
+ * When I scroll in 'List' until 'Row 99' to be visible
+ */
+When('I scroll in {string} until {string} to be visible', async function (scrollAlias: string, targetAlias: string) {
+    const element = await getElement(scrollAlias);
+    await element.hover();
+    const isVisible = async () => await (await getElement(targetAlias)).isVisible();
+    while (!await isVisible()) {
+        await page.mouse.wheel(0, 100);
+        await sleep(50);
+    }
 });
 
 /**
@@ -331,7 +359,7 @@ When('I accept alert', async function () {
     await new Promise<void>((resolve)=> page.once('dialog', async (dialog) => {
         await dialog.accept();
         resolve();
-    }))
+    }));
 });
 
 /**

src/utils/utils.ts

@@ -74,3 +74,7 @@ export function parseCoordsAsObject(coords: string): { x: number, y: number } {
     const [x, y] = coords.split(/\s?,\s?/).map((c: string) => parseFloat(c ?? 0));
     return {x, y}
 }
+
+export async function sleep(ms: number) {
+    await new Promise(resolve => setTimeout(() => resolve(0), ms));
+}