Develop Reference

Nightwatch dropdowns handling by passing value

Below is the approach I have used in order to select values from a dropdown using nightwatch.As you can see this is not a good approach. We can't select the specific value from dropdown unless we click on the exact element.
this.useXpath();
this.click('(//td[#class="styles_selectDropdownContainer__2Vrns"])[1]')
this.useCss();
this.click('#react-select-6-option-1')
In selenium java there is a very good option like below
Select fruits = new Select(driver.findElement(By.id("fruits")));
fruits.selectByVisibleText("Banana");
I want to know of there is a similar approach can be used in nightwatch as well?

This is not built up using Select and Option tag so inbuilt selenium functions wouldn't work. Work around would be to click first on the parent span and then in list store every div (which is option), iterate the loop and for each web element if text matches with your desired text you can click on it.
Code :
this.useCss();
this.click("span[aria-live='polite']")
Now store options in a list :
var elements = document.querySelectorAll('.elements'); // use
//div[contains(#class,'option')] as element selector.
Now iterate the list :
// Iterate over them.
[].forEach.call(elements, function (element) {
// Manipulate each element.
element.click();
});
});

Manually override the child using nightwatch.js

I am currently writing a Nightwatch test to select a new document from a list. And I will need to be able to select the next in the list. Is there a way to manually override the child number that needs selecting?
For example the current selector being used is :
<ul class="dv-packdocs">
<li class="dv-packdoc"<div class="icon-todo"></li>
<li class="dv-packdoc"<div class="icon-todo"></li>
<li class="dv-packdoc"<div class="icon-todo"></li>
<li class="dv-packdoc"<div class="icon-todo"></li>
</ul>
and the test would be something like :
viewer.selectNewDocument([2])
would this select the second child under the ul?
Or would I have to specify each child element?

If I understand correctly, you are trying to dynamically find the appropriate child element (li) from a dynamical length list (ul, where the list is populated based on user input, or other site actions). Correct?
I see two scenarios with two different approaches:
1. You have a set/fixed condition (way of identifying your target element): for example, in your list, the second li would be targeted by the below command.
viewer.selectNewDocument('ul.dv-packdocs li:nth-child(2)') (considering you are passing a complete selector to the selectNewDocument function)
, or
viewer.selectNewDocument(2), passing a number & form the selector inside the command (if you care for aesthetics):
selectNewDocument: function(index) {
this.api.perform((done) => {
// Click the second document in the list:
let selector = `ul.dv-packdocs li:nth-child(${index})`;
this.api.click(selector);
done();
});
return this;
},
Alternatively, if you would want the last document added, then you would have to issue a elements call on the ul to retrieve the length of the list, then use that in the same way to determine which li you have to click: viewer.selectNewDocument('ul.dv-packdocs li:nth-child('+length+')') (where length is the result of your elements call).
2. You don't have a fixed condition (I'll fill this up if the first part doesn't cover it, or later today, kinda slammed after the holidays)
Hope it's what you were looking for! Cheers!

How to pick elements in d3 with a specific property value

I am having items painted using d3 on browser. I want to highlight some of them depending on their property. For example, I have groceries, soaps in which soap elements will have type as [for_bath (OR) for_cloth_wash]. I want to select those elements specific to for_bath in all soaps and groceries combined and painted together on same screen.
How ?
Also, my another doubt is document.getElementById() is not working inside d3's selections code. Am I true or an oversight ?
EDIT
var data = {"soaps":{"lux":"bath", "cinthol":"bath", "rin","cloth_washing"},
"shoes":{"valentine":"teens", "bootie":"kids", "kuuch":"kids"}};
// Now I want to show all bath soaps highlighted, may be with a circle around them.
var svg = d3.select("svg")
.selectAll(".items")
.data(data).enter()
.append("circle")
// highlighting styles
;
Here I want to select bath soaps and round them up.

You haven't given us any code, so I'm going to guess here. What you're probably looking for are CSS attribute selectors. So if you want to select elements which have the attribute soap set to for_bath, you would do
d3.selectAll("[soap=for_bath]");
This is for DOM elements only. If you're talking about data elements, then you can use the .filter() method:
data.filter(function(d) { return d.soap == "for_bath"; });
Regarding your second question, I'm not sure what you mean. The arguments to d3.select() or d3.selectAll() are DOM selectors, so document.getElementById() doesn't make sense here. You can however certainly use it other functions:
d3.selectAll("something").each(function() {
d3.select(this); // the current element
document.getElementById("something"); // another element
});

How can insert order of an enter selection be controlled?

I have an enter selection with two elements that I want to prepend to a svg container such that the order of the two elements is maintained. I have tried using insert using the :first-child selector like this
var newlayers = layer.enter();
newlayers.insert("g",":first-child")
As a result of using the :first-child selector the second element in the enter selection ends up being the first element in the svg container after insertion. How can I avoid this behavior?

Ok I was able to reorder the elements using .sort after the insert selection is created in this way:
var newlayers = layer.enter();
newlayers.insert("g",":first-child")
.sort(function(a,b){ return b-a; });
This leaves the ordering of the data intact while only reordering the inserted elements in DOM. I went down the route of reordering the data returned on enter() itself and that opened a whole new bunch of other problems.

Why is the following jQuery selector not returning both elements?

I've run into a situation where I am creating a jQuery object from an html string and need to select all elements within it with a particular class.
What I'm finding odd is that its returning one or the other, depending on which type of selecting mechanism I'm using. A test case is shown here:
var tmpl = '<ul><li class="foo">TEST</li></ul><div class="foo">BAR</div>';
console.log( $('.foo', tmpl) ); //[<li class="foo">TEST</li>]
console.log( $(tmpl).find('.foo') ); //[<li class="foo">TEST</li>]
console.log( $(tmpl).filter('.foo') ); //[<div class="foo">BAR</div>]
http://jsfiddle.net/Rfq9F/
In this example, both an li element in a ul and a non-descendant div have the class "foo". In the example, I use the .foo selector and set context to the template string. Second, I use .find() on the string. Finally, I use .filter() on the string.
Can someone explain why the selector mechanisms are acting as they do, and also how to achieve the goal I mentioned in the beginning?

It's because it's not a single root node, but two (ul and div).
Wrap everything in a <div> and it will work:
http://jsfiddle.net/Rfq9F/3/

Calling $(tmpl) creates a set with two elements - the <ul> element and the <div class="foo"> element. .find() looks for elements that are descendents of any of the elements in the set that match the selector. .filter() returns any elements in the set that match the selector.
The first two lines:
console.log( $('.foo', tmpl) );
console.log( $(tmpl).find('.foo') );
are equivalent, they're just two different ways to write the same thing.