Skip to content
Related Articles

Related Articles

Improve Article

How to test if an element has class using Protractor ?

  • Last Updated : 05 Jan, 2021
Geek Week

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="geeksforgeeks">
            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 geeksforgeeks 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 'geeksforgeeks'
            let sampleDiv = element(by.id('sample-div'));
              
            expect(sampleDiv.getAttribute('class'))
                .toContain("geeksforgeeks");
        });
    });
  • 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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :