Add "I wait for network idle for {int} ms" step (#128)

ALegchilov · web-flow · commit f311d0864a19 · 2024-09-03T16:53:37.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,9 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 :pencil: - chore
 :microscope: - experimental
 
+## [0.52.0]
+- :rocket: added _I wait for network idle {playwrightTimeout}_ step
+
 ## [0.51.0]
 Breaking change:
 - :rocket: include page objects into step bundle
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qavajs/steps-playwright",
-  "version": "0.51.0",
+  "version": "0.52.0",
   "description": "steps to interact with playwright",
   "main": "./index.js",
   "scripts": {
@@ -41,7 +41,8 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.5.4",
     "vitest": "^2.0.5",
-    "@qavajs/validation": "^0.10.0"
+    "@qavajs/validation": "^0.10.0",
+    "@qavajs/steps-memory": "^0.17.0"
   },
   "dependencies": {
     "@playwright/test": "^1.46.0",
diff --git a/src/IQavajsPlaywrightConfig.ts b/src/IQavajsPlaywrightConfig.ts
@@ -35,6 +35,16 @@ export interface IQavajsPlaywrightConfig {
        * }
        */
       page?: number,
+      /**
+       * Network inactivity timeout
+       *
+       * default: 500
+       * @example
+       * export default {
+       *     networkIdle: 2_000
+       * }
+       */
+      networkIdle?: number,
       /**
        * Element value timeout
        *
diff --git a/src/waits.ts b/src/waits.ts
@@ -363,3 +363,35 @@ When(
         });
     }
 );
+
+/**
+ * Wait for absence of network activity during specified period of time
+ * @param {number} timeout - wait condition
+ * @example I wait for network idle for 1000 ms
+ */
+When('I wait for network idle {playwrightTimeout}', async function (timeoutValue: number | null) {
+  const timeout = timeoutValue ?? config.browser.timeout.networkIdle ?? 500
+    return new Promise((resolve) => {
+        let timerId: any = setTimeout(() => {
+         cleanupAndResolve();
+        }, timeout);
+
+        const resetTimer = () => {
+          clearTimeout(timerId);
+          timerId = setTimeout(() => {
+            cleanupAndResolve();
+          }, timeout);
+        };
+
+        page.on('request', resetTimer);
+        page.on('requestfinished', resetTimer);
+        page.on('requestfailed', resetTimer);
+
+        const cleanupAndResolve = () => {
+          page.removeListener('request', resetTimer);
+          page.removeListener('requestfinished', resetTimer);
+          page.removeListener('requestfailed', resetTimer);
+          resolve(0);
+        };
+    });
+})
diff --git a/test-e2e/apps/waits.html b/test-e2e/apps/waits.html
@@ -5,6 +5,8 @@
     <title>Title</title>
 </head>
 <body>
+<button id="fetchButton">Fetch</button>
+<div id="fetchResult">undefined</div>
 <button id="enabledButton">Enabled Button</button>
 <button id="disabledButton" disabled>Disabled Button</button>
 <div id="containerPresent"></div>
@@ -38,16 +40,22 @@
 <script>
     let counter = 0;
     const timeout = 1700;
+    const fetchButton = document.querySelector('#fetchButton');
+    const fetchResult = document.querySelector('#fetchResult');
     const containerPresent = document.querySelector('#containerPresent');
     const randomTextDiv = document.querySelector('#randomText');
     const randomBoolean = Date.now() % 2 === 0;
     const text = randomBoolean ? 'You are lucky' : 'Not this time';
     const flipCoin = document.querySelector('#flipCoin');
     const coin = document.querySelector('#coin');
-    const pseudoRandomCoin = ['Tails', 'Tails', 'Heads']
+    const pseudoRandomCoin = ['Tails', 'Tails', 'Heads'];
     const plusButton = document.querySelector('#plusButton');
     const digitInput = document.querySelector('#digitInput');
 
+    fetchButton.addEventListener('click', function () {
+        fetch('https://jsonplaceholder.typicode.com/comments').then(() => setTimeout(() => fetchResult.innerText = 'data received', 2000));
+    });
+
     randomTextDiv.innerText = text;
     if (randomBoolean) {
         const button = document.querySelector('#isDisabledButton');
diff --git a/test-e2e/features/waits.feature b/test-e2e/features/waits.feature
@@ -115,3 +115,10 @@ Feature: waits
 
   Scenario: click until value
     Then I click 'Plus Button' until value of 'Digit Input' to equal '4'
+
+  Scenario: wait for network idle
+    When I set 2000 ms delayed mock for '**/comments' request
+    And I click 'Fetch Button'
+    And I wait for network idle (timeout: 2200)
+    And I save text of 'Fetch Result' as 'text'
+    Then I expect '$text' to equal 'data received'
diff --git a/test-e2e/page_object/index.ts b/test-e2e/page_object/index.ts
@@ -58,6 +58,8 @@ export default class App {
     Coin = $('#coin');
     DigitInput = $('#digitInput');
     PlusButton = $('#plusButton');
+    FetchButton = $('#fetchButton');
+    FetchResult = $('#fetchResult');
 
     // Electron
     OpenNewWindowElectronButton = $('#electronButton');
diff --git a/test-e2e/step-definitions/index.ts b/test-e2e/step-definitions/index.ts
@@ -1,6 +1,8 @@
 import { Then } from '@cucumber/cucumber';
 import memory from '@qavajs/memory';
 import { Page, expect } from '@playwright/test';
+import {getElement} from "../../src/transformers";
+import {getValidation} from "@qavajs/validation";
 
 declare global {
     var page: Page;
@@ -29,3 +31,13 @@ Then('I expect viewport size to equal {string}', async function (expectedSize) {
     const actualValue = page.viewportSize();
     expect(actualValue).toEqual(expectedValue);
 })
+
+Then('I set {int} ms delayed mock for {string} request', async function (delay: number, glob: string) {
+    await page.route(glob, async (route) => {
+        setTimeout(async () => await route.fulfill({
+          status: 200,
+          contentType: 'text/plain',
+          body: 'Everything is okay'
+        }), delay);
+    });
+})
diff --git a/test-e2e/webui.ts b/test-e2e/webui.ts
@@ -6,6 +6,7 @@ const common = {
     paths: ['test-e2e/features/*.feature'],
     require: [
         'test-e2e/step-definitions/*.ts',
+        'node_modules/@qavajs/steps-memory/index.js',
         'src/*.ts',
     ],
     browser: {
