getCSSProperty

Overview

Use the getCSSProperty command to get a CSS property from a DOM element selected by a given selector.

The returned value is formatted for easy verification:

• Colors are converted using rgb2hex;
• All other properties are converted using css-value.

warning

Note that CSS shorthand properties (e.g., background, font, border, margin, padding, list-style, outline, pause, cue) will be expanded to retrieve all the longhand properties, leading to multiple WebDriver calls. If you are interested in a specific longhand property, it is recommended to request that instead.

Usage

await browser.$(selector).getCSSProperty(cssProperty);

Command Parameters

Name	Type	Description
cssProperty	String	The name of the CSS property.

Usage Examples

example.html

<label
    id="myLabel"
    for="input"
    style="color: #0088cc; font-family: helvetica, arial, freesans, clean, sans-serif; width: 100px"
>
    Some Label
</label>

getCSSProperty.js

it("should demonstrate the getCSSProperty command", async ({ browser }) => {
    const elem = await browser.$("#myLabel");
    const color = await elem.getCSSProperty("color");
    console.log(color);
    // outputs:
    // {
    //     property: 'color',
    //     value: 'rgba(0, 136, 204, 1)',
    //     parsed: {
    //         hex: '#0088cc',
    //         alpha: 1,
    //         type: 'color',
    //         rgba: 'rgba(0, 136, 204, 1)'
    //     }
    // }

    const font = await elem.getCSSProperty("font-family");
    console.log(font);
    // outputs:
    // {
    //      property: 'font-family',
    //      value: 'helvetica',
    //      parsed: {
    //          value: [ 'helvetica', 'arial', 'freesans', 'clean', 'sans-serif' ],
    //          type: 'font',
    //          string: 'helvetica, arial, freesans, clean, sans-serif'
    //      }
    // }

    var width = await elem.getCSSProperty("width");
    console.log(width);
    // outputs:
    // {
    //     property: 'width',
    //     value: '100px',
    //     parsed: {
    //         type: 'number',
    //         string: '100px',
    //         unit: 'px',
    //         value: 100
    //     }
    // }
});

References

We'd like to give credit to the original WebdriverIO docs article, from which we drew some information while writing our version.