Added waitForPageToLoad function

.gitignore

@@ -8,10 +8,10 @@ node_modules
 !.travis.yml
 !.editorconfig
 !.eslintrc.*
+!.vscode
 *.xml
 .settings
 downloads
 *~
 .idea
-.vscode
 errorShots/

.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+    "cucumberautocomplete.steps": [
+        "src/steps/*.js"
+    ],
+    "cucumberautocomplete.syncfeatures": "test/features/*feature",
+    "cucumberautocomplete.strictGherkinCompletion": true,
+    "cucumberautocomplete.smartSnippets": true,
+    "cucumberautocomplete.stepsInvariants": true,
+    "cucumberautocomplete.customParameters": [
+        {
+            "parameter":"(_r(",
+            "value":"("
+        },
+        {
+            "parameter":"${dictionaryObject}",
+            "value":"([a-zA-Z0-9_-]+ from [a-zA-Z0-9_-]+ dictionary|\"[^\"]*\")"
+        },
+        {
+            "parameter":"${pageObject}",
+            "value":"([a-zA-Z0-9_-]+ from [a-zA-Z0-9_-]+ page)"
+        }
+    ],
+}

src/helpers/objects.processor.js

@@ -1,5 +1,6 @@
 /* eslint no-param-reassign: 0 */
 /* eslint no-undef: 0 */
+/* global stepsConfig */
 
 const { _r } = require('./utils');
 
