@qavajs/cypress 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Change Log
+
+All notable changes to the "@qavajs/cypress" will be documented in this file.
+
+Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+
+:rocket: - new feature
+:beetle: - bugfix
+:x: - deprecation/removal
+:pencil: - chore
+:microscope: - experimental
+ 
+## [0.1.0]
+- :rocket: initial implementation
+

package/README.md

@@ -0,0 +1,50 @@
+# @qavajs/cypress
+qavajs implementation on top of cypress runner
+
+## Installation
+
+`npm install @qavajs/cypress`
+`npm install @qavajs/cypress-runner-adapter`
+
+## Configuration
+cypress.config.js
+```javascript
+const { defineConfig } = require('cypress');
+const cucumber = require('@qavajs/cypress-runner-adapter/adapter');
+module.exports = defineConfig({
+    e2e: {
+        specPattern: 'cypress/features/**/*.feature', //path to features
+        supportFile: 'cypress/support/e2e.js', //path to main support file
+        setupNodeEvents(on, config) {
+            on('file:preprocessor', cucumber)
+        },
+    },
+});
+
+```
+support file
+```typescript
+import defineQavajs from '@qavajs/cypress/defineQavajs';
+import '@qavajs/cypress';
+
+import PageObject from '../page_object/'; // path to qavajs page objects
+import Memory from '../memory'; // path to qavajs memory
+
+defineQavajs({
+    pageObject: new PageObject(),
+    memory: new Memory()
+});
+
+
+```
+
+## Development and testing
+Install dependencies
+`npm install`
+
+
+Execute tests
+`npm run test`
+
+Debug tests
+`npm run debug`

package/defineQavajs.js

@@ -0,0 +1,2 @@
+import { defineQavajs } from './lib/defineQavajs';
+export default defineQavajs;

package/index.js

@@ -0,0 +1,9 @@
+import './lib/types.js';
+import './lib/setup.js';
+import './lib/actions.js';
+import './lib/validation.js';
+import './lib/memory.js';
+import './lib/valueValidation.js';
+import './lib/execute.js';
+import './lib/storage.js';
+import './lib/mouseActions.js';

package/lib/actions.js

@@ -0,0 +1,274 @@
+import { When } from '@qavajs/cypress-runner-adapter';
+import { parseCoords } from './utils';
+
+/**
+ * Opens provided url
+ * @param {string} url - url to navigate
+ * @example I open 'https://google.com'
+ */
+When('I open {string} url', function (url) {
+    const urlValue = this.value(url);
+    cy.visit(urlValue);
+});
+
+/**
+ * Type text to element
+ * @param {string} alias - element to type
+ * @param {string} value - value to type
+ * @example I type 'wikipedia' to 'Google Input'
+ */
+When('I type {string} to {string}', function (value, alias) {
+    const element = this.element(alias);
+    const typeValue = this.value(value);
+    element.type(typeValue);
+});
+//
+/**
+ * Click element
+ * @param {string} alias - element to click
+ * @example I click 'Google Button'
+ */
+When('I click {string}', function (alias) {
+    const element = this.element(alias);
+    element.click();
+});
+
+/**
+ * Click element via script
+ * @param {string} alias - element to click
+ * @example I force click 'Google Button'
+ */
+When('I force click {string}', function (alias) {
+    const element = this.element(alias);
+    element.click({force: true});
+});
+
+/**
+ * Right click element
+ * @param {string} alias - element to right click
+ * @example I right click 'Google Button'
+ */
+When('I right click {string}', function (alias) {
+    const element = this.element(alias);
+    element.rightclick();
+});
+
+/**
+ * Double click element
+ * @param {string} alias - double element to click
+ * @example I double click 'Google Button'
+ */
+When('I double click {string}', function (alias) {
+    const element = this.element(alias);
+    element.dblclick();
+});
+
+/**
+ * Clear input
+ * @param {string} alias - element to clear
+ * @example I clear 'Google Input'
+ */
+When('I clear {string}', function (alias) {
+    const element = this.element(alias);
+    element.clear();
+});
+
+/**
+ * Switch to parent frame
+ * @example I switch to parent frame
+ */
+When('I switch to parent frame', function () {
+    this.po.driver = cy;
+});
+
+/**
+ * Switch to frame by index
+ * @param {number} index - index to switch
+ * @example I switch to 2 frame
+ */
+When('I switch to {int} frame', function (index) {
+    const root = this.po.driver === cy ? cy.get('iframe') : this.po.driver.find('iframe');
+    this.po.driver = root
+        .eq(0)
+        .then((iframe) => iframe.contents())
+        .should('exist')
+        .find('body');
+});
+
+/**
+ * Switch to frame by alias
+ * @param {string} index - alias to switch
+ * @example I switch to 'IFrame' frame
+ */
+When('I switch to {string} frame', function (frameAlias) {
+    const frame = this.element(frameAlias);
+    this.po.driver = frame
+        .then((iframe) => iframe.contents())
+        .should('exist')
+        .find('body');
+});
+
+/**
+ * Refresh current page
+ * @example I r efresh page
+ */
+When('I refresh page', function () {
+    cy.reload();
+});
+
+/**
+ * Press button
+ * @param {string} key - key to press
+ * @example I press 'Enter' key
+ * @example I press 'Control+C' keys
+ */
+When('I press {string} key(s)', function (key) {
+    cy.get('body').type(key);
+});
+
+/**
+ * Press button given number of times
+ * @param {string} key - key to press
+ * @param {number} num - number of times
+ * @example I press 'Enter' key 5 times
+ * @example I press 'Control+V' keys 5 times
+ */
+When('I press {string} key(s) {int} time(s)', function (key, num) {
+    for (let i = 0; i < num; i++) {
+        cy.get('body').type(key);
+    }
+});
+
+/**
+ * Hover over element
+ * @param {string} alias - element to hover over
+ * @example I hover over 'Google Button'
+ */
+When('I hover over {string}', function (alias) {
+    const element = this.element(alias);
+    element.trigger('mouseenter');
+    element.trigger('mouseover');
+    element.trigger('mousemove');
+});
+
+/**
+ * Select option with certain text from select element
+ * @param {string} option - option to select
+ * @param {string} alias - alias of select
+ * @example I select '1900' option from 'Registration Form > Date Of Birth'
+ * @example I select '$dateOfBirth' option from 'Registration Form > Date Of Birth' dropdown
+ */
+When('I select {string} option from {string} dropdown', function (option, alias) {
+    const optionValue = this.value(option);
+    const select = this.element(alias);
+    select.select(optionValue);
+});
+
+/**
+ * Select option with certain text from select element
+ * @param {number} optionIndex - index of option to select
+ * @param {string} alias - alias of select
+ * @example I select 1 option from 'Registration Form > Date Of Birth' dropdown
+ */
+When('I select {int}(st|nd|rd|th) option from {string} dropdown', function (optionIndex, alias) {
+    const select = this.element(alias);
+    select.select(optionIndex - 1);
+});
+//
+/**
+ * Click on element with desired text in collection
+ * @param {string} expectedText - text to click
+ * @param {string} alias - collection to search text
+ * @example I click 'google' text in 'Search Engines' collection
+ * @example I click '$someVarWithText' text in 'Search Engines' collection
+ */
+When(
+    'I click {string} text in {string} collection',
+    function (value, alias) {
+        const resolvedValue = this.value(value);
+        const collection = this.element(alias);
+        collection.filter(`:contains(${resolvedValue})`).click();
+    }
+);
+
+/**
+ * Scroll by provided offset
+ * @param {string} - offset string in 'x, y' format
+ * @example
+ * When I scroll by '0, 100'
+ */
+When('I scroll by {string}', function (offset) {
+    const [x, y] = parseCoords(this.value(offset));
+    cy.scrollTo(x, y);
+});
+
+/**
+ * Scroll by provided offset in element
+ * @param {string} - offset string in 'x, y' format
+ * @param {string} - element alias
+ * @example
+ * When I scroll by '0, 100' in 'Overflow Container'
+ */
+When('I scroll by {string} in {string}', function (offset, alias) {
+    const [x, y] = parseCoords(this.value(offset));
+    const element = this.element(alias);
+    element.scrollTo(x, y);
+});
+
+/**
+ * Scroll to certain element
+ * @param {string} - element alias
+ * @example
+ * When I scroll to 'Some Element'
+ */
+When('I scroll to {string}', function (alias) {
+    const element = this.element(alias);
+    element.scrollIntoView()
+});
+
+
+/**
+ * Provide file url to upload input
+ * @param {string} alias - element to upload file
+ * @param {string} value - file path
+ * @example I upload '/folder/file.txt' to 'File Input'
+ */
+When('I upload {string} file to {string}', function (value, alias) {
+    const element = this.element(alias);
+    const filePath = this.value(value);
+    element.selectFile(filePath);
+});
+
+/**
+ * Accept alert
+ * @example I accept alert
+ */
+When('I will accept alert', function () {
+    cy.window().then((win) => {
+        win.alert = () => true;
+        win.confirm = () => true;
+    });
+});
+
+/**
+ * Dismiss alert
+ * Cypress automatically dismisses all dialogs. This step is just to make it implicitly.
+ * @example I dismiss alert
+ */
+When('I will dismiss alert', function () {
+    cy.window().then((win) => {
+        win.alert = () => false;
+        win.confirm = () => false;
+    });
+});
+
+/**
+ * I will type {string} to alert
+ * @example I type 'coffee' to alert
+ */
+When('I will type {string} to alert', function (value) {
+    const resolvedValue = this.value(value);
+    cy.window().then((win) => {
+        win.prompt = () => resolvedValue;
+    });
+});

