toggle between utilizing the page object API and the primary Nightwatch API

Question

toggle between utilizing the page object API and the primary Nightwatch API

Currently, I am incorporating the page object model alongside nightwatch for my testing procedures. Encountering challenges while trying to interact with an element led me to execute some jquery. However, the 'execute' command is not featured in the available subset of commands within the page object api. To utilize it, I am required to invoke the complete nightwatch command api. For further information on this matter, please refer to https://github.com/nightwatchjs/nightwatch/wiki/Page-Object-API. My query is how can I revert back to the page object api after executing my jquery statement.

Here is an outline of my page object:

elements: {
  nameInput: 'input[name="name"]',
  billingEmail: 'input[name="billingEmail"]',
  licenseNumber: 'input[name="licenses.total"]',
  licensePrice: 'input[name="subscription.price"]',
  hardwareModel: 'input[name="model"]',
  hardwareQuantity: 'input[name="quantity"]',
  hardwarePrice: 'input[name="price"]',
  customerEmail: 'input[name="customerEmail"]',
  createButton: 'button[name="createAccount"]',
  cancelButton: 'button[name="cancel"]',
},


inputClientDetails (name, email) {
    this
      .waitForElementVisible('body', 10000)
      .setValue('@nameInput', name)
      .setValue('@billingEmail', email)
      .setValue('@licenseNumber', '10')
      .setValue('@licensePrice', '9.99')
      .api.execute(function () {
          $('.datepicker--wrapper').find('input[type=text]').val('2017-08-30').trigger($.Event("keydown", {keyCode: 40}));
      })
      .setValue('@hardwareModel', 'Test model')
      .setValue('@hardwarePrice', '9.99')
      .setValue('@hardwareQuantity', '10')
      .setValue('@customerEmail', email)
      .click('@createButton')
    return this.api;
},

While executing the test, I encounter the following error: ERROR: Unable to locate element: "@hardwareModel" using: css selector

Interestingly, when the 'execute' statement is absent from the page object, no issue arises. Hence, I am curious if there is a way to revert to the page object api after engaging with the primary nightwatch api. I attempted to incorporate a return statement within the function, but it proved to be ineffective.

javascript selenium-webdriver nightwatch.js

Answer 1

Answer №1

When you invoke .api.whatever(), the function that follows in the chain also utilizes the .api (which represents the browser).

An alternative approach is to divide your function into two parts instead of chaining the entire sequence.

inputClientDetails (name, email) {
var client=this.api;
this
  .waitForElementVisible('body', 10000)
  .setValue('@nameInput', name)
  .setValue('@billingEmail', email)
  .setValue('@licenseNumber', '10')
  .setValue('@licensePrice', '9.99')
//perform operations using client-browser
client.execute(function () {
      $('.datepicker--wrapper').find('input[type=text]').val('2017-08-30').trigger($.Event("keydown", {keyCode: 40}));
  })
//Resume page object operations
this.setValue('@hardwareModel', 'Test model')
  .setValue('@hardwarePrice', '9.99')
  .setValue('@hardwareQuantity', '10')
  .setValue('@customerEmail', email)
  .click('@createButton')
return this.api;
//Use either this.api or this, but prefer this.api if there are additional chained functions reliant on the browser.
}

Answer 2

When you invoke .api.whatever(), the function that follows in the chain also utilizes the .api (which represents the browser).

An alternative approach is to divide your function into two parts instead of chaining the entire sequence.

inputClientDetails (name, email) {
var client=this.api;
this
  .waitForElementVisible('body', 10000)
  .setValue('@nameInput', name)
  .setValue('@billingEmail', email)
  .setValue('@licenseNumber', '10')
  .setValue('@licensePrice', '9.99')
//perform operations using client-browser
client.execute(function () {
      $('.datepicker--wrapper').find('input[type=text]').val('2017-08-30').trigger($.Event("keydown", {keyCode: 40}));
  })
//Resume page object operations
this.setValue('@hardwareModel', 'Test model')
  .setValue('@hardwarePrice', '9.99')
  .setValue('@hardwareQuantity', '10')
  .setValue('@customerEmail', email)
  .click('@createButton')
return this.api;
//Use either this.api or this, but prefer this.api if there are additional chained functions reliant on the browser.
}

Answer 3

Answer №2

There are two options available to address this particular issue:

Option 1: When using the api, it will now return this.api instead of just this for the page-object, allowing us to call this page object using page.

inputClientDetails (name, email) {
this
  .waitForElementVisible('body', 10000)
  .setValue('@nameInput', name)
  .setValue('@billingEmail', email)
  .setValue('@licenseNumber', '10')
  .setValue('@licensePrice', '9.99')
  .api.execute(function () {
      $('.datepicker--wrapper').find('input[type=text]').val('2017-08-30').trigger($.Event("keydown", {keyCode: 40}));
  })
  .page.yourPage().setValue('@hardwareModel', 'Test model') 
  .page.yourPage().setValue('@hardwarePrice', '9.99')
  .page.yourPage().setValue('@hardwareQuantity', '10')
  .page.yourPage().setValue('@customerEmail', email)
  .page.yourPage().click('@createButton')
return this.api;

Option 2: You can choose to divide your function into smaller functions, where the smaller function will return this for the page object instead of this.api.

inputClientDetails (name, email) {
    this
      .waitForElementVisible('body', 10000)
      .setValue('@nameInput', name)
      .setValue('@billingEmail', email)
      .setValue('@licenseNumber', '10')
      .setValue('@licensePrice', '9.99')
      .callExecute()
      .setValue('@hardwareModel', 'Test model')
      .setValue('@hardwarePrice', '9.99')
      .setValue('@hardwareQuantity', '10')
      .setValue('@customerEmail', email)
      .click('@createButton')
    return this.api;
},

callExecute(){
      this.api.execute(function () {
          $('.datepicker--wrapper').find('input[type=text]').val('2017-08-30').trigger($.Event("keydown", {keyCode: 40}));
      });
     return this;
}

Answer 4

There are two options available to address this particular issue:

Option 1: When using the api, it will now return this.api instead of just this for the page-object, allowing us to call this page object using page.

inputClientDetails (name, email) {
this
  .waitForElementVisible('body', 10000)
  .setValue('@nameInput', name)
  .setValue('@billingEmail', email)
  .setValue('@licenseNumber', '10')
  .setValue('@licensePrice', '9.99')
  .api.execute(function () {
      $('.datepicker--wrapper').find('input[type=text]').val('2017-08-30').trigger($.Event("keydown", {keyCode: 40}));
  })
  .page.yourPage().setValue('@hardwareModel', 'Test model') 
  .page.yourPage().setValue('@hardwarePrice', '9.99')
  .page.yourPage().setValue('@hardwareQuantity', '10')
  .page.yourPage().setValue('@customerEmail', email)
  .page.yourPage().click('@createButton')
return this.api;

Option 2: You can choose to divide your function into smaller functions, where the smaller function will return this for the page object instead of this.api.

inputClientDetails (name, email) {
    this
      .waitForElementVisible('body', 10000)
      .setValue('@nameInput', name)
      .setValue('@billingEmail', email)
      .setValue('@licenseNumber', '10')
      .setValue('@licensePrice', '9.99')
      .callExecute()
      .setValue('@hardwareModel', 'Test model')
      .setValue('@hardwarePrice', '9.99')
      .setValue('@hardwareQuantity', '10')
      .setValue('@customerEmail', email)
      .click('@createButton')
    return this.api;
},

callExecute(){
      this.api.execute(function () {
          $('.datepicker--wrapper').find('input[type=text]').val('2017-08-30').trigger($.Event("keydown", {keyCode: 40}));
      });
     return this;
}

toggle between utilizing the page object API and the primary Nightwatch API

Answer №1

Answer №2

Similar questions

My Python script using selenium isn't functioning properly - what could be the issue?

Node.js version 12.7 does not have the ability to support dynamic keys within objects

Code for a regular expression that permits either letters or numbers with symbols

Adding clickable padding to a Draft.js editor can enhance the user experience and make the editing process

"Utilizing the power of Node.js to perform SQL queries with

Ways to allocate space evenly between components of the same size in React Native

Starting http-server in the background using an npm script

Verify modifications prior to navigating in React or Next.js

Utilizing a React Hook to set data by creating a pure function that incorporates previous data using a thorough deep comparison methodology

Implement a sequence of animations within a div using jQuery

What is causing my array of objects to constantly accumulate undefined elements?

Storing data values from a specific object key into an array in Vue: Step-by-step guide

Using TypeScript with Node.js and Sequelize - the process of converting a value to a number and then back to a string within a map function using the OR

Unexpected error arises in Typescript despite code functioning properly

Develop a PHP polling system with a limit of one vote allowed per unique IP address

Display additional javascript code for expanding a marquee

Passing JSON data dynamically to create a chart with chartjs

What is the best way to use jQuery to set the height of one div equal to another div

Loading a unique shape using JSON within the KineticJS framework

Changing a single variable into an array that holds the variable in JavaScript