In the Magellan / Nightwatch framework, how to set a CSS outline on an element?

Question

Suppose in writing or verifying a test, the command code is:

pToggleMyCoolToggle: function () {
  var selectors = this.elements;

  return this
    .getEl(selectors.myCoolCheckbox.selector)
    .moveToEl(selectors.myCoolCheckbox.selector)
    .clickEl(selectors.myCoolCheckbox.selector);
}

How can this element on the browser be shown with an outline using CSS:

outline: 3px dotted orange

by adding some code to the above command, using the methods inside of Magellan / Nightwatch?

Answer 1

Just use .execute

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

Answer 2

I just found that the name selectors.myCoolCheckbox.selector is written by some amateur. It really should be paymentPage.useCreditCardRadio.selector. So the final selector states what the CSS selector is.

The line selectors = this.elements is very misleading too. selectors is not the "elements". It might be paymentPage = this.elements and paymentPage has many properties, including a useCreditCardRadio. Or it could be paymentPageElements = this.elements which means paymentPageElements is an object that contains all elements. So this example shows how bad naming affects programming, for all the people who will need to touch or edit the code in the future.

As a result, you should be able to use

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

and once you have the element, you can add the outline to it.