Consider this xpath which should always return one element.
//div[#id='MyDiv123']/div[contains(#class, 'super')]
Assume that we won't add anymore divs whose class is super. Given that info, I don't think that it is a good idea to use /div[contains(#class, 'super')]because the xpath will break if div[contains(#class, 'super')] is placed inside another element.
Shouldn't we be using //div[contains(#class, 'super')] instead ?
I don't like using XPaths for locators that can be written as a CSS selector. I think it's much simpler as
#MyDiv123 > div.super
or just
div.super
if it's unique on the page.
XPath contains() is a string match. All the elements below will match your XPath locator but none of them will match the CSS selectors above.
<div class="super-duper" ...>
<div class="superior" ...>
<div class="abcsuperdef" ...>
... you get the idea...
There is no defined Best Practices while writing xpaths. It all boils down to how effective xpath can be written.
I don't see any issue with the xpath as :
//div[#id='MyDiv123']/div[contains(#class, 'super')]
Of-coarse there ca be some improvements as follows :
As an enduser you won't be sure how the class attribute super impacts the HTML or which elements have this attribute. So in that case to identify the WebElement uniquely it would be wise to include the ancestor <div> tag with id as MyDiv123.
But it doesn't looks like the classname super can be dynamic. Hence you can avoid the keyword contains within the xpath and rewrite it as :
//div[#id='MyDiv123']/div[#class='super']
Related
Quick one, i am trying to avoid using xpath and using css selectors due to performance issues xpath can have so i would like to know the right approach of locating for example "A" in the list
<div class="input-search-suggests" xpath="1">
<div class="input-search-suggests-item">A</div>
<div class="input-search-suggests-item">B</div>
<div class="input-search-suggests-item">C</div>
</div>
Currently i am locating A using xpath / span but it would be indeed sufficient locating all elements and then grabbing A from the list that have same class which is "input-search-suggests-item"
#FindBy(xpath = "//span[contains(text(),'A')]")
CSS_SELECTOR does not have support for direct text what xpath has.
What this means is, for the below xpath
xpath = "//span[contains(text(),'A')]"
based on text A you can not write a css selector.
Instead to locate A using css selector, you can do :
div.input-search-suggests > div.input-search-suggests-item
In Selenium something like this :
#FindBy(cssSelector= "div.input-search-suggests > div.input-search-suggests-item")
Even though it will have 3 matching nodes, but findElement will take the first web element.
Also you may wanna look at nth-child(n)
div.input-search-suggests > nth-child(1)
to make use of index to locate A, B, C
Here is the Reference Link
I was looking for an answer to how to find an element that has a class and contains text.
I've got two answers.
//div[#class='credit_summary_item' and contains(text(),'Professor']:
as in HTML XPath Searching by class and text
//div[contains(#class, 'credit_summary_item') and contains(., 'Professor')]:
as in XPath to match #class value and element value?
For me, only 2nd answer worked.
Can anyone pls explain the difference for 'contains text' part.? As both answers don't mention it.
For a demonstration consider the following HTML:
<div class="credit_summary_item">Professor</div>
There is:
Only one value of the class attribute i.e. credit_summary_item.
And the innerText i.e. Professor contains no leading and trailing spaces.
So, to locate this element you can use either of the following solutions:
Using text():
//div[#class='credit_summary_item' and text()='Professor']
Using contains():
//div[#class='credit_summary_item' and contains(., 'Professor')]
This usecase
But in your usecase it seems contains(#class, 'credit_summary_item') worked which implies the element have multiple classes. So apart from credit_summary_item there are some other values present as class attributes.
In my case the html looked like this :
<ki5-tab text="Super Boal" ki5-tab="" slot="default-1" selected="true"></ki5-tab>
xpath :
//ki5-tabcontainer/ki5-tab[contains(#text,'Boal')]
I am wondering if below is achievable using xpath
Given:
<label for="pt1:sc">Select Country</label>
<select id="pt1:sc">....</select>
Requirement:
I want to find select element using single xpath expression like below,
bcs ids are dynamic and always available in attribute 'for'.
//label[text()='Select Country']/#for//*[#id=#for]
Can we pass attribute value(here for attribute of label) in xpath, further down the path to find element.
Please do not suggest alternative using siblings, child, id or selenium get-attribute etc.
Thanks,
You can use something like this to select an element with an attribute value which refers to another attribute located in another element :
//*[#id=//label[text()='Select Country']/#for]
I'm not sure how it's going to work with your actual html, but it works on the example in the question:
//label[text()='Select Country'][#for=//select/#id]
In a selenium script Sorting a dropdown using
new Select(driver.findElement(By.cssSelector("select[title=\"Sort By\"]"))).selectByVisibleText("Name");
Can anybody please explain me this part cssSelector("select[title=\"Sort By\"]" of above statement.
Thanks!
cssSelector("select[title=\"Sort By\"]")
this is one of the technique to locate web element/elements.
You must have heard about xpath, which is one of the way to locate element/elements in a web page.
Further more , select is tag in HTML. title is attribute and Sort By is value of attribute.
Just like this :
HTML :
<select id="sel" class="drop-down" title="Sort By">
<options>..</options>
<options>..</options>
<options>..</options>
</select>
Now If you have to write cssSelector , you can write like this :
tagname[attribute="attribute value"]
select[id="sel"]
or
select[class="drop-dwon"]
or
select[title="Sort By"]
Hope this will be helpful !
new Select(driver.findElement(By.cssSelector("select[title=\"Sort By\"]"))).selectByVisibleText("Name");
You are selecting by CSS selector https://www.w3schools.com/cssref/css_selectors.asp. The alternative is XPath which is more powerful but harder to learn.
What this part By.cssSelector("select[title=\"Sort By\"]") does is select all select elements that have title attributes set equal to "Sort By". Although by prefixing driver.findElement( you are requesting just one element, the first. At least you would be if it was python, Java might differ but was not in your question nor tags.
I have this code for xpath and html:
<a class="WatchButton inicon" rel="nofollow" data-productid="111124">
xpath=/html/body/div[2]/div[2]/div/div[2]/div[1]/div[1]/div[2]/div[8]/a
How can I get the data-productid value?
Just add #data-productid to the xpath expression:
/html/body/div[2]/div[2]/div/div[2]/div[1]/div[1]/div[2]/div[8]/a/#data-productid
Note that the xpath expression you have is very fragile since it depends on a bunch of elements and their relevant positions. Try to rely on the element's attributes or one of it's containers - look for id and class attributes. For example:
//a[contains(#class, "WatchButton")]/#data-productid
This gets the first link anywhere on a page that contains WatchButton class and retrieves it's data-productid attribute value.
* Sharing the link to the web page or showing the complete HTML could help to provide you with a more reliable xpath expression.