在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

通过在上面的命令中添加一些代码，使用Magellan / Nightwatch中的方法？

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);

一旦有了元素，就可以向其中添加轮廓。