package/lib/conditionExpect.js

@@ -0,0 +1,54 @@
+chai.Assertion.addMethod('inViewport', function (ER) {
+    const subject = this._obj;
+
+    const windowInnerWidth = Cypress.config(`viewportWidth`);
+    const windowInnerHeight = Cypress.config(`viewportHeight`);
+
+    const bounding = subject.get(0).getBoundingClientRect();
+    const condition = bounding.top >= 0 &&
+        bounding.left >= 0 &&
+        bounding.right <= windowInnerWidth &&
+        bounding.bottom <= windowInnerHeight
+
+    this.assert(
+        condition,
+        'expected #{this} to be in viewport',
+        'expected #{this} not to be in viewport',
+        ER,
+        subject
+    );
+});
+
+export const conditionValidations = {
+    PRESENT: 'present',
+    VISIBLE: 'visible',
+    INVISIBLE: 'invisible',
+    ENABLED: 'enabled',
+    DISABLED: 'disabled',
+    IN_VIEWPORT: 'in viewport',
+}
+
+const notClause = '(not )?';
+const toBeClause = 'to (?:be )?';
+const validationClause = `(${Object.values(conditionValidations).join('|')})`;
+
+export const conditionWaitExtractRegexp = new RegExp(`^${notClause}${toBeClause}${validationClause}$`);
+export const conditionWaitRegexp = new RegExp(`(${notClause}${toBeClause}${validationClause})`);
+
+const expects = {
+    [conditionValidations.PRESENT]: 'exist',
+    [conditionValidations.VISIBLE]: 'be.visible',
+    [conditionValidations.INVISIBLE]: 'be.hidden',
+    [conditionValidations.ENABLED]: 'be.enabled',
+    [conditionValidations.DISABLED]: 'be.disabled',
+    [conditionValidations.IN_VIEWPORT]: 'inViewport',
+}
+
+const not = (reverse) => reverse ? 'not.' : '';
+
+export function getConditionExpect(condition) {
+    const match = condition.match(conditionWaitExtractRegexp);
+    if (!match) throw new Error(`${condition} wait is not implemented`);
+    const [ _, reverse, validation ] = match;
+    return not(reverse) + expects[validation];
+}

package/lib/defineQavajs.js

@@ -0,0 +1,4 @@
+export function defineQavajs(options) {
+    window.pageObject = options.pageObject;
+    window.memory = options.memory;
+}

package/lib/execute.js

@@ -0,0 +1,69 @@
+import { When } from '@qavajs/cypress-runner-adapter';
+
+/**
+ * Execute client function
+ * @param {string} functionKey - memory key of function
+ * @example I execute '$fn' function // fn is function reference
+ * @example I execute 'window.scrollBy(0, 100)' function
+ */
+When('I execute {string} function', function (functionKey) {
+    const fnContent = this.value(functionKey);
+    const fn = typeof fnContent === 'string' ? new Function(`return ${fnContent}`): fnContent;
+    cy.window().then(win => {
+        fn.apply(win);
+    });
+});
+
+/**
+ * Execute client function and save result into memory
+ * @param {string} functionKey - memory key of function
+ * @param {string} memoryKey - memory key to store result
+ * @example I execute '$fn' function and save result as 'result' // fn is function reference
+ * @example I execute 'window.scrollY' function and save result as 'scroll'
+ */
+When('I execute {string} function and save result as {string}', function (functionKey, memoryKey) {
+    const fnContent = this.value(functionKey);
+    const fn = typeof fnContent === 'string' ? new Function(`return ${fnContent}`): fnContent;
+    cy.window().then(win => {
+        this.setValue(memoryKey, fn.apply(win));
+    });
+});
+
+/**
+ * Execute client function on certain element
+ * @param {string} functionKey - memory key of function
+ * @param {string} alias - alias of target element
+ * @example I execute '$fn' function on 'Component > Element' // fn is function reference
+ * @example I execute 'arguments[0].scrollIntoView()' function on 'Component > Element'
+ */
+When('I execute {string} function on {string}', function (functionKey, alias) {
+    const element = this.element(alias);
+    const fnContent = this.value(functionKey);
+    const fn = typeof fnContent === 'string' ? new Function(`return ${fnContent}`): fnContent;
+    cy.window().then(win => {
+        element.then((e) => {
+            fn.apply(win, e);
+        });
+    });
+});
+
+/**
+ * Execute client function on certain element
+ * @param {string} functionKey - memory key of function
+ * @param {string} alias - alias of target element
+ * @example I execute '$fn' function on 'Component > Element' and save result as 'innerText' // fn is function reference
+ * @example I execute 'arguments[0].innerText' function on 'Component > Element' and save result as 'innerText'
+ */
+When(
+    'I execute {string} function on {string} and save result as {string}',
+    function (functionKey, alias, memoryKey) {
+        const element = this.element(alias);
+        const fnContent = this.value(functionKey);
+        const fn = typeof fnContent === 'string' ? new Function(`return ${fnContent}`): fnContent;
+        cy.window().then(win => {
+            element.then((e) => {
+                this.setValue(memoryKey, fn.apply(win, e));
+            });
+        });
+    }
+);

package/lib/memory.js

