nightwatch.js - 在 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);

一旦你有了这个元素，你就可以给它添加轮廓。