@@ -16,17 +17,17 @@ const dictionaryObjectsParts = '^(?:([a-zA-Z0-9_-]+) from ([a-zA-Z0-9_-]+) dicti
 // Todo do we need this in csp-qa
 function injectInto (locator, injection) {
     const lastInjectionSymbol = injection.slice(-1);
-    const lastLocatorSumbol = locator.slice(-1);
+    const lastLocatorSymbol = locator.slice(-1);
 
     if (lastInjectionSymbol !== ']') {
         // Add ']' to the end of injection only if missing (for backward compatibility)
         injection += ']';
     }
-    if (lastLocatorSumbol === ')') {
+    if (lastLocatorSymbol === ')') {
         // If our locator ends with round brackets
         return injectInto(locator.replace(/\)$/, ''), injection) + ')';
     }
-    if (lastLocatorSumbol === ']') {
+    if (lastLocatorSymbol === ']') {
         if (locator.match(/\[[0-9]+\]$/)) {
             // Locator ends with brackets, which contains some xpath num
             const nums = locator.match(/\[[0-9]+\]$/)[0];
@@ -49,21 +50,21 @@ function pageObjectGetter (str) {
         const page = match[2];
         const object = match[1];
 
-        if (!pages[page]) {
+        if (!stepsConfig.pages[page]) {
             throw new Error(`"${page}" page is missing`);
         }
-        if (!pages[page][object]) {
+        if (!stepsConfig.pages[page][object]) {
             throw new Error(`"${object}" page object is missing for the "${page}" page`);
         }
-        return pages[page][object];
+        return stepsConfig.pages[page][object];
     }
     throw new Error(`Unknown Page Object type for "${str}"`);
 }
 
 function getPageObject (str) {
-    const pageObjectGetterFunc = objectsProcessor.pageObjectGetter || pageObjectGetter;
+    const pageObjectGetterFunc = stepsConfig.objectsProcessor.pageObjectGetter || pageObjectGetter;
     const value = pageObjectGetterFunc(str);
-    const idValue = value.replace(_r(regDynamicId, 'g'), id.getId());
+    const idValue = value.replace(_r(regDynamicId, 'g'), stepsConfig.id.getId());
     const injection = `not(ancestor-or-self::*[contains(@style,"visibility: hidden;")
          or contains(@style,"display: none") or contains(@class,"x-hide-offsets")])`;
     const injectedValue = injectInto(idValue, injection);
@@ -81,13 +82,13 @@ function dictionaryGetter (str) {
         const dictionary = match[2];
         const object = match[1];
 
-        if (!pages[dictionary]) {
+        if (!stepsConfig.pages[dictionary]) {
             throw new Error(`"${dictionary}" page is missing`);
         }
-        if (!pages[dictionary][object]) {
+        if (!stepsConfig.pages[dictionary][object]) {
             throw new Error(`"${object}" page object is missing for the "${dictionary}" page`);
         }
-        return pages[dictionary][object];
+        return stepsConfig.pages[dictionary][object];
     }
     if (match[3] !== undefined) {
         return match[3];
@@ -96,9 +97,9 @@ function dictionaryGetter (str) {
 }
 
 function getDictionaryObject (str) {
-    const dictionaryGetterFunc = objectsProcessor.dictionaryGetter || dictionaryGetter;
+    const dictionaryGetterFunc = stepsConfig.objectsProcessor.dictionaryGetter || dictionaryGetter;
     const value = dictionaryGetterFunc(str);
-    const idValue = value.replace(_r(regDynamicId, 'g'), id.getId());
+    const idValue = value.replace(_r(regDynamicId, 'g'), stepsConfig.id.getId());
 
     return idValue;
 }

src/helpers/wait.for.page.to.load.js

@@ -0,0 +1,34 @@
+/* global stepsConfig */
+
+module.exports = function waitForPageToLoad (callback) {
+    /**
+     * Wait for page to get fully loaded
+     * @param {callback} callback - A callback to run
+     */
+    const timeout = 100;
+    let loaderSelectors = stepsConfig.loaderSelectors;
+
+    let finishedLoadingConditions = function () {
+        // Check if jQuery is present on the page and if any XMLHttpRequests (AJAX) are in progress
+        if (typeof $ !== 'undefined' && $.active) {
+            return false;
+        }
+
+        // Check if any loaders are still present on the page
+        return !loaderSelectors.some((selector) => browser.execute((s) => document.querySelector(s), selector));
+    };
+
+    // If loading of the page was finished - launch callback function
+    if (finishedLoadingConditions()) {
+        callback();
+    }
+
+    // If loading of the page was not finished - relaunch finishedLoadingConditions() each 100 ms
+    let interval = setInterval(function () {
+        if (finishedLoadingConditions()) {
+            clearInterval(interval);
+            callback();
+        }
+    }, timeout);
+
+};

src/steps.conf.js

@@ -0,0 +1,36 @@
+const defaultFinishedLoadingConditions = (loaderSelectors) => {
+    // Check if jQuery is present on the page and if any XMLHttpRequests (AJAX) are in progress
+    if (typeof $ !== 'undefined' && $.active) {
+        return false;
+    }
+
+    // Check if any loaders are still present on the page
+    return !loaderSelectors.some((selector) => browser.execute((s) => document.querySelector(s), selector));
+};
+
+const defaultIdGenerator = () => (new Date()).getTime();
+
+module.exports = function ({
+    loaderSelectors = [], // <string>[] - array of xpath selectors, that will be used by finishedLoadingConditions.
+    finishedLoadingConditions = defaultFinishedLoadingConditions, // <(loaderSelectors) => <boolean>>.
+    pages = {}, // <{[key: string]: {[key: string]: <string>}}> - object, that contains "key" -> "Page object" pairs.
+    defaultIdValue = '', // Default value of steps config Id.
+    idGenerator = defaultIdGenerator, // <() => <string|number>> - function, that will return new generated id.
+    objectsProcessor = {} // objectsProcessor childs could be previded here - see objects.processor.js for more details.
+}) {
+    const id = {
+        value: defaultIdValue || idGenerator.call(this),
+        getId: () => this.value,
+        regenerate: () => {
+            this.value = idGenerator.call(this);
+        }
+    };
+
+    return {
+        loaderSelectors,
+        finishedLoadingConditions: finishedLoadingConditions.bind(this, loaderSelectors),
+        pages,
+        id,
+        objectsProcessor
+    };
+};

src/steps/when.js

@@ -1,13 +1,26 @@
 /* eslint new-cap: 0 */
 
 const { defineSupportCode } = require('cucumber');
-const { dictionaryObject, getDictionaryObject } = require('../helpers/objects.processor');
+const { pageObject, getPageObject, dictionaryObject, getDictionaryObject } = require('../helpers/objects.processor');
 const { _r, getInteger } = require('../helpers/utils');
 
-
 module.exports = function () {
     defineSupportCode(({ When }) => {
 
+        When(_r(`I click ${pageObject}$`), (element) => {
+            /**
+             * Click on the element
+             * @param {pageObject} element - String or "page"."object" to select the element
+             */
+            const locator = getPageObject(element);
+            const el = $(locator);
+
+            // TODO - using of chain here ??
+            el.waitForExist();
+            el.waitForPageToLoad();
+            el.click();
+        });
+
         When(_r(`I wait ${dictionaryObject} ms$`), (timeObject) => {
             /**
              * Wait for specified amount of milliseconds

test/features/show.hide.timeout.feature

@@ -14,4 +14,8 @@ Feature: Present / Not present
     Then txtHeader from main page should be present
     Then I wait txtTimeout from values dictionary ms
     Then divTimeout from main page should not be present
-    Then txtHeader from main page should be present
+    Then txtHeader from main page should be present
+
+  Scenario: I click step should click on the element
+    Given I open "http://localhost:9000"
+    Then I click txtHeader from main page

test/features/window.tab.manipulation.feature

@@ -19,4 +19,3 @@ Feature: Window/tab
     When I open new window
     When I close current tab
     Then txtHeader from main page should be present
-

test/mocha/objects.processor.spec.js

@@ -12,7 +12,10 @@ const { _r } = require('../../src/helpers/utils');
 
 const realId = 12345;
 
-global.pages = {
+// Makes stepsConfig visible globally to use stepsConfig.pages, stepsConfig.id, stepsConfig.loaderSelectors
+global.stepsConfig = {};
+
+global.stepsConfig.pages = {
     main: {
         object: `//div[@id='${dynamicId}']`
     },
@@ -21,7 +24,7 @@ global.pages = {
     }
 };
 
-global.id = {
+global.stepsConfig.id = {
     getId: () => realId
 };
 

test/steps.conf.js

@@ -0,0 +1,16 @@
+// Array of selectors for loaders that appear when page is loaded or XHR/AJAX requests are done
+const loaderSelectors = [
+    'div:not([style*="display: none"])[class*="test-loader"]',
+    'div:not([style*="visibility: hidden"])[class*="test-loader"]'
+];
+
+// Object that contains pathes to all page objects used for tests
+const pages = {
+    main: require('./features/page_objects/main'),
+    values: require('./features/dictionary_objects/values')
+};
+
+module.exports = {
+    loaderSelectors,
+    pages
+};

test/wdio.conf.js

@@ -192,18 +192,14 @@ exports.config = {
         global.assert = chai.assert;
         global.should = chai.should();
 
-        global.pages = {
-            main: require('./features/page_objects/main'),
-            values: require('./features/dictionary_objects/values')
-        };
+        // Makes stepsConfig visible globally to use stepsConfig vars
+        const stepsConfigGenerator = require('../src/steps.conf.js');
+        const stepsConfigPresets = require('./steps.conf.js');
 
-        global.id = {
-            value: '',
-            regenerate: () => this.value === (new Date()).getTime(),
-            getId: () => this.value
-        };
+        global.stepsConfig = stepsConfigGenerator(stepsConfigPresets);
 
-        global.objectsProcessor = {};
+        // Adds browser.waitForPageToLoad() command to wait for page to get fully loaded
+        browser.addCommand('waitForPageToLoad', require('../src/helpers/wait.for.page.to.load.js'));
 
     }
     /**