Blog

Overview

In the previous post, we covered how to install Nightwatch. Now, let’s write a simple test case.

What will be covered:

• Navigating to a website
• Clicking buttons
• Using a Nightwatch Assertion
• Grabbing CSS selectors from a page
• Running a test using Chrome

Create a Test Directory

Let’s create a sub-directory that will hold all of our test files. Let’s call it “test”

mkdir test

Add the Test Directory to the Nightwatch Config File

To let Nightwatch know what directory has the tests, we need to update the nightwatch.conf.js file. We created this file in the previous lesson and should be in the install folder.

To add the test directory we just created, update the line that says src_folders to look like the following:

src_folders: ["./tests"],

Create an Empty Test

From Visual Studio Code, you can right click on the “tests” directory and add “New File”. Name this file “blacklivesmatter.js”. (You can name this file whatever you want, though.)

blacklivesmatter.js

module.exports = {
    "Donate to Black Lives Matter": function(browser) {
        
    }
}

Open a Web Page

For this test, we’re using the Black Lives Matter website:

https://blacklivesmatter.com/

Add the following line to your test to navigate to that page.

module.exports = {
    "css and xpath": function(browser) {
        browser.url("https://blacklivesmatter.com")
    }
}

Run the Test

Before going further, make sure this test runs. Go back to the command line and run the following:

npx nightwatch -e chrome

Make sure to run this from the same folder that has your package.json file.

You will see the Chrome browser come up, navigate to that web page, and very quickly close.

Adding Pauses

If you want to see what’s happening in the browser, you will need to add “pause()” calls. This will wait for a certain time before doing the next action. It accepts milliseconds as its parameter. So adding 3000 milliseconds will equal a 3 second pause.

Let’s add a pause and rerun the test

module.exports = {
    "Donate to Black Lives Matter": browser => {
        browser.url("https://blacklivesmatter.com/")
        browser.pause(3 * 1000)
    }
}

Run the test again

npx nightwatch -e chrome

This time the test will wait 3 seconds before closing the browser. This helps when you need to see what’s going on with the code you just wrote.

Grabbing CSS Selectors Using Dev Tools

Running this test, you will see a popover appear on the screen. We’ll need to dismiss this before continuing the test.

Open Chrome in incognito mode. Navigate to https://BlackLivesMatter.com. You should see the popover.

To dismiss this popover, we’ll need to figure out what the CSS selector for the “X” button is. To do this, you will need to open your dev tools.

On Mac, options + command + i

On Windows, ctrl + shift + i

This should open the dev tools on the right of your browser. Now, click the “inspect” tool.

Now hover over the “X” button on the popup and click it. This won’t click the “X” button. Instead, it will take us to where the “X” button is in the dev tools Elements panel.

With the button highlighted in dev tools:

• right-click (ctrl + click on Mac) on this element
• Select “Copy”
• Select “Copy selector”

This will copy the CSS selector to your clipboard. If you pasted this out to your editor, you’d something like the following:

#popmake-5034 > button

This is the selector we need to dismiss the popover.

Clicking Buttons

With the selector in hand, we’re going to use Nightwatch’s “browser.click()“ method to both dismiss the popover and then click the Donate button.

The following code assigns the CSS selector for the popover’s “X” button to a variable. Then it passes the variable to the browser.click() method.

const dismissPopup = "#popmake-5034 > button"
browser.click(dismissPopup)

Of course, you didn’t need to assign to a variable if you didn’t want to. I did this to make it more readable. You could have just used the selector string directly:

browser.click("#popmake-5034 > button")

I used the variable to improve readability. It’s your personal preference.

After dismissing the popover, we’ll want to click the “Donate” button. Repeat the process above to get the CSS selector for the “Donate” button. (You might have to dismiss the popover to get to it.)

Again, add the code to click the Donate button.

const donate = "#menu-primary-menu > li.menu-highlight.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-2813.nav-item > a"
browser.click(donate)

Now here’s the code so far. I’m adding some “browser.pause()” calls so you can see what happens as things get clicked. Otherwise, the test executes too quickly.

module.exports = {
  "Donate to Black Lives Matter": (browser) => {
    browser.url("https://blacklivesmatter.com/");
    browser.pause(1 * 1000)
    const dismissPopup = "#popmake-5034 > button";
    browser.click(dismissPopup);
    browser.pause(1 * 1000)
    const donate =
      "#menu-primary-menu > li.menu-highlight.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-2813.nav-item > a";
    browser.click(donate);
    browser.pause(3 * 1000)
  },
};

Then run the test:

npx nightwatch -e chrome

Asserting an Element Contains Text

A test wouldn’t be a test with the “test” part, right? That’s where Nightwatch’s “Assert” methods come in.

“Assert” methods test if something is true or that a condition exists. If the return value is false, the test fails.

For this exercise, we’re going to check if the text “Fund the Movement” is in the header on the Donate page. For that, we’ll use the “assert.containsText()” method.

The previous steps have left us on the Donate page. Like the other steps above, let’s grab the CSS selector of the “Fund the Movement” header.

Then we’ll add the following two lines of code.

const fundTheMovementHeader = "#contribution_blurb > p:nth-child(1) > strong > i"
browser.assert.containsText(fundTheMovementHeader, "Fund the Movement")

Above, we assigned the CSS selector to “fundTheMovement” variable. Then we asserted that selector contains the text “Fund the Movement”.

Here’s all the code with some browser.pause()’s added in so we can see what’s happening.

module.exports = {
  "Donate to Black Lives Matter": (browser) => {
    browser.url("https://blacklivesmatter.com/");
    browser.pause(1 * 1000)
    const dismissPopup = "#popmake-5034 > button";
    browser.click(dismissPopup);
    browser.pause(1 * 1000)
    const donate =
      "#menu-primary-menu > li.menu-highlight.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-2813.nav-item > a";
    browser.click(donate);
    browser.pause(3 * 1000)
    const fundTheMovementHeader = "#contribution_blurb > p:nth-child(1) > strong > i"
    browser.assert.containsText(fundTheMovementHeader, "Fund the Movement")
    browser.pause(1 * 1000)
  },
};

Now let’s run the code.

npx nightwatch -e chrome

You should navigate to the page, dismiss the popup, and then go to the Donate page. And then you should see that your test passed.

Final Code

Here’s the code with all the pauses removed.

module.exports = {
  "Donate to Black Lives Matter": (browser) => {
    browser.url("https://blacklivesmatter.com/");
    const dismissPopup = "#popmake-5034 > button";
    browser.click(dismissPopup);
    const donate =
      "#menu-primary-menu > li.menu-highlight.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-2813.nav-item > a";
    browser.click(donate);
    const fundTheMovementHeader =
      "#contribution_blurb > p:nth-child(1) > strong > i";
    browser.assert.containsText(fundTheMovementHeader, "Fund the Movement");
  },
};

Summary

In this post, we covered

• Grabbing CSS selectors from Chrome’s Dev Tools
• Navigating to a web page
• Clicking on elements
• Adding an assertion to test for text in an element

Please give the code a try and let me know how it works for you! Thank you for reading!