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 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:

describe('Protractor Demo App', function () { 

    it('should have a css property set', function () { 

        // Disabling waiting for angular 

        browser.waitForAngularEnabled(false) 

        // Get our html file for testing 

        browser.get('test.html'); 

        // Test if the element is with id 'sample-div' 

        // has the color CSS property set 

        let 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:

Article Tags :

CSS

Web Technologies