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) ");

尝试在不添加＆＃39;之前＆＃39;以某种方式失败，说明背景不包含URL，因为<i>具有自己的样式。尝试使用＆＃39;之前＆＃39;包含在CSS选择器中，返回无法找到该元素

有没有办法在使用:: 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)')
})

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

2 个答案: