I am struggling to locate some elements in my angulars JS app using protractor (JS Webdriver).
Heres is my HTML :
<div id="numDispBox" ng-mouseleave="hideNumDisplayBox()" style="display: none;">
<div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(20)">20</div>
<div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(40)">40</div>
<div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(60)">60</div>
<div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(80)">80</div>
</div>
I would like to be able select the 2nd, 3rd and 4th inner divs.
I have used class name however it did not work :
element(by.css('[ng-click="UpdateNbResultPerNode(60)"]'));
I am not able also to find out the xpath with firebug as when I click on the inspector my submenu goes away even when I block JS mutation.
Thanks
I would use XPath to find this element.
The code would look like this:
driver.findElement(By.xpath("//div[#ng-click='UpdateNbResultPerNode(60)']"));
You can also do this by referencing the text like this:
driver.findElement(By.xpath("//div[text()='60']"));
Or maybe you need to first find the parent div:
driver.findElement(By.xpath("//div[#id='numDispBox']/div[text()='60']"));
I have a video on how to utilize XPath with webDriver at:
http://community.neustar.biz/community/wpm/load_testing/blog/2013/11/19/utilizing-xpath-to-interact-with-elements
Brian Kranson
Neustar, Inc. / Professional Services Engineer
There are many ways to do this,let me list two selectors which can locate the required elements.
The one which Whitney Imura has mentioned would be a good option.
css = #numDispBox div:nth-child(n)
In your case n can be 1,2 or 3 to locate 2nd, 3rd or 4th div element.
you can also try using + to locate its sibling.
For example, to locate the 2nd div element the following selector would work.
css = #numDispBox > div + div
In ruby, you can do (it's the same concept for what you're trying to do with the JS Webdriver):
driver.find_element(:css, '#id .class:nth-child(1))
You can also use element.all:
element.all(by.css('#numDispBox numDispOption')).then(function(items){
items[1].click();
items[2].click();
items[3].click();
});
or
element.all(by.css('#numDispBox numDispOption')).get(1)
element.all(by.css('#numDispBox numDispOption')).get(2)
element.all(by.css('#numDispBox numDispOption')).get(3)
Related
I need to select the element 2 up from my current element. Normally you can use the .prev() to find the previous element but I need to find the one previous to this. Whats the simplest way to find this?
var animation = $("div.services-block").prev();
I need to find the div before services-block and load that into a variable.
My structure as an example
<div class="wrapper">
<div class="services-block-item"></div>
<div class="services-block-item-match"></div>
<div class="services-block-item"></div>
<div class="services-block"></div>
</div>
Say my current element is services-block, I need to find and grab services-block-item-match. (but this class name can change)
If your "this current element" changes, some code like the following might be useful:
I used a different example: http://jsfiddle.net/swm53ran/5/ to illustrate the ability of $(this) with the .prev().prev() that may be helpful for your problem.
$(this).prev().prev().css('color', 'red');
In this fiddle illustration, a link is clicked and then jquery changes the element that is 2 spots ahead of it to have red colored text. There are four links, so if you click 4, link 2 will be red, if you click 3, link 1 would be highlighted.
Hope this helps!
var animation = $(".services-block").prev().prev();
I have dynamically generated content which I'm outputting using two divs:
<div id="data1">Some info</div> -- <div id="data2">different info</div>
I want to only show "data2" in certain instances, so I'm trying to use JavaScript to hide it when it's not needed. Basically, my code is:
var getDivs = document.getElementById('data2');
IF STATEMENT {
getDivs.style.display='none'; }
However, this is only kind of working - it's hiding the very first div that it comes across, but it's not hiding ALL of the divs with that ID.
This means that my code is basically correct - the IF STATEMENT is working, the display='none' DOES hide something, it's just not hiding everything that it should...
I tried to change it from div id= to div class= and instead use document.getElementByClassName('data2') but that doesn't seem to be working at all - it doesn't even hide the first .
What am I missing / doing wrong? What do I need to change to get this to hide all of the divs that are "data2"?
Thanks!
Your code seems fine. You can see it works: http://js.do/code/zeek
Later Edit:
Using class instead of id:
<div id="data1">Some info</div> --
<div class="data2">different info</div>
<div class="data2">different info</div>
<div class="data2">different info</div>
<script type="text/javascript">
var getDivs = document.getElementsByClassName('data2');
for(var i= 0; i< getDivs.length; i++){
var div = getDivs[i];
div.style.display='none';
}
</script>
Use jQuery and select by class instead of by ID. See http://api.jquery.com/class-selector.
jQuery is not only easy and readable, you'll also not write getElementByClassName instead of getElementsByClassName.
$('#data2').hide();
This assumes jQuery is on your page: http://api.jquery.com/
Note: You're going to have problems if this is dynamic and there are several elements with the ID of data2. Instead, use classes for selecting relevant divs if you can help it.
I want to use jQuery to work with events in a given search box. My issue is that
I don't know how to build the selector correctly, so that JQuery accepts it.
I think I'm getting confused because I need the second element in the list and need to select that one.
The runtime HTML looks like this: (Adapted from Chrome Developer tools, only the relevant class and IDs are shown. There are no IDs to be shown.)
<body class=km-ios7 km-7 km-m0 km-web km-black-status-bar km-vertical km-widget km-pane>
<div class="km-widget km-view">
<!-- Begin 3rd party control -->
<div class=class="km-widget km-view">
<div km-header>
<div class="km-content km-widget km-scroll-wrapper">
<div class=km-scroll-header>
<div class=km-scroll-container>
<div class="km-listview-wrapper">
<form class="km-filter-form">
<div class="km-filter-wrap">
<input type=search >
What I've tried
Since my event wasn't firing I assume my selector was wrong. I opened chrome developer tools after I did "inspect element". The bottom of the tools listed all the parent tags used for that element (with no class or ID). As a test, I've tried hiding the search box using the following:
$("div").hide(); // hides everything...
$("div div").hide(); // hides the wrong element on the page
$("input").hide(); // nothing
$(":input").hide(); // nothing... saw this example somewhere, don't understand it
$("input:text").hide(); // nothing... saw this example (http://stackoverflow.com/q/17384218/328397), don't understand it
I looked at this W3 document, but didn't see what I was looking for (unless I missed it)
Any assistance in getting the right selector would be appreciated.
In the page you linked it's the second div under defaultHomecontent, so
$("#defaultHomeContent div:nth-child(2)")
You actually want to hide the div with class km-filter-wrap.
A safer alternative may be to not deal with selectors and instead show/hide the wrapper element for the ListViewFilter's searchInput element:
var listView = $("#local-filterable-listview").kendoMobileListView({
...
}).getKendoMobileListView();
listView._filter.searchInput.parent().hide();
or
listView.wrapper.find(".km-filter-wrap").hide();
In general, it's a good idea to use the elements that are exposed by Kendo UI controls as much as possible instead of manually building queries (since they might change in future versions).
You could also extend the ListView widget with your own API method for this:
kendo.mobile.ui.ListView.fn.filterVisible = function(value) {
var wrapper = this._filter.searchInput.parent();
if (value) {
wrapper.show();
} else {
wrapper.hide();
}
};
then you could use
listView.filterVisible(false); // hide the filter
you can use the find function. Let suppose you have input field inside footer div like this.
<div id="footer">
<div>
<div>
<input type="text" name="text" value="Search" />
</div>
</div>
</div>
You can use selector like this $("#footer input").hide() or $("#footer").find("input").hide() or $('input[name=text]', '#footer').hide();
Based on what you have added.
You could use
$("input[type='search']")
as a selector.
See if that helps. Here is an example
You could also combine the selectors in this manner:
var $container = $("div.km-widget");
var $searchBox = $container.find("input[type='search']");
I'm working on a javascript code which does :
$('div').html(<some text>).find('>')
Looking at the jQuery documentation, I can't understand what find('>') is supposed to do.
Moreover, when experimenting in navigator console, I get strange results :
$('div').html('to<br/>to').find('>') -> [ <br>, <br>, <br>]
$('div').html('to<a/>to').find('>') -> [ <a></a>, <a></a>, <a></a>]
Why a 3 times repetiton ?
So, can anyone enlighten me about this strange find('>') ?
> is the Child Combinator CSS selector. .find('>') will pull all direct children of the element.
As mentioned in comments, the repetitions must be due to your document having multiple div elements.
Update
From your comment:
I thought the line was creating a div then setting some html into it.
$('div') itself selects all div elements which exist within document. If you want to create a div element, you can instead do this:
$('<div/>', { html: 'to<br/>to' });
If you're new to jQuery, I'd strongly advise checking out http://try.jquery.com and http://learn.jquery.com.
As someone pointed out, '>' selects the child elements of an element.
Why 3? Because surely you have 3 divs, so
$('div') //selects 3 divs
.html(...) // adds content to each div
.find('>'); //return the direct descendants of each element in the jQuery object
//as a new jQuery object
I am using the treeview for two things:
1.) Click of an list-item in the treeview opens a new page with the children populated.
2.) Expand or collapse of the treeview using the setting, "persist: 'cookie'", since I need to know the collapsed list times done in step 1.
For testing, I need to write two test cases in Java for expand and collapse. Is there any way to get the id of the href of expand(+) or collapse(-) icon. So that I can get the id and call the click on that element.
Thanks in advance.
Under each li, there is a empty div which captures the click event for "+/-" in the treeview. When the li expanded(-), the code looks like:
<li class="collapsable lastCollapsable">
<div class="hitarea collapsable-hitarea lastCollapsable-hitarea " id="unique_id"></div>
And when the li is collapsed(+), the code looks like:
<li class="expandable lastExpandable">
<div class="hitarea expandable-hitarea lastExpandable-hitarea" id="unique_id">
So, from javascript or any other test case, we can use getElementById("unique_id").click(). We may need to add a unique id for each li.
dijit.byId("tree")._expandNode(dijit.byId('tree').get('selectedNode'))