How to use protractor to wait for an element to completely fade-in ?
Last Updated :
29 Sep, 2021
Introduction: 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 has completely faded-in or not.
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 has completely faded in 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 = {
capabilities: {
browserName: "chrome" ,
},
framework: "jasmine" ,
specs: [ "test.js" ],
SELENIUM_PROMISE_MANAGER: false ,
jasmineNodeOpts: {
defaultTimeoutInterval: 30000,
},
baseUrl: "file://" + __dirname + "/" ,
onPrepare: function () {
},
};
|
Step 2: We will create the HTML file called test.html that 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;" >
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 wait for the element to completely fade in. 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 its syntax are 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" , async function () {
browser.waitForAngularEnabled( false );
browser.get( "test.html" );
let fadeIn = element(by.id( "fade-in" ));
await browser.driver.wait(
async function () {
return (await element.getCssValue( "opacity" )) === "1" ;
},
30000,
"Taking too long to fade in"
);
expect(hiddenDiv.isDisplayed()).toBe( true );
});
});
|
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...