How to test the id of an element using Protractor?


We will learn to use a protractor to test the ID of an element. Protractor is an end-to-end testing framework for Angular and AngularJS applications. Protractor is built on top of WebDriverJS, which is a JavaScript implementation of the WebDriver API and supports multiple browsers such as Chrome, Firefox, and Safari. It is popular among developers and testers because it provides a simple and effective way to test Angular applications without writing complex code.

Learning how to test the id of an element using Protractor is important for web developers and quality assurance (QA) testers who want to ensure that their web applications are functioning correctly. The id attribute is a unique identifier for an HTML element, and it is often used to access and manipulate elements using JavaScript or CSS. By testing the id of an element, you can verify that the correct element is being targeted and ensure that your application is functioning as expected.

We will take two different examples to test the id of an element which will give you more clarity on the topic.

  • Test the id when one element is present

  • Test the id when more than one element is present

Test the id When one Element is Present

Let suppose we have one button with some id and class name. We can find the button with the class name and then test the button's id using a protractor.

Syntax

Users can follow the below syntax to use the protractor to test the id of an element when there is one element.

expect(element(locator).getAttribute('id'))
.toEqual(expectedId);

Here ‘locator’ specifies the element location strategy (such as by.id, by.css, by.xpath, etc.), and expectedId is the expected ID value of the element. The toEqual( ) method is used to compare the actual and expected ID values.

Example

In the below example, we have created 3 files – conf.js, test.html and test.js.

We have a conf.js file in a folder conf, and the tests folder contains test.html and test.js.

conf.js

This file is the configuration file for Protractor. It sets the browser capabilities to Chrome, specifies the Jasmine framework, and specifies the location of the test script file. It also sets a default timeout interval and the base URL for the tests. The onPrepare function is used to set the browser's reset URL.

exports.config = {
   directConnect: true ,
   
   // 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: ['../tests/test.js'],

   // Options to be passed to Jasmine.
   jasmineNodeOpts: {
      defaultTimeoutInterval: 30000
   },
   
   // Define the baseUrl for the file
   baseUrl: "file://" + __dirname + "/",
     
   onPrepare: function () {
      browser.resetUrl = "file://";
   }
};

test.html

This file contains a button element with an id of "login-button" and a class of "myButton".

<html>
<head>
</head>
<body>
   <h2>Test the id of one button</h2>
   <div id = "login">
      <p> login here </p>
      <button id = "login-button" class = "myButton"> Login </button>
   </div>
</body>
</html>

test.js

This test.js file tests the ID of a login button on a webpage using Protractor. The beforeEach() function disables AngularJS synchronization and loads the webpage. The it() function verifies that the ID of the login button is correct. It first finds the button element using the CSS class name and then uses the getAttribute function to retrieve the button's ID. Finally, it uses the expect function to compare the retrieved ID with the expected value, which is 'login-button'.

describe('Testing the ID of an Element with Protractor', function() {
   beforeEach(function() {
   
      // Disable AngularJS synchronization 
      browser.waitForAngularEnabled(false) ;
      
      // Load the webpage 
      browser.get('../tests/test.html') ;
   });
     
   it('should verify the ID of the like button', function() {
   
      // Find the element by using the CSS class name
      let loginButton = element(by.css('.myButton') );
      
      // Verify that the ID of the element is correct
      expect(loginButton.getAttribute('id')).toEqual('login-button');
   } );
} );

Command to run configuration file

protractor conf.js(file path)

Output

We can see that we are getting all the tests passed, and there is no error.

Test the id When More Than one Element is Present

There may be a case that we have more than one button with different IDs. In this case, the method which is described in the above example will not work. So, we will select a specific one based on its index or location and then test the id.

Example

This is an example of using a Protractor to test the id of a button when there are multiple buttons. It is a little modified version of the above example.

test.html

This HTML page contains two buttons with the same class of “myButton”. But they have different IDs - “dislike-button” and “like-button”.

<html>
<head>
</head>
<body>
   <h2>Test the id when there are more than one button</h2>
   <button id = "dislike-button" class = "myButton" > Dislike </button>
   <button id = "like-button" class = "myButton" > Like </button>
</body>
</html>

test.js

This Protractor test file tests the ID of a specific button element on a webpage. The test loads our specified webpage, which contains multiple buttons, and then it finds the second button element using the element.all( ) and get( ) functions. It then gets the ID attribute of the second button element and verifies that it matches 'like-button' using the expect function.

describe('Testing the ID of an Element with Protractor', function() {
   beforeEach(function() {
      browser.waitForAngularEnabled(false);
            
      // Load the webpage 
      browser.get('../tests/test.html') ;
   });
     
   it('should verify the ID of the like button', function() {
   
      // Find the second button element on the page
      let likeButton = element.all(by.tagName('button')).get(1);

      /* Get the ID attribute of the like button and verify it matches 'like-button' */
      likeButton.getAttribute('id').then(function(value) {
         expect(value).toEqual('like-button');
      } );
   } );
} );

Output

In conclusion, testing the ID of an element using Protractor is crucial for web developers and quality assurance testers. We have seen examples demonstrating how to test an element's ID when there is one or more than one element present.

Updated on: 06-Apr-2023

133 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements