@cuppet/core 1.0.0

package/features/app/stepDefinitions/generalSteps.js

@@ -0,0 +1,98 @@
+const { Given, When, Then } = require('@cucumber/cucumber');
+const utils = require('../../../src/elementInteraction');
+const main = require('../../../src/mainFunctions');
+const dataStorage = require('../../../src/dataStorage');
+const config = require('config');
+
+Given('I go to {string}', async function (path) {
+    const pathToVisit = await dataStorage.checkForMultipleVariables(path);
+    await main.visitPath(this.page, pathToVisit);
+});
+Given('I go to {string} page', async function (path) {
+    const pathFromConfig = config.get(path);
+    await main.visitPath(this.page, pathFromConfig);
+});
+Given('I go to current page plus {string}', async function (path) {
+    await main.visitCurrentPathPlus(this.page, path);
+});
+Given('I go to {string} path of {string} page', async function (path, page) {
+    const configPage = await config.get(page);
+    const checkedPath = await dataStorage.checkForVariable(path);
+    await main.visitPath(this.page, configPage + checkedPath);
+});
+Given('I visit the saved path {string}', async function (path) {
+    const savedPath = dataStorage.getVariable(path);
+    await main.visitPath(this.page, savedPath);
+});
+Given('I visit saved path page', async function () {
+    const path = await dataStorage.getVariable('path');
+    await main.visitPath(this.page, path);
+});
+Given('I log in', async function () {
+    const userName = config.get('credentials.username');
+    const password = config.get('credentials.password');
+    await utils.fillField(this.page, this.commonFields['Name'], userName);
+    await utils.fillField(this.page, this.commonFields['Pass'], password);
+    const navigationPromise = this.page.waitForNavigation();
+    await utils.click(this.page, this.commonFields['Submit']);
+    await navigationPromise;
+});
+Given('I log in as {string} {string}', async function (username, password) {
+    await utils.fillField(this.page, this.commonFields['Name'], username);
+    await utils.fillField(this.page, this.commonFields['Pass'], password);
+    const navigationPromise = this.page.waitForNavigation();
+    await utils.click(this.page, this.commonFields['Submit']);
+    await navigationPromise;
+});
+Given('I follow {string}', async function (text) {
+    await utils.followLink(this.page, text);
+});
+Given('I reload the page', async function () {
+    await main.reloadPage(this.page);
+});
+Given('I reload the current page with GET parameters {string}', async function (params) {
+    await main.reloadPageWithParams(this.page, params);
+});
+Given(
+    'I receive the following status code {string} when requesting the {string} path of the {string} page',
+    async function (code, path, page) {
+        const configPage = await config.get(page);
+        await main.validateStatusCode(this.page, code, configPage + path);
+    }
+);
+Given('I open new tab with {string} url', async function (url) {
+    this.page = await main.openNewTab(this.browser, url);
+});
+When('I should be on {string} page', async function (page) {
+    const configPage = await config.get(page);
+    main.validatePath(this.page, configPage);
+});
+When('I should be on the {string} path of {string} page', async function (path, page) {
+    const configPage = await config.get(page);
+    main.validatePath(this.page, configPage + path);
+});
+When('I should be on a page with alias ending in {string}', async function (path) {
+    main.validatePathEnding(this.page, path);
+});
+Then('I should see the header {string} with value {string}', async function (header, value) {
+    await main.validatePageResponseHeaders(this.page, header, value);
+});
+Then('I verify that {string} cookie {string} present', async function (cookieName, presence) {
+    const stringToBool = {
+        is: true,
+        'is not': false,
+    };
+    await main.verifyCookiePresence(this.page, cookieName, stringToBool[presence]);
+});
+Given('I set viewport size to {string}', async function (resolution) {
+    await main.setViewport(this.page, resolution);
+});
+Then('I {string} the alert dialog with text {string}', async function (action, expectedText) {
+    const accept = action.toLowerCase() === 'accept' ? true : false;
+    await main.handleAlert(this.page, accept, expectedText);
+});
+
+Then('I {string} the alert dialog', async function (action) {
+    const accept = action.toLowerCase() === 'accept' ? true : false;
+    await main.handleAlert(this.page, accept);
+});

