Protractor is an end-to-end test framework developed for Angular and AngularJS applications. It runs tests against the application interacting with it as a real user would, running in a real browser. In this article, we are going to discuss how we can shard test suites in protractor.
Prerequisite: Installation and Setup of Protractor
Sharding of test suites means to run the test suites in parallels. Suppose there are two test suites, so sharding in parallels of these two test suites would mean that two instances of chrome would be created and the two test suites would run on the two different instances of chrome separately(i.e, they will run independently of each other) whereas if the two test suites would have run in series then, only one chrome instance will be created and then the second test suite would have to wait for the completion of the first test suite to run (i.e. they could not run independently). Now, as sharding helps the test suites to run in parallel, it would decrease execution time and increase the efficiency of the test.
Below is the flowchart representation of the above explanation:
Running tests in parallels
Running tests in series
Approach:
- We are going to create a basic test program in which we are going to see how we shard test suites
- All the Protractor tests will have a file that will contain the configuration and this will be the initial file that will initiate the test.
- Let’s create this file with the name conf.js.
- For sharding, declare two capabilities in the capabilities block of the conf.js file.
- shardTestFiles – allows different specs to run in parallel. If this is set to be true specs will be sharded by file (i.e. all files to be run by this set of capabilities will run in parallel). Default is false.
- maxInstances – Maximum number of browser instances that can run in parallel for this set of capabilities. This is only needed if shardTestFiles is true. Default is 1.
Step 1: We have to first create a conf.js file consists of the configuration to be used with Protractor.
conf.js
// An example configuration file to // illustrate sharding exports.config = { directConnect: true, // Capabilities to be passed to the // webdriver instance for sharding capabilities: { 'browserName': 'chrome', // Sharding 'shardTestFiles': true, 'maxInstances': 2, }, // Framework to use. Jasmine is // recommended framework: 'jasmine', // Spec patterns are relative to the // current working directory when // protractor is called. specs: ['test1.js','test2.js'], SELENIUM_PROMISE_MANAGER: false, // Options to be passed to Jasmine. jasmineNodeOpts: { defaultTimeoutInterval: 30000 } }; |
Step 2: We will create the two HTML files called index1.html and index2.html.
index1.html
<!DOCTYPE html> <html> <head> <title> fade-in effect on page load using JavaScript </title> <script type="text/javascript"> var opacity = 0; var intervalID = 0; window.onload = fadeIn; function fadeIn() { setInterval(show, 200); } function show() { var body = document.getElementById("fade-in"); opacity = Number(window.getComputedStyle(body) .getPropertyValue("opacity")); if (opacity < 1) { opacity = opacity + 0.1; body.style.opacity = opacity } else { clearInterval(intervalID); } } </script> </head> <body> <!-- The element to be tested --> <div id="fade-in" style="opacity: 0;"> Inner text </div> </body> </html> |
index2.html
<!DOCTYPE html> <html> <body> <!-- The element to be tested --> <div id="hidden-div" style="display: none;"> Inner text </div> </body> </html> |
Step 3: We will create the test1.js file. In this file, we are going to access the index1.html file and then going wait for the element to completely fade in. The browser is a global created by Protractor, which is used for browser-level commands such as navigation with browser.get() method. The describe and it syntax is from the Jasmine framework where describe is a description of your test while it defines the steps for the test.
test1.js
describe('Protractor Demo App', function () { it('should have a title', async function () { // Disable waiting for Angular render update await browser.waitForAngularEnabled(false) // Get the HTML file that has to be tested await browser.get('index1.html'); // Get the fade in element let fadeIn = element(by.id('fade-in')); // Wait for the fade in process to complete await browser.driver.wait(async function() { return await fadeIn.getCssValue('opacity') === '1'; }, 30000, "Taking too long to fade in"); }); }); |
Similarly, we will create test2.js file. In this file, we are going to access the index2.html file and then going to check if the element is hidden or not. The browser is a global created by Protractor, which is used for browser-level commands such as navigation with browser.get() method. The describe and its syntax is from the Jasmine framework where describe is a description of your test while it defines the steps for the test.
test2.js
describe('Protractor Demo App', function () { it('should have a title', async function () { // Disable waiting for Angular render update await browser.waitForAngularEnabled(false) // Get the HTML file that has to be tested await browser.get('index2.html'); // Test if the element is hidden let hiddenDiv = element(by.id('hidden-div')); // This test will pass only when // element is hidden expect(hiddenDiv.isDisplayed()).toBe(false); }); }); |
Step 4: Finally, we will run the configuration file using the command given below. This will run the configuration file and the test will be run as shown in the output below.
protractor conf.js
Output:
