How to test if an element has class using Protractor ?

0 0 2 minutes read

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 test if an element has a given class or not.

Pre-requisite: Installation and Setup of Protractor

Approach:

We are going to create a basic test program in which we are going to check if an element has a given class or not.
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.

conf.js:

Javascript

exports.config = { 
  
    // Capabilities to be passed to the 
    // webdriver instance. 
    capabilities: { 
        'browserName': 'chrome'
    }, 
  
    // Framework to use. Jasmine is recommended. 
    framework: 'jasmine', 
  
    // Spec patterns are relative  
    // to the current working directory when 
    // protractor is called. 
    specs: ['test.js'], 
  
    // Options to be passed to Jasmine. 
    jasmineNodeOpts: { 
        defaultTimeoutInterval: 30000 
    }, 
  
    // Url for the file 
    baseUrl: 'file://' + __dirname + '/', 
  
    onPrepare: function () { 
        browser.resetUrl = 'file://'; 
    } 
}; 

Now let’s create our HTML file called test.html which will contain the element to be tested.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Testing</title> 
</head> 
  
<body> 
  
    <!-- The element to be tested -->
    <div id="sample-div" class="zambiatek"> 
        Inner text 
    </div> 
</body> 
  
</html>

Now let’s create our test file test.js. In this file, we are going to access an HTML file and then check if an element has a given class zambiatek or not.
Browser is a global created by Protractor, which is used for browser-level commands such as navigation with browser.get.

describe and it syntax is from the Jasmine framework where describe is a description of your test while it is the steps for the test.

The spec file named test.js:

Javascript

describe('Protractor Demo App', function () { 
    it('should have a class', function () { 
      
        // Disabling waiting for angular 
        browser.waitForAngularEnabled(false) 
  
        // Get our html file for testing 
        browser.get('test.html'); 
  
        // Test if the element with id 'sample-div' 
        // has a class called 'zambiatek' 
        let sampleDiv = element(by.id('sample-div')); 
          
        expect(sampleDiv.getAttribute('class')) 
            .toContain("zambiatek"); 
    }); 
});

Finally, we are ready to run our file using the command given below:
```
protractor conf.js
```

This will run the configuration file and the test will be run as shown in the screenshot below:

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!