Open In App

How to use protractor to check if an element is visible ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Protractor is an end-to-end test framework developed for AngularJS applications, however, it also works for non-Angular JS 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 use Protractor to check if an element is visible or hidden.

Prerequisite: Installation and Setup of Protractor

Approach:

  • We are going to create a basic test program in which we are going to check whether the element is visible 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.

The steps that have to be followed are:

Step 1: We have to first create a conf.js file consists of the configuration to be used with Protractor.

Javascript




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


Step 2: We will create the HTML file called test.html which will contain the element to be tested.

HTML




<!DOCTYPE html>
<html>
<body>
  <!-- The element to be tested -->
  <div id="hidden-div" 
       style="display: none;">
    Inner text
  </div>
</body>
</html>


Step 3: We will create the test.js file. In this file, we are going to access the above HTML file and then going to check if the element is hidden or not. The browser is a global created by Protractor, which is used for browser-level commands such as navigation with browser.get() method. The describe and it syntax is from the Jasmine framework where describe is a description of your test while it defines the steps for the test.

Javascript




describe('Protractor Demo App', function () {
  it('should have a title', function () {
  
      // Disable waiting for Angular render update
      browser.waitForAngularEnabled(false)
  
      // Get the HTML file that has to be tested
      browser.get('test.html');
  
      // Test if the element is hidden
      let hiddenDiv = element(by.id('hidden-div'));
  
      // This test will pass only when
      // element is hidden
      expect(hiddenDiv.isDisplayed()).toBe(false);
  });
});


Step 4: Finally, we will run the configuration file using the command given below. This will run the configuration file and the test will be run as shown in the output below.

protractor conf.js

Output:



Last Updated : 23 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads