如何在Nightwatch中测试伪元素的CSS属性 [英] How to test css properties of pseudo elements in Nightwatch

问题描述

我想使用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属性?

解决方案

我知道这已经很老了，但是我很难弄清楚/找到一个答案，所以我想发帖希望能帮助解决一些失落的鞋底. /p>

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

I want to test the background image is correct on my website using Nightwatch, but its set to be the background of a ::before pseudo element, here is the CSS

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

I've tried the following:

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

Trying without adding 'before' in some way fails, stating that background doesnt contain the URL, as the <i> has it's own styling. Trying with 'before' included in the CSS selector returns that the element cannot be found

Is there a way to test the CSS properties when ::before and ::after pseudo elements are used?

解决方案

I know this is old but I had a hard time figuring it out/finding an answer so figured I'd post in hopes of helping some lost sole.

The below answer is how you do it for sure, you must get the value in javascript first then test it's value.

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

So in your case:

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属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！