@qavajs/cypress 1.0.0 → 2.0.0

package/CHANGELOG.md

@@ -10,6 +10,9 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 :pencil: - chore
 :microscope: - experimental
 
+## [2.0.0]
+- :rocket: implemented new page object approach
+
 ## [0.2.0]
 - :rocket: added memory write logs support
 

package/README.md

@@ -1,10 +1,9 @@
 # @qavajs/cypress
-qavajs implementation on top of cypress runner
+qavajs implementation for cypress runner
 
 ## Installation
 
-`npm install @qavajs/cypress`
-`npm install @qavajs/cypress-runner-adapter`
+`npm install @qavajs/cypress @qavajs/cypress-runner-adapter @qavajs/memory`
 
 ## Configuration
 cypress.config.js

package/lib/actions.js

@@ -6,9 +6,8 @@ import { parseCoords } from './utils';
  * @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);
+When('I open {value} url', function (url) {
+    cy.visit(url.value());
 });
 
 /**
@@ -17,10 +16,8 @@ When('I open {string} url', function (url) {
  * @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);
+When('I type {value} to {locator}', function (type, locator) {
+    locator.type(type.value());
 });
 //
 /**
@@ -28,9 +25,8 @@ When('I type {string} to {string}', function (value, alias) {
  * @param {string} alias - element to click
  * @example I click 'Google Button'
  */
