自动化 End-End 测试 Nightwatch.js 之踩雷笔记：检查颜色

cssProperty() ?

对於写 E2E 检查颜色是否正确应该是再平凡不过的事了，当然 Nightwatch.js 其实也内建了 cssProperty 一系列的指令：

• assert/verify[.not].cssProperty()
• getCssProperty()

用法也相当简单，cssProperty() 带入 selector, property 以及要验证的颜色即可，并且会回传一个 true/false，并在 console 中会有打勾勾与预设的文字。

而 getCssProperty() 则是将最後一个要验证的颜色改为 callback function，并可以自行建立较复杂的验证。

cssProperty()

写法范例：

执行结果：

看起来很正常简单，但遇到其他浏览器就不一定了：

有趣的是，即便点开 devtool 中检查元素，颜色也会由 hex 转成 rgb 或 rgba
且只有 Firefox 与 Safari 才会有这个问题。

解决方法

既然已经知道单纯使用 cssProperty() 验证颜色失败，那麽就用 getCssProperty() 自己做一个吧！

checkColorSafe()

先前提到 getCssProperty() 可以将 Nightwatch 读到的颜色转为 rgb/rgba，并放入一个 callback function，因此：

透过简单的检查与替换，便可以完成：

当然，写在测试的档案是绝对没有问题的。只不过 Nightwatch 是可以将常用的指令模组化，建立自己的客制化指令。并会在明天的内容做个简单的 demo.