@luminati-io/webdriverio8
Version:
Next-gen browser and mobile automation test framework for Node.js
140 lines (138 loc) • 8.96 kB
JavaScript
import cssShorthandProps from 'css-shorthand-properties';
import { getBrowserObject, parseCSS } from '../../utils/index.js';
/**
*
* 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](https://www.npmjs.org/package/rgb2hex)
* and all other properties get parsed via [css-value](https://www.npmjs.org/package/css-value).
*
* :::info
*
* Note that shorthand CSS properties (e.g. `background`, `font`, `border`, `margin`,
* `padding`, `list-style`, `outline`, `pause`, `cue`) will be expanded to fetch all longhand
* properties resulting in multiple WebDriver calls. If you are interested in a specific
* longhand property it is recommended to query for that instead.
*
* :::
*
* <example>
: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 () => {
const elem = await $('#myLabel')
const color = await 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)'
// }
// }
const font = await 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 = await elem.getCSSProperty('width', '::before')
console.log(width)
// outputs the following:
// {
// property: 'width',
// value: '100px',
// parsed: {
// type: 'number',
// string: '100px',
// unit: 'px',
// value: 100
// }
// }
})
* </example>
* @alias element.getCSSProperty
* @param {string} cssProperty css property name
* @param {PseudoElement} pseudoElement css pseudo element
* @return {CSSProperty} The specified css of the element
*
*/
export async function getCSSProperty(cssProperty, pseudoElement) {
const getCSSProperty = cssShorthandProps.isShorthand(cssProperty)
? getShorthandPropertyCSSValue
: getPropertyCSSValue;
const cssValue = await getCSSProperty.call(this, {
cssProperty,
pseudoElement,
});
return parseCSS(cssValue, cssProperty);
}
async function getShorthandPropertyCSSValue(options) {
const { pseudoElement, cssProperty } = options;
const properties = getShorthandProperties(cssProperty);
if (pseudoElement) {
const cssValues = await Promise.all(properties.map((prop) => getPseudoElementCSSValue(this, {
pseudoElement,
cssProperty: prop,
})));
return mergeEqualSymmetricalValue(cssValues);
}
const cssValues = await Promise.all(properties.map((prop) => this.getElementCSSValue(this.elementId, prop)));
return mergeEqualSymmetricalValue(cssValues);
}
async function getPropertyCSSValue(options) {
const { pseudoElement, cssProperty } = options;
if (pseudoElement) {
return await getPseudoElementCSSValue(this, {
pseudoElement,
cssProperty
});
}
return await this.getElementCSSValue(this.elementId, cssProperty);
}
function getShorthandProperties(cssProperty) {
/**
* Getting the css value of a shorthand property results in different results
* given that the behavior of `getComputedStyle` is not defined in this case.
* Therefore if we don't deal with a shorthand property run `getElementCSSValue`
* otherwise expand it and run the command for each longhand property.
*/
return cssShorthandProps.expand(cssProperty);
}
function mergeEqualSymmetricalValue(cssValues) {
/**
* merge equal symmetrical values
* - e.g. `36px 10px 36px 10px` to `36px 10px`
* - or `0px 0px 0px 0px` to `0px`
*/
let newCssValues = [...cssValues];
while ((newCssValues.length % 2) === 0) {
const mergedValues = [
newCssValues.slice(0, newCssValues.length / 2).join(' '),
newCssValues.slice(newCssValues.length / 2).join(' ')
];
const hasEqualProperties = mergedValues.every((v) => v === mergedValues[0]);
if (!hasEqualProperties) {
break;
}
newCssValues = newCssValues.slice(0, newCssValues.length / 2);
}
return newCssValues.join(' ');
}
async function getPseudoElementCSSValue(elem, options) {
const browser = getBrowserObject(elem);
const { cssProperty, pseudoElement } = options;
const cssValue = await browser.execute((elem, pseudoElement, cssProperty) => (window.getComputedStyle(elem, pseudoElement))[cssProperty], elem, pseudoElement, cssProperty);
return cssValue;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2V0Q1NTUHJvcGVydHkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tbWFuZHMvZWxlbWVudC9nZXRDU1NQcm9wZXJ0eS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLGlCQUFpQixNQUFNLDBCQUEwQixDQUFBO0FBQ3hELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxRQUFRLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUlqRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FvRUc7QUFDSCxNQUFNLENBQUMsS0FBSyxVQUFVLGNBQWMsQ0FFaEMsV0FBbUIsRUFDbkIsYUFBNkI7SUFFN0IsTUFBTSxjQUFjLEdBQUcsaUJBQWlCLENBQUMsV0FBVyxDQUFDLFdBQVcsQ0FBQztRQUM3RCxDQUFDLENBQUMsNEJBQTRCO1FBQzlCLENBQUMsQ0FBQyxtQkFBbUIsQ0FBQTtJQUV6QixNQUFNLFFBQVEsR0FBRyxNQUFNLGNBQWMsQ0FBQyxJQUFJLENBQ3RDLElBQUksRUFDSjtRQUNJLFdBQVc7UUFDWCxhQUFhO0tBQ2hCLENBQ0osQ0FBQTtJQUVELE9BQU8sUUFBUSxDQUFDLFFBQVEsRUFBRSxXQUFXLENBQUMsQ0FBQTtBQUMxQyxDQUFDO0FBT0QsS0FBSyxVQUFVLDRCQUE0QixDQUV2QyxPQUFnQjtJQUVoQixNQUFNLEVBQUUsYUFBYSxFQUFFLFdBQVcsRUFBRSxHQUFHLE9BQU8sQ0FBQTtJQUM5QyxNQUFNLFVBQVUsR0FBRyxzQkFBc0IsQ0FBQyxXQUFXLENBQUMsQ0FBQTtJQUV0RCxJQUFJLGFBQWEsRUFBRSxDQUFDO1FBQ2hCLE1BQU0sU0FBUyxHQUFHLE1BQU0sT0FBTyxDQUFDLEdBQUcsQ0FDL0IsVUFBVSxDQUFDLEdBQUcsQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsd0JBQXdCLENBQzdDLElBQUksRUFDSjtZQUNJLGFBQWE7WUFDYixXQUFXLEVBQUUsSUFBSTtTQUNwQixDQUNKLENBQUMsQ0FDTCxDQUFBO1FBQ0QsT0FBTywwQkFBMEIsQ0FBQyxTQUFTLENBQUMsQ0FBQTtJQUNoRCxDQUFDO0lBRUQsTUFBTSxTQUFTLEdBQUcsTUFBTSxPQUFPLENBQUMsR0FBRyxDQUMvQixVQUFVLENBQUMsR0FBRyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUMxRSxDQUFBO0lBRUQsT0FBTywwQkFBMEIsQ0FBQyxTQUFTLENBQUMsQ0FBQTtBQUNoRCxDQUFDO0FBRUQsS0FBSyxVQUFVLG1CQUFtQixDQUU5QixPQUFnQjtJQUVoQixNQUFNLEVBQUUsYUFBYSxFQUFFLFdBQVcsRUFBRSxHQUFHLE9BQU8sQ0FBQTtJQUU5QyxJQUFJLGFBQWEsRUFBRSxDQUFDO1FBQ2hCLE9BQU8sTUFBTSx3QkFBd0IsQ0FDakMsSUFBSSxFQUNKO1lBQ0ksYUFBYTtZQUNiLFdBQVc7U0FDZCxDQUNKLENBQUE7SUFDTCxDQUFDO0lBQ0QsT0FBTyxNQUFNLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFLFdBQVcsQ0FBQyxDQUFBO0FBQ3JFLENBQUM7QUFFRCxTQUFTLHNCQUFzQixDQUFDLFdBQW1CO0lBQy9DOzs7OztPQUtHO0lBQ0gsT0FBTyxpQkFBaUIsQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLENBQUE7QUFDaEQsQ0FBQztBQUVELFNBQVMsMEJBQTBCLENBQUMsU0FBbUI7SUFDbkQ7Ozs7TUFJRTtJQUNGLElBQUksWUFBWSxHQUFHLENBQUMsR0FBRyxTQUFTLENBQUMsQ0FBQTtJQUNqQyxPQUFPLENBQUMsWUFBWSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQztRQUNyQyxNQUFNLFlBQVksR0FBRztZQUNqQixZQUFZLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxZQUFZLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUM7WUFDeEQsWUFBWSxDQUFDLEtBQUssQ0FBQyxZQUFZLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUM7U0FDeEQsQ0FBQTtRQUVELE1BQU0sa0JBQWtCLEdBQUcsWUFBWSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxLQUFLLFlBQVksQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFBO1FBQzNFLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxDQUFDO1lBQ3RCLE1BQUs7UUFDVCxDQUFDO1FBRUQsWUFBWSxHQUFHLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFFLFlBQVksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUE7SUFDakUsQ0FBQztJQUVELE9BQU8sWUFBWSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQTtBQUNqQyxDQUFDO0FBRUQsS0FBSyxVQUFVLHdCQUF3QixDQUNuQyxJQUF5QixFQUN6QixPQUEwQjtJQUUxQixNQUFNLE9BQU8sR0FBRyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsQ0FBQTtJQUN0QyxNQUFNLEVBQUUsV0FBVyxFQUFFLGFBQWEsRUFBRSxHQUFJLE9BQU8sQ0FBQTtJQUMvQyxNQUFNLFFBQVEsR0FBRyxNQUFNLE9BQU8sQ0FBQyxPQUFPLENBQ2xDLENBQUMsSUFBYSxFQUFFLGFBQXFCLEVBQUUsV0FBbUIsRUFBRSxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxFQUFFLGFBQWEsQ0FBQyxDQUFDLENBQUMsV0FBa0IsQ0FBQyxFQUNqSSxJQUEwQixFQUMxQixhQUFhLEVBQ2IsV0FBVyxDQUNkLENBQUE7SUFFRCxPQUFPLFFBQVEsQ0FBQTtBQUNuQixDQUFDIn0=