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!
Related
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();
});
});
I have a simple structure like:
HTML
<ul id="costsDropdown">
<li data-position="bla bla"></li>
</ul>
and I want to change each "data-position" attribute of my list Elements.
My first Jquery Shot was this here:
$("#costsDropdown ul").each(function() {
$("li").attr("data-position", "TEST-VALUE123");
});
but it doesnt work, I think my selector are wrong...
could anyone give me a hint please?
Thanks for any help!
Greetz
Your selectors are a bit off
$("#costsDropdown ul").each
That is trying to select the child ul of the container #costsDropdown (which is the ID of the ul) - what you want is:
$("#costsDropdown li").each(function() {
$(this).attr("data-position", "TEST-VALUE123");
});
ID's are unique - no need to double up the selector with an ID and the type of element it is.
Note that I used $(this), not $("li"), inside the each callback. $("li") selects all li elements, anywhere on the page; we just want a jQuery wrapper for the one specific one we're handling inside the each.
In fact, the each is completely unnecessary because of the set-based nature of jQuery; if you use the .attr setter, it sets the attribute on all elements in the set:
$("#costsDropdown li").attr("data-position", "TEST-VALUE123");
That will set the value on all of the li elements inside #costsDropdown.
If you need to set separate individual values on the individual li elements, you still don't need each (though it's fine if you want to use it); you can use the version of attr that accepts a callback that it uses to find out what value to set:
$("#costsDropdown li").attr("data-position", function(index) {
return "Test value " + index;
});
That will set "Test value 0" on the first li, "Test value 1" on the second, etc. And like the each example above, if you need to, you can use this within the callback to refer to the li for that call (possibly using $(this) to wrap it if you need a jQuery wrapper).
$("#costsDropdown ul") matches no elements, it has to be $("#costsDropdown") (#costsDropdown is the ul).
And even that is unnecessary. Go
$("li[data-position]").attr("data-position", "TEST-VALUE123");
instead.
Ok, so I need to be able to get the n (zero based) position of an element based on a mutual match between the page & element ID...
It's probably easier if I give an example (Assume the current page ID is 488);
<ul id="work-grid">
<li id="item-486" class="work-item"><!--/content--></li>
<li id="item-487" class="work-item"><!--/content--></li>
<li id="item-488" class="work-item"><!--/content--></li>
<li id="item-489" class="work-item"><!--/content--></li>
<li id="item-490" class="work-item"><!--/content--></li>
</ul>
As you can see the list item with the matching numeric ID 488 is the third in the list (So would have an n value of 2).
The problem is, this grid appears on multiple pages (With different ID's) and the list is populated dynamically so I never know the position of the matching element. Is there a way that I can get it using jQuery and add it to the following snippet (Replacing 2 for the correct n position)
$('#work-grid').trigger("colio", ["expand", 2]);
This probably made little to no sense so if anything needs clarification please just let me know.
I think index() is what you want:
var index = $('#item-488').index();
$('#work-grid').trigger("colio", ["expand", index]);
Assuming your element appears once on the page, you can do:
$('#item-488').index();
to find out the index of the element. Read up on index() here: http://api.jquery.com/index/ The bit that applies to this scenario is:
If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.
Here's an example: http://jsfiddle.net/bnF6h/
var page = 488;
var a = $( "li[id$='"+ page +"']");
You can use this to dynamically select the item id based on the page id.
Applying it:
var page = 488;
var a = $( "li[id$='"+ page +"']").index();
$('#work-grid').trigger("colio", ["expand", a]);
You mean jQuery's index() method?
http://api.jquery.com/index/
If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.
I am trying to append a list element dynamically to already existing list.
I've a list in the form,
<ul id="test">
<li class="testField">YYAAHOOOOOO<li>
</ul>
I am trying to add an extra item to this list using jQuery append or after...
What I did was:
$(".testField").after("<li class='testField'>TEST MESSENGER</li>");
Used after function as append did not work, the after function works fine first time as there is only one element with the class name testField, but as the list grows, the after function will add the list items to all elements present,
To make it clear, on first trial I will get an output:
<ul id="test">
<li class="testField">YYAAHOOOOOO<li>
<li class='testField'>TEST MESSENGER</li>
</ul>
If I try the to add another element now for example <li class='testField'>GOOGLE</li>, the output will be like:
<ul id="test">
<li class="testField">YYAAHOOOOOO<li>
<li class='testField'>GOOGLE</li>
<li class='testField'>TEST MESSENGER</li>
<li class='testField'>GOOGLE</li>
</ul>
I thought about using ids, but I am trying to have an option to remove elements from the list too... So if I try to append to an undefined id, it will return error. Is there anyway to find the first element inside a list and append the element to that first one?
Try:
$(".testField:first").after("<li class='testField'>TEST MESSENGER</li>");
this will make sure that you are appending after the first element only
Alternatively, you could do this without jQuery:
var li = document.createElement('li'); // Create a List item.
li.setAttribute("class", "testfield"); // Set the li's class
li.addChild(document.createTextNode("Your Text Here!")); // Set the li's text
document.getElementById("test").addChild(li); // Append the li to the list
It's slightly more code, yes, but it's pretty much what jQuery does under the hood. (And faster, too)
If you want to add the new ul after the first li already in the list, replace the last line with:
var ul = document.getElementById("test");
if(ul.children.length > 1){ // If the list has 2 or more children (li's)
ul.insertBefore(li, ul.children[1]); // Insert the new item before the second item in the list.
}else{
document.getElementById("test").addChild(li);
}
Now, why am I posting a answer that requires more code?
Anything that can be done in jQuery can be done in native JS. I think it's good to have multiple different answers available on SO, especially if they use different techniques to do the same thing. That way, users can chose for themselves: short'n easy (jQuery), or if they don't want to use the library, native code.
I have a ul with several items. I populate the list dynamically after page load using jquery. As I add each list item, I also add an "itemID" to the data of that element using the jquery ".data()" function. Something like this:
var item = $('<li>My Item Name</li>');
item.data('itemID', '123ABC456');
Later, I need a selector to determine if there is any item in my item list with a specific itemID. First I tried using:
$('*[data-itemID="123ABC456"]');
This didn't work - and on further research, I discovered that this syntax only works if the data attribute was set in the DOM when the page was loaded; it doesn't work if you use the ".data" jquery method dynamically.
Next I tried:
$(':data(itemID==123ABC456)');
For some reason, this doesn't work. If I run simply $(':data(itemID)'), however, then I do get all the li elements that have an itemID in their data.
I know that the itemID attribute is set correctly, as when I call .data() on that list item I get:
Object { itemID="123ABC456"}
How can I select all elements that have an itemID of "123ABC456" in their data?
http://jsfiddle.net/w28p9/1/ <-- jsFiddle example showing differences with data-attribute & jquery.data()
jQuery.data() is different than HTML5 data-NAME attributes which you are trying to search for.
http://api.jquery.com/jQuery.data/
jQuery.data() saves inside of the jquery element (this data is hidden from plain sight).
Looking for [data-itemID] would work if inside of the actual had: <li data-itemID="12345"></li>.
To retrieve and look for the actual hidden .data() try:
// of course be more specific than just searching through all <li>'s
$('li').each(function () {
if ( $(this).data('itemID') === '123ABC456' ) {
// do whatever you wanted to do with it
}
});
Hope that helps!
Instead of
$(item).data('itemID', '123ABC456')
use
$(item).attr('data-itemID', '123ABC456')
Then you can use
$('[data-itemID=123ABC456]')
as a selector
How about putting the itemID in the DOM:
var item = $('<li itemID="'+itemid+">My Item Name</li>');