Merge pull request #3 from qavajs/new-po

implemented new po approach

Author: AlexGalichenko

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
 

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

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,68 +16,61 @@ 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());
 });
 //
 /**
  * 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();
+When('I click {locator}', function (locator) {
+    locator.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});
+When('I force click {locator}', function (locator) {
+    locator.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();
+When('I right click {locator}', function (locator) {
+    locator.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();
+When('I double click {locator}', function (locator) {
+    locator.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();
+When('I clear {locator}', function (locator) {
+    locator.clear();
 });
 
 /**
  * Switch to parent frame
  * @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();
     });
 });

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));
             });
         });
     }