How to set up Nightwatch framework Tests with Page object in windows?

How to set up Nightwatch framework Test  in windows?

1.Introduction:-

Nightwatch.js is an easy  to use with Node.js based end-to-end  testing for browser based applications and websites Nightwatch uses the WebDriver API to perform  browser automation related tasks, opening windows and clicking links for instance.

WebDriver is now call W3C specification aiming to standardize browser automation. Web Driver is a remote control interface that enables  control of user agents. It provides a platform and a restful HTTP api’s as a way for web browsers to be remotely controlled.

It is a complete End-to-End testing which aims to simple writing automated tests and setting up Continuous Integration testing.

Maximum time Nightwatch needs to send at least 2 requests to the WebDriver server in order to perform a command or assertion as below mentioned:-

1.To request to locate an element given a CSS selector (or Xpath expression).

2.To perform the actual command/assertion on the given element.

2. Prerequisites:-

Before you can start running your tests with Nightwatch following software you need to install as below mention:-

1. Make sure you have JDK installed, with at least version .

2.Make sure you have Node and NPM installed with least version.

3.Make sure you have installed visual studio code in your system.

4. Make sure you have Npm  Nightwatch / installed, with at least version in your    system.

5. Make sure you have downloaded Selenium server jars and saved in your system.

Once you have everything, you can start creating your test specs.

2.Nightwatch setup in Windows

1. Download JDK from –https://www.oracle.com/technetwork/java/javase/downloads/index.html and install latest version

 

2. Download Node.js from – https://nodejs.org/download/and install latest version

 

 

3. Download Visual studio code from – https://code.visualstudio.com/download and install latest version

 

How to configured Nightwatch Tests in visual Studio Code ?

1.Open visual studio code and clicked on open folder then  browse the path where you want to make project structure(New Folder).

 

2.Go to view option on menu bar then select terminal option as screenshot:-

 

3.Create  file called — nightwatch.js in project structure and paste this line in it

require(‘./node_modules/nightwatch/bin/runner.js’);

 

• In your visual code Terminalrun the command npm init and this will create

package.json  file in your project structure.

Press Enter for all questions and in last enter yes

4. Now ,will install nightwatch using npm

• Run command in terminal  — npm install nightwatch –save
• After install nightwatch this will create folder for node modules.
• Make new folders — mkdir pages tests lib
• /pages
• /tests
• /lib

 

5.Download the latest version of Selenium Standalone  jars—

• From SeleniumHQ — http://www.seleniumhq.org/download/

 

• Download the latest version of Chrome Driver — For window Make sure to download chromedriver.exe latest version.
• Based on your OS — https://chromedriver.storage.googleapis.com/index.html?path=2.33/
  6. From Downloaded folder, move both files — Selenium-Standalone-3.x.x. jar and chrome driver to /lib directory on your project.

  7.Copy following nightwatch.json and paste into your project . (source http://nightwatchjs.org/gettingstarted)

  {
  “src_folders”: [“tests”],
  “output_folder”: “reports/XMLReports”,
  “custom_commands_path”: “”,
  “custom_assertions_path”: “”,
  “page_objects_path”: “pages”,
  “selenium”: {
  “start_process”: true,
  “server_path”: “lib/drivers/selenium-server-standalone-3.141.9.jar”,
  “start_session”: true,
  “log_path”: “log/”,
  “host”: “127.0.0.1”,
  “port”: 4444,
  “cli_args”: {
  “webdriver.chrome.driver”: “lib/drivers/chromedriver.exe”
  }
  },
  “test_settings” : {
  “chrome”: {
  “launch_url”: “http://localhost”,
  “selenium_port”: 4444,
  “selenium_host”: “localhost”,
  “silent”: true,
  “screenshots”: {
  “enabled”: false,
  “path”: “screenshots/Chrome/”
  },
  “desiredCapabilities”: {
  “browserName”: “chrome”,
  “chromeOptions”: {
  “args”: [
  “disable-web-security”,
  “ignore-certificate-errors”,
  “–test-type”
  ]
  }
  }
  },

  “edge” : {
  “desiredCapabilities”: {
  “browserName”: “MicrosoftEdge”
  }
  }
  }
  }8.Set path for selenium and chrome driver in nightwatch.json.

  

9.Change the start_process:true

 

Create a example file let’s call it test.js

10.In your visual code terminal you can run

 — node nightwatch -e chrome -a test.js

output:-

 

Source code:-

1.Pages—>login.js

var loginCommands = {

login: function() {

return this.waitForElementVisible(‘body’, 1000)

.maximizeWindow()

.verify.visible(‘@userName’)

.verify.visible(‘@password’)

.verify.visible(‘@submit’)

.setValue(‘@userName’, ‘qa@pawlytics.com’)

.setValue(‘@password’, ‘test@123’)

.pause(1000)

.click(‘@submit’)

.pause(1000);

browser

.setCookie({name:’mycokkies’,value:’qa@pawlytics.com’})

.getCookie(‘mycokkies’,function callback(result)  {

console.log(result);

})

browser

.setCookie({name:’mycokkiesjwt’,value:’jwt’})

.getCookie(‘mycokkies’,function callback(result)  {

console.log(result);

})

}

};

module.exports = {

commands: [loginCommands],

url: function() {

return ‘https://app.pawlytics.com/login’                    },

elements: {

userName: {

selector: ‘//*[@id=”__next”]//div[1]//div[2]//div[1]//div[2]//form//div[1]//div//input’,

locateStrategy: ‘xpath’

},

password: {

selector: ‘//*[@id=”__next”]//div[1]//div[2]//div[1]//div[2]//form//div[2]//div//input’,

locateStrategy: ‘xpath’

},

submit: {

selector: ‘//*[@id=”__next”]//div[1]//div[2]//div[1]//div[2]//form//button’,

locateStrategy: ‘xpath’

}

}

};

Test–>test.js

module.exports = {

‘Pawlytics_pets_world’ : function (browser) {

//create an object for login

var login = browser.page.login();

//execute the login method from //tests/pages/login.js file

login.navigate().login();

//You can continue with your tests below:

// Also, you can use similar Page objects to increase reusability

browser

.pause(3000)

.end();

}

};

————————*—————————Good Luck————————-*————————————–*——-