element.getCSSProperty(property) returns null for Firefox

[VicGrygorchyk]

Environment:

• WebdriverIO version: [6.4.2]
• Mode: [WDIO Testrunner]
• If WDIO Testrunner, running sync/async: [sync]
• Node.js version: [12.8.3]
• NPM version: [6.14.2]
• Browser name and version: [Firefox 83.0]
• Platform name and version: [Windows 10 64-bit]
• Additional wdio packages used (if applicable): [
  "@wdio/cli": "^6.5.2",
  "@wdio/local-runner": "^6.5.2",
  "@wdio/mocha-framework": "^6.4.0",
  "@wdio/sauce-service": "^6.6.7",
  "@wdio/spec-reporter": "^6.4.0",
  "@wdio/sync": "^6.4.5",
  ]

Config of WebdriverIO

{
    runner: 'local',
    protocol: 'http',
    port: 4444,
    host: 'localhost',
    path: '/wd/hub',
    automationProtocol: 'webdriver',
    maxInstances: 10,
    capabilities: [
        {   browserName: 'firefox',
            maxInstances: 1,
            "moz:firefoxOptions": {
                "prefs": {   "intl.accept_languages": "en-US"  },
                "log":{"level": "trace"},
                "args": [
                    "--lang", "en-US",
                    "--width=1920", "--height=1080"
                ]   }    }  ],
    logLevel: 'error',
    bail: 0,
    waitforTimeout: 20000,
    connectionRetryTimeout: 120000,
    connectionRetryCount: 1,   
    specFileRetriesDeferred: true,
    specFileRetries: 0,
    reporters: ['spec'],
    framework: 'mocha',
    mochaOpts: { ui: 'bdd',   require: ['core-js', 'regenerator-runtime', '@babel/register'],  timeout: 300000 },
}

Describe the bug
The method element.getCSSProperty('background') returns null for Firefox instead of the object with expected properties.

describe('Verify getCSSProperty on firefox', () => {
    it('It should work', () => {
        browser.url('https://webdriver.io/');
        const background = $('.fixedHeaderContainer').getCSSProperty('background');
        expect(background).toBeTruthy();
    })
})

The firefox output

[firefox 83.0 windows #0-0] 1) Verify getCSSProperty on firefox It should work
[firefox 83.0 windows #0-0] expect(received).toBeTruthy()
Received: null

The same test to run on Chrome 86.0.4240.198 Windows 10

{
  property: 'background',
  value: 'rgba(0,0,0,0)url("data:image/gif;base64,r0lgodlhbaaeajeaaberesiiigchbwaaach5baaaaaaalaaaaaaeaaqaaaihbcqriizaaaa7")repeatscroll0%0%/autopadding-boxborder-box',
  parsed: {
    hex: '#000000',
    alpha: 0,
    type: 'color',
    rgba: 'rgba(0,0,0,0)url("data:image/gif;base64,r0lgodlhbaaeajeaaberesiiigchbwaaach5baaaaaaalaaaaaaeaaqaaaihbcqriizaaaa7")repeatscroll0%0%/autopadding-boxborder-box'
  }
}

[christian-bromann]

As the protocol states:

Let computed value be the result of the first matching condition:

current browsing context’s document type is not "xml"
computed value of parameter property name from element’s style declarations. property name is > obtained from url variables.

which means the browser tries to run the following script:

getComputedStyle(document.querySelector('.fixedHeaderContainer')).background

which results in Chrome to:

rgba(0, 0, 0, 0) url("data:image/gif;base64,R0lGODlhBAAEAJEAABERESIiIgcHBwAAACH5BAAAAAAALAAAAAAEAAQAAAIHBCQRiIZaAAA7") repeat scroll 0% 0% / auto padding-box border-box"

and in Firefox to and empty string ("").

I agree here, that the behavior is inconsistent though not caused by WebdriverIO as it is not defined in the CSS spec. See also this bugzilla ticket. I will propose a change to default to background-color in case background is the css property and the result is empty.

[christian-bromann]

The related issue in the CSS-WG spec is w3c/csswg-drafts#2529. I will close this. I don't think my idea mentioned above isn't a sufficient solution given this doesn't only apply for background but also for font, margin, border etc. I recommend specifying the css property you are interested in, e.g. $('.fixedHeaderContainer').getCSSProperty('background-color').

[christian-bromann]

Actually this is stated in the docs:

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.

[christian-bromann]

Created a pull request to improve the behavior.

[anzhelikavv]

@christian-bromann Hi, can you please help out?
I am trying to get hex color of the element using getCSSProperty() it returns this object:

{
[0-0] property: 'border-color',
[0-0] value: 'rgba(213,25,35,1)',
[0-0] parsed: {
[0-0] hex: '#d51923',
[0-0] alpha: 1,
[0-0] type: 'color',
[0-0] rgba: 'rgba(213,25,35,1)'
[0-0] }
[0-0] }

Then I am trying to verify the color with JSON.stringify()

let customer_name_color = await this.customer_name.getCSSProperty(`border-color`)
  console.log(JSON.stringify(customer_name_color)); 
  console.log(expect(customer_name_color.parsed.hex).toBe('#d51923'));

The test passes. But it returns null. How would you do it?
Thanks so much in advance!