added custom timeout parameter

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 0.0.14
+- :rocket: added custom timeout parameter
+
 ## 0.0.13
 - :rocket: added JS alert steps
 - :rocket: added _I press button given number of times_ step

README.md

@@ -18,7 +18,8 @@ module.exports = {
         browser: {
             timeout: {
                 present: 10000,
-                visible: 20000    
+                visible: 20000,
+                page: 10000
             },
             capabilities: {
                 browserName: 'chromium'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qavajs/steps-playwright",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "steps to interact with playwright",
   "main": "./index.js",
   "scripts": {
@@ -22,22 +22,22 @@
   },
   "homepage": "https://github.com/qavajs/steps-playwright#readme",
   "devDependencies": {
-    "@cucumber/cucumber": "^8.10.0",
-    "@qavajs/cli": "^0.0.17",
-    "@qavajs/memory": "^1.1.1",
+    "@cucumber/cucumber": "^8.11.1",
+    "@qavajs/cli": "^0.0.18",
+    "@qavajs/memory": "^1.2.0",
     "@qavajs/webstorm-adapter": "^8.0.0",
     "@qavajs/xunit-formatter": "^0.0.3",
     "@types/chai": "^4.3.4",
     "@types/jest": "^29.4.0",
-    "jest": "^29.4.1",
+    "jest": "^29.4.3",
     "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.4",
+    "typescript": "^4.9.5",
     "@qavajs/po-playwright": "^0.0.7"
   },
   "dependencies": {
-    "@playwright/test": "^1.30.0",
-    "@qavajs/validation": "^0.0.2",
-    "playwright": "^1.30.0"
+    "@playwright/test": "^1.31.1",
+    "@qavajs/validation": "^0.0.3",
+    "playwright": "^1.31.1"
   }
 }

src/types.ts

@@ -20,3 +20,10 @@ defineParameterType({
     transformer: p => p,
     useForSnippets: false
 });
+
+defineParameterType({
+    name: 'playwrightTimeout',
+    regexp: /| \(timeout: (\d+)\)/,
+    transformer: p => p ? parseInt(p) : null,
+    useForSnippets: false
+});

src/waits.ts

@@ -5,32 +5,39 @@ import { getValue, getElement, getValueWait, getConditionWait } from './transfor
  * Wait for element condition
  * @param {string} alias - element to wait condition
  * @param {string} wait - wait condition
+ * @param {number|null} [timeout] - custom timeout in ms
  * @example I wait until 'Header' to be visible
  * @example I wait until 'Loading' not to be present
  * @example I wait until 'Search Bar > Submit Button' to be clickable
+ * @example I wait until 'Search Bar > Submit Button' to be clickable (timeout: 3000)
  */
-When('I wait until {string} {playwrightConditionWait}', async function (alias: string, waitType: string) {
-    const wait = getConditionWait(waitType);
-    const element = await getElement(alias);
-    await wait(element, config.browser.timeout.page);
-});
+When(
+    'I wait until {string} {playwrightConditionWait}{playwrightTimeout}',
+        async function (alias: string, waitType: string, timeout: number | null) {
+        const wait = getConditionWait(waitType);
+        const element = await getElement(alias);
+        await wait(element, timeout ? timeout : config.browser.timeout.page);
+    }
+);
 
 /**
  * Wait for element text condition
  * @param {string} alias - element to wait condition
  * @param {string} wait - wait condition
  * @param {string} value - expected value to wait
+ * @param {number|null} [timeout] - custom timeout in ms
  * @example I wait until text of 'Header' to be equal 'Javascript'
  * @example I wait until text of 'Header' not to be equal 'Python'
+ * @example I wait until text of 'Header' to be equal 'Javascript' (timeout: 3000)
  */
 When(
-    'I wait until text of {string} {playwrightValueWait} {string}',
-    async function (alias: string, waitType: string, value: string) {
+    'I wait until text of {string} {playwrightValueWait} {string}{playwrightTimeout}',
+    async function (alias: string, waitType: string, value: string, timeout: number | null) {
         const wait = getValueWait(waitType);
         const element = await getElement(alias);
         const expectedValue = await getValue(value);
         const getValueFn = async () => element.innerText();
-        await wait(getValueFn, expectedValue, config.browser.timeout.page);
+        await wait(getValueFn, expectedValue, timeout ? timeout : config.browser.timeout.page);
     }
 );
 
@@ -39,18 +46,20 @@ When(
  * @param {string} alias - element to wait condition
  * @param {string} wait - wait condition
  * @param {string} value - expected value to wait
+ * @param {number|null} [timeout] - custom timeout in ms
  * @example I wait until number of elements in 'Search Results' collection to be equal '50'
  * @example I wait until number of elements in 'Search Results' collection to be above '49'
  * @example I wait until number of elements in 'Search Results' collection to be below '51'
+ * @example I wait until number of elements in 'Search Results' collection to be below '51' (timeout: 3000)
  */
 When(
-    'I wait until number of elements in {string} collection {playwrightValueWait} {string}',
-    async function (alias: string, waitType: string, value: string) {
+    'I wait until number of elements in {string} collection {playwrightValueWait} {string}{playwrightTimeout}',
+    async function (alias: string, waitType: string, value: string, timeout: number | null) {
         const wait = getValueWait(waitType);
         const collection = await getElement(alias);
         const expectedValue = await getValue(value);
         const getValueFn = async () => collection.count();
-        await wait(getValueFn, expectedValue, config.browser.timeout.page);
+        await wait(getValueFn, expectedValue, timeout ? timeout : config.browser.timeout.page);
     }
 );
 
@@ -60,11 +69,13 @@ When(
  * @param {string} alias - element to wait condition
  * @param {string} wait - wait condition
  * @param {string} value - expected value to wait
+ * @param {number|null} [timeout] - custom timeout in ms
  * @example I wait until 'value' property of 'Search Input' to be equal 'Javascript'
+ * @example I wait until 'value' property of 'Search Input' to be equal 'Javascript' (timeout: 3000)
  */
 When(
-    'I wait until {string} property of {string} {playwrightValueWait} {string}',
-    async function (property: string, alias: string, waitType: string, value: string) {
+    'I wait until {string} property of {string} {playwrightValueWait} {string}{playwrightTimeout}',
+    async function (property: string, alias: string, waitType: string, value: string, timeout: number | null) {
         const propertyName = await getValue(property);
         const wait = getValueWait(waitType);
         const element = await getElement(alias);
@@ -73,7 +84,7 @@ When(
             (node: any, propertyName: string) => node[propertyName],
             propertyName
         );
-        await wait(getValueFn, expectedValue, config.browser.timeout.page);
+        await wait(getValueFn, expectedValue, timeout ? timeout : config.browser.timeout.page);
     }
 );
 
@@ -83,17 +94,19 @@ When(
  * @param {string} alias - element to wait condition
  * @param {string} wait - wait condition
  * @param {string} value - expected value to wait
+ * @param {number|null} [timeout] - custom timeout in ms
  * @example I wait until 'href' attribute of 'Home Link' to be equal '/javascript'
+ * @example I wait until 'href' attribute of 'Home Link' to be equal '/javascript' (timeout: 3000)
  */
 When(
-    'I wait until {string} attribute of {string} {playwrightValueWait} {string}',
-    async function (attribute: string, alias: string, waitType: string, value: string) {
+    'I wait until {string} attribute of {string} {playwrightValueWait} {string}{playwrightTimeout}',
+    async function (attribute: string, alias: string, waitType: string, value: string, timeout: number | null) {
         const attributeName = await getValue(attribute);
         const wait = getValueWait(waitType);
         const element = await getElement(alias);
         const expectedValue = await getValue(value);
         const getValueFn = async () => element.getAttribute(attributeName);
-        await wait(getValueFn, expectedValue, config.browser.timeout.page);
+        await wait(getValueFn, expectedValue, timeout ? timeout : config.browser.timeout.page);
     }
 );
 
@@ -112,32 +125,36 @@ When('I wait {int} ms', async function (ms) {
  * Wait for url condition
  * @param {string} wait - wait condition
  * @param {string} value - expected value to wait
+ * @param {number|null} [timeout] - custom timeout in ms
  * @example I wait until current url to be equal 'https://qavajs.github.io/'
  * @example I wait until current url not to contain 'java'
+ * @example I wait until current url not to contain 'java' (timeout: 3000)
  */
 When(
-    'I wait until current url {playwrightValueWait} {string}',
-    async function (waitType: string, value: string) {
+    'I wait until current url {playwrightValueWait} {string}{playwrightTimeout}',
+    async function (waitType: string, value: string, timeout: number | null) {
         const wait = getValueWait(waitType);
         const expectedValue = await getValue(value);
         const getValueFn = () => page.url();
-        await wait(getValueFn, expectedValue, config.browser.timeout.page);
+        await wait(getValueFn, expectedValue, timeout ? timeout : config.browser.timeout.page);
     }
 );
 
 /**
  * Wait for title condition
  * @param {string} wait - wait condition
  * @param {string} value - expected value to wait
+ * @param {number|null} [timeout] - custom timeout in ms
  * @example I wait until page title to be equal 'qavajs'
  * @example I wait until page title not to contain 'java'
+ * @example I wait until page title to be equal 'qavajs' (timeout: 3000)
  */
 When(
-    'I wait until page title {playwrightValueWait} {string}',
-    async function (waitType: string, value: string) {
+    'I wait until page title {playwrightValueWait} {string}{playwrightTimeout}',
+    async function (waitType: string, value: string, timeout: number | null) {
         const wait = getValueWait(waitType);
         const expectedValue = await getValue(value);
         const getValueFn = async () => page.title();
-        await wait(getValueFn, expectedValue, config.browser.timeout.page);
+        await wait(getValueFn, expectedValue, timeout ? timeout : config.browser.timeout.page);
     }
 );

test-e2e/features/waits.feature

@@ -36,3 +36,38 @@ Feature: waits
 
   Scenario: wait for title
     Then I wait until page title to be equal 'title changed'
+
+  Scenario Outline: wait for condition with timeout
+    Then I wait until '<element>' <condition> (timeout: 3000)
+
+    Examples:
+      | element         | condition         |
+      | Present Element | to be present     |
+      | Detach Element  | not to be present |
+      | Visible Element | to be visible     |
+      | Hidden Element  | to be invisible   |
+
+  Scenario: wait for text with timeout
+    Then I wait until text of 'Loading' to be equal '100%' (timeout: 3000)
+
+  Scenario: wait for property with timeout
+    Then I wait until 'value' property of 'Loading Input' to be equal '100%' (timeout: 3000)
+
+  Scenario: wait for attribute with timeout
+    Then I wait until 'style' attribute of 'Hidden Element' to contain 'hidden' (timeout: 3000)
+
+  Scenario Outline: wait for number of elements in collection with timeout
+    Then I wait until number of elements in 'Wait Collection' collection <condition> '<expected>' (timeout: 3000)
+
+    Examples:
+      | condition   | expected |
+      | to be equal | 10       |
+      | to be above | 8        |
+      | to be below | 5        |
+
+  Scenario: wait for current url with timeout
+    Then I wait until current url to contain '#anchor' (timeout: 3000)
+
+  Scenario: wait for title with timeout
+    Then I wait until page title to be equal 'title changed' (timeout: 3000)
+

test-e2e/webui.ts

@@ -42,5 +42,6 @@ export const debug = {
             dir: 'customDir',
             attach: true
         }
-    }
+    },
+    retry: 1
 }