在 Magellan / Nightwatch 框架中，如何在元素上设置 CSS 轮廓？答案

【问题标题】：In the Magellan / Nightwatch framework, how to set a CSS outline on an element?在 Magellan / Nightwatch 框架中，如何在元素上设置 CSS 轮廓？
【发布时间】：2018-01-02 12:06:06
【问题描述】：

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

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 内部的方法？

【问题讨论】：

你试过.injectScript()吗？
有没有办法只获取 HTML 元素，这样我什至可以做内联样式 el.sytle="outline: 3px dotted orange" ？我想 jQuery 不活跃，否则我可以做$(el).css({ outline: "3px dotted orange" });
自动化测试会直接修改 HTML 元素/属性并不是一个普遍的期望。但是，回答了。
它更像是用于调试或跟踪程序，以便您通过查看浏览器知道发生了什么（您也可以在测试脚本中使用client.pause(10000);来暂停浏览器10 秒钟，以便放慢速度，看看发生了什么）
是的，我使用 .pause()，并且我可以想到一些情况，如果我想截取错误，这可能会很有用。不过，这不是我乐于做的事情。我认为它使 QA 养成了为了关注点分离而弄乱我们不应该弄乱的事情的习惯。前端工程师实现 css。 QA 工程师可以检查、验证、验证，但是修改它？这让我感到恶心。

标签： nightwatch.js magellan

【解决方案1】：

只需使用 .execute

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

【讨论】：

我必须使用this.client 否则它没有被定义......但它也给了✖ TypeError: this.client.execute is not a function
实际上，理想情况下，它可以通过this.getDOMEl(selectors.myCoolCheckbox.selector).style.outline = "3px dotted orange"; 之类的东西来完成。它看起来像OOP 也有点奇怪，但对于this.getEl(selectors.myCoolCheckbox.selector) 听起来你会得到一个元素并返回它，并且然后在代码中它会在这个元素上调用moveToEl(selectors.myCoolCheckbox.selector)...但是为什么你必须再次指定选择器？我认为通常的 OOP 方式类似于farm.getCow().eat()——你通常不会说farm.getCow(cowSelector).eat(cowSelector)
关于“this.client”的第一个问题，如果您在测试对象以外的任何上下文中使用它 ~ module.exports = new Test({ }) ~ ，比如说pageObject，是的，它的做法不同。我是测试对象的粉丝，而页面 obj 不适用于我测试的应用程序类型。关于选择器，我不知道你在说什么getEl。

【解决方案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);

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

【讨论】：