package/features/app/stepDefinitions/helperSteps.js

@@ -0,0 +1,79 @@
+const { Given, When, Then } = require('@cucumber/cucumber');
+const helper = require('../../../src/helperFunctions');
+const dataStorage = require('../../../src/dataStorage');
+const config = require('config');
+
+When('I wait for {string} seconds', async function (seconds) {
+    seconds = seconds * 1000;
+    await new Promise(function (resolve) {
+        setTimeout(resolve, seconds);
+    });
+});
+When('I wait for AJAX loading to finish', async function () {
+    await helper.waitForAjax(this.page);
+});
+When('I put a breakpoint', { timeout: -1 }, async function () {
+    console.log('Debug mode on! Press any key to continue!');
+    await helper.waitForKeypress();
+});
+Given('I clear the json file', function () {
+    dataStorage.clearJsonFile();
+});
+Given('I store {string} in {string} variable', async function (data, variable) {
+    await dataStorage.iStoreVariableWithValueToTheJsonFile(data, variable);
+});
+Given('I save the path of the current page', async function () {
+    await dataStorage.saveCurrentPath(this.page);
+});
+Given('I store {string} from config to {string} in JSON', async function (param, variable) {
+    const value = await config.get(param);
+    await dataStorage.iStoreVariableWithValueToTheJsonFile(value, variable);
+});
+Given('I store the entity id with variable name {string} to the json file', async function (variable) {
+    await dataStorage.iStoreEntityId(this.page, variable);
+});
+Given('I store the value from the element with {string} selector in {string}', async function (cssSelector, variable) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await dataStorage.storeValueOfElement(this.page, selector, variable);
+});
+Then(
+    'I generate extension with {int} chars for the email {string} variable from config and store it in {string}',
+    async function (number, configVariable, varName) {
+        await dataStorage.generateExtensionAndStoreVar(number, configVariable, varName);
+    }
+);
+Then(
+    'I generate extension with {int} chars for the email {string} and store it in {string}',
+    async function (number, email, varName) {
+        await dataStorage.generateExtensionAndStoreVar(number, email, varName);
+    }
+);
+Given('I lowercase all saved variables', async function () {
+    await dataStorage.lowercaseAllVariables();
+});
+When('I trim {string} variable on first special char occurrence', async function (variable) {
+    await dataStorage.trimVariableOnFirstSpecialChar(variable);
+});
+When('I generate date in {string} format for today and store it in {string}', async function (format, variable) {
+    await dataStorage.generateAndSaveDateWithCustomFormat(format, variable);
+});
+When(
+    'I generate date in {string} format for {string} days from now and store it in {string}',
+    async function (format, days, variable) {
+        await dataStorage.generateAndSaveDateWithCustomFormat(format, variable, days);
+    }
+);
+When('I generate time in {string} format for now and store it in {string}', async function (format, variable) {
+    await dataStorage.generateAndSaveDateWithCustomFormat(format, variable);
+});
+When('I create json object from {string} file and store it in {string} variable', async function (filePath, variable) {
+    const checkedPath = await dataStorage.checkForSavedVariable(filePath);
+    const getFileData = dataStorage.getJsonFile(checkedPath);
+    await dataStorage.iStoreVariableWithValueToTheJsonFile(getFileData, variable);
+});
+Given('I switch back to original window', async function () {
+    this.page = await helper.openOriginalTab(this.browser);
+});
+Given('I switch to {string} tab', async function (tabNumber) {
+    this.page = await helper.switchToTab(this.browser, tabNumber);
+});

package/features/app/stepDefinitions/ifVisibleSteps.js