@@ -0,0 +1,171 @@
+import { When } from '@qavajs/cypress-runner-adapter';
+
+/**
+ * Save text of element to memory
+ * @param {string} alias - element to get value
+ * @param {string} key - key to store value
+ * @example I save text of '#1 of Search Results' as 'firstSearchResult'
+ */
+When('I save text of {string} as {string}', function (alias, key) {
+    const element = this.element(alias);
+    element.then((e) => {
+        this.setValue(key, e.text());
+    });
+});
+
+/**
+ * Save property of element to memory
+ * @param {string} property - property to store
+ * @param {string} alias - element to get value
+ * @param {string} key - key to store value
+ * @example I save 'checked' property of 'Checkbox' as 'checked'
+ * @example I save '$prop' property of 'Checkbox' as 'checked'
+ */
+When('I save {string} property of {string} as {string}', function (property, alias, key) {
+    const element = this.element(alias);
+    const propertyName = this.value(property);
+    element.then((e) => {
+        this.setValue(key, e.prop(propertyName));
+    });
+});
+
+/**
+ * Save attribute of element to memory
+ * @param {string} attribute - attribute to store
+ * @param {string} alias - element to get value
+ * @param {string} key - key to store value
+ * @example I save 'href' attribute of 'Link' as 'linkHref'
+ * @example I save '$prop' attribute of 'Link' as 'linkHref'
+ */
+When('I save {string} attribute of {string} as {string}', function (attribute, alias, key) {
+    const element = this.element(alias);
+    const attributeName = this.value(attribute);
+    element.then((e) => {
+        this.setValue(key, e.attr(attributeName));
+    });
+});
+
+/**
+ * Save number of elements in collection to memory
+ * @param {string} alias - collection to get value
+ * @param {string} key - key to store value
+ * @example I save number of elements in 'Search Results' as 'numberOfSearchResults'
+ */
+When('I save number of elements in {string} collection as {string}', function (alias, key) {
+    const collection = this.element(alias);
+    collection.then((c) => {
+        this.setValue(key, c.length);
+    });
+});
+
+/**
+ * Save array of texts of collection to memory
+ * @param {string} alias - collection to get values
+ * @param {string} key - key to store value
+ * @example I save text of every element of 'Search Results' collection as 'searchResults'
+ */
+When(
+    'I save text of every element of {string} collection as {string}',
+    function (alias, key) {
+        const collection = this.element(alias);
+        collection.then((c) => {
+            const values = [];
+            c.each(function () {
+                values.push(Cypress.$(this).text());
+            })
+            this.setValue(key, values);
+        });
+    }
+);
+
+/**
+ * Save array of attributes of collection to memory
+ * @param {string} alias - collection to get values
+ * @param {string} key - key to store value
+ * @example I save 'checked' attribute of every element of 'Search > Checkboxes' collection as 'checkboxes'
+ */
+When(
+    'I save {string} attribute of every element of {string} collection as {string}',
+    function (attribute, alias, key) {
+        const collection = this.element(alias);
+        collection.then((c) => {
+            const values = [];
+            c.each(function () {
+                values.push(Cypress.$(this).attr(attribute));
+            })
+            this.setValue(key, values);
+        });
+    }
+);
+
+/**
+ * Save array of property of collection to memory
+ * @param {string} alias - collection to get values
+ * @param {string} key - key to store value
+ * @example I save 'href' property of every element of 'Search > Links' collection as 'hrefs'
+ */
+When(
+    'I save {string} property of every element of {string} collection as {string}',
+    function (property, alias, key) {
+        const collection = this.element(alias);
+        collection.then((c) => {
+            const values = [];
+            c.each(function () {
+                values.push(Cypress.$(this).prop(property));
+            })
+            this.setValue(key, values);
+        });
+    }
+);
+
+/**
+ * Save current url to memory
+ * @param {string} key - key to store value
+ * @example I save current url as 'currentUrl'
+ */
+When('I save current url as {string}', function (key) {
+    cy.url().then((url) => {
+        this.setValue(key, url);
+    });
+});
+
+/**
+ * Save current page title to memory
+ * @param {string} key - key to store value
+ * @example I save page title as 'currentTitle'
+ */
+When('I save page title as {string}', function (key) {
+    cy.title().then((title) => {
+        this.setValue(key, title);
+    });
+});
+
+/**
+ * Save css property of element to memory
+ * @param {string} property - property to store
+ * @param {string} alias - element to get value
+ * @param {string} key - key to store value
+ * @example I save 'color' css property of 'Checkbox' as 'checkboxColor'
+ * @example I save '$propertyName' property of 'Checkbox' as 'checkboxColor'
+ */
+When('I save {string} css property of {string} as {string}', function (property, alias, key) {
+    const propertyName = this.value(property);
+    const element = this.element(alias);
+    element.then((e) => {
+        this.setValue(key, e.css(propertyName));
+    });
+});
+
+/**
+ * Save bounding client rect to memory
+ * https://developer.mozilla.org/en-US/docs/Web/API/DOMRect
+ * @param {string} alias - element to get value
+ * @param {string} key - key to store value
+ * @example
+ * When I save bounding rect of 'Node' as 'boundingRect'
+ * Then I expect '$boundingRect.width' to equal '42'
+ */
+When('I save bounding rect of {string} as {string}', function (alias, key) {
+    const element = this.element(alias);
+    element.then(node => this.setValue(key, node.get(0).getBoundingClientRect()));
+});