How to test CSS property of an element using Protractor ?
Protractor is an end-to-end test framework developed for Angular and AngularJS applications. It run tests against the application interacting with it as a real user would, running in a real browser. In this article, we are going to test the CSS property of an element.
Pre-requisite: Installation and Setup of Protractor
Approach:
- We are going to create a basic test program in which we are going to test the CSS property of an element.
- 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.
- Let’s create this file with the name conf.js.
conf.js:
exports.config = {// Capabilities to be passed to// the webdriver instancecapabilities: {'browserName':'chrome'},// Framework to use Jasmine is// recommendedframework:'jasmine',// Spec patterns are relative to// the current working directory// when protractor is calledspecs: ['test.js'],// Options to be passed to Jasmine.jasmineNodeOpts: {defaultTimeoutInterval: 30000},// Url for the fileonPrepare:function() {}}; - Now let’s create our HTML file called test.html which will contain the element to be tested.
test.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Testing</title></head><body><!-- The element to be tested --><divid="sample-div"style="color: rgba(18, 52, 86, 1)">Inner text</div></body></html> - Now let’s create our test file test.js. In this file, we are going to access an HTML file and test the CSS property color of an element is set to a given value or not.
- Browser is a global created by Protractor, which is used for browser-level commands such as navigation with browser.get.
- The describe and its syntax is from the Jasmine framework where describe is a description of your test while it is the steps for the test.
The spec file named test.js:
test.js:
describe('Protractor Demo App',function() {it('should have a css property set',function() {// Disabling waiting for angularbrowser.waitForAngularEnabled(false)// Get our html file for testingbrowser.get('test.html');// Test if the element is with id 'sample-div'// has the color CSS property setlet sampleDiv = element(by.id('sample-div'));expect(sampleDiv.getCssValue('color')).toBe("rgba(18, 52, 86, 1)");});}); - Finally, we are ready to run our file using the command given below:
protractor conf.js
- This will run the configuration file and the test will be run as shown in the screenshot below:
Output:
Please Login to comment...