Selenium locator for span loaded with AJAX - css-selectors

I'm new to Selenium IDE and can't find exact answer to my question elsewhere.
I have Login form that loads error message in span tag using AJAX.
Code looks like this:
<dd class="field-error-template atk-form-error">
<i class="ui-icon ui-icon-alert"></i>
<span class="field-error-text">Incorrect login information</span>
</dd>
I used following Selenium code to verify that this span appeared on screen:
waitForElementPresent css=dd.field-error-text span
However it returns false so any other ideas? I don't want to put delay as I don't think it is good practice.
Thanks,
Gita

You got your classes mixed up; the selector should either be this
dd.field-error-template span
Or this
dd span.field-error-text
(or use both classes)

Related

JAWS + IE11 + aria live not working when

we are adding ARIA support to our SPA website.
In application we have one activity area where we are showing dynamic messages from server based on validations.
We have added role='alert' and aria-live='assertive' to read those activity messages.
In FF and chrome its working fine however in IE its reading code like "left-brace left-brace txtErrorMessage right-brace right-brace" even if message there on screen
<div role="alert" aria-live="assertive">
<p class="scan-complete-text-auto">
{{model.txtErrorMessage}}
</p>
</div>
here txtErrorMessage will get populated runtime from api results.
we are using angular JS.
How to resolve this issue?
Try using ng-bind="model.txtErrorMessage" instead of {{model.txtErrorMessage}}
Try using ng-show or ng-hide, to hide the div until you have the message ready. The message length can be checked to show or hide the div itself. This will fix the issue.
Also no need for both role="alert" and aria-live="assertive". You can remove role="alert". JAWS + IE tend to read more than once for this combination.
Angular provides CDK APIs built in to handle this scenario.
https://material.angular.io/cdk/a11y/overview#example-1
#Component({...})
export class MyComponent {
constructor(liveAnnouncer: LiveAnnouncer) {
liveAnnouncer.announce("Hey Google");
}
}
Or else you can keep a simple span or div, and update your message programmatically.
<span
aria-live="polite"
class="ada-visuallyhidden"
[innerHTML]="yourCustomADAMessage"
></span>

Unable to click on a link

