Chapter 4 - User Actions and Prompts

Transcripted Summary

In this section, we'll be talking about Nightwatch user actions and prompts.

Nightwatch gives us a lot of commands that can be used to simulate a user action.

While using the computer, we input a lot of information through the mouse and the keyboard, so sometimes in our automation we might want to do the same.

# .keys()

Our first method that we'll take a look at is the .keys() method.

So this method sends a sequence of strokes to an active element.

Nightwatch has made it easy for us to reference different keys through the Nightwatch client.Keys (note: capital K) object, which they have loaded some predefined keys based on the W3C WebDriver draft spec.

The only issue with this is that Nightwatch, in their documentation, did not actually give you a list of the available keys.

So what we'll do - we'll go ahead and we'll print out the object client.Keys into the terminal so we can see what's available.

We'll also perform some actions to see how we can use this method. So let's do that now.

I'll create a new file called user.actions.prompts.js.

We'll go ahead and define our test suite module.exports - we'll call it "Should perform key strokes".

We will define our browser instance, call client.url() to navigate to that form page that we have been using, and print out the keys within this callback.

Because I know it's a JSON object, and I want to see that clearly, I'm going to call JSON.stringify() to see client.Keys.

These are some additional arguments to make it look pretty in the terminal - null, '\t' - this is native to JavaScript, not Nightwatch.

module.exports = {
    "Should perform key strokes": (client) => {
        client
        .url('[https://ultimateqa.com/filling-out-forms/](https://ultimateqa.com/filling-out-forms/)', () => {
            console.log(JSON.stringify(client.Keys, null, '\t'))
        })
     }
}

So let's run this test. We'll just specify our new file path, which is user.actions.prompts.js. So we'll run:

./node_modules/.bin/nightwatch -t ./tests/user.actions.prompts.js

Okay, the page has loaded. Now we can see the list of keys that are available to us in Nightwatch by default. We can use cancel, help, backslash, tab, clear, return, enter, shift, control, escape, space, insert, semicolon and so forth. We'll be using a few of these.

{
        "NULL": "",
        "CANCEL": "",
        "HELP": "",
        "BACK_SPACE": "",
        "TAB": "",
        "CLEAR": "",
        "RETURN": "",
        "ENTER": "",
        "SHIFT": "",
        "CONTROL": "",
        "ALT": "",
        "PAUSE": "",
        "ESCAPE": "",
        "SPACE": "",
        "PAGEUP": "",
        "PAGEDOWN": "",
        "END": "",
        "HOME": "",
        "LEFT_ARROW": "",
        "UP_ARROW": "",
        "RIGHT_ARROW": "",
        "DOWN_ARROW": "",
        "ARROW_LEFT": "",
        "ARROW_UP": "",
        "ARROW_RIGHT": "",
        "ARROW_DOWN": "",
        "INSERT": "",
        "DELETE": "",
        "SEMICOLON": "",
        "EQUALS": "",
        "NUMPAD0": "",
        "NUMPAD1": "",
        "NUMPAD2": "",
        "NUMPAD3": "",
        "NUMPAD4": "",
        "NUMPAD5": "",
        "NUMPAD6": "",
        "NUMPAD7": "",
        "NUMPAD8": "",
        "NUMPAD9": "",
        "MULTIPLY": "",
        "ADD": "",
        "SEPARATOR": "",
        "SUBTRACT": "",
        "DECIMAL": "",
        "DIVIDE": "",
        "F1": "",
        "F2": "",
        "F3": "",
        "F4": "",
        "F5": "",
        "F6": "",
        "F7": "",
        "F8": "",
        "F9": "",
        "F10": "",
        "F11": "",
        "F12": "",
        "COMMAND": "",
        "META": ""
}

I think this is one thing that Nightwatch needs to put in their documentation.

Who knows, I might just update the documentation to include this list so it's easy for users to know what is available to them.

Okay, so now that we have that set up, let me remove the code to print the keys.

What we'll do, we'll interact with this text area right here to see how it actually works.

Let's set the value of the input to "testing key strokes".

Now we'll use .keys() and we'll use BACK_SPACE twice to remove the 'e' and the 's'.

And then we will press ENTER, so we can get a new line.

And once you press ENTER, I'll just press the SUBTRACT key and see what that does.

Then, let us pause for a few seconds so we can see what took place.

module.exports = {
    "Should perform key strokes": (client) => {
        client
        .url('https://ultimateqa.com/filling-out-forms/')
        .setValue('#et_pb_contact_message_0', 'testing key strokes')
        .keys(client.Keys.BACK_SPACE)
        .keys(client.Keys.BACK_SPACE)
        .keys(client.Keys.ENTER)
        .keys(client.Keys.SUBTRACT)
        .pause(5000)
     }
}

Let's run this and see what's happened.

the setValue happened
"testing keystrokes" was entered
we did two backspaces
the 'es' was removed
then we pressed enter, which brought us to a new line
then also pressed subtract

And that's what we saw in the text field.

We demonstrated how we can go about using .keys() and also accessing different elements within this Keys object.

Resources

keys() API Reference

Quiz

The quiz for this chapter can be found in section 4.4

Add AI to your existing test scripts in minutes!