how to locate element with selenium webdriver for below html - selenium

I have an issue clicking on the below HTML:
<div id="P7d2205a39cb24114b60b80b3c14cc45b_1_26iT0C0x0" style="word-wrap:break-word;white-space:pre-wrap;font-weight:500;" class="Ab73b430b430a49ebb0a0e8a49c8d71af3"><a tabindex="1" style="cursor:pointer;" onclick="var rp=$get('ctl00_ContentPlaceHolder1_ReportViewer1_ctl10_ReportControl');if(rp&&rp.control)rp.control.InvokeReportAction('Toggle','26iT0C0x0');return false;" onkeypress="if(event.keyCode == 13 || event.which == 13){var rp=$get('ctl00_ContentPlaceHolder1_ReportViewer1_ctl10_ReportControl');if(rp&&rp.control)rp.control.InvokeReportAction('Toggle','26iT0C0x0');}return false;"><img border="0" src="/Reserved.ReportViewerWebControl.axd?OpType=Resource&Version=10.0.30319.1&Name=Microsoft.ReportingServices.Rendering.HtmlRenderer.RendererResources.TogglePlus.gif" alt="+"></a> 2013</div>
I have used the below script to click anchor inside a div tag. For the above html code it is not fixed only end part of id example "26iT0C0x0" is fixed. The script that I have used is:
WebElement e1=wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//div[ends-with(#id,'26iT0C0x0')]/a")));
e1.click();

You can use the 'contains' method within an xpath lookup:
driver.findElement(By.xpath("//div[contains(#id,'26iT0C0x0')]")

I would recommend you to consider CSS selector alternative as CSS working faster, than xpath.
So 'contains' in attribute in CSS stands for '*=', for example
if we want to find attribute by 'CSS' ending in this: <htmlTag A="blablaCSS" > we need do the following:
String CSSselector="htmlTag[A*=CSS]";
and you get this element searched.
So considering your example CSS selector be like:
String cssSearched="div[id*=26iT0C0x0] a";
also try to click not on link - a
but on parent div as well:
String cssSearched="div[id*=26iT0C0x0]";
driver.findElement(By.cssSelector(cssSearched));
hope this works for you.

As Mark Rwolands already mentioned: the xpath-Function 'ends-with()' isn't supported in Selenium 2.
Also, if you maybe consider to use chromeDriver in the future, I would recommend clicking the image, not the anchor, see:
https://sites.google.com/a/chromium.org/chromedriver/help/clicking-issues
edit:
Also your IDs are looking generated. I wouldn't count on them for a stable test-environment.

Related

Choose the correct element from the list of objects with the same className

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

Find xpath of element knowing a part of href attribute only selenium ide ui vision katalon recorder

I need to detect via xpath an element (image with href) but i know a part of href only
This is the html
<img src="//user/banners/16/08/1614708.gif" alt="AAA" data-tip="BBB" currentitem="false" class="" width="468" height="60">
I know the id 123456 (part of href)
I tried this xpath that recognize element with a part of href but working in text link only
xpath=//a[contains(#href, "123456")]
How can i detect the element using a part of href only ?
I need xpath only please.
You need get /img in //a where href attribute contains() or ends-with() your id
This is XPATH that you need. At least i would use this XPATH in this situation
//a[ends-with(#href, 'your-id-here')]/img
You can use regular expresions. Something like
driver.find_element_by_xpath("//input[starts-with (#name,'Tut')]")
or as you described
driver.find_element_by_xpath("//input[contains(#name,'sel')]").
Be awere of one thing, do not use double quotes, for the string you are searching as atribute value. Use a single quote like I previously described.

Unable to locate the login box by type attribute or xpath

HTML looks like following
<input class="text-input text-input-md" dir="auto" ng-reflect-klass="text-input" ng-reflect-ng-class="text-input-md" type="email" aria-labelledby="lbl-14" autocomplete="off" autocorrect="off" placeholder="" ng-reflect-type="email">
the code fails to find login box...tried by attribute
var email_xpath = "//*[type='email']"
then xpath
var email_xpath = "/html/body/ion-app/ng-component/ion-split-pane/ion-nav/page-login/ion-content/div[2]/ion-list/ion-item[1]/div[1]/div/ion-input/input"
var email = webDriver.findElement(By.xpath(email_xpath))
but still unable to get the element....
===============Updated===============
most of the solutions posted below works with selenium firefox driver. The issue was really with htmlunit driver that i was using in scala. Probably it cannot handle javascript properly. I changed it with firefox driver and your solutions works well. The application being tested is an Ionic app (angular), hence i will have to look for another headless solution later.
//*[type='email'] is not correct XPath. Try below instead:
//*[#type='email']
Note that type='email' predicate means child node with string value 'email':
<input>
<type>email</type>
</input>
While #type='email' means attribute type with value "email"
The previous answer is correct but You can try this also //input[#type='email']
The generic syntax is something like as mentioned below for xpath
// - means relative xpath, can be present anywhere inside DOM
tagName - means html tags like td,tr,span,br,input etc
#- denotes start of attribute name present inside html tag
value - actual attribute value present inside DOM
//tagName[#attribute='value']
You can use any XPath, as some are already mentioned by #Andersson and #zsbappa
some others are
//input[#class='text-input text-input-md' and #type='email']
//input[contains(#type,'email')]
Since you are using WATIR, you don't have to write xpath, write the below code, it would work.
b.text_field(type: "email").set "abc#gmail.com"

How to create an XPath for this, suitable for Selenium?

Please help me to create the Xpath for the following. I am using Selenium webdriver and have only IE browser. Following is the HTML:
<A
title=""
href="javascript:Plg({u:'/epace/starintfc.html?module=RUN_EVENT',p:0,nw:'0'});"
p="eagle/pace/pace"
la=""
ml="%09NULL%09PLUGIN%09%2fepace%2fstarintfc.html%3fmodule%3dRUN_EVENT%09%09%09%09%09%09%09%09%09%09"
t="Plugin" gh="" g="Data Steward"
pc="Eagle/PACE/PACE Components"
ivname=""
><IMG id=Item.Img
class=link
src="/tpe/modules/site/img/menu_plugin.gif">Run An Event</A>
As I prefer CSS over xPath because of it's simplicity, I will provide both the CSS and xPath solution:
Remember that you want to get the attribute of the elements that have the most specificity. The answers below are the best of my ability, to determine which have the most specificity. (see here if you want to learn more about CSS and specificity of elements)
If you are trying to select the first <a> element...
CSS:
a[href*='RUN_EVENT']
xPath:
//a[contains(#href, 'RUN_EVENT')]
If you are trying to select the <img> that is inside of the <a> tag...
CSS:
a[href*='RUN_EVENT'] > img
xPath:
//a[contains(#href, 'RUN_EVENT')]/img
My guess is that you want the first one since it's a link, and I assume you want to invoke a click on it.

CSS locator for corresponding xpath for selenium

The some part of the html of the webpage which I'm testing looks like this
<div id="twoWideCallouts">
<div class="callout">
<a target="_blank" href="http://facebook.com">Facebook</a>
</div>
<div class="callout last">
<a target="_blank" href="http://youtube.com">Youtube</a>
</div>
I've to check using selenium that when I click on text, the URL opened is the same that is given in href and not error page.
Using Xpath I've written the following command
//i is iterator
selenium.getAttribute("//div[contains(#class, 'callout')]["+i+"]/a/#href")
However, this is very slow and for some of the links doesn't work. By reading many answers and comments on this site I've come to know that CSS loactors are faster and cleaner to maintain so I wrote it again as
css = div:contains(callout)
Firstly, I'm not able to reach to the anchor tag.
Secondly, This page can have any number of div where id = callout. Using xpathcount i can get the count of this, and I'll be iterating on that count and performing the href check. How can something similar be done using CSS locator?
Any help would be appreciated.
EDIT
I can click on the link using the locator css=div.callout a, but when I try to read the href value using String str = "css=div.callout a[href]";
selenium.getAttribute(str);. I get the Error - element not found. Console description is given below.
19:12:33.968 INFO - Command request: getAttribute[css=div.callout a[href], ] on session
19:12:33.993 INFO - Got result: ERROR: Element css=div.callout a[href not found on session
I tried to get the href attribute using xpath like this
"xpath=(//div[contains(#class, 'callout')])["+1+"]/a/#href" and it worked fine.
Please tell me what should be the corresponding CSS locator for this.
It should be -
css = div:contains(callout)
Did you notice ":" instead of "." you used?
For CSSCount this might help -
http://www.eviltester.com/index.php/2010/03/13/a-simple-getcsscount-helper-method-for-use-with-selenium-rc/
#
On a different note, did you see proposal of new selenium site on area 51 - http://area51.stackexchange.com/proposals/4693/selenium.
#
To read the sttribute I used css=div.callout a#href and it worked. The problem was with use of square brackets around attribute name.
For the first part of your question, anchor your identifier on the hyperlink:
css=a[href=http://youtube.com]
For achieving a count of elements in the DOM, based on CSS selectors, here's an excellent article.