如何在Nightwatch中測試偽元素的CSS屬性

Question

我想使用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屬性？

Answer 1

您最終弄明白了嗎？

否則，從我在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");
}

Answer 2

我知道這很老了，但是我很難找出答案/找到答案，所以我想發帖希望能幫助解決一些失落的鞋底。

以下答案是您如何確定的答案，您必須首先獲取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)')
})