-When('I click {string}', function (alias) {
-    const element = this.element(alias);
-    element.click();
+When('I click {locator}', function (locator) {
+    locator.click();
 });
 
 /**
@@ -38,9 +34,8 @@ When('I click {string}', function (alias) {
  * @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});
+When('I force click {locator}', function (locator) {
+    locator.click({force: true});
 });
 
 /**
@@ -48,9 +43,8 @@ When('I force click {string}', function (alias) {
  * @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();
+When('I right click {locator}', function (locator) {
+    locator.rightclick();
 });
 
 /**
@@ -58,9 +52,8 @@ When('I right click {string}', function (alias) {
  * @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();
+When('I double click {locator}', function (locator) {
+    locator.dblclick();
 });
 
 /**
@@ -68,9 +61,8 @@ When('I double click {string}', function (alias) {
  * @param {string} alias - element to clear
  * @example I clear 'Google Input'
  */
-When('I clear {string}', function (alias) {
-    const element = this.element(alias);
-    element.clear();
+When('I clear {locator}', function (locator) {
+    locator.clear();
 });
 
 /**
@@ -78,7 +70,7 @@ When('I clear {string}', function (alias) {
  * @example I switch to parent frame
  */
 When('I switch to parent frame', function () {
-    this.po.driver = cy;
+    this.cy = cy;
 });
 
 /**
@@ -87,9 +79,9 @@ When('I switch to parent frame', function () {
  * @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)
+    const root = this.cy === cy ? this.cy.get('iframe') : this.cy.find('iframe');
+    this.cy = root
+        .eq(index - 1)
         .then((iframe) => iframe.contents())
         .should('exist')
         .find('body');
@@ -100,9 +92,8 @@ When('I switch to {int} frame', function (index) {
  * @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
+When('I switch to {locator} frame', function (frame) {
+    this.cy = frame
         .then((iframe) => iframe.contents())
         .should('exist')
         .find('body');
@@ -144,11 +135,10 @@ When('I press {string} key(s) {int} time(s)', function (key, num) {
  * @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');
+When('I hover over {locator}', function (locator) {
+    locator.trigger('mouseenter');
+    locator.trigger('mouseover');
+    locator.trigger('mousemove');
 });
 
 /**
@@ -158,10 +148,8 @@ When('I hover over {string}', function (alias) {
  * @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);
+When('I select {value} option from {locator} dropdown', function (option, select) {
+    select.select(option.value());
 });
 
 /**
@@ -170,8 +158,7 @@ When('I select {string} option from {string} dropdown', function (option, alias)
  * @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);
+When('I select {int}(st|nd|rd|th) option from {locator} dropdown', function (optionIndex, select) {
     select.select(optionIndex - 1);
 });
 //
@@ -183,11 +170,9 @@ When('I select {int}(st|nd|rd|th) option from {string} dropdown', function (opti
  * @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();
+    'I click {value} text in {locator} collection',
+    function (text, collection) {
+        collection.filter(`:contains(${text.value()})`).click();
     }
 );
 
@@ -197,8 +182,8 @@ When(
  * @example
  * When I scroll by '0, 100'
  */
-When('I scroll by {string}', function (offset) {
-    const [x, y] = parseCoords(this.value(offset));
+When('I scroll by {value}', function (offset) {
+    const [x, y] = parseCoords(offset.value());
     cy.scrollTo(x, y);
 });
 
@@ -209,10 +194,9 @@ When('I scroll by {string}', function (offset) {
  * @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);
+When('I scroll by {value} in {locator}', function (offset, locator) {
+    const [x, y] = parseCoords(offset.value());
+    locator.scrollTo(x, y);
 });
 
 /**
@@ -221,9 +205,8 @@ When('I scroll by {string} in {string}', function (offset, alias) {
  * @example
  * When I scroll to 'Some Element'
  */
-When('I scroll to {string}', function (alias) {
-    const element = this.element(alias);
-    element.scrollIntoView()
+When('I scroll to {locator}', function (locator) {
+    locator.scrollIntoView()
 });
 
 
@@ -233,10 +216,8 @@ When('I scroll to {string}', function (alias) {
  * @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);
+When('I upload {value} file to {locator}', function (filePath, locator) {
+    locator.selectFile(filePath.value());
 });
 
 /**
@@ -266,9 +247,8 @@ When('I will dismiss alert', function () {
  * 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);
+When('I will type {value} to alert', function (text) {
     cy.window().then((win) => {
-        win.prompt = () => resolvedValue;
+        win.prompt = () => text.value();
     });
 });

package/lib/execute.js

@@ -6,8 +6,8 @@ import { When } from '@qavajs/cypress-runner-adapter';
  * @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);
+When('I execute {value} function', function (functionKey) {
+    const fnContent = functionKey.value();
     const fn = typeof fnContent === 'string' ? new Function(`return ${fnContent}`): fnContent;
     cy.window().then(win => {
         fn.apply(win);
@@ -21,11 +21,11 @@ When('I execute {string} function', function (functionKey) {
  * @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);
+When('I execute {value} function and save result as {value}', function (functionKey, memoryKey) {
+    const fnContent = functionKey.value();
     const fn = typeof fnContent === 'string' ? new Function(`return ${fnContent}`): fnContent;
     cy.window().then(win => {
-        this.setValue(memoryKey, fn.apply(win));
+        memoryKey.set(fn.apply(win));
     });
 });
 
@@ -36,12 +36,11 @@ When('I execute {string} function and save result as {string}', function (functi
  * @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);
+When('I execute {value} function on {locator}', function (functionKey, locator) {
+    const fnContent = functionKey.value();
     const fn = typeof fnContent === 'string' ? new Function(`return ${fnContent}`): fnContent;
     cy.window().then(win => {
-        element.then((e) => {
+        locator.then((e) => {
             fn.apply(win, e);
         });
     });
@@ -55,14 +54,13 @@ When('I execute {string} function on {string}', function (functionKey, alias) {
  * @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);
+    'I execute {value} function on {locator} and save result as {value}',
+    function (functionKey, locator, memoryKey) {
+        const fnContent = functionKey.value();
         const fn = typeof fnContent === 'string' ? new Function(`return ${fnContent}`): fnContent;
         cy.window().then(win => {
-            element.then((e) => {
-                this.setValue(memoryKey, fn.apply(win, e));
+            locator.then((e) => {
+                memoryKey.set(fn.apply(win, e));
             });
         });
     }

package/lib/memory.js

@@ -1,4 +1,5 @@
 import { When } from '@qavajs/cypress-runner-adapter';
+import { dataTable2Object } from './utils';
 
 /**
  * Save text of element to memory
@@ -6,10 +7,9 @@ import { When } from '@qavajs/cypress-runner-adapter';
  * @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());
+When('I save text of {locator} as {value}', function (locator, key) {
+    locator.then(e => {
+        key.set(e.text());
     });
 });
 
@@ -21,11 +21,10 @@ When('I save text of {string} as {string}', function (alias, key) {
  * @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));
+When('I save {value} property of {locator} as {value}', function (property, locator, key) {
+    const propertyName = property.value();
+    locator.then((e) => {
+        key.set(e.prop(propertyName));
     });
 });
 
@@ -37,11 +36,10 @@ When('I save {string} property of {string} as {string}', function (property, ali
  * @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));
+When('I save {value} attribute of {locator} as {value}', function (attribute, locator, key) {
+    const attributeName = attribute.value();
+    locator.then(e => {
+        key.set(e.attr(attributeName));
     });
 });
 
@@ -51,10 +49,9 @@ When('I save {string} attribute of {string} as {string}', function (attribute, a
  * @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);
+When('I save number of elements in {locator} collection as {value}', function (collection, key) {
+    collection.then(c => {
+        key.set(c.length);
     });
 });
 
@@ -65,15 +62,14 @@ When('I save number of elements in {string} collection as {string}', function (a
  * @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);
+    'I save text of every element of {locator} collection as {value}',
+    function (collection, key) {
         collection.then((c) => {
             const values = [];
             c.each(function () {
                 values.push(Cypress.$(this).text());
             })
-            this.setValue(key, values);
+            key.set(values);
         });
     }
 );
@@ -85,15 +81,15 @@ When(
  * @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);
+    'I save {value} attribute of every element of {locator} collection as {value}',
+    function (attribute, collection, key) {
+        const attributeName = attribute.value();
         collection.then((c) => {
             const values = [];
             c.each(function () {
-                values.push(Cypress.$(this).attr(attribute));
+                values.push(Cypress.$(this).attr(attributeName));
             })
-            this.setValue(key, values);
+            key.set(values);
         });
     }
 );
@@ -105,15 +101,15 @@ When(
  * @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) => {
+    'I save {value} property of every element of {locator} collection as {value}',
+    function (property, collection, key) {
+        const propertyName = property.value();
+        collection.then(c => {
             const values = [];
             c.each(function () {
-                values.push(Cypress.$(this).prop(property));
+                values.push(Cypress.$(this).prop(propertyName));
             })
-            this.setValue(key, values);
+            key.set(values);
         });
     }
 );
@@ -123,9 +119,9 @@ When(
  * @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);
+When('I save current url as {value}', function (key) {
+    cy.url().then(url => {
+        key.set(url);
     });
 });
 
@@ -134,9 +130,9 @@ When('I save current url as {string}', function (key) {
  * @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);
+When('I save page title as {value}', function (key) {
+    cy.title().then(title => {
+        key.set(title);
     });
 });
 
@@ -148,11 +144,10 @@ When('I save page title as {string}', function (key) {
  * @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));
+When('I save {value} css property of {locator} as {value}', function (property, locator, key) {
+    const propertyName = property.value();
+    locator.then(e => {
+        key.set(e.css(propertyName));
     });
 });
 
@@ -165,7 +160,84 @@ When('I save {string} css property of {string} as {string}', function (property,
  * 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()));
+When('I save bounding rect of {locator} as {value}', function (locator, key) {
+    locator.then(node => {
+        key.set(node.get(0).getBoundingClientRect());
+    });
 });
+
+
+/**
+ * ##############################
+ */
+
+
+/**
+ * Save value to memory
+ * @param {string} alias - value to save or alias for previously saved value
+ * @param {string} key - key to store value
+ * @example I save 'value' to memory as 'key'
+ * @example I save '$getRandomUser()' to memory as 'user'
+ */
+When(
+    'I save {value} to memory as {value}',
+    function (expression, key) {
+        key.set(expression.value());
+    }
+);
+
+When(
+    'I save multiline string to memory as {value}:',
+    function (key, multilineString) {
+        const value = this.value(multilineString);
+        key.set(value);
+    }
+);
+
+/**
+ * Save value to memory
+ * @param {string} key - key to store value
+ * @param {string} value - value to save or alias for previously saved value
+ * @example I set 'key' = 'value'
+ */
+When(
+    'I set {value} = {value}',
+    function (key, expression) {
+        key.set(expression.value());
+    }
+);
+
+/**
+ * Save json value to memory
+ * @param {string} key - key to store value
+ * @param {string} json - multiline string
+ * @example I save json to memory as 'key':
+ * """
+ * {
+ *     "someKey": "someValue"
+ * }
+ * """
+ */
+When(
+    'I save json to memory as {value}:',
+    function (key, json) {
+        const value = this.value(json);
+        key.set(JSON.parse(value));
+    }
+);
+
+/**
+ * Save key-value pairs to memory
+ * @param {string} key - key to store value
+ * @param {string} kv - key-value
+ * @example I save key-value pairs to memory as 'key':
+ * | someKey      | 42               |
+ * | someOtherKey | $valueFromMemory |
+ */
+When(
+    'I save key-value pairs to memory as {value}:',
+    function (key, kv) {
+        const value = dataTable2Object(this, kv);
+        key.set(value);
+    }
+);

package/lib/memoryValue.js

@@ -0,0 +1,26 @@
+export class MemoryValue {
+    constructor(world, expression) {
+        this.world = world;
+        this.expression = expression;
+    }
+
+    /**
+     * Return resolved value
+     * @example
+     * url.value()
+     * @return Promise<any>
+     */
+    value() {
+        return this.world.value(this.expression)
+    }
+
+    /**
+     * Set value to memory with provided key
+     * @param value any - value to set
+     * @example
+     * url.set('https://qavajs.github.io/')
+     */
+    set(value) {
+        this.world.setValue(this.expression, value);
+    }
+}

package/lib/mouseActions.js

@@ -6,8 +6,8 @@ import { parseCoords } from './utils';
  * @param {string} button - button to press (left, right, middle)
  * @example When I press left mouse button
  */
-When('I press {mouseButton} mouse button on {string}', function (buttons, coords) {
-    const [x, y] = parseCoords(this.value(coords));
+When('I press {mouseButton} mouse button on {value}', function (buttons, coords) {
+    const [x, y] = parseCoords(coords.value());
     cy.get('body')
         .trigger('mouseenter', x, y)
         .trigger('mouseover', x, y)
@@ -20,8 +20,8 @@ When('I press {mouseButton} mouse button on {string}', function (buttons, coords
  * @param {string} button - button to release (left, right, middle)
  * @example When I release left mouse button
  */
-When('I release {mouseButton} mouse button on {string}', function (button, coords) {
-    const [x, y] = parseCoords(this.value(coords));
+When('I release {mouseButton} mouse button on {value}', function (button, coords) {
+    const [x, y] = parseCoords(coords.value());
     cy.get('body')
         .trigger('mouseenter', x, y)
         .trigger('mouseover', x, y)
@@ -34,8 +34,8 @@ When('I release {mouseButton} mouse button on {string}', function (button, coord
  * @param {string} coords - x, y coordinates to move
  * @example When I move mouse to '10, 15'
  */
-When('I move mouse to {string}', function (coords){
-    const [x, y] = parseCoords(this.value(coords));
+When('I move mouse to {value}', function (coords){
+    const [x, y] = parseCoords(coords.value());
     cy.get('body')
         .trigger('mouseenter', x, y)
         .trigger('mouseover', x, y)
@@ -47,9 +47,9 @@ When('I move mouse to {string}', function (coords){
  * @param {string} coords - x, y offset to scroll
  * @example When I scroll mouse wheel by '0, 15'
  */
-When('I scroll mouse wheel by {string} on {string}', function (offset, coords) {
-    const [x, y] = parseCoords(this.value(coords));
-    const [deltaX, deltaY] = parseCoords(this.value(offset));
+When('I scroll mouse wheel by {value} on {value}', function (offset, coords) {
+    const [x, y] = parseCoords(coords.value());
+    const [deltaX, deltaY] = parseCoords(offset.value());
     cy.get('body')
         .trigger('mouseenter', x, y)
         .trigger('mouseover', x, y)