How to shard test files in protractor?

Sharding is a method for distributing data or tasks across several machines to improve performance and scalability. Sharding is a technique used in test automation to distribute test cases among various instances of the testing framework and speed up test execution. Protractor is a testing framework that facilitates sharding test cases using the Jasmine test framework.

To shard test files in Protractor, a configuration file must be written that details the path of the test files and the number of instances to be created. To shorten the overall test execution time, Protractor divides the test cases across several instances and executes them concurrently.

Sharding must be carefully planned and configured to guarantee reliable and consistent test results. While implementing sharding, trade-offs between test speed and accuracy must be considered, and test results must be closely watched to spot any potential problems.

Steps to use Protractor Shard

To install and set up protractor you need to do the following steps −

• Install Node Js in your system from the official website.

• Install protractor using the below command −

npm install -g protractor

• Check the version to ensure the installation using the below command −

protractor --version

• Update the webdriver-manager using the below command −

webdriver-manager update

• Update the conf.js file to describe the protractor flow

• Declare two capabilities in the capabilities block of the conf.js file to enable shading −

shardTestFiles − enables several specifications to run concurrently. If this is true, specifications will be sharded by file (i.e., all files run by this set of capabilities will run in parallel). The default value is false.

maxInstances − The number of browser instances that can run concurrently for this set of capabilities. This is only required if shardTestFiles is set to true. The default value is 1.

Example

In this example, we will see how we can test shard files in protractor. We need to configure the conf.js file with shardTestFiles and maxInstances. We use test-file1.js and test-file2.js as our specs to test the index.html and index2.html files. The codes for all of these files are as below −

conf.js − It is our configurations file

// An example configuration file.
exports.config = {
   directConnect: true,

   // Capabilities to be passed to the webdriver instance.
   capabilities: {
      'browserName': 'chrome',

      // Sharding
      'shardTestFiles': true,
      'maxInstances': 1,
   },

   // Framework to use. Jasmine is recommended.
   framework: 'jasmine',

   // Spec patterns are relative to the current working directory when
   
   // protractor is called.
   specs: ['test-file1.js' , 'test-file2.js'],

   SELENIUM_PROMISE_MANAGER: false,

   // Options to be passed to Jasmine.
   jasmineNodeOpts: {
      defaultTimeoutInterval: 30000
   }
};

test-file1.js − Testing 1 file

describe ('Protractor Test App' , function () {
   it ('Test 1' , async function () {

      // Disable Angular render update waiting 
      await browser.waitForAngularEnabled (false);

      // Get the HTML file that must be tested
      await browser.get ('http://127.0.0.1:5500/index.html');

      // Test Element
      let testElement = element (by.id ('test-element'));

      // Allow the fade in process to finish
         await browser.driver.wait ( async function () {
         return await testElement.getCssValue ('opacity') === '1';
      } , 30000, "It is taking more time than expected!");
   });
});

test-file2.js − Testing 2 file

describe ('Protractor Test App' , function () {
   it ('Test 2', async function () {

      // Disable Angular render update waiting 
      await browser.waitForAngularEnabled (false);

      // Get the HTML file that must be tested
      await browser.get ('http://127.0.0.1:5500/index2.html');

      // Test Element
      let testElement = element (by.id ('test-element'));

      expect(testElement.isDisplayed()).toBe(false);
   });
});

index.html − It is the file to be tested

<!DOCTYPE html>
<html>
<head>
   <title>Using JavaScript to Implement Fade-In effect</title>
</head>
<body>
   <!-- Test Element -->
   <h4 id="test-element" style="opacity: 0">Some Text</h4>
   <script type="text/javascript">
      let elementOpacity = 0
      let elementInterval = 0

      window.onload = function () {
         elementInterval = setInterval (() => {
            let testElement = document.getElementById ('test-element')
            elementOpacity = Number(
               window.getComputedStyle(testElement).getPropertyValue('opacity')
            )
            if (elementOpacity < 1) {
               elementOpacity = elementOpacity + 0.1
               testElement.style.opacity = elementOpacity
            } else {
               clearInterval(elementInterval)
            }
         }, 200)
      }
   </script>
</body>
</html>

index2.html − It is the file to be tested

<!DOCTYPE html>
<html>
<body>
   <!-- Test Element -->
   <div id="test-element" style="display: none"> Some Text </div>
</body>
</html>

Run the following command −

protractor conf.js

Output

Protractor is a handy tool for automated testing, but we need to ensure the steps are correct and in order.