End-to-end testing ensures a smooth and error-free functioning of the application by testing it at all layers. Browser based end-to-end testing also ensures that the application is tested from the user's view and in a real world scenario.
Once the end-to-end tests are integrated in the DevOps pipeline, it ensures that the newly checked in code is tested for regressions and helps detecting any other bugs in an early stage. It also reduces the manual effort of testing done before the delivery/deployment.
In this blog post, we will see how we can use Nightwatch.js to develop end-to-end test cases for applications based on SAPUI5.
We will use a SAPUI5 demo application SAPUI5 Walkthrough.
Before we start, have a look at the following gif from the script execution:
As quoted on Nightwatch.js:
Since Nightwatch.js is a solution based on the Node.js framework, the first step is to download and install Node.js.
Once Node.js is installed, we need to install Nightwatch.js and the required webdrivers.
To install the latest version using the npm command line tool, run the following:
For this blog post, I will use Chrome as the target browser, hence we will download ChromeDriver.
ChromeDriver can be again installed using the npm command line tool:
If the above installation does not work, the binary can be downloaded from the ChromeDriver Downloads page.
Now we are ready with the setup. Let's start coding!
We will create a folder "tests" in the project directory. This folder will contain all the test files.
Now create a Javascript file and write the following code in it:
RunTest.js
The script code is pretty much self explanatory. We start by describing the name of the test suite followed by the name of test case.
Then the browser is opened with the defined URL in the url method.
The waitForElementVisible function pauses the script until the tag 'body' is visible in the DOM.
Then, once the body is loaded, we perform a check using assert.titleContains method. We check the title of the page, which should be 'SAPUI5 Walkthrough'.
After this, the script runs a set of steps that executes the test case scenario:
All the selectors used to find the DOM elements are based on XPath. Read more about XPath here.
Now let's setup the test configuration. Create a file with the name nightwatch.json in the root directory of the project.
The basic configurations can be added for now.
nightwatch.json
Here the "src_folders" property is used to define the path to the tests directory.
Next, we define the webdriver settings.
We define a property start_process, which when enabled, runs the Webdriver server in background in a child process and starts/stops it automatically.
The server_path property defines the path of chromedriver installation.
We then define the testing environment properties.
The folder structure should now look like this:
Now, we are all set to run the script. To run the test, use the following command:
Once we run the script, a browser opens up with the specified URL and then the tests are run.
While the tests run, the nightwatch generates a log which enables us to view the tests that are in action. It also shows the assertions that passed, and any errors that were encountered.
Happy Coding! 🙂
Once the end-to-end tests are integrated in the DevOps pipeline, it ensures that the newly checked in code is tested for regressions and helps detecting any other bugs in an early stage. It also reduces the manual effort of testing done before the delivery/deployment.
In this blog post, we will see how we can use Nightwatch.js to develop end-to-end test cases for applications based on SAPUI5.
We will use a SAPUI5 demo application SAPUI5 Walkthrough.
Before we start, have a look at the following gif from the script execution:
As quoted on Nightwatch.js:
Nightwatch.js is an integrated, easy to use End-to-End testing solution for web applications and websites, written in Node.js. It uses the W3C WebDriver API to drive browsers and perform commands and assertions on DOM elements.
System setup
Since Nightwatch.js is a solution based on the Node.js framework, the first step is to download and install Node.js.
Once Node.js is installed, we need to install Nightwatch.js and the required webdrivers.
To install the latest version using the npm command line tool, run the following:
npm install nightwatchFor this blog post, I will use Chrome as the target browser, hence we will download ChromeDriver.
ChromeDriver can be again installed using the npm command line tool:
npm install chromedriver --save-devIf the above installation does not work, the binary can be downloaded from the ChromeDriver Downloads page.
Test Script
Now we are ready with the setup. Let's start coding!
We will create a folder "tests" in the project directory. This folder will contain all the test files.
Now create a Javascript file and write the following code in it:
RunTest.js
describe('Automation testing of SAPUI5 using NightWatch', function() {
test('Test basic UI5 controls', function(browser) {
browser
.url('https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/tutorial/walkthrough/38/webapp/test/mockServer.html?sap-ui-theme=sap_fiori_3')
.waitForElementVisible('body')
.assert.titleContains('SAPUI5 Walkthrough')
.waitForElementVisible({
locateStrategy: 'xpath',
selector: '//bdi[text()="Say Hello With Dialog"]'
})
.click({
locateStrategy: 'xpath',
selector: '//bdi[text()="Say Hello With Dialog"]'
})
.waitForElementVisible({
locateStrategy: 'xpath',
selector: '//bdi[text()="Ok"]'
})
.click({
locateStrategy: 'xpath',
selector: '//bdi[text()="Ok"]'
})
.useXpath()
.setValue('//input[@value="World"]', ' and Hello Nightwatch')
.click({
locateStrategy: 'xpath',
selector: '//bdi[text()="Say Hello"]'
})
.click({
locateStrategy: 'xpath',
selector: '//table//tr[3]'
})
.waitForElementVisible({
locateStrategy: 'xpath',
selector: '//div[@aria-roledescription="Rating Indicator"]'
})
.click({
locateStrategy: 'xpath',
selector: '//div[@aria-roledescription="Rating Indicator"]'
})
.click({
locateStrategy: 'xpath',
selector: '//bdi[text()="Rate"]'
})
.end();
})
});The script code is pretty much self explanatory. We start by describing the name of the test suite followed by the name of test case.
Then the browser is opened with the defined URL in the url method.
The waitForElementVisible function pauses the script until the tag 'body' is visible in the DOM.
Then, once the body is loaded, we perform a check using assert.titleContains method. We check the title of the page, which should be 'SAPUI5 Walkthrough'.
After this, the script runs a set of steps that executes the test case scenario:
- Clicks a button with text "Say Hello With Dialog".
- Clicks a button with text "Ok" in the dialog.
- Enters a text "and Hello Nightwatch" in the input field where the current text is "World".
- Clicks the button with the text "Hello" in it.
- Clicks the 3rd row in the table to go to the Object page.
- Clicks the rating indicator and then clicks a button with text "Rate" in it.
All the selectors used to find the DOM elements are based on XPath. Read more about XPath here.
Configure the testing setup
Now let's setup the test configuration. Create a file with the name nightwatch.json in the root directory of the project.
The basic configurations can be added for now.
nightwatch.json
{
"src_folders" : ["tests"],
"webdriver" : {
"start_process": true,
"server_path": "chromedriver.exe",
"port": 9515
},
"test_settings" : {
"default" : {
"desiredCapabilities": {
"browserName": "chrome"
}
}
}
}Here the "src_folders" property is used to define the path to the tests directory.
Next, we define the webdriver settings.
We define a property start_process, which when enabled, runs the Webdriver server in background in a child process and starts/stops it automatically.
The server_path property defines the path of chromedriver installation.
We then define the testing environment properties.
Folder Structure
The folder structure should now look like this:
In some systems, the nightwatch has troubles locating the chromedriver installation. In those cases, the chromedriver binary can be added manually to the project root folder and the path of the binary can be defined in the configuration file.
Running the Script
Now, we are all set to run the script. To run the test, use the following command:
nightwatchTest Output
Once we run the script, a browser opens up with the specified URL and then the tests are run.
While the tests run, the nightwatch generates a log which enables us to view the tests that are in action. It also shows the assertions that passed, and any errors that were encountered.
Happy Coding! 🙂
- SAP Managed Tags:
