How can I select the on of element, and this element contains a collection of elements, How can I select or pass through this element's collection?
the default search method WebDriverRunner.getWebDriver().findElements(By.tagName("*"));
is $$("*")
they consider that default space to search is the whole document, how can I specify the region to search? Assume that I need the a tags from the region or from specific element.
I have the following schema for my page:
<div class="class1">
<a href="" />
<a href="" />
<img src="img.png" />
</div>
<a href="" />
<a href="" />
<div class="class2">
<a href="" />
<div class="class4"> <div>
</div>
How can I pass all elements of div class="class1", ex: after select div.class1 element, I need to see all elements inside this div.
You should find first div class="class1" then using this object find all element under this like below code:
WebElement el = WebDriverRunner.getWebDriver().findElement(By.className("class1"));
List<WebElement> elements = el.findElements(By.tagName("*"));
Let me know if this will not work!!!
Thanks
Sadik
Related
We can find element by inner text, for example:
<span>
<div>
Example Text
</div>
<div>
Other Text
</div>
</span>
In this case we can use follow xpath: //span/div[contains(text(), 'Example')]
But how can I found element when the text exist out of the tag?
For example:
<span>
<div id="1">
...........
</div>
Example Text
<div id="2">
......
</div>
Other Text
</span>
And shat if, I haven't id on the div tags, and I can't use order?
<span>
...........
<div>
...........
</div>
Example Text
<div>
......
</div>
Other Text
</span>
You can use xpath axes to select siblings.
//text()[contains(.,"Example")]//preceding-sibling::div[1]
You can use this XPath
//span[contains(text(),'Example Text')]//div[#id='1']
For the first div.
The same for the second div
//span[contains(text(),'Example Text')]//div[#id='2']
Generally, in this case the "Example Text" text is contained by the parent span element.
So you can locate the parent span according to this text and then drill down to the child div.
I have a < ul > with unknown number of < li > elements. Each < li > has some text and also a button. How can I identify which < li > contains the text I'm looking for, in order to click the button in that same < li >?
<ul>
<li class="ot-queryitem row-fluid">
<div class="ot-queryitem__info ot-queryitem__info--left span7">
<span class="ot-queryitem__name">Äänikysely (Voice Activity and Participation Profile)</span>
</div>
<div class="ot-queryitem__info ot-queryitem__info--center span3"></div>
<div class="ot-queryitem__info ot-queryitem__info--right span2">
<button class="ot-button ot-button--undefined pull-right ot-queryitem__button">
<i class="icon-pencil fa ot-icon ot-icon--default" style="margin-right: 8px;"></i>
<span>Täytä</span>
</button>
<span class="ot-queryitem__logo"></span></div></li>
<li class="ot-queryitem row-fluid">
<div class="ot-queryitem__info ot-queryitem__info--left span7">
<span class="ot-queryitem__name">Nikotiiniriippuvuustesti</span>
</div>
<div class="ot-queryitem__info ot-queryitem__info--center span3"></div>
<div class="ot-queryitem__info ot-queryitem__info--right span2">
<button class="ot-button ot-button--undefined pull-right ot-queryitem__button">
<i class="icon-pencil fa ot-icon ot-icon--default" style="margin-right: 8px;"></i>
<span>Täytä</span>
</button>
<span class="ot-queryitem__logo"></span></div></li>
//span[text()='Nikotiiniriippuvuustesti'] will give you a <span> with the given text
/ancestor::li axis will give you the parent <li> tag
/descendant::button axis will give you the <button> you're looking for
Putting everything together:
//span[text()='Nikotiiniriippuvuustesti']/ancestor::li/descendant::button
Demo:
References:
XPath Tutorial
XPath Axes
XPath Operators & Functions
Try the following xpath.
xpath: //ul//li[contains(.,'Nikotiiniriippuvuustesti')]//button
OR
xpath: //ul//li[contains(.,'Äänikysely')]//button
However You can pass this Nikotiiniriippuvuustesti or Äänikysely as string variable in robotframework.Hope this helps.
Both the element with the text and the button are child elements under each <li>. You need to go up the html tree from the text and then look for a button under a sibling element
//div[span[contains(., 'Äänikysely')]]/following-sibling::div/button
To identify li tag which contains text you looking for as -
${YOUR_TEXT} Nikotiiniriippuvuustesti
## this keyword will give first matching element
${elements}= Get WebElement xpath://span[contains(text(),'${YOUR_TEXT}')]/ancestor::li
### wait for element to be present on page
Wait Until Page Contains Element ${elements}
## now click on button inside li tag found in above lines
Click Button xpath://span[contains(text(),'${YOUR_TEXT}')]/ancestor::li//button
note: locators are taken from the html sample you provided
You don't have to count the number of <li> within the <ul>.
To click on the respective button according to the text e.g. Äänikysely, Nikotiiniriippuvuustesti etc you can use the following solution:
To click for Äänikysely:
Click Button xpath://div[contains(#class, 'ot-queryitem__info--left')]/span[contains(.,'Äänikysely')]//following::button[#class='ot-button ot-button--undefined pull-right ot-queryitem__button']//span[text()='Täytä']
To click for Nikotiiniriippuvuustesti:
Click Button xpath://div[contains(#class, 'ot-queryitem__info--left')]/span[contains(.,'Nikotiiniriippuvuustesti')]//following::button[#class='ot-button ot-button--undefined pull-right ot-queryitem__button']//span[text()='Täytä']
I am trying to test my vuejs component via jest that contains materialize select.
When performing a component test, I get the following error in materialize.js:
TypeError: Cannot set property 'tabIndex' of null at Dropdown._makeDropdownFocusable
How fix this error?
This problem can happen when the input field is not wrapped inside a div with the class input-field:
<div class="input-field">
<input type="text" class="autocomplete"></input>
</div>
Adding a div with the class "input-field might solve this problem.
use id selector instead class selector. for example call dropdown like this :
html :
<a class='dropdown-trigger' id="dropdowner" href='#' data-target='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider" tabindex="-1"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
js:
$('#dropdowner').dropdown();
Can only be used once.
data-target="name_target" must not be repeated
Exam1.❌
<nav>
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-trigger" href="#!" data-target="name_target1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger" href="#!" data-target="name_target1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!-- Dropdown Structure -->
<ul id="name_target1" class="dropdown-content">
<li>one</li>
<li>two</li>
</ul>
Exam2.✔️
<nav> <div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-trigger" href="#!" data-target="name_target2">Dropdown<i enter code here class="material-icons right">arrow_drop_down</i></a></li>
</ul> </div> </nav> <ul id="name_target2" class="dropdown-content"> <li>one</li> <li>two</li> </ul>
When I ran into this issue I was trying to create the whole dropdown list dynamically in JS. The fix for me was creating the list and any default list elements in HTML:
<div id="select1" class=\"input-field col s12\">
<select>
<option value="" selected>Default</option>
</select>
<label>Test</label>
</div>
Then appending any dynamic values in JS:
contents.forEach(function(content) {
var buffer = "<option></option>";
var template = $(buffer);
$(template).text(content);
$("select1").find("select").append(template);
});
$("select").formSelect();
pre 1.0.0 you would use data-activates, if data-target is not specified you will get this error
My problem was, that jQuery object was not attached to the DOM yet, so inner materialise code could not init element due to inability to find element by ID:
// materializecss initing dropdown (in my case for input autocomplete), where `t` is the input element
i.id = M.getIdFromTrigger(t),
i.dropdownEl = document.getElementById(i.id),
i.$dropdownEl = h(i.dropdownEl),
M.getIdFromTrigger(t) returned some random ID (not the one I provided) and dropdownEl was inited with null, and later method _makeDropdownFocusable failed on using it `this.dropdownEl.tabIndex = 0
So my problem code looked like this:
let root = $('#root'); // root in the DOM already
let wrapper = $('<div>'); // wrapper is just created and NOT attached to the DOM yet
let input = $('<input>').appendTo(wrapper); // creating input and attaching to the wrapper, but still not in DOM
initAutocomplete(input) // M.Autocomplete.init logic here FAILS
root.append(wrapper) // too late, error above
So the quick fix is to append elements first and only than do M.Autocomplete.init
I just stumbled this issue too while using Materializecss for my Vue project. As mentioned by sajjad, using id selector instead of class works. However, this is problem for initializing multiple dropdown, since each dropdown must have unique ID.
The way I solve this is just by selecting all the elements with the '.dropdown-trigger' class, and initialize every each of those. It works for me.
$.each($('.dropdown-trigger'), function(index, value) {
$(value).dropdown();
});
I have an html page like this:
...
<div class="container">
<div class="title">Meat</div>
<div class="someclass">
<div class="tile AAA">
<div class="text">AAA</div>
<img class="image" src="somewhat.jpg" />
</div>
</div>
<div class="someclass">
<div class="tile BBB">
<div class="text">BBB</div>
<img class="image" src="somewhat.jpg" />
</div>
</div>
</div>
<div class="container">
<div class="title">Fish</div>
<div class="someclass">
<div class="tile AAA">
<div class="text">AAA</div>
<img class="image" src="somewhat.jpg" />
</div>
</div>
<div class="someclass">
<div class="tile BBB">
<div class="text">BBB</div>
<img class="image" src="somewhat.jpg" />
</div>
</div>
</div>
...
I need to be able to get selenium click an img for a specific element (for example, i want Meat-BBB's img) but I can't find a way to get it by xpath
Any help will be appreciated...
This will click on the Meat-BBB's img:
driver.findElement(By.xpath("//div[.='Meat']/following-sibling::*[2]//img")).click();
It finds the 2nd sibling to the div element having text/innerHtml as "Meat", and then traverses to the first "img" element in it.
This will be the xpath for your Meat-BBB's img /html/body/div[1]/div[3]/div/img
You can find xpath of any element by following steps.
1. Open your HTML file with any browser
2. Press F12 and inspect that element by clicking on that element
3. Now right click in html panel on the element and click on Copy XPath
Done! Now you have XPath.
The xpath will be - yourText
//div[div[text()='yourText']]/descendant::img
To make this Xpath more Generic , we can define a string like
// assign the value under which you want to click image Meat or Fish
String classTitle = "Meat";
and chage the xpath as follows:
//div[.='+classTitle+']/following-sibling::*[2]//img")
.//*[contains(text(), "Apply")]
<input type="hidden" value="false" name="needsValidation"/>
<input type="hidden" value="false" name="fullValidationPerformed"/>
<div class="loadingBox hidden">
<div class="paneContent">
<div class="topButtons">
<div class="rightSide">
<div id="saveChangesButton" class="majorButton">
<div>
<div>
<div>
<span class="hidden"/>
Apply Changes
<span class="down"/>
</div>
</div>
</div>
</div>
</div>
Why is it that the xpath string I created doesn't find "Apply" here? It appears that my xpath statement only fails when the text I want to find is inside a "span" tag inside a "div" tag like this.
Can someone help me understand what I'm missing here please?
The reason that contains(text(), 'Apply') does not work is that the element has several text nodes, and the contains function in XPath 1.0 ignores all but the first. (XPath 2.0 would give you an error if there is more than one).
If you want to get an element whose string value contains 'Apply' without also returning its ancestors, the simplest way is to get the last element containing this string:
(//*[contains(., 'Apply')])[last()]