在 Magellan / Nightwatch 框架中，如何在元素上设置 CSS 大纲?

Question

假设在编写或验证测试时，命令代码为：

pToggleMyCoolToggle: function () {
var selectors = this.elements;
return this
.getEl(selectors.myCoolCheckbox.selector)
.moveToEl(selectors.myCoolCheckbox.selector)
.clickEl(selectors.myCoolCheckbox.selector);
}

如何使用CSS在浏览器上显示此元素的轮廓：

outline: 3px dotted orange

通过在上面的命令中添加一些代码，使用麦哲伦/守夜人内部的方法？

Answer 1

只需使用 .execute

client.execute(function(){
document.getElementById('idYouWantToTarget').style.border="3px dotted orange";
})

Answer 2

我刚刚发现selectors.myCoolCheckbox.selector这个名字是由一些业余爱好者写的。真的应该paymentPage.useCreditCardRadio.selector. 因此，最后selector说明了CSS选择器是什么。

selectors = this.elements的台词也非常具有误导性。selectors不是"元素"。它可能paymentPage = this.elements，并且paymentPage具有许多属性，包括useCreditCardRadio。或者它可以是paymentPageElements = this.elements这意味着paymentPageElements是一个包含所有元素的对象。因此，此示例显示了糟糕的命名如何影响编程，对于将来需要触摸或编辑代码的所有人来说。

因此，您应该能够使用

var el = document.querySelector(paymentPage.useCreditCardRadio.selector);

拥有元素后，您可以向其添加轮廓。