Nightwatch Js an end to end testing tool for automating web

in this lecture we are going to learn Nightwatch Js setUp , initially we will be starting things with Javascript then we will deep dive into typescript .

This lecture updated on Nov23 2022

Here I see I have covered frames topic in typescript , so please check Nightwatch with typescript section and do watch this video to avoid confusion till I add another video tutorial on this in Javascript.

Here main intent is how we can switch to frames in webPage , you can identify frames in webpage by searching //iframe tag in the console. for finding indexes you just need to write (//iframe)[here goes the index] and search in console [don't forget if you find some frame at index two like (//iframe)[2] then in your code write browser.frame(1) because indexing starts from zero.

browser.frame(index|id|some web element that you can construct out of frame tag) is all you need to know for switching to frames .

for getting back to parent frame or out of frame just use browser.frameParent() or browser.frame(null)

In this video I will cover nightwatch reporting with mocha awesome & how to add logs to mocha reporting

const addcontext = require("mochawesome/addContext");

describe('Facebook test', function () {

  // test() and specify() is also available

  it('amazon title test', function (browser) {

    addcontext(this, "verifying the title ")

    browser.assert.titleContains("Online Shopping site in India: Shop Online for Mobiles, Books, Watches, Shoes and More - Amazon.in")

  });

  it('amazon cart button test when no products', function (browser) {

    addcontext(this, "verifying the cart button ")

    browser.click('#nav-cart-text-container')

      .assert.elementPresent("#nav-cart-text-container")

  });

   this.afterEach(function (browser, done) {

    let path = process.cwd() + '/screenshots/' + Math.random().toString().substring(2, 5) + '.png'

    browser.saveScreenshot(path)

    addcontext(this, path)

    done();

  })

  this.beforeEach(function (browser, done) {

    addcontext(this, "navigating to amazon ")

    browser.url(browser.launchUrl)

    done();

  })

});

reporterOptions:{

             'code':false,

             'charts':true,

             'timestamp':true,

             'reportPageTitle':'Automation Report',

             'reportTitle':'Automation Sample Report'

          }

pass "this" context from your tests to pages so that you can write logs for the code that u write in your pages as well. In page methods receive "this" context as (testCtx:Mocha.Context)  . In order to use multiple it blocks use nightwatch 2.0 plus version

In this video we will talk about how to run tests in headless mode , do use resizeWindow(1600,900) method instead maximizeWindow() in headless mode. you can also use below desired capabilities in your config file in default env or which ever environment it might be rather specifying in command line so that it will run in headless mode.

desiredCapabilities: {

        browserName: 'chrome',

        javascriptEnabled: true,

        acceptSslCerts: true,

        chromeOptions: {

          args: ['headless','disable-gpu']

        }

      }

Hi Guys , in this video , we will group our tests and run them