Blog

Introduction

By default, Nightwatch uses CSS selectors for its locator strategy. You can change this behavior for an individual test file by using the methods “useCss()” and “useXpath()”. These allow you to switch back and forth between CSS and XPath selectors.

Why would you want to do this? Sometimes XPath has a better way of accessing the DOM. Or maybe you are using some custom commands that require XPath. Or the default for Nightwatch gets changed from CSS to XPath, and you don’t want to rewrite your tests.

I prefer the CSS selectors, but my coworker prefers XPath. Sometimes we share each other’s code, so we need to switch to the appropriate selector.

Whatever the reason, it’s nice to have a way to switch back and forth if needed.

What we’ll cover

• Switch to XPath and set the value of an input field
• Switch back to CSS, clear the input, and set a different value

Let’s Get Started

We’re going to do some code examples. Refer to this post if you need to know how to install Nightwatch first.

Create a test directory.

mkdir tests

Update your nightwatch.conf.js file to point to this directory. .

src_folders: ["./tests"],

Add a new file under “tests”. Call it “selectors.js”.

Create an empty test.

// selectors.js
module.exports = {
    "css and xpath": function(browser) {
        
    }
}

Browse to the test site

Here’s the web page we’ll run against:

http://tutorials.actionqa.com/yt/nw/locator-01.html

Let’s add the code to navigate to that page.

module.exports = {
  "css and xpath": function (browser) {
    browser.url("http://tutorials.actionqa.com/yt/nw/locator-01.html");  
  }
}

Set the input field value

On the page is an input field. We’ll be setting a value with our test.

The CSS selector for this field is

#text-input

Let’s set a value in this input field. By default, Nightwatch uses CSS selectors, so we don’t need to do anything special. I’m adding some pauses so we can see what’s happening when the test runs. Otherwise it goes by too fast.

module.exports = {
  "css and xpath": function (browser) {
    browser.url("http://tutorials.actionqa.com/yt/nw/locator-01.html");
    browser.pause(1 * 1000);
    browser.setValue("#text-input", "This is CSS!!!");
    browser.pause(2 * 1000);
  }
}

Let’s execute the code to see what happens.

npx nightwatch -e chrome

You should see “This is CSS!!!” in the input field.

Switch to using XPath

If you want to switch to using XPath, just use the “useXpath()” method.

The XPath selector for the input is

//*[@id="text-input"]

Let’s switch to using XPath, clear the input, and set a new value.

module.exports = {
  "css and xpath": function (browser) {
    browser.url("http://tutorials.actionqa.com/yt/nw/locator-01.html");
    browser.pause(1 * 1000);
    browser.setValue("#text-input", "This is CSS!!!");
    browser.pause(2 * 1000);
    // Switch to XPath
    browser.useXpath();
    browser.clearValue('//*[@id="text-input"]');
    browser.setValue('//*[@id="text-input"]', "Now I'm using XPath!!!");
    browser.pause(2 * 1000);
  }
}

Then run the code:

npx nightwatch -e chrome

Every method you use after calling .useXpath() will use XPath. In order to use CSS again, you’ll have to call .useCss().

Switch back to CSS

Now, let’s switch back to CSS, clear the input field, and set a new value.

module.exports = {
  "css and xpath": function (browser) {
    browser.url("http://tutorials.actionqa.com/yt/nw/locator-01.html");
    browser.pause(1 * 1000);
    browser.setValue("#text-input", "This is CSS!!!");
    browser.pause(2 * 1000);
    // Switch to XPath
    browser.useXpath();
    browser.clearValue('//*[@id="text-input"]');
    browser.setValue('//*[@id="text-input"]', "Now I'm using XPath!!!");
    browser.pause(2 * 1000);
    // Switch back to CSS
    browser.useCss();
    browser.clearValue("#text-input");
    browser.setValue("#text-input", "Back to CSS!!!");
    browser.pause(2 * 1000);
  }
}

And run with

npx nightwatch -e chrome

And you’re back to using CSS again.

Summary

We learned how to switch back and forth between CSS and XPath. The .useCss() and .useXpath() methods will alter the rest of the test to use the desired locator strategy.

This isn’t the only way to switch locator strategies. We’ll cover different ways to use the desired selector in further articles.

I hope you enjoyed this article. Please ask any questions in the comments. I’d love to hear from you!