自动化 End-End 测试 Nightwatch.js 之踩雷笔记：getCssProperty()

getCssProperty() 是 Nighwatch 中用来取得 DOM element 的 css property 的指令。此外它也有具备等待物件出现才抓取的特性

用法

.getCssProperty(selector, cssProperty, callback)
.getCssProperty(using, selector, cssProperty, callback)

如同之前写的 checkColorSafe() 一样，可以利用 callback 写出较复杂的功能：

this.getCssProperty(_selector, _cssProperty, function(result) {
    // Do something
}

基本的介绍就到这里，接下来要介绍比较特殊的问题

Firefox getCssProperty()

getCssProperty() 这个函数在每个浏览器都是没有什麽问题的，当然包括 firefox 也是。

不过如果今天被测试的网站他的 css 长这样：

border-left: 4px solid #EB1362;

在 Chrome/edge 或 safari 都是可以直接抓取 border-left 这个属性，并回传 4px solid rgba(235, 19, 98, 1); 的，不过 firefox 仅会回传 ''

成因是因为根据 W3C 的 protocol

getCssProperty() 应该会回传：

getComputedStyle(document.querySelector('.')).border-left

不过 firefox 的 border-left 却是空字串
使用一下 firefox 的主控台：

可以发现我们想要的其实是另外存在了 border-left-color 中，因此使用 .getCssProperty(selector, 'border-left', callback) 才会是空的。

更多可以参考：https://bugzilla.mozilla.org/show_bug.cgi?id=137688

这算是 firefox 的设计特性，不过好在其实其他浏览器也都可以这样用～

总结

如果遇到像这样缩写成一条的 css property，不妨可以点一下那个三角箭头

使用较为精准的 property name，避免这样的问题～