How to test css properties of pseudo elements in Nightwatch

这一生的挚爱 提交于 2020-03-03 04:59:45

问题


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?


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



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


来源:https://stackoverflow.com/questions/46449233/how-to-test-css-properties-of-pseudo-elements-in-nightwatch

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!