@@ -0,0 +1,58 @@
+const { When, Then } = require('@cucumber/cucumber');
+const utils = require('../../../src/elementInteraction');
+const config = require('config');
+const dataStorage = require('../../../src/dataStorage');
+Then('I should see {string} if visible', async function (text) {
+    if (config.has('skipSteps') && config.get('skipSteps') === text) {
+        return true;
+    }
+    await utils.seeTextByXpath(this.page, text);
+});
+When('I type {string} in {string} if visible', async function (text, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.typeInField(this.page, selector, text, true);
+});
+When('I click on the element {string} if visible', async function (cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.click(this.page, selector, true);
+});
+Then('I select {string} from {string} if visible', async function (value, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.selectOptionByValue(this.page, selector, value, true);
+});
+Then('I fill in {string} with {string} if visible', async function (cssSelector, text) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.fillField(this.page, selector, text, true);
+});
+Then(
+    'I check if element with selector {string} has attribute {string} with {string} value from config if visible',
+    async function (selector, attribute, variable) {
+        const attrValue = await config.get(variable);
+        await utils.validateElementWithSelectorHasAttributeWithValue(this.page, selector, attribute, attrValue, true);
+    }
+);
+Then(
+    'I check if element with selector {string} has attribute {string} with {string} value from json if visible',
+    async function (selector, attribute, variable) {
+        const attrValue = dataStorage.getVariable(variable);
+        await utils.validateElementWithSelectorHasAttributeWithValue(this.page, selector, attribute, attrValue, true);
+    }
+);
+Then(
+    'I check if link with href {string} has attribute {string} with {string} value from config if visible',
+    async function (href, attribute, value) {
+        const attrValue = await config.get(value);
+        await utils.validateValueOfLinkAttributeByHref(this.page, href, attribute, attrValue, true);
+    }
+);
+Then(
+    'I check if link with href {string} has attribute {string} with {string} value from json if visible',
+    async function (href, attribute, value) {
+        const attrValue = dataStorage.getVariable(value);
+        await utils.validateValueOfLinkAttributeByHref(this.page, href, attribute, attrValue, true);
+    }
+);
+Then('I {string} the checkbox {string} if visible', async function (action, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.useCheckbox(this.page, selector, action, true);
+});

package/features/app/stepDefinitions/iframeSteps.js

@@ -0,0 +1,61 @@
+const { When, Then } = require('@cucumber/cucumber');
+const utils = require('../../../src/elementInteraction');
+const dataStorage = require('../../../src/dataStorage');
+
+Then('I should see {string} in iframe {string}', async function (text, frameSelector) {
+    const result = await dataStorage.checkForVariable(text);
+    let frame = await utils.getFrameBySelector(this.page, frameSelector);
+    await utils.seeTextByXpath(frame, result);
+});
+Then(
+    'I wait for the text {string} to appear within {string} seconds in iframe {string}',
+    async function (text, time, frameSelector) {
+        let frame = await utils.getFrameBySelector(this.page, frameSelector);
+        await utils.seeTextByXpath(frame, text, time * 1000);
+    }
+);
+When('I click on element {string} in iframe with selector {string}', async function (elementSelector, frameSelector) {
+    let frame = await utils.getFrameBySelector(this.page, frameSelector);
+    await utils.click(frame, elementSelector);
+});
+When('I click on the text {string} in iframe with selector {string}', async function (text, frameSelector) {
+    let frame = await utils.getFrameBySelector(this.page, frameSelector);
+    await utils.clickByText(frame, text);
+});
+When(
+    'I type {string} in {string} field in iframe with selector {string}',
+    async function (text, selector, frameSelector) {
+        let frame = await utils.getFrameBySelector(this.page, frameSelector);
+        await utils.typeInField(frame, selector, text);
+    }
+);
+When(
+    'I click on the text {string} in iframe with selector {string} and follow the new tab',
+    async function (text, frameSelector) {
+        let frame = await utils.getFrameBySelector(this.page, frameSelector);
+        this.page = await utils.clickLinkOpenNewTab(this.browser, frame, text, true);
+    }
+);
+When(
+    'I click on the element {string} in iframe with selector {string} and follow the new tab',
+    async function (cssSelector, frameSelector) {
+        let frame = await utils.getFrameBySelector(this.page, frameSelector);
+        const selector = this.commonFields[cssSelector] ?? cssSelector;
+        this.page = await utils.clickLinkOpenNewTab(this.browser, frame, selector, false);
+    }
+);
+When(
+    'I store the string matching the {string} pattern from the {string} text in iframe {string}',
+    async function (pattern, text, frameSelector) {
+        let frame = await utils.getFrameBySelector(this.page, frameSelector);
+        await dataStorage.storeTextFromPattern(frame, pattern, text);
+    }
+);
+Then(
+    'I {string} the checkbox {string} in iframe with selector {string}',
+    async function (action, cssSelector, frameSelector) {
+        let frame = await utils.getFrameBySelector(this.page, frameSelector);
+        const selector = this.commonFields[cssSelector] ?? cssSelector;
+        await utils.useCheckbox(frame, selector, action);
+    }
+);

package/features/app/stepDefinitions/lighthouseSteps.js

@@ -0,0 +1,17 @@
+/**
+ * @type {string}
+ * @name scenarioName - name of the scenario from the Before hook
+ */
+const { Given, When } = require('@cucumber/cucumber');
+const lighthouseMethods = require('../../../src/lighthouse');
+const dataStorage = require('../../../src/dataStorage');
+const main = require('../../../src/mainFunctions');
+
+Given('I generate lighthouse report for the saved page', async function () {
+    const path = await dataStorage.getVariable('path');
+    await lighthouseMethods.validatePageSpeed(this.page, path, this.scenarioName);
+});
+When('I generate lighthouse report for {string} page', async function (path) {
+    const preparedPath = main.prepareUrl(path);
+    await lighthouseMethods.validatePageSpeed(this.page, preparedPath, this.scenarioName);
+});

package/features/app/stepDefinitions/pageElements.js

@@ -0,0 +1,208 @@
+const { Given, When, Then } = require('@cucumber/cucumber');
+const utils = require('../../../src/elementInteraction');
+const dataStorage = require('../../../src/dataStorage');
+
+/**
+ * This is a multipurpose step for text visibility. It uses direct input or variable,
+ * but it's too general to be moved to pageElementsJson.js file.
+ */
+Then('I should see {string}', async function (text) {
+    const result = await dataStorage.checkForVariable(text);
+    await utils.seeTextByXpath(this.page, result);
+});
+When('I click on the element {string}', async function (cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.click(this.page, selector);
+});
+When('I click on the element with xpath {string}', async function (xPath) {
+    const selector = 'xpath/' + `${xPath}`;
+    await utils.click(this.page, selector);
+});
+When('I click on all the elements with selector {string}', async function (cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.clickAllElements(this.page, selector);
+});
+When('I click on the text {string}', async function (text) {
+    await utils.clickByText(this.page, text);
+});
+When('I click on the text {string} in the {string} region', async function (text, region) {
+    await utils.clickTextInRegion(this.page, text, region);
+});
+
+Then('I should see {string} in {string}', async function (value, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.validateTextInField(this.page, value, selector);
+});
+
+Then('I should see {string} in {string} region', async function (text, region) {
+    await utils.seeTextInRegion(this.page, text, region);
+});
+
+Then('I should see the element with selector {string}', async function (cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.seeElement(this.page, selector);
+});
+Then('I should see the element with selector {string} in the DOM', async function (cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.seeElement(this.page, selector, false);
+});
+Then('I should not see the element with selector {string}', async function (cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.notSeeElement(this.page, selector);
+});
+Then('I wait for element {string} to disappear within {string} seconds', async function (cssSelector, time) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.notSeeElement(this.page, selector, time * 1000);
+});
+Then('I wait for element with {string} selector to appear within {string} seconds', async function (cssSelector, time) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.seeElement(this.page, selector, true, time * 1000);
+});
+Then('I should not see {string}', async function (text) {
+    await utils.notSeeText(this.page, text);
+});
+Then('I wait for the text {string} to appear within {string} seconds', async function (text, time) {
+    await utils.seeTextByXpath(this.page, text, time * 1000);
+});
+Then('I wait for the text {string} to disappear within {string} seconds', async function (text, time) {
+    await utils.disappearText(this.page, text, time * 1000);
+});
+Then('I upload the {string} in {string} field', async function (fileName, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.uploadFile(this.page, fileName, selector);
+});
+Then('I fill in {string} with {string}', async function (cssSelector, text) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.fillField(this.page, selector, text);
+});
+Then('I fill in CodeMirror field {string} with {string}', async function (cssSelector, value) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.setValueInCodeMirrorField(this.page, selector, value);
+});
+Then('I type {string} in {string}', async function (text, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.typeInField(this.page, selector, text);
+});
+Then('I {string} the checkbox {string}', async function (action, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.useCheckbox(this.page, selector, action);
+});
+Then('I write {string} into {string} ckeditor5 wysiwyg', async function (text, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.writeInCkEditor5(this.page, selector, text);
+});
+Then('I select {string} from {string}', async function (value, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.selectOptionByValue(this.page, selector, value);
+});
+Then('I select text {string} from {string}', async function (value, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.selectOptionByText(this.page, selector, value);
+});
+
+Then('I check if link {string} has href {string}', async function (text, href) {
+    await utils.validateHrefByText(this.page, text, href);
+});
+Then(
+    'I check if link with href {string} has attribute {string} with {string} value',
+    async function (href, attribute, value) {
+        await utils.validateValueOfLinkAttributeByHref(this.page, href, attribute, value);
+    }
+);
+Then(
+    'I check if element with selector {string} has attribute {string} with {string} value',
+    async function (selector, attribute, attrValue) {
+        await utils.validateElementWithSelectorHasAttributeWithValue(this.page, selector, attribute, attrValue);
+    }
+);
+Then(
+    'I check if element with text {string} has attribute {string} with {string} value',
+    async function (text, attribute, value) {
+        await utils.validateValueOfElementAttributeByText(this.page, text, attribute, value);
+    }
+);
+Then('I upload {string} file to dropzone {string} field', async function (file, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.uploadToDropzone(this.page, file, selector);
+});
+Then('I should see {string} in the schema markup of the page', async function (text) {
+    await utils.validateTextInSchemaOrg(this.page, text);
+});
+Then('I should not see {string} in the schema markup of the page', async function (text) {
+    await utils.validateTextNotInSchemaOrg(this.page, text);
+});
+Then('I should see {string} in page scripts', async function (text) {
+    await utils.validateTextInScript(this.page, text);
+});
+Then('I should {string} see {string} in the {string} accordion', async function (isVisible, text, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    if (isVisible === 'not') {
+        isVisible = false;
+    }
+    await utils.textVisibilityInAccordion(this.page, selector, text, Boolean(isVisible));
+});
+Then('I select the first autocomplete option for {string} on the {string} field', async function (text, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.selectOptionFirstAutocomplete(this.page, text, selector);
+});
+Then('I select {string} from chosen {string}', async function (text, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.selectOptionFromChosen(this.page, text, selector);
+});
+
+Then('I set date {string} in flatpickr with selector {string}', async function (date, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.setDateFlatpickr(this.page, selector, date);
+});
+Then(
+    'I get the href of element with selector {string} and store it to {string}',
+    async function (cssSelector, variable) {
+        const selector = this.commonFields[cssSelector] ?? cssSelector;
+        await dataStorage.storeHrefOfElement(this.page, selector, variable);
+    }
+);
+Given('I scroll element with {string} to the top', async function (cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.scrollElementToTop(this.page, selector);
+});
+Given('I scroll element with xpath {string} to the top', async function (xpath) {
+    const selector = 'xpath/' + `${xpath}`;
+    await utils.scrollElementToTop(this.page, selector);
+});
+Given('I check if options from dropdown {string} are in alphabetical order', async function (cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.iCheckIfDropdownOptionsAreInAlphabeticalOrder(this.page, selector, true);
+});
+Given('I check if options from dropdown {string} are not in alphabetical order', async function (cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.iCheckIfDropdownOptionsAreInAlphabeticalOrder(this.page, selector, false);
+});
+Given('I check if checkbox options with locator {string} are in alphabetical order', async function (cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.iCheckIfCheckboxOptionsAreInAlphabeticalOrder(this.page, selector, true);
+});
+Given('I check if checkbox options with locator {string} are not in alphabetical order', async function (cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    await utils.iCheckIfCheckboxOptionsAreInAlphabeticalOrder(this.page, selector, false);
+});
+When('I click on the text {string} and follow the new tab', async function (text) {
+    this.page = await utils.clickLinkOpenNewTab(this.browser, this.page, text, true);
+});
+When('I click on the element {string} and follow the new tab', async function (cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    this.page = await utils.clickLinkOpenNewTab(this.browser, this.page, selector, true);
+});
+When('I click on the element {string} and follow the popup window', async function (cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    this.page = await utils.clickElementOpenPopup(this.page, selector);
+});
+When('I press key {string}', async function (key) {
+    await utils.pressKey(this.page, key);
+});
+Then(
+    'I set datetime picker {string} to format {string} with range {string}',
+    async function (cssSelector, format, range) {
+        const selector = this.commonFields[cssSelector] ?? cssSelector;
+        await utils.setDateTimePickerWithFormat(this.page, selector, format, range);
+    }
+);

