Transcripted Summary
Nightwatch makes it very easy for us to navigate the browser.
We'll be taking a deeper look into some of the methods that it provides us with navigating back and forth and getting useful information about our URL in Nightwatch.
# .init()
Let's start off by looking at the .init() function.
So this command is an alias to the URL command that we have used before to navigate to a particular URL, but it can also perform navigating to the default launch URL that we can specify in our nightwatch.json file. So let's go ahead and see what that looks like.
{
"src_folders": [ "tests" ],
"detailed_output": true,
"globals_path": "globals/globalModule",
"page_objects_path": [ "pages" ],
"webdriver": {
"start_process": true,
"server_path": "node_modules/.bin/chromedriver",
"port": 9515
},
"test_settings": {
"default": {
"desiredCapabilities": {
"browserName": "chrome"
}
}
}
}
We did not specify a launch_url under our test_settings, but we can go ahead under default and set launch_url to be the base URL that we would want to navigate to.
So, for example, the base URL would be https://ultimateqa.com, and that is our launch URL.
{
"src_folders": [ "tests" ],
"detailed_output": true,
"globals_path": "globals/globalModule",
"page_objects_path": [ "pages" ],
"webdriver": {
"start_process": true,
"server_path": "node_modules/.bin/chromedriver",
"port": 9515
},
"test_settings": {
"default": {
"launch_url": "https://ultimateqa.com",
"desiredCapabilities": {
"browserName": "chrome"
}
}
}
}
If I create a new file and call it navigation.js, I'll be able to navigate to that URL by specifying the test name "Should navigate by default URL" and we will call client.init() and pause for two seconds.
module.exports = {
"Should naviagte by default URL": (client) => {
client.init().pause(2000)
}
}
Let's run this new file and see what we get.
We'll navigate to our ./node_modules/.bin folder and we'll specify the test that we want to use. So let's run this: ./node_modules/.bin/nightwatch -t ./tests/navigation.js
There were no errors and it did navigate to the default URL that we specified in the launch_url config.
# .url()
Now that is set up, we can use the .url() function that we viewed before to navigate to a specific URL.
Let us navigate to the same form page that we have been using.
module.exports = {
"Should naviagte by default URL": (client) => {
client.init()
.pause(2000)
.url('https://ultimateqa.com/filling-out-forms')
}
}
Let's run this. We're on the base URL, and now we're navigating to the form.
# .back() & .forward()
Now that we do that, we have some browser history of different forms that we have gone to. Nightwatch makes it very easy for us to use commands like .back() and .forward().
So with the .back() command, we can navigate back in the browser history.
For example, the first URL we went to was the base URL and then we navigated to the form URL, so now if I use the .back() function, or command, it would take us to the base URL.
module.exports = {
"Should naviagte by default URL": (client) => {
client.init()
.pause(2000)
.url('[https://ultimateqa.com/filling-out-forms](https://ultimateqa.com/filling-out-forms)')
.back()
}
}
So let's do that and see what happens. It takes us back and then it's done.
Now we'll also use the .forward() function and like it said, you go forward.
module.exports = {
"Should naviagte by default URL": (client) => {
client.init()
.pause(2000)
.url('[https://ultimateqa.com/filling-out-forms](https://ultimateqa.com/filling-out-forms)')
.back()
.forward()
}
}
# .getTitle()
What I would like to do as well, I would like to use the .getTitle() function so we can get the title of each of the pages that we're navigating to back and forth.
So this method returns the title of our current page.
Let's do that so we can see what's happening. I'll make some modifications to our test.
So I'll just remove the pause, call .getTitle() and I'll also want to see the results in the terminal. I want to do this for all of the functions I'll be navigating. So therefore, we can see what's happening.
module.exports = {
"Should naviagte by default URL": (client) => {
client.init()
.getTitle( (title) => console.log(title))
.url('https://ultimateqa.com/filling-out-forms')
.getTitle( (title) => console.log(title))
.back()
.getTitle( (title) => console.log(title))
.forward()
.getTitle( (title) => console.log(title))
}
}
First, it navigated to the home, then went to the form, went back to the home, and then went back to the form. And very, very easy to use.
# .refresh()
Another thing that we can do - we can refresh the current page that we are on. Basically reload it by just specifying .refresh().
So what if we did something on the page, but we need to refresh the page so that information can be shown? Then we can use that method.
# .urlHash()
Also, there is the hashtag URL function .urlHash().
So this is a very convenient command that adds a specified hashtag to our current launch URL. Let's see how this works.
Say .urlHash() and let us just add some random string. We should be able to see this in the URL once we run it.
module.exports = {
"Should naviagte by default URL": (client) => {
client.init()
.getTitle( (title) => console.log(title))
.url('https://ultimateqa.com/filling-out-forms')
.getTitle( (title) => console.log(title))
.back()
.getTitle( (title) => console.log(title))
.forward()
.getTitle( (title) => console.log(title))
.urlHash('#random')
}
}
As you can see, it was in the URL for a second.
This is very useful if we have anchors on the page, because a lot of modern websites only have a landing page that have all of their information on different sections.
So they'll have the contact information, they'll have their pricing information, and what if you just easily want to navigate to those sections?
You can use client.init(), .urlHash(), and then you just specify the IDs of those sections and Nightwatch will automatically go to that section without you having to explicitly write out that URL to go there. So, that's really neat.
Also, they have the .title() function. It's the same thing as "getTitle". So, you'd say browser.title() and it would return the JSON object and you'd be able to access the title through the results.
