Unable to click on a link - selenium-webdriver

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);

Related

Issue selecting CSS Selector for Google Tag Manager

I am new to GTM and am creating a trigger on a site for my company. I have tried all the ways I know how and looked at Simo Ahava's blog and cannot get my trigger to fire. I am making a trigger that fires on element click and wants to have the Click Element match the CSS selector but cannot get it to work properly.
This is what I see when I inspect the component on the page:
<div _ngcontent-my-app-c1="" class="page-complementary jss-page-complementary" id="jss-page-complementary" name="jss-page-complementary" sc-placeholder="">
<!---->
<!---->
<app-tab-stories _nghost-my-app-c26="" _ngcontent-my-app-c1="" class="ng-star-inserted">
<!---->
<div _ngcontent-my-app-c26="" id="our-stories" class="tab-stories tab-stories--option-three">
<div _ngcontent-my-app-c26="" class="tab-stories__inner">
<div _ngcontent-my-app-c26="" class="tab-stories__header">
<h2 _ngcontent-my-app-c26="" class="tab-stories__heading">Our Stories</h2></div><div _ngcontent-my-app-c26="" class="tab-stories__wrapper">
<mat-tab-group _ngcontent-my-app-c26="" class="tab-stories__tabs mat-tab-group mat-primary ng-animate-disabled mat-tab-group-dynamic-height" disableripple="" dynamicheight="">
<img _ngcontent-my-app-c9="" class="ng-tns-c9-25 tab-stories__image ng-trigger ng-trigger-fadeIn ng-star-inserted" id="app-deferred-image_id_d1e0186a-6714-c0b4-649e-b9234689c136" alt="null" src="/-/media/images/images-sc9/locations/pch/general-pch/patient-stories/lexie-gardiner-square.ashx?&mw=400" style="">
I have tried the following CSS Selectors with no success, any help would be appreciated. The goal is to track that whenever anyone clicks on one of the stories under "Our Stories" they do not link off to anywhere just hidden content.
.tab-stories
.tab-stories__wraper
.tab-stories__image
div#our-stories
.tab-stories*
div#tab-stories*
div#tab-stories
Try .tab-stories__tabs
If it doesn't work, edit your question and add a complete set of html with closing tags so that we could actually inject it into a page and see how it looks.
You don't need to try your selectors in GTM every time. That takes too long.
Just do the following:
Inspect your element to open the Elements tab in the Chrome Debugger.
press ctrl+f while the Elements tab is being focused and start typing your CSS selectors.
The search in the Elements tab is smart enough to not only match literal matches, but CSS selectors matches too.
Debugging your selectors through the Elements tab is the best way to make sure nothing else would trigger your rule on this page and to see what exactly will trigger it.

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();

Selenium locator for span loaded with AJAX

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)

Resources