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

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.
protractor conf.js
Output:
AngularJS-Questions
JavaScript-Questions
AngularJS
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Angular 10 (blur) Event
Angular PrimeNG Dropdown Component
Convert a string to an integer in JavaScript
How to calculate the number of days between two dates in javascript?
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
File uploading in React.js