package/features/app/stepDefinitions/pageElementsConfig.js

@@ -0,0 +1,42 @@
+const { When, Then } = require('@cucumber/cucumber');
+const utils = require('../../../src/elementInteraction');
+const config = require('config');
+When('I click on the text {string} from config', async function (text) {
+    const textFromConfig = await config.get(text);
+    await utils.clickByText(this.page, textFromConfig);
+});
+Then('I should see {string} from config in element {string}', async function (value, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    const result = await config.get(value);
+    await utils.seeTextByElementHandle(this.page, selector, result);
+});
+Then('I fill in {string} with {string} variable from config', async function (cssSelector, variable) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    const value = await config.get(variable);
+    await utils.fillField(this.page, selector, value);
+});
+Then('I type {string} in {string} using variable from config', async function (variable, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    const value = await config.get(variable);
+    await utils.typeInField(this.page, selector, value);
+});
+Then(
+    'I select the first autocomplete option for {string} from config on the {string} field',
+    async function (value, cssSelector) {
+        const selector = this.commonFields[cssSelector] ?? cssSelector;
+        const result = await config.get(value);
+        await utils.selectOptionFirstAutocomplete(this.page, result, selector);
+    }
+);
+Then('I select {string} from config in {string} dropdown', async function (value, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    let data = config.get(value);
+    await utils.selectOptionByValue(this.page, selector, data);
+});
+Then(
+    'I check if element with selector {string} has attribute {string} with {string} value from config',
+    async function (selector, attribute, value) {
+        const attrValue = config.get(value);
+        await utils.validateElementWithSelectorHasAttributeWithValue(this.page, selector, attribute, attrValue);
+    }
+);

