Writing UI Tests Using Page Object Models With NightwatchJS Part II

My blogs chronicle my experience as a technologist making my way into Silicon Valley. I am a queer person of color, gender non-conforming, immigrant, and ex-foster youth. I come from a non-traditional coding background. I studied a few CS courses in college and ended up majoring in the humanities before becoming a teacher in the urban public school system. Teaching web development to under served teens turned me on to coding. After finishing coding school, I began working at start ups in San Francisco. Half of my blogs are about technical subjects and the other half are about equality and tech access (my journey).

Before we rewrite our code using the Page Object Model, let’s make these tests a LITTLE MORE interesting. Let’s validate navigation for a link.

We are going to test that we can click on a link and it will navigate to the new page. On that new page, we will validate the navigation worked by looking for an item on that page. This time though, instead of manually testing that process, let’s be awesome,

LET’S AUTOMATE IT!

First, let’s figure out the EXACT steps the user needs to take to validate our test. DO NOT SKIP THIS STEP OF THE PROCESS. THIS STEP IS VERY IMPORTANT. It allows us to think about how we want the browser to interact with the UI. These steps will help us write commands for the browser in our framework.

Going through it manually will ensure our code works better and breaks less. So let’s outline the commands that the browser needs to take.

Browser Commands — Sauce Labs’ Page

1. Go to Sauce Lab’s website / Navigate to its URL
2. Locate the link
3. Click the link

Browser Commands — Sauce Labs’ Page Two

1. Go to Sauce Lab’s Page Two / Navigate to that new URL
2. Look for an item on that page

Let’s write our commands into a page object. Make a new directory called page_objects and a new Sauce Labs page object.

mkdir -p /test/page_objects && touch sauceLabs.js

Per Nightwatch’s syntax, let’s use a standard object. At the top of the file let’s create a list of commands.

const sauceLabCommands = {  clickLink: function(){    this.waitForElementVisible('@link', 1000)      .waitForElementVisible('@link', 1000)      .click('@link')      .api.pause(1000)    return this;  }};module.exports = {  commands: [sauceLabCommands],  url: function() {    return this.api.launchUrl + '/test/guinea-pig';  },  elements: {    link: {      selector: 'a[href="/test-guinea-pig2.html"]'    }  }};

Let’s tell NightwatchJS where our page objects live and the url we want it to open.

"src_folders": [  "test/ui_tests"],"page_objects_path": "test/page_objects",

//the google url"test_settings": {  "default": {    "launch_url": "https://saucelabs.com",

Here’s our current test.

module.exports = {  "Validate Sauce Labs' Page Title": function(browser) {     browser       .url('https://saucelabs.com')       .waitForElementVisible('body')       .assert.title('I am a page title - Sauce Labs')       .saveScreenshot('saucelabs.png')       .end();     }};

Let’s create 2 tests, one that validates that Sauce Labs’ page has loaded and one that validates Sauce Labs’ link. Let’s rewrite it to use our page object.

require('../../nightwatch.conf.js');module.exports = {  "Validate Sauce Labs' Page Has Loaded": function(browser) {    const sauceLabs = browser.page.sauceLabs();    sauceLabs.navigate()      .waitForElementVisible('body', 1000)      .assert.title('I am a page title - Sauce Labs')  },  "Validate Sauce Labs' Link Navigation": function(browser) {    const sauceLabs = browser.page.sauceLabs();    sauceLabs.navigate()      .waitForElementVisible('@link', 1000)      .clickLink();//navigate to the new page//search for an element on that new page

  }};

We’re not quite done. We have to make sure we can navigate to the search results page object. Let’s make a page object for the search results.

cd page_objectstouch sauceLabsTwo.js

Let’s write our new sauceLabsTwopage object.

module.exports = {  url: function() {    return this.api.launchUrl + '/test-guinea-pig2.html';  },  elements: {    div: {      selector:        '#i_am_an_id'    }  }};

Let’s finish writing our code for our 2 tests.

//navigate to the new pageconst sauceLabs2 = browser.page.sauceLabsTwo();

//search for an element on that new pagesauceLabs2  .waitForElementVisible('@div', 1000)  .assert.visible('@div');

browser.end();

Alright, let’s run our tests

npm test

You should see an automated browser open up, click a link and navigate to a new page. If all went well, you should see green checks for your passing tests!

Writing UI Tests Using Page Object Models With NightwatchJS Part II was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.