How to test CSS property of an element using Protractor ?

Last Updated : 21 Dec, 2020

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 instance
    capabilities: {
        'browserName': 'chrome'
    },

    // Framework to use Jasmine is 
    // recommended
    framework: 'jasmine',

    // Spec patterns are relative to
    // the current working directory 
    // when protractor is called
    specs: ['test.js'],

    // Options to be passed to Jasmine.
    jasmineNodeOpts: {
        defaultTimeoutInterval: 30000
    },

    // Url for the file
    baseUrl: 'file://' + __dirname + '/',

    onPrepare: function () {
        browser.resetUrl = 'file://';
    }
};

Now let's create our HTML file called test.html which will contain the element to be tested.

test.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Testing</title>
</head>

<body>

    <!-- The element to be tested -->
    <div id="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: