الحصول على خاصية CSS

الحصول على خاصية CSS من عنصر DOM محدد بواسطة المحدد المعطى. تتم صياغة القيمة المرجعة لتكون قابلة للاختبار. يتم تحليل الألوان عبر 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 المحددة للعنصر