Transcripted Summary
# Interacting with the Page's Elements
TestCafe provides a set of actions that you can use to interact with the page like:
Click
Navigate
Type text
Select text
Hover
Drag
upload file
Iframes
Windows
In this demo, we will learn how to interact with different page elements with TestCafe. Like, navigate, button, drop-down list, upload files, and more.
The first action that we will work with is navigateTo(). So we have a command with navigateTo(), and we can pass any specific URL with this function.
We can copy firstTest.js or we can create a new test. We'll create a new one navigateTest.js.
Inside this one, we'll create a fixture called "Navigate Example". Then we'll call .page(), and we can add our URL here - in this case - it is our TestCafe demo. So in our fixture, we have our title and the page we'll navigate to.
fixture('Navigate Example')
.page('https://devexpress.github.io/testcafe/example/')
Then inside is the test, which we will call "navigate test". The first part is the name as a string and the second part is the test controller and we are using async, as we mentioned, to handle that promise, t. And then we have here an arrow function just to simplify the body of the function.
Then with await t we can use navigateTo() and here we have our URL as a string. This method navigates to a specific URL and the parameter is a URL. And also, it can be a file or anything else. So navigateTo(), and here we have the URL as a string - for example, here we can navigate to http://www.google.com.
fixture('Navigate Example')
.page('https://devexpress.github.io/testcafe/example/')
test('navigate test',async t => {
await t
.navigateTo("http://www.google.com");
})
So the test would start by navigating to the page URL, and after that, we'll redirect to the google URL.
So let's run our test and check what happened.
testcafe chrome tests/navigateTest.js
TestCafe will run the server and then first, it will navigate to the example URL, and after that will navigate to the Google URL.
This is different from the test.page because test.page overrides the page inside the fixture.
So here's what we need to know about the difference between test.page(), and the navigateTo() function - test.page will override the fixture.page, but navigateTo() - it will open the URL inside the fixture, and after that, navigate to the URL inside the test case.
Resources
Quiz
The quiz for this chapter can be found in 4.10
