I am trying to locate UI lement using selenium , but Xpath is dynamically changing evrytime
Here is the source
<div id="tab-1080" class="x-tab x-box-item x-tab-default x-top x-tab-top x-tab-default- top x-noicon x-tab-noicon x-tab-default-noicon x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active" style="margin: 0px; left: 406px; top: 0px;">
<em id="tab-1080-btnWrap" class="">
<button id="tab-1080-btnEl" class="x-tab-center" autocomplete="off" role="button" hidefocus="true" type="button">
<span id="tab-1080-btnInnerEl" class="x-tab-inner" style="">Report Center</span>
<span id="tab-1080-btnIconEl" class="x-tab-icon x-hide-display"> </span>
</button>
</em>
</div>
I need to locate this uniquely but the id 1080 keeps changing evreytime ? Can anyone help how to locate with span id "Report Center" as that's the only attribute to differentiate this button in my webpage.
You can use
//span[text()='Report Center']
Personally I would use css: they're faster than xpath and generally accepted as superior by the community, I also think they're easier to use as well provided you do some research.
http://sauceio.com/index.php/2010/01/selenium-totw-css-selectors-in-selenium-demystified/
span.x-tab-inner ==> finds the element by its class
span[id*=btnInnerEl]` ==> finds element by a partial piece (substring) of the id
There are multiple ways; I can suggest these ones (come into my mind at the time):
"//span[contains(text(), 'Report Center')]"
"//span[contains(#id, 'btnInnerEl')]"
"//span[contains(text(), 'Report Center') and contains(#id, 'btnInnerEl')]"
Related
Can someone give a better xpath of this div element, or help explain why I cannot seem to select the desired div?
This XPath does not work:
//div[starts-with(normalize-space(.),'Welcome to the Shipt Shopper') and #class='text']
Even though it gets highlighted in chrome developer tool, NoSuchElementException is thrown.
This is the case with all elements on the page
A snippet of the HTML from the page with the content that I am trying to target:
<div class="content-wrapper">
<div class="content" style="padding-top: 116px;">
<div class="media">
<div class="attachment" data-attachment="{"image":"https:\/\/images.typeform.com\/images\/29rsVwT3VF\/image\/default#.png","width":360,"height":137,"video_source":"","video_id":""}" style="width: 360px; height: 137px;">
<img src="https://images.typeform.com/images/29rsVwT3VF/image/default#.png" data-original="https://images.typeform.com/images/29rsVwT3VF/image/default#.png" style="width: 360px; height: 137px; display: inline;">
</div>
</div>
<div class="text" style="padding-top: 30px; margin-left: 0px;">
Welcome to the Shipt Shopper application! <br><br>Ready to get started?
</div>
<div class="button-wrapper" style="margin-top: 30px;">
<div class="button general full enabled hover-effect" style="">Begin</div>
<div class="button-text">press <strong>ENTER</strong></div>
</div>
</div>
</div>
The content that you are targeting is inside of an <iframe>.
I'm not familiar with how to configure Selenium, but it looks as if you may need to switch to that frame. Since it does not have an #id you may need to select by position:
driver.switchTo().frame(0)
and then execute the XPath.
When you are done, jump back to the containing HTML page:
driver.switchTo().defaultContent();
As per the HTML you have shared the xpath which you have used is a valid one and is correct. But NoSuchElementException will be thrown when you will try to interact with it through Selenium.
To interact with the element through Selenium you can use the following xpath :
//div[#class='content-wrapper']/div[#class='content']//div[#class='text' and contains(normalize-space(), 'Welcome to the Shipt Shopper application')]
But looking at the HTML it seems your have to induce WebDriverWait for the element to be visible as follows :
WebElement welcomeShiptShopper = new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[#class='content-wrapper']/div[#class='content']//div[#class='text' and contains(normalize-space(), 'Welcome to the Shipt Shopper application')]")));
The webpage doesn't opens at my end. As other's have indicated, the WebElement might be within <iframe> tag, in that case you have to switch to the appropiate iframe first using either of the following methods first :
Switch through Frame Name
driver.switchTo().frame("frame_name");
Switch through Frame ID
driver.switchTo().frame("frame_id");
Switch through Frame Index
driver.switchTo().frame(1);
Once you switch to the appropiate frame, now you can lookout for the WebElement with the suggested xpaths mentioned above.
In this application, there is an option to activate or deactivate a channel.
When this channel is activated, span containing tool tip to deactivate is activated like shown below.
Similarly, When this channel is de-activated, span containing tool tip to activate is activated like shown below.
If I can figure out the xpath to active span I would be able to verify this element. BUt having hard time to find the xpath to active span.
</span>
<span id="stat965">
<span class="btn btn-small deactivateBtn btn-warning" href="javascript:void(0);" data-toggle="tooltip" onclick="status('ZVJxWHlYYUhMaWxZM2xqT1A2YTdydz09' ,'false','TWITTER',965);" title="" data-original-title="Deactivate">
<i class="fa fa-times"></i>
</span>
<span class="btn btn-small activateBtn btn-primary" data-toggle="tooltip" style="display: none;" href="javascript:void(0);" onclick="status('ZVJxWHlYYUhMaWxZM2xqT1A2YTdydz09' ,'true','TWITTER',965);" title="" border="0" data-original-title="Activate"> <i class="fa fa-check"></i>
</span>
</span>
Use isDisplayed method on following web elements which tell whether that element is visible on the web page or not.
try for Deactivate span tag with following XPATH:
//span[#style="display: inline-block;" and #data-original-title="Deactivate"]
returns WebElement only if Deactivate span tag is active otherwise null, so you can check for Activate span tag.
for Activate span tag with following XPATH:
//span[#style="display: inline-block;" and #data-original-title="Activate"]
Please try the below CSS for to identify Activate :
span.activateBtn
Please try the below CSS for to identify De-Activate :
span.deactivateBtn
According to you, only one element (span) should be active. Right? If yes, you can use enabled method. Enabled method will return true if element is enabled. As per your need, you can process the return value. Example:
if(driver.findelement(By.xpath("//span[#data-original-title="Deactivate"]).enabled)
{
// do your actions
}
And check the same for activate element and continue your steps as per your need.
if you want to find the deactive span, use the below cssSelector:
span[class*="deactivateBtn"]
for choosing deactivate span, use the below cssSelector:
span[class*="activateBtn"]
hope this helps and let me know what is the result.
I am using selenium FirefoxDriver to automate a test case (I am new at this)
I need a way to locate a Button (which I think is implemented as a div/span)
This xpath locator works when I try that in Selenium IDE //span[contains(text(), 'Login')]
Also I can use this CSS locator using the span tag and the classname css=span.x-btn-button
What I need is a way to use CSS locator with tag + class name + inner html text. (This will help me in handelling some of the other UI element in my application)
HTML is as below
<div id="toolbar-1035" class="x-toolbar x-docked x-toolbar-footer x-docked-bottom x-toolbar-docked-bottom x-toolbar-footer-docked-bottom x-box-layout-ct" style="right: auto; left: 0px; top: 141px; width: 223px;">
<div role="presentation" class="x-box-inner " id="toolbar-1035-innerCt" style="width: 217px; height: 22px;">
<div role="presentation" class="x-box-target" id="toolbar-1035-targetEl" style="width: 217px;">
<a id="button-1036" unselectable="on" hidefocus="on" class="x-btn x-unselectable x-box-item x-toolbar-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon" style="right: auto; top: 0px; margin: 0px; left: 0px; width: 75px;" tabindex="0">
<span unselectable="on" class="x-btn-wrap" role="presentation" id="button-1036-btnWrap">
<span role="presentation" class="x-btn-button" id="button-1036-btnEl" style="background-color: transparent;">
<span unselectable="on" class="x-btn-inner x-btn-inner-center" id="button-1036-btnInnerEl" style="background-color: transparent;">Login</span>
<span style="" unselectable="on" class="x-btn-icon-el " id="button-1036-btnIconEl" role="presentation"></span>
</span>
</span>
</a>
</div>
</div>
</div>
This post has some real good methods to use xpath/css for element identification!
Is it possible to get next sibling using cssContainingText in Protractor
Function cssContainingText is however specific to Protractor.
#Css
findElement(By.cssSelector("span.x-btn-button:contains('Login'));
Keep in mind that this pseudo-class in CSS is not supported by every browser, specifically this is not supported in PhantomJS (There may be other browsers this does not work in, but that is the one I remember).
From Here, about 75% of the way down the page.
Edit:
After looking at this a little more, it seems the pseudo-selector of ":contains('')" is no longer within the CSS3 spec. Reference
If your web application uses JQuery, you can retrieve the element that way with a similar selector, otherwise, you will have to load JQuery into the page and then use it, but that really wouldn't be using CSS, but rather javascript selector functions within JQuery that use CSS syntax.
Conclusion:
Currently, what you are asking is (officially) not supported by CSS.
I am having below mentioned code in which i want to click on a <input> type.
<div class="gwt-TabBarItem" tabindex="0" role="tab">
<div class="gwt-TabBarItem" tabindex="0" role="tab">
<input type="text" tabindex="-1" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
<div class="gwt-Label" style="white-space: nowrap;">Explore by Research Topic </div>
</div>
I want to click on <input type="text" ....>
I have tried all possible things like Click, WebElement Click, Java Script Click,sendkeys etc.
But it is not working for me.
Do anyone have any solution for this.
Thanks in Advance
If you're using the Selenium IDE, then use click command, with target as "css=input[type=text]". Should work. Selenium allows use of CSS selectors for locating elements. Examples of possible CSS selectors you can use are given here:
http://www.w3schools.com/cssref/css_selectors.asp
Hope this helps.
Try with the following Xpath:
//div[contains(text(), 'Explore by Research Topic')]//preceding-sibling::input
It worked for me.
Regarding code you provided the input field is hidden so you can't click it.
If this is not a temporary state and you still need to interact with it, try to change element opacity to displayed first - via JavaScript / jQuery.
How click button in webdriver without any id, values. Class of button is changing dynamically.
Sample:
<div class="d-k-l d-y-r-c g-h-f-Ck b-Qb" role="button" style="-moz-user-select: none;" tabindex="0" aria-haspopup="true">
<div class="d-k-l d-y-r-c-ha">
Мои круги
</div>
<div class="d-k-l d-y-r-c-Qa"></div>
</div>
Thx.
Show more HTML please. So that we can find something useful in the context.
Currently the only possible way is to use XPath' text()
.//*[#role='button']/*[contains(text(), 'Мои круги')]
If you are sure relevant elements are div, you can use
.//div[#role='button']/div[contains(text(), 'Мои круги')]