getCSSProperty
Get a css property from a DOM-element selected by given selector. The return value is formatted to be testable. Colors gets parsed via rgb2hex and all other properties get parsed via css-value.
Note that shorthand CSS properties (e.g. background, font, border, margin, padding, list-style, outline, pause, cue) are not returned, in accordance with the DOM CSS2 specification - you should directly access the longhand properties (e.g. background-color) to access the desired values.
Usage
browser.getCSSProperty(selector, cssProperty)
Parameters
Param | Type | Details |
---|---|---|
selector optional | param | element with requested style attribute |
cssProperty optional | param | css property name |
Example
<label id="myLabel" for="input" style="color: #0088cc; font-family: helvetica, arial, freesans, clean, sans-serif, width: 100px">Some Label</label>
it('should demonstrate the getCssProperty command', function () {
var elem = $('#myLabel')
var color = elem.getCssProperty('color')
console.log(color)
// outputs the following:
// {
// property: 'color',
// value: 'rgba(0, 136, 204, 1)',
// parsed: {
// hex: '#0088cc',
// alpha: 1,
// type: 'color',
// rgba: 'rgba(0, 136, 204, 1)'
// }
// }
var font = elem.getCssProperty('font-family')
console.log(font)
// outputs the following:
// {
// property: 'font-family',
// value: 'helvetica',
// parsed: {
// value: [ 'helvetica', 'arial', 'freesans', 'clean', 'sans-serif' ],
// type: 'font',
// string: 'helvetica, arial, freesans, clean, sans-serif'
// }
// }
var width = elem.getCssProperty('width')
console.log(width)
// outputs the following:
// {
// property: 'width',
// value: '100px',
// parsed: {
// type: 'number',
// string: '100px',
// unit: 'px',
// value: 100
// }
// }
})