package/features/app/stepDefinitions/pageElementsJson.js

@@ -0,0 +1,49 @@
+const { Then } = require('@cucumber/cucumber');
+const utils = require('../../../src/elementInteraction');
+const dataStorage = require('../../../src/dataStorage');
+Then('I should see {string} from json in element {string}', async function (value, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    const result = await dataStorage.getVariable(value);
+    await utils.seeTextByElementHandle(this.page, selector, result);
+});
+Then('I should see stored text {string} in {string} region', async function (text, region) {
+    const result = await dataStorage.checkForMultipleVariables(text);
+    await utils.seeTextInRegion(this.page, result, region);
+});
+Then('I hover on text {string} in {string} region', async function (text, region) {
+    const result = await dataStorage.checkForMultipleVariables(text);
+    await utils.hoverTextInRegion(this.page, result, region);
+});
+Then('I should see variable {string} in {string} region', async function (variable, region) {
+    const value = dataStorage.getVariable(variable);
+    await utils.seeTextInRegion(this.page, value, region);
+});
+Then('I fill in {string} with {string} variable from JSON', async function (cssSelector, variable) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    const value = await dataStorage.getVariable(variable);
+    await utils.fillField(this.page, selector, value);
+});
+Then('I fill in {string} with {string} variable using JSON stringify', async function (cssSelector, variable) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    const value = await dataStorage.getVariable(variable, true);
+    await utils.fillField(this.page, selector, value);
+});
+Then('I type {string} in {string} using variable from JSON', async function (variable, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    const value = await dataStorage.getVariable(variable);
+    await utils.typeInField(this.page, selector, value);
+});
+Then('I check if link {string} has href {string} from JSON', async function (text, href) {
+    const savedHref = await dataStorage.getVariable(href);
+    await utils.validateHrefByText(this.page, text, savedHref);
+});
+Then('I set stored date {string} in flatpickr with selector {string}', async function (date, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    const result = await dataStorage.checkForVariable(date);
+    await utils.setDateFlatpickr(this.page, selector, result);
+});
+Then('I select {string} from json in {string} dropdown', async function (variable, cssSelector) {
+    const selector = this.commonFields[cssSelector] ?? cssSelector;
+    let data = await dataStorage.getVariable(variable);
+    await utils.selectOptionByValue(this.page, selector, data);
+});

package/features/app/stepDefinitions/visualRegressionSteps.js

@@ -0,0 +1,26 @@
+/**
+ * @type {string}
+ * @name scenarioName - name of the scenario from the Before hook
+ */
+const { Given, Then } = require('@cucumber/cucumber');
+const imageCompare = require('../../../src/visualRegression');
+const main = require('../../../src/mainFunctions');
+const dataStorage = require('../../../src/dataStorage');
+Given('I generate reference screenshot for {string}', async function (path) {
+    const storedUrl = await dataStorage.checkForVariable(path);
+    const url = await main.prepareUrl(storedUrl);
+    await imageCompare.runBackStopSingleScenario(this.scenarioName, url, 'reference');
+});
+Then('I compare {string} to reference screenshot', async function (path) {
+    const storedUrl = await dataStorage.checkForVariable(path);
+    const url = await main.prepareUrl(storedUrl);
+    await imageCompare.runBackStopSingleScenario(this.scenarioName, url, 'test');
+});
+Given('I generate reference screenshot for multiple pages', async function (docString) {
+    const pages = JSON.parse(docString);
+    await imageCompare.runBackstopMultiplePages(pages, 'reference');
+});
+Then('I compare multiple pages to their references', async function (docString) {
+    const pages = JSON.parse(docString);
+    await imageCompare.runBackstopMultiplePages(pages, 'test');
+});

package/features/app/world.js

@@ -0,0 +1,15 @@
+const { setWorldConstructor, setDefaultTimeout } = require('@cucumber/cucumber');
+
+setDefaultTimeout(120 * 1000);
+
+//attach: function used for adding attachments to hooks/steps
+class World {
+    constructor({ attach }) {
+        this.attach = attach;
+    }
+
+    fixSonar() {
+        console.log('Sample function to fix empty class.');
+    }
+}
+setWorldConstructor(World);