如何按照承诺使用 Webdriver.io 和 Chai 来验证 css 属性

Question

目前正在将 Webdriver.io 与 Mocha、Chai 和 Chai-as-Promised 一起使用，但是在尝试验证 CSS 属性时，我正在努力获得验证承诺：

代码：

'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);
    });
});

但是我收到这个错误：

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

根据documentation，这不是return一个承诺吗？

看来您应该使用回调。

编辑：好的，我可能误解了文档，相反，promise 中输出的值可能不是您所期望的。如果你查看文档，你可以看到回调产生了什么。所以我们可以期望它与应许相同。然后，你可以使用这样的东西：

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

Answer 2

getCSSProperty returns 一个对象

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

您的错误消息说 0px 不等于那个对象，这实际上是真的。在这种情况下，最好使用回调。使用 "Chai Things" 插件可能是可能的。

如何按照承诺使用 Webdriver.io 和 Chai 来验证 css 属性

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

mocha.js

chai

webdriver-io

chai-as-promised