Skip to content
Related Articles

Related Articles

How to test the id of an element using Protractor ?
  • Last Updated : 23 Dec, 2020

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 the id of an element.

Pre-requisite: Installation and Setup of Protractor

Approach:

  • We are going to create a basic test program in which we are going to test the id of an element.
  • 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 -->
        <section class="sample-element" 
            id="geeksforgeeks">
            Inner text
        </section>
    </body>
      
    </html>

  • Now let’s create our test file test.js. In this file, we are going to access an HTML file and test the id of an element.
  • Browser is a global created by Protractor, which is used for browser-level commands such as navigation with browser.get.
  • The 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 id', function () {
  
        // Disabling waiting for angular
        browser.waitForAngularEnabled(false)
  
        // Get our html file for testing
        browser.get('test.html');
  
        // Test if the element with class 
        // 'sample-element' has the id 
        // 'geeksforgeeks'
        let sampleDiv = element(
            by.className('sample-element'));
  
        expect(sampleDiv.getAttribute('id'))
            .toEqual('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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :