How To Test Css Properties Of Pseudo Elements In Nightwatch

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:be

Solution 1:

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

Solution 2:

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