getCSSProperty

指定されたセレクタで選択されたDOM要素からCSSプロパティを取得します。戻り値は テスト可能な形式にフォーマットされます。色はrgb2hexを介して解析され、 その他のすべてのプロパティはcss-valueを介して解析されます。

情報

短縮形のCSSプロパティ（例：background、font、border、margin、 padding、list-style、outline、pause、cue）は展開され、複数のWebDriverコールを 引き起こす長形式のプロパティをすべて取得します。特定の長形式のプロパティに関心がある場合は、 代わりにそれを直接クエリすることをお勧めします。

使用法

$(selector).getCSSProperty(cssProperty, pseudoElement)

パラメータ

名前	型	詳細
cssProperty	string	CSSプロパティ名
pseudoElement	PseudoElement	CSS疑似要素

例

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
    //     }
    // }
})

戻り値

• <CSSProperty> return: 要素の指定されたCSSプロパティ