getCSSProperty

Récupère une propriété CSS d'un élément DOM sélectionné par le sélecteur donné. La valeur de retour est formatée pour être testable. Les couleurs sont analysées via rgb2hex et toutes les autres propriétés sont analysées via css-value.

info

Notez que les propriétés CSS abrégées (par ex. background, font, border, margin, padding, list-style, outline, pause, cue) seront développées pour récupérer toutes les propriétés détaillées, ce qui entraîne plusieurs appels WebDriver. Si vous êtes intéressé par une propriété détaillée spécifique, il est recommandé de l'interroger directement.

Usage

$(selector).getCSSProperty(cssProperty, pseudoElement)

Parameters

Name	Type	Details
cssProperty	string	nom de la propriété css
pseudoElement	PseudoElement	pseudo-élément css

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 () => {
    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
    //     }
    // }
})

Returns

• <CSSProperty> return: La propriété css spécifiée de l'élément