How to use Webdriver.io with Chai as Promised to verify css property

Question

Currently using Webdriver.io with Mocha, Chai, and Chai-as-Promised however I am struggling to get the promise to validate when trying to validate a CSS property:

The code:

'use strict';
var chai = require('chai'),
    chaiAsPromised = require('chai-as-promised');

chai.use(chaiAsPromised);
chai.should();
chaiAsPromised.transferPromiseness = browser.transferPromiseness;

describe('Buttons', function() {

    var buttonSelector = '.button';

    browser.url('http://localhost/buttons.html');

    it('should have square corners by default', function (done) {
        browser
            .getCssProperty(buttonSelector, 'border-top-left-radius').should.eventually.become('0px')
            .call(done);
    });
});

However I receive this error:

Default Buttons: Tiny Size 1) should have square corners by default 1 failing

1) Default Buttons: Tiny Size should have square corners by default: Uncaught AssertionError: expected { Object (property, value, ...) } to deeply equal '0px' 0 passing (2s) at assertEqual (/node_modules/chai/lib/chai/core/assertions.js:393:19)

  at ctx.(anonymous function) (/node_modules/chai/lib/chai/utils/addMethod.js:40:25)
  at WebdriverIO.<anonymous> (/node_modules/chai-as-promised/lib/chai-as-promised.js:302:26)

  at /node_modules/webdriverio/lib/utils/PromiseHandler.js:85:52
  at process._tickCallback (node.js:419:13)

Answer 1

getCSSProperty returns an object like

{
    property: 'width',
    value: '100px',
    parsed: {
        type: 'number',
        string: '100px',
        unit: 'px',
        value: 100
    }
}

Your error message says that 0px is not equal that object which is actually true. In this case it is probably better to use a callback. It might be possible using the "Chai Things" plugin.

Answer 2

According to the documentation, it does not return a promise?

Looks like you should be using a callback.

EDIT: Okay, I may have misunderstood the documentation, instead it could be that the value outputted in the promise is not what you expect. If you check the documentation, you can see what the callback produces. So we could expect that it will be the same with the promise. Then, you could use something like this:

browser.getCssProperty(buttonSelector, 'border-top-left-radius').should.eventually.have.property('value', '0px').call(done);