I have been trying to click on a link in my application at work , but the control failed to click on the link whichever locator I used. I test all the locators with Selenium IDE and javascript before using them in the script and it all seem fine prior to running the test. I manage to identify and click on the link with this:
#FindBy(css ="/html/body/div[4]/div/div/div[2]/div[1]/a/strong") but I ran the test the second time but it failed to click on the link same.
See below the html code:
<div class="container container-outer">
<div class="row-fluid long-text-fitted content-container" id="page-content-container">
<div class="span12">
<div class="row-fluid container-alert">
</div>
<div class="left-side-spacer-layout right-side-spacer-layout" id="page-content">
<div class="button-spacer" id="breadcrumb-content">
<a href="/shopping/marketplace/landingPage">
<strong>< Back to Search Results</strong>
</a>
You should click on parameter. remove strong attribute.
/#FindBy(css ="/html/body/div[4]/div/div/div[2]/div[1]/a")
I would avoid using XPath in general and especially an XPath that starts at the HTML tag. That makes the test very fragile. I would suggest a CSS selector like the below.
driver.findElement(By.cssSelector("#breadcrumb-content > a")).click();
The CSS selector reads find an A tag that is a child (>) of an element with an ID (#) of breadcrumb-content.
Read more about CSS Selectors.
Using absolute Xpath is not a good idea. As you said it is working for the first time then possible your DOM strcture is changing after click it once
You can try with below xpath:
driver.findElement(By.xpath("//strong[contains(.,'< Back to Search Results')]")).click();
If still not working, you should try to click using JavascriptExecutor as it directly working on HTML DOM. Feel free to locate element in below code according to your convenience:
WebElement element=driver.findElement(By.xpath("//strong[contains(.,'< Back to Search Results')]"));
JavascriptExecutor executor = (JavascriptExecutor) driver;
executor.executeScript("arguments[0].click();", element);

Selenium Fluent WebDriver - Click does not work as expected

I have a pagination list, that is essentially constructed like so (I am using AngularJS):
<span id="latestResultsIndicator">
<ul>
<li ng-click="Item.action()"><span>1</span></li>
<li ng-click="Item.action()"><span>2</span></li>
</ul>
</span>
This works great in HTML, but when I try to write an integration test using Selenium WebDriver and the Fluent API I run into problems.
Specifically I want to click on the second li, to do this I am using the following code
I.Assert.Exists("#latestResultsIndicator");
var secondPageElement = I.Find("#latestResultsIndicator ul li:nth-child(2)");
I.Click(secondPageElement);
This doesn't actually work! If I use jQuery in the Chrome console to do $("#latestResultsIndicator ul li:nth-child(2)").trigger("click") then the second page is selected, so I know the selector is correct.
To test further I added a double click like so:
I.DoubleClick(secondPageElement);
What I noticed here is that the very first li gets selected. Its as if its trying to click or select the wrong one! (See the image).
What is happening?
I know Webdriver has some issues with css pseudo-selectors such as nth-child. You might be able to make it work with Xpath, which is just as fast and just as flexible.
var webDriver = (IWebDriver)I.Provider;
webDriver.FindElement(By.XPath("//*[#id='latestResultsIndicator']//ul//li[2]")).Click();
Not sure if it will work or not, as I have not used FluentAutomation.
The CSS selector as it is written in your question is not correct
"#latestResultsIndicator ul li:nth-child(2)"
The UL has the id you're looking for, so it should be
"ul#latestResultsIndicator li:nth-child(2)"
Not sure whether that is going to solve your problem, but it's a place to start. If not, please update with the results

Using Element's tool tip as Locator in Selenium Webdriver

Can we use button's tool tip as a locator in selenium WebDriver? I came across this question because none of the default locators provided in selenium webdriver are useful for my applications elements.
Elements in the application i am testing randomly changes its,
Id,
Xpath-pos,
Xpath-relative Id, and
CSS
everytime the page is Refreshed! This happens because the application is created in ExtJs and HTML 5.
Yes, you can. But please show your HTML code. There are no general answers.
For example, this ExtJS demo here. http://try.sencha.com/extjs/4.1.1/demos/Ext.Button.tooltip.1/
<button id="button-1009-btnEl" type="button" class="x-btn-center" hidefocus="true" role="button" autocomplete="off" data-qtip="I'm a custom tooltip" style="height: 16px;">
<span id="button-1009-btnInnerEl" class="x-btn-inner" style="">Button w/ QuickTip (qtip) tooltip</span>
<span id="button-1009-btnIconEl" class="x-btn-icon "></span>
</button>
The tooltip is coded as data-qtip attribute. So you can use CSS Selector or XPath to find it.
XPath: //button[#data-qtip=\"I'm a custom tooltip\"]
CSS: button[data-qtip=\"I'm a custom tooltip\"]
Good question !
I would like to discuss it with some more experts but as far as my knowledge goes i dont think u can use tool tips as locators in webdriver!
Try this flow, may help you
don't bother if your script fails in IDE
Export it in webdriver/java/Junit
Try running the webdriver script now.
If the tooltip is in the HTML (which it must be), then you'll be able to use an XPath selector to find your element. Post a snippet of the HTML with the element you're trying to locate for more help

CSS selector is not finding element in selenium grid

I am trying to find Submit element. My HTML structure is as below.
<div>
<span class="combutton">Submit</span>
</div>
<div>
<span class="combutton">Cancel</span>
</div>
In browser using firebug I tried
$('div .combutton')[0].click()
which clicks on submit perfectly. But using selenium driver this element is not found. Please tell me how to do this using
driver.findElement(By.css("CSSSELECTORSTRING"))
What you did in Firebug shouldn't have any effect since it's clicking on a span and not the a inside it.
This should work, unless you omitted certain parts of your markup that would otherwise prevent it:
driver.findElement(By.cssSelector("div:first-child .combutton a")).click();
try that :
driver.findElement(By.xpath("//div span.combutton a[contains(.,'Submit')]")).click();
or
driver.findElement(By.xpath("//div span.combutton[0] a")).click();

Resources