added capability to perform soft validation of element condition validations (#153)

Author: AlexGalichenko

CHANGELOG.md

@@ -14,6 +14,14 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 
 :microscope: - experimental
 
+
+## [2.6.0]
+- :rocket: added capability to perform soft validation of element condition validations
+```gherkin
+  Scenario Outline: wait for condition
+    Then I expect 'Element' to be softly present
+```
+
 ## [2.5.0]
 Breaking change:
 - :rocket: added step `I will wait for alert/dialog`

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@qavajs/steps-playwright",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "steps to interact with playwright",
   "main": "./index.js",
   "scripts": {
@@ -27,23 +27,24 @@
   "homepage": "https://github.com/qavajs/steps-playwright#readme",
   "devDependencies": {
     "@cucumber/cucumber": "^11.2.0",
-    "@qavajs/core": "^2.4.0",
     "@qavajs/console-formatter": "^1.0.0",
+    "@qavajs/core": "^2.5.0",
     "@qavajs/html-formatter": "^0.18.1",
     "@qavajs/memory": "^1.10.2",
+    "@qavajs/validation": "^1.2.1",
     "@qavajs/webstorm-adapter": "^8.0.0",
-    "@types/chai": "^4.3.20",
+    "@types/chai": "^5.2.2",
     "@types/express": "^5.0.1",
-    "@vitest/coverage-v8": "^3.1.1",
-    "@vitest/ui": "^3.1.1",
-    "electron": "^35.1.5",
+    "@types/node": "^22.15.12",
+    "@vitest/coverage-v8": "^3.1.3",
+    "@vitest/ui": "^3.1.3",
+    "electron": "^36.1.0",
     "express": "^5.1.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.8.3",
-    "vitest": "^3.1.1",
-    "@qavajs/validation": "^1.1.1"
+    "vitest": "^3.1.3"
   },
   "dependencies": {
-    "@playwright/test": "^1.51.1"
+    "@playwright/test": "^1.52.0"
   }
 }

package.json

@@ -1,9 +1,12 @@
 import { Locator, expect } from '@playwright/test';
-import { throwTimeoutError } from './utils/utils';
+
+class SoftAssertionError extends Error {
+    name = 'SoftAssertionError';
+}
 
 export const conditionValidations = {
     PRESENT: 'present',
-    // CLICKABLE: 'clickable',
+    CLICKABLE: 'clickable',
     VISIBLE: 'visible',
     INVISIBLE: 'invisible',
     IN_VIEWPORT: 'in viewport',
@@ -13,57 +16,58 @@ export const conditionValidations = {
 
 const notClause = '(not )?';
 const toBeClause = 'to (?:be )?';
+const softClause = '(softly )?'
 const validationClause = `(${Object.values(conditionValidations).join('|')})`;
 
-export const conditionWaitExtractRegexp = new RegExp(`^${notClause}${toBeClause}${validationClause}$`);
-export const conditionWaitRegexp = new RegExp(`(${notClause}${toBeClause}${validationClause})`);
+export const conditionWaitExtractRegexp = new RegExp(`^${notClause}${toBeClause}${softClause}${validationClause}$`);
 
+const makeExpect = (element: Locator, reverse: boolean, message: string) => {
+    const eMessage = expect(element, message);
+    return reverse ? eMessage.not : eMessage;
+}
 const waits = {
     [conditionValidations.PRESENT]: (
         element: Locator,
         reverse: boolean,
         timeout: number,
         timeoutMsg: string
-    ) => element.waitFor({ state: reverse ? 'detached' : 'attached', timeout }),
+    ) => makeExpect(element, reverse, timeoutMsg).toBeAttached({ timeout }),
     [conditionValidations.VISIBLE]: (
         element: Locator,
         reverse: boolean,
         timeout: number,
         timeoutMsg: string
-    ) => element.waitFor({ state: reverse ? 'hidden' : 'visible', timeout }),
+    ) => makeExpect(element, reverse, timeoutMsg).toBeVisible({ timeout }),
     [conditionValidations.INVISIBLE]: (
         element: Locator,
         reverse: boolean,
         timeout: number,
         timeoutMsg: string
-    ) => element.waitFor({ state: reverse ? 'visible' : 'hidden', timeout }),
+    ) => makeExpect(element, reverse, timeoutMsg).toBeHidden({ 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),
+    ) => makeExpect(element, reverse, timeoutMsg).toBeInViewport({ timeout }),
     [conditionValidations.ENABLED]: (
         element: Locator,
         reverse: boolean,
         timeout: number,
         timeoutMsg: string
-    ) => throwTimeoutError(() => expect(async () => {
-        const e = reverse ? expect(element).not : expect(element);
-        await e.toBeEnabled();
-    }).toPass({ timeout }), timeoutMsg),
+    ) => makeExpect(element, reverse, timeoutMsg).toBeEnabled({ timeout }),
     [conditionValidations.DISABLED]: (
         element: Locator,
         reverse: boolean,
         timeout: number,
         timeoutMsg: string
-    ) => throwTimeoutError(() => expect(async () => {
-        const e = reverse ? expect(element).not : expect(element);
-        await e.toBeDisabled();
-    }).toPass({ timeout }), timeoutMsg)
+    ) => makeExpect(element, reverse, timeoutMsg).toBeDisabled({ timeout }),
+    [conditionValidations.CLICKABLE]: (
+        element: Locator,
+        reverse: boolean,
+        timeout: number,
+        timeoutMsg: string
+    ) => makeExpect(element, reverse, timeoutMsg).toBeEnabled({ timeout }),
 }
 /**
  * Wait for condition
@@ -78,8 +82,22 @@ export async function conditionWait(
     validationType: string,
     timeout: number = 10000,
     reverse: boolean = false
-) {
+): Promise<void> {
     const timeoutMsg: string = `Element is${reverse ? '' : ' not'} ${validationType}`;
     const waitFn = waits[validationType];
     await waitFn(element, reverse, timeout, timeoutMsg);
 }
+
+export function getConditionWait(condition: string): Function {
+    const match = condition.match(conditionWaitExtractRegexp) as RegExpMatchArray;
+    if (!match) throw new Error(`${condition} wait is not implemented`);
+    const [_, reverse, soft, validation] = match;
+    return async function (element: Locator, timeout: number) {
+        try {
+            await conditionWait(element, validation, timeout, Boolean(reverse))
+        } catch (error) {
+            if (soft && error instanceof Error) throw new SoftAssertionError(error.message, { cause: error });
+            throw error;
+        }
+    }
+}

src/conditionWait.ts

@@ -1,15 +1,5 @@
 import { defineParameterType } from '@cucumber/cucumber';
-import { conditionWait, conditionWaitExtractRegexp } from './conditionWait';
-import { type Locator } from '@playwright/test';
-
-export function getConditionWait(condition: string): Function {
-    const match = condition.match(conditionWaitExtractRegexp) as RegExpMatchArray;
-    if (!match) throw new Error(`${condition} wait is not implemented`);
-    const [_, reverse, validation] = match;
-    return async function (element: Locator, timeout: number) {
-        await conditionWait(element, validation, timeout, Boolean(reverse))
-    }
-}
+import { getConditionWait } from './conditionWait';
 
 function transformString(fn: (value: string) => any) {
     return function (s1: string, s2: string) {
@@ -31,7 +21,7 @@ defineParameterType({
 
 defineParameterType({
     name: 'playwrightCondition',
-    regexp: /((not )?to (?:be )?(present|clickable|visible|invisible|enabled|disabled|in viewport))/,
+    regexp: /((not )?to (?:be )?(?:softly )?(present|clickable|visible|invisible|enabled|disabled|in viewport))/,
     transformer: getConditionWait,
     useForSnippets: false
 });

src/types.ts

@@ -56,17 +56,6 @@ export function equalOrIncludes(value: string | string[], argument: string) {
         : 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
-    }
-}
-
 /**
  * Parse 'x, y' string to coordinates object
  * @param {string} coords - 'x, y' string

src/utils/utils.ts

@@ -7,8 +7,12 @@ Feature: waits
     Then I expect '<element>' <condition>
 
     Examples:
-      | element         | condition     |
-      | Present Element | to be present |
+      | element              | condition         |
+      | Present Element      | to be present     |
+      | Detach Element       | not to be present |
+      | Not Existing Element | not to be present |
+      | Visible Element      | to be visible     |
+      | Visible Element      | to be clickable   |
 
   Scenario Outline: wait for text (<condition>)
     Then I expect text of 'Loading' <condition> '<expectation>'

test-e2e/features/pollValidations.feature

@@ -6,7 +6,7 @@
     "test/**/*.spec.ts"
   ],
   "compilerOptions": {
-    "target": "es2018",
+    "target": "es2022",
     "module": "node16",
     "moduleResolution": "node16",
     "outDir": "./lib",