如何在Nightwatch中测试伪元素的CSS属性

Question

我想使用Nightwatch在我的网站上测试背景图片是否正确，但是将其设置为:: before伪元素的背景，这是CSS

.icon-circle-delete:before {
    content: '';
    background: url(images/svg/delete.svg) no-repeat 50% 50%;
    display: inline-block;
    width: 16px;
    height: 16px;

我尝试了以下方法：

.assert.cssProperty("i.icon-circle-delete", "background", "url(clientlib-site/images/svg/delete.svg) ");

.assert.cssProperty("i.icon-circle-delete:before", "background", "url(images/svg/delete.svg) ");

.assert.cssProperty("i.icon-circle-delete::before", "background", "url(images/svg/delete.svg) ");

.assert.cssProperty("i.icon-circle-delete", "before:background", "url(images/svg/delete.svg) ");

尝试不以某种方式添加“ before”失败，并指出背景不包含URL，因为<i>具有其自己的样式。 尝试使用CSS选择器中包含的“ before”会返回找不到元素

当使用:: before和:: after伪元素时，是否可以测试CSS属性？

Answer 1

您最终弄明白了吗？

否则，从我在GitHub问题的/建议页面上的一些对话中所看到的来看，它似乎不受支持。

https://github.com/nightwatchjs/nightwatch/issues/60

但是，我现在正在处理一个相关的问题。 我需要检查仅应用于:: after选择器的css属性。 一位同事告诉我，可以类似地在client.execute（）函数中实现此目标，然后在回调中对其进行处理，可能是这样的：

client.execute(function() {
   //do work
   //some javascript to check the DOM itself for the property
}, [], (result) => {
   //handle the result and do testing
   client.assert.equal("thing1", "thing2");
}

Answer 2

我知道这很老了，但是我很难找出答案/找到答案，所以我想发帖希望能帮助解决一些失落的鞋底。

以下答案是您如何确定的答案，您必须首先获取javascript中的值，然后测试其值。

browser.execute(function (title) {
    return window.getComputedStyle(document.querySelector('.callout .callout-title'), ':before').getPropertyValue('content')
}, function (result) {
  browser.assert.equal(result.value, '"Value of content: pseudo"')
})

因此，在您的情况下：

browser.execute(function (bg) {
    return window.getComputedStyle(document.querySelector('.icon-circle-delete'), ':before').getPropertyValue('background')
}, function (result) {
  browser.assert.equal(result.value, 'url(images/svg/delete.svg)')
})