How to use protractor to check whether text is present in an element or not ?

Last Updated : 22 Oct, 2021

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 how we can wait for the text to be present in an element?

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 text is present in an element 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.

Below is the step-by-step implementation of the above approach.

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

conf.js

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"], 
  
 SELENIUM_PROMISE_MANAGER: false, 
  
 // 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.

test.html

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
      fade-in effect on page load using JavaScript 
    </title> 
    <script type="text/javascript"> 
        var opacity = 0; 
        var intervalID = 0; 
        window.onload = fadeIn; 
    
        function fadeIn() { 
            setInterval(show, 200); 
        } 
    
        function show() { 
            var body = document.getElementById("fade-in"); 
            opacity = Number(window.getComputedStyle(body) 
                             .getPropertyValue("opacity")); 
            if (opacity < 1) { 
                opacity = opacity + 0.1; 
                body.style.opacity = opacity 
            } else { 
                clearInterval(intervalID); 
            } 
        } 
    </script> 
</head> 
<body> 
  <!-- The element to be tested -->
  <div id="fade-in" 
       style="opacity: 0;"> 
    GFG 
  </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 wait for the element to have a particular text in it. The browser is a global created by Protractor, which is used for browser-level commands such as navigation with browser.get() method. The description and it syntax is from the Jasmine framework where describe is a description of your test while it defines the steps for the test.

test.js

describe('Protractor Demo App', function () { 
  it('should have a title', async function () { 
      
      var EC = protractor.ExpectedConditions; 
  
      // Disable waiting for Angular render update 
      browser.waitForAngularEnabled(false) 
  
      // Get the HTML file that has to be tested 
      browser.get('test.html'); 
  
      // Get the fade in element 
      let fadeIn = element(by.id('fade-in')); 
  
      // Waits for the element with id 'myInput' to contain the input 'foo'. 
      browser.wait(EC.textToBePresentInElementValue(fadeIn, 'GFG'), 5000); 
  
      expect(fadeIn.getText()).toEqual('GFG'); 
  }); 
});

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.