无法断言 css 宽度为 100%

Question

我试图断言 NightwatchJS 中某个元素的 CSS 宽度为 100%，但它未能说明宽度为 196px。错误信息是：

Testing if element <[data-e2e="base-button"][class="xs block"]> has css property "width: 100%". - Expected "100%" but got: "196px"

我已经尝试使用以下语法来实现相同的目的：

page.assert.cssProperty(`@button-element`, 'width', '100%');
page.expect.element(`@${element}`).to.have.css("width").which.equals("100%");

我不想使用硬编码值，因为它们会根据容器宽度而改变。正确的做法是什么？

我在这里使用页面对象模型，但没有它也可以。

Answer 1

为什么不先获取父项的宽度，然后获取子项的宽度，然后比较它们来计算百分比？

我自己不使用 nightwatch，但是你上面描述的伪代码应该是这样的：

const {expect} = require('chai');
let buttonParentSize = page.get.cssProperty(`@button-parent`, 'width'),
    buttonSize = page.get.cssProperty(`@button-element`, 'width'),
    buttonSizePercentage = (buttonSize / buttonParentSize)*100;

expect(buttonSizePercentage).to.equal('100');

无法断言 css 宽度为 100%

Unable to assert css width to be 100%

javascript

css

testing

bdd

nightwatch.js