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)')
})
Did you end up figuring this out?
Otherwise, from what I’ve seen in some conversations in the GitHub issue’s/suggestions page, it looks like it isn’t supported.
https://github.com/nightwatchjs/nightwatch/issues/60
However I have a related thing I’m working on right now. I need to check for a css property that is only applied to a ::after selector. I’ve been told by a colleague that this can be similarly achieved in a client.execute() function, and then handle it in the callback, something like this could be possible:
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");
}