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

【问题标题】：How to test css properties of pseudo elements in Nightwatch如何在 Nightwatch 中测试伪元素的 css 属性
【发布时间】：2017-09-27 13:30:53
【问题描述】：

我想使用 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) ");

以某种方式尝试不添加“之前”会失败，说明背景不包含 URL，因为 <i> 有自己的样式。尝试在 CSS 选择器中包含“之前”会返回找不到该元素

有没有办法在使用 ::before 和 ::after 伪元素时测试 CSS 属性？

【问题讨论】：

标签： javascript css automated-tests pseudo-element nightwatch.js

【解决方案1】：

我知道这很旧，但我很难弄清楚/找到答案，所以我想发帖希望能帮助一些丢失的鞋底。

下面的答案是你如何确定的，你必须先在 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)')
})

【讨论】：

【解决方案2】：

你最终解决了这个问题吗？

否则，根据我在 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");
}

【讨论】：