Как установить контур CSS на элемент в рамках Magellan / Nightwatch?

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

и как только у вас есть элемент, вы можете добавить контур к нему.