Open In App
Related Articles

How to test CSS property of an element using Protractor ?

Improve Article
Save Article
Like Article

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


  • 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.


    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.


    <!DOCTYPE html>
    <html lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content=
            "width=device-width, initial-scale=1.0">
        <!-- The element to be tested -->
        <div id="sample-div" 
             style="color: rgba(18, 52, 86, 1)">
            Inner text

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


    describe('Protractor Demo App', function () {
        it('should have a css property set', function () {
            // Disabling waiting for angular
            // Get our html file for testing
            // Test if the element is with id 'sample-div'
            // has the color CSS property set
            let sampleDiv = element('sample-div'));
                    .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:


Last Updated : 21 Dec, 2020
Like Article
Save Article
Similar Reads
Related Tutorials