added in viewport validation

CHANGELOG.md

@@ -6,6 +6,7 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 
 ## [0.0.19]
 - :rocket: added to match value wait
+- :rocket: added in viewport validation
 
 ## [0.0.18]
 - :rocket: added interceptor steps

package.json

@@ -24,7 +24,7 @@
   "homepage": "https://github.com/qavajs/steps-playwright#readme",
   "devDependencies": {
     "@cucumber/cucumber": "^9.1.0",
-    "@qavajs/cli": "^0.0.20",
+    "@qavajs/cli": "^0.0.21",
     "@qavajs/console-formatter": "^0.2.1",
     "@qavajs/memory": "^1.2.1",
     "@qavajs/po-playwright": "^0.0.8",

src/conditionWait.ts

@@ -1,10 +1,13 @@
-import { Locator } from "playwright";
+import { Locator } from 'playwright';
+import { expect } from '@playwright/test';
+import {throwTimeoutError} from './utils/utils';
 
 export const conditionValidations = {
     PRESENT: 'present',
     // CLICKABLE: 'clickable',
     VISIBLE: 'visible',
     INVISIBLE: 'invisible',
+    IN_VIEWPORT: 'in viewport',
     // ENABLED: 'enabled',
     // DISABLED: 'disabled'
 }
@@ -34,7 +37,16 @@ const waits = {
         reverse: boolean,
         timeout: number,
         timeoutMsg: string
-    ) => element.waitFor({state: reverse ? 'visible' : 'hidden', timeout})
+    ) => element.waitFor({state: reverse ? 'visible' : 'hidden', timeout}),
+    [conditionValidations.IN_VIEWPORT]: (
+        element: Locator,
+        reverse: boolean,
+        timeout: number,
+        timeoutMsg: string
+    ) => throwTimeoutError(() => expect(async () => {
+        const e = reverse ? expect(element).not : expect(element);
+        await e.toBeInViewport();
+    }).toPass({ timeout }), timeoutMsg)
 }
 /**
  * Wait for condition

src/types.ts

@@ -16,7 +16,7 @@ defineParameterType({
 
 defineParameterType({
     name: 'playwrightConditionWait',
-    regexp: /((not )?to (?:be )?(present|clickable|visible|invisible|enabled|disabled))/,
+    regexp: /((not )?to (?:be )?(present|clickable|visible|invisible|enabled|disabled|in viewport))/,
     transformer: p => p,
     useForSnippets: false
 });

src/utils/utils.ts

@@ -1,7 +1,7 @@
-import { ScreenshotEvent } from './screenshotEvent';
-import { TraceEvent } from './traceEvent';
-import { Status, ITestStepHookParameter, ITestCaseHookParameter } from '@cucumber/cucumber';
-import { join } from 'path';
+import {ScreenshotEvent} from './screenshotEvent';
+import {TraceEvent} from './traceEvent';
+import {Status, ITestStepHookParameter, ITestCaseHookParameter} from '@cucumber/cucumber';
+import {join} from 'path';
 
 export function saveScreenshotAfterStep(config: any, step: ITestStepHookParameter): boolean {
     const isAfterStepScreenshot = equalOrIncludes(config.screenshot, ScreenshotEvent.AFTER_STEP);
@@ -45,3 +45,15 @@ export function equalOrIncludes(value: string | string[], argument: string) {
         ? value.includes(argument)
         : value === argument;
 }
+
+export async function throwTimeoutError(fn: Function, message: string) {
+    try {
+        await fn()
+    } catch (err: any) {
+        if (err.message.includes('exceeded while waiting on the predicate')) {
+            throw new Error(message);
+        }
+        throw err
+    }
+
+}

src/validations.ts

@@ -1,6 +1,6 @@
-import {Then} from '@cucumber/cucumber';
-import {getValue, getElement, getConditionWait} from './transformers';
-import {getValidation} from '@qavajs/validation';
+import { Then } from '@cucumber/cucumber';
+import { getValue, getElement, getConditionWait } from './transformers';
+import { getValidation } from '@qavajs/validation';
 
 /**
  * Verify element condition

test-e2e/features/waits.feature

@@ -12,6 +12,7 @@ Feature: waits
       | Detach Element  | not to be present |
       | Visible Element | to be visible     |
       | Hidden Element  | to be invisible   |
+      | Visible Element | to be in viewport |
 
   Scenario Outline: wait for text (<condition>)
     Then I wait until text of 'Loading' <condition> '<expectation>'