I am trying to open different section of page. These Section will open on click of different tabs.
Below is HTML Structure of Page
<div id="MainContentPlaceHolder_divMainContent">
<div id="MainContentPlaceHolder_tbCntrViewCase" class="Tab ajax__tab_container ajax__tab_default" style="width: 100%; visibility: visible;">
<div id="MainContentPlaceHolder_tbCntrViewCase_header" class="ajax__tab_header">
<span id="MainContentPlaceHolder_tbCntrViewCase_tbPnlCaseDetails_tab" class="ajax__tab_active">
<span id="MainContentPlaceHolder_tbCntrViewCase_tbPnlVehicle_tab" class="ajax__tab_hover">
<span class="ajax__tab_outer">
<span class="ajax__tab_inner">
<a id="__tab_MainContentPlaceHolder_tbCntrViewCase_tbPnlVehicle" class="ajax__tab_tab" style="text-decoration:none;" href="#">
<span>Vehicle</span>
</a>
</span>
</span>
</span>
and I have Written Below Lines but these are not working
driver.findElement(By.id("__tab_MainContentPlaceHolder_tbCntrViewCase_tbPnlVehicle")).click();
driver.findElement(By.xpath("//a[text()='Vehicle']")).click();
I got Source Not Found Error
As per the OP's comments, I am posting the xpaths that can be used to locate the concerned element :
1- //span[#id='MainContentPlaceHolder_tbCntrViewCase_tbPnlVehicle_tab']//span[.='Vehicle']
This will locate the span element with innerHTML/text as Vehicle which is a descendant of span with id MainContentPlaceHolder_tbCntrViewCase_tbPnlVehicle_tab
OR
2-//span[#id='MainContentPlaceHolder_tbCntrViewCase_tbPnlVehicle_tab']//span[.='Vehicle']/..
This will locate the parent of span element with innerHTML/text as Vehicle which is a descendant of span with id MainContentPlaceHolder_tbCntrViewCase_tbPnlVehicle_tab which in this case is an a element.
Please check if this works for you. Else, let me know how many matching nodes does it show, when you use them. We will sort this one out.
Related
I am new to Selenium WebDriver, using NetBeans Java and Firebug for Firefox to get XPath.
The problem is even though some elements are visible and clickable in the browser, and Firebug finds the XPath expression, I still get an error "Unable to locate element". The problem is, the element is not in a frame (there aren’t any frames), not in another window, it's visible and clickable and it has a clear XPath expression.
I used Wait and Thread.sleep, but it didn't help.
Also, I tried all solutions I could find on Stack Overflow similar to this matter.
The element is inside of the table which has some "div" elements inside. This is the XPath expression:
.//*[#id='NavigationRadPanelBar_i2_i0_trvStandardView']/ul/li[3]/div/span[3]
It seems that the panel is a problem, because it can not locate the panel too. I tried another element inside the same panel which has a title and text with this:
driver.findElement(By.xpath("//*[contains(text(),'Technical Attributes')]")).click();
But still I got same message. Similar for all elements inside this panel and panel itself. It seems whatever I tried, it's unable to locate. Everything outside of this panel is working fine with drivers.
The page has a left panel where these elements are located. Some of them are nodes that can be expanded, and some are just links, but nothing can be located.
What can be the cause of element that is obviously existing and visible, but still cannot be located by WebDriver?
I tried to locate the main panel:
driver.findElement(By.xpath(".//*[#id='NavigationRadPane']")).click();
but still the same exception.
This is part of the HTML content (it's very long):
<div id="RAD_SLIDING_PANE_CONTENT_navigatiionRadSlidingPane" class="rspSlideContent" style="overflow: hidden; width: 200px; height: 579px;">
<div id="NavigationRadPanelBarPanel" style="display: block;">
<div id="NavigationRadPanelBar" class="RadPanelBar RadPanelBar_Office2007" postback="false" style="background-color:GhostWhite;height:100%;width:100%;">
<ul class="rpRootGroup">
<li class="rpItem rpFirst">
<li class="rpItem">
<li class="rpItem rpLast">
<a class="rpLink rpExpandable rpExpanded" href="#">
<div class="rpSlide" style="display:block;">
<ul class="rpGroup rpLevel1 111460" style="display: block; height: 274.731px; width: 100%;">
<li class="rpItem rpFirst rpLast">
<div class="rpTemplate">
<div id="NavigationRadPanelBar_i2_i0_trvStandardView" class="RadTreeView RadTreeView_Office2007">
<ul class="rtUL rtLines">
<li class="rtLI rtFirst">
<li class="rtLI">
<li class="rtLI">
<div class="rtMid">
<span class="rtSp" />
<span class="rtPlus rtPlusHover" />
<img class="rtImg" src="..." alt="Technical Attributes" />
<span class="rtIn" title="Technical Attributes">Technical Attributes</span>
</div>
<ul class="rtUL" style="display:none;">
</li>
<li class="rtLI rtLast">
Use:
driver.switchTo().activeElement();
This way, the driver will switch to the panel you have clicked. Then you can perform the rest of the operations you want in the panel.
Here is the answer to your question:
The error says it all, Unable to locate element, because the XPath expression seems incorrect to me.
If you want to click on the element with title set to Technical Attributes you can consider to try with the following XPath expressions:
//div[#id='NavigationRadPanelBar_i2_i0_trvStandardView']/ul/li/li/li/div/span[#class='rtIn']
or
//div[#id='NavigationRadPanelBar_i2_i0_trvStandardView']/ul/li/li/li/div/span[#title='Technical Attributes']
I have this html code below and I want to differentiate between these two PagePostsSectionPagelet as I only want to find web elements from the first PagePostsSectionPagelet. Is there any way I can do it without using <div id="PagePostsSectionPagelet-183102686112-0" as the value will not always be the same?
<div id="PagePostsSectionPagelet-183102686112-0" data-referrer="PagePostsSectionPagelet-183102686112-0">
<div class="_1k4h _5ay5">
<div class="_5sem">
</div>
</div>
<div id="PagePostsSectionPagelet-183102686112-1" class="" data-referrer="PagePostsSectionPagelet-183102686112-1" style="">
<div class="_1k4h _5ay5">
<div class="_5dro _5drq">
<div class="clearfix">
<span class="_5em9 lfloat _ohe _50f4 _50f7">Earlier in 2015</span>
<div id="u_jsonp_3_4e" class="_6a uiPopover rfloat _ohf">
</div>
</div>
<div id="u_jsonp_3_4j" class="_5sem">
<div id="u_jsonp_3_4g" class="_5t6j">
<div class="_1k4h _5ay5">
<div class="_5sem">
</div>
</div>
Tried using //div[#class='_1k4h _5ay5']//div[#class ='_5sem'] but it will return both.
Using //div[#class='_5dro _5drq']//span[contains(#class,'_5em9 lfloat _ohe _50f4 _50f7') and contains(text(), '')] will help me find the second PagePostsSectionPagelet instead.
you need to use the following xpath:
//div[contains(#class,'_1k4h') and contains(#class,'_5ay5')]
as selenium doesn't work properly with search of several classes in one attribute.
I mean By.Class("_1k4h _5ay5") will found nothing in any case and By.Xpath("//div[#class='_1k4h _5ay5']") can also found nothing in case of class will be "_5ay5 _1k4h" or " _5ay5 _1k4h".(as they possibly generated automatically, its may be have different position on page reload)
But for the best result by performance and by correctness I think will be the following xpath:
".//div[contains(#id, 'PagePostsSectionPagelet')][1]" -- for first div
".//div[contains(#id, 'PagePostsSectionPagelet')][2]" -- for second div
I see that dynamic in the div id is only the number so you can use something like:
WebElement element = driver.FindElements(By.XPath("//div[contains(.,'PagePostsSectionPagelet')])")[1];
This will take only the first web element.
Try using a css selector as below and refine further if required.
The code below returns a List of matching WebElements and then you grab the first one in the List.
List<WebElement> listOfElements = driver.findElements(By.cssSelector("div[data-referrer]"));
WebElement myElement = listOfElements.get(0);
Hint: use the Chrome console to test your css and xpath selectors directly. e.g. use
$$("div[data-referrer]") in the console to reveal what will get selected.
Question is for JAVA + Selenium:
My HTML is:
<section class="d-menu d-outclass-bootstrap unclickable d-apps d-app-list">
<section class="standard-component image-sequence-button" tabindex="0" role="link">
<div class="image-region">
<div class="core-component image">...
</div>
<div class="sequence-region">
<div class="core-component section">
<div>
<section class="standard-component text hide-section-separator-line">
<div class="text-region">
<div class="core-component text">
<span class="main-text">BART Times</span>
<span class="sub-text">Provider</span>
</div>
</div>
</section>
<section class="standard-component speech-bubble hide-section-separator-line">...
<section class="standard-component text">...
</div>
</div>
</div>
<div class="button-region">
<div class="core-component button" tabindex="0" role="link">...
</div>
</section>
<section class="standard-component image-sequence-button" tabindex="0" role="link">...
<section class="standard-component image-sequence-button" tabindex="0" role="link">...
<section class="standard-component image-sequence-button" tabindex="0" role="link">...</section>
EDIT:
All <section class="standard-component image-sequence-button"... have exact same structure and hierarchy (same attributes for all tags). The only thing that changes are the TEXT values of the tags(e.g. span)
PART1:
I'm looking for various elements inside the second section tag. So, What I'm trying to do is get the <span class="main-text"> which has a value BART Times because of the business requirement.
I already know how to get it via xpath:
My xpath (verified via firebug):
"//section//div[#class = 'sequence-region']//section[#class = 'standard-component text hide-section-separator-line']//span[#class = 'main-text' and text() = '%s']"
I can get the span tag via checking for %s values (e.g. BART Times).
However, due to design considerations, we've been told to use CSS only. So, I tried to come up with a CSS counterpart for the above xpath but did not find it.
The following CSS
"section div.sequence-region section.standard-component.text.hide-section-separator-line span[class=main-text]"
returns all the span tags under all the section tags.
Question1: How do I get the span tag which has a certain TEXT value (the %s part of xpath)?
Things I've tried for that last span tag which did not worked(according to the firebug):
span.main-text[text='BART Times']
span[class=main-text][text='BART Times']
span.main-text:contains('BART Times')
span[class=main-text]:contains('BART Times')
span.main-text[text="BART Times"]
span[class=main-text][text="BART Times"]
span.main-text[text=\"BART Times\"]
span[class=main-text][text=\"BART Times\"]
span[text="BART Times"]
span[text=\"BART Times\"]
span:contains('BART Times')
span:contains("BART Times")
span:contains(\"BART Times\")
So, basically I want to put a check on BOTH class and TEXT value of the span tag in CSS selector.
Part 2:
Then I want to get the <section class="standard-component image-sequence-button"... element where I found the <span class="main-text"> and then find other elements inside that specific section tag
Question 2:
Assuming, I found the span tag in question 1 via CSS, how do I get the section tag (which is a super--- parent of the span tag)?
If CSS is not possible, please provide an xpath counterpart for this as a workaround for a while.
CSS selectors can't select based on text. The answers to Is there a CSS selector for elements containing certain text? go into detail on why.
To select based on class and text in xpath: //span[contains(#class, 'main-text') and text() = 'BART Times']
Regarding question 1, it is not possible, as stated in the other answer here. This is another thread about the topic : CSS selector based on element text?
Regarding question 2, once again there is no such parent selector in XPath : Is there a CSS parent selector?. Now for the xpath counterpart, you can use parent axis (parent::*) or shortcut notation for the same (..), or put the span selector as predicate for the parent (the third example below) :
....//span[#class = 'main-text' and text() = '%s']/parent::*
....//span[#class = 'main-text' and text() = '%s']/..
....//*[span[#class = 'main-text' and text() = '%s']]
See the following thread for some better (yet more complicated) alternative to match element by CSS class using XPath, just in case you haven't came across link on this topic : How can I find an element by CSS class with XPath?
When I open a page, there is code that looks like the following:
<div id="policySetup_content">
<div id="bCS_insureds_contentWrap" style="display: none;">
<div id="bCS_policy_contentWrap" style="display: block;">
<div id="bCS_risks_contentWrap" style="display: none;">
<div id="bCS_rating_contentWrap" style="display: none;">
<div id="bCS_billing_contentWrap" style="display: none;">
<div id="bCS_attachments_contentWrap" style="display: none;">
<div id="bCS_submit_contentWrap" style="display: none;">
</div>
How would I go about getting the #id of whichever one is set to (style="display: block;) inside the #id policySetup_content?
The reason for this is so I can know which page I'm on (because it can be any one of them for various reasons). I need to know the page in order to know which Wrap id to use when working with elements.
Judging by this previou SO question you should be able to use the CSS Selector (div[style*="display:block"]), something along the lines of the below (untested).
String id = driver.findElement(By.cssSelector("div[style*=\"display:block\"]").getAttribute("id");
Because Selenium will not interact with elements that are not visible, you should be able to pull all the DIVs under the parent DIV and only get the one that is not hidden. I've never tried this approach before but I think it will work...
String id = driver.findElement(By.cssSelector("#policySetup_content > div[id]")).getAttribute("id");
BTW, if you aren't familiar with CSS Selectors this reads find an element with ID (#) policySetup_content that has an immediate child (>) DIV that has an ID. This may need to be tweaked depending on the real HTML that you are dealing with. If it doesn't work, let me know and I can try to help tweak it.
CSS Selector reference
I have html like so:
<div id="myId">
<a href="#">
<div class="name">Item1</div>
<span class="location">32143|2323</span>
</a>
<a href="#">
<div class="name">Item1</div>
<span class="location">32143|2323</span>
</a>
<a href="#">
<div class="name">Item1</div>
<span class="location">32143|2323</span>
</a>
</html>
Using HtmlUnit for Java, I need to grab the name and location of each anchor. I tried doing a getByXPath to pickup all the anchors, then looping through them with a for and running another getByXpath to get the name in the div. However the individual items in the list are apparently Objects, so I am unable to run a second getByXPath.
I also tried running the first getByXPath using "/a/div[#class='name']" to which I loop through the results which are Objects and I cannot find the proper method for returning the contents of the divs.
If your xpath select element, you can cast the list to the desired type:
List<HtmlElement> divs = (List<HtmlElement>)document.getByXPath("//a/div[#class='name']");