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?

is there some way to get just the HTML element so that I can even just do inline style `el.sytle="outline: 3px dotted orange"` ? I suppose jQuery is not active or else I could do `$(el).css({ outline: "3px dotted orange" });` — nonopolarity, Jul 27 '17 at 21:28
It's not a common expectation that an automated test would *modify* the HTML elements / attributes directly. But, answered. — QualiT, Jul 28 '17 at 14:26
it is more like for debugging or tracing the program, so that you know what is going on, just by looking at the browser (you can also use in your test script `client.pause(10000);` to pause the browser for 10 seconds so as to slow it down to see what is going on) — nonopolarity, Jul 28 '17 at 19:05
Yes, I use .pause(), and I can think of cases where, if I wanted to screenshot an error this might be useful. Still, it's not something I am happy to do. I think it puts QA in the habit of messing with things we ought not mess with for the separation of concerns. Front end engineers implement css. QA engineers can check it, validate it, verify it, but modifying it? It makes me queasy. — QualiT, Jul 28 '17 at 20:43

score 0 · Answer 1 · answered Jul 28 '17 at 14:26

0

Just use .execute

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

answered Jul 28 '17 at 14:26

QualiT

1,934
2
18
37

I had to use `this.client` or else it isn't defined... but then it also gave `✖ TypeError: this.client.execute is not a function` – nonopolarity Jul 28 '17 at 18:51
actually ideally, it could be done by something like `this.getDOMEl(selectors.myCoolCheckbox.selector).style.outline = "3px dotted orange";` It also is a bit weird that it looks like OOP, but for `this.getEl(selectors.myCoolCheckbox.selector)` sounds like you would get an element and return it, and then in the code it will invoke `moveToEl(selectors.myCoolCheckbox.selector)` on this element... but why do you have to specify the selector again? I thought the usually OOP way is something like `farm.getCow().eat()` -- you usually would not say `farm.getCow(cowSelector).eat(cowSelector)` – nonopolarity Jul 28 '17 at 19:02
For your first question about 'this.client', if you're using it in the context of anything but a test object ~ module.exports = new Test({ }) ~ , say, a pageObject, yeah, it's done differently. I am a fan of test objects, and page obj just don't work for the types of apps I test. Regarding selectors, I don't know what you are talking about with getEl. – QualiT Jul 28 '17 at 21:16

nonopolarity · Answer 2 · 2017-09-19T19:55:48.013

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.

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

2 Answers2