XPath for the element with ng-click - angularjs

I am trying to find a button and click on it. I am using selenium with c# and also have protractor. I am not able to find the element.
<button class="btn--primary quote-summary__card-btn" role="button" aria-label="Choose Essential Cover" ng-disabled="!quoteSecondaryOptionsCtl.pageLoaded" ng-click="quoteSecondaryOptionsCtl.selectCover('Essential', 0)" style="">Choose</button>
could anyone please help me in this?

Try following XPATH.
//button[#class='btn--primary quote-summary__card-btn' and text()='Choose']

It really depends how your page is structured. Do you have any unique identifiers other than the button text? If not, then locate it with XPath:
//button[contains(text(), 'Choose')]
If you want to locate it by your ng-click param then you can use css selector:
button[ng-click="quoteSecondaryOptionsCtl.selectCover('Essential', 0)"]

Related

click method is not working properly in selenium webdriver

i am trying to Automate flipkart website in which i am trying to change address but "add new adress" is not getting clicked i have attached the snapshot
my code is like driver.findElement(By.xpath("//*[#id='ng-app']/div/div[2]/ul/li[2]/div/div[2]/div[2]/div[2]/a/span")).click();
please give the appropriate help
I doesn't look that you are clicking active element, the xpath is //*[#id='ng-app']/div/div[2]/ul/li[2]/div/div[2]/div[2]/div[2]/a/span not correct it clicks on some span.
Use Firepath https://addons.mozilla.org/en-US/firefox/addon/firepath/ to get the xpath.
To ensure that button is clickable Use isDisplayed() and isEnabled() method before clicking on "Add New Address" button, this method return boolean value.
driver.findElement(By.xpath("//*[#id='ng-app']/div/div[2]/ul/li[2]/div/div[2]/div[2]/div[2]/a/span")).isDisplayed();
driver.findElement(By.xpath("//*[#id='ng-app']/div/div[2]/ul/li[2]/div/div[2]/div[2]/div[2]/a/span")).isEnabled();
Also you can verify that element is exist on page or not using below code
if(driver.findElements(byVal).size()!=0){
// Element is present.
}
hope it may helpful to identify cause of issue, why its not clickable.
First and foremost, Use a customized Xpath instead of the one you are using which is extracted directly from the browser. If no customized Xpath can be constructed then try a customized Css or any other locator if possible.
Try to go through the following attempts in order (I hope you can grasp why this is):
1- If .click() still doesn’t work, then keep on changing the values of the attributes you are using to construct your customized xpath, cssSelector, or locator.
2- Use the Actions class.
3- Use JavaScript executioner
4- instead of click(), try using any of: .sendKeys(“\n”). Or .sendKeys(keys.ENTER) or .sendKeys(keys.RETURN)

Unable to locate a web element using protractor in jasmine framework

I tried to locate an element on the page with the following but couldn't do.
element(by.css('.organizer-text.ng-binding')).click();
element(by.className('organizer-text')).click();
element(by.linkText('All Cases(1)')).click();
element(by.css('span[class="organizer-text"]')).click();
element(by.css('span[ng-class="{'folder-selected' : isSelected(node)}"]')).click();
element(by.css('span[title="All Cases (1)"')).click();
element(by.xpath('div//span[title()="All Cases(1)"]')).click();
Attaching the screenshot of the element with the DOM. Could you please help me on how to locate it?
<span class="organizer-text ng-binding"
tooltip="buildLabel(node.name, node.totalCases)"
ng-click="onLabelClick($event, node)"
ng-class="{'folder-selected' : isSelected(node)}"
ng-show="!node.showEditName" title="All Cases (1)">
All Cases (1)
</span>
The structure is div->span->multiple spans here (one of the spans here is the element)
try
element(by.xpath('//span[#title="All Cases(1)"]')).click();
I used browser.ignoreSynchronization = true; after logging into the page and it worked.
Looks like you found your answer yourself. But, this is for your own information. Just try this work flow out.
Right-click of your element and get the inspect element window.
Go to inspect element of the element and right-click
There will be a window with some options
Select copy Unique Selector option.
element(by.css('paste your Unique Selector here')).click();
Like step 5 paste your unique selector
Hope this helps. :)

Finding a link in selenium webdriver

<div class="list_details">
<p class="lnk_primary show_inline" rv-text="config.app.message.Label.abc.SmallScreen.58384" rv-on-click="current.eventGoToName">Add name</p>
</div>
I tried finding the link 'Add name' by using 'linktext' and 'partiallinktext' but it throws unable to locate element. I tried using classname but it also failed. Finally i used xpath to work.
My Code:
driver.findElement(By.linkText("Add name")).click();
driver.findElement(By.partiallinkText("name")).click();
driver.findElement(By.className("lnk_primary show_inline")).click();
Please let me know whether am i making any mistake?
Sample program to find link using linktext :
FirefoxDriver driver = new FirefoxDriver();
driver.get("https://www.google.co.in/?gfe_rd=cr&ei=2FqBVNuuJOzV8gea24GwDA&gws_rd=ssl#q=google");
driver.findElement(By.linkText("Google")).click();
please share your site URL so I can check.
By.linkText and By.partiallinkText are only looking for the
<a> tag. Since your link is in a <p> tag, it will not be found. Finding the element by xpath, like you have been able to do, is the better solution!
Based off experience and this question, By.className will not work for finding elements with more than one class. You could use xpath again or By.cssSelector instead to locate the element, such as:
By.cssSelector('.lnk_primary.show_inline')

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

Wrong button is clicked on with a page having two buttons

I'm using Selenium Webdriver to test a web page.
The web page http://www.leaseplan.nl/contact/index.asp has two buttons, one button with button text 'Zoeken' and one with button text 'Verstuur'. I want to click on the button with button text 'Verstuur' either by using XPath or CssSelector with the following code:
driver.FindElement(By.XPath("/html/body/div[3]/div[2]/div[2]/form/fieldset/a/span")).Click();
driver.FindElement(By.CssSelector("fieldset.contact_form > a.button > span.button_center")).Click();
But using the either one of the above lines of code, on the button with text 'Zoeken' is clicked on instead.
This button has quite a similar CssSelector and XPath:
fieldset.header_search a.button span.button_center
/html/body/div[3]/div/form/fieldset/a/span[2]
Does anybody know how to solve this?
Try this out with the cssSelector and tell me if it's work.
For "verstuur" :
By.cssSelector("div.content form a.button")
Solution :
Ok, i've found your problem. Your xpath is good but now, your action on the click submit the first form, so the form with "Zoeken".
onclick="document.forms[0].submit();" // submit the 1st form, the bad one !
Try this :
onclick="document.forms["form"].submit();" // submit the 2nd form, the good one !
//or
onclick="document.forms[1].submit();"
proof : Jsfiddle
xpath for ZOEKEN /html/body/div[3]/div/form/fieldset/a/span[2]
xpath for VERSTUUR /html/body/div[3]/div[2]/div[2]/form/fieldset/a/span[2]
Try this:
driver.FindElement(By.XPath("//span[text()='Verstuur']")).click();
Edit:
I think you want to learn Selenium that's why you are using 3rd party websites. If you really want to learn Selenium find some opensource applications to automate. Here is a good application to automate -
http://sourceforge.net/projects/sugarcrm/files/1%20-%20SugarCRM%206.5.X/FastStack/
Download the latest version and install.
Find more info about the website and selenium stuff here. It's so good..
http://selftechy.com/2011/02/05/introduction-to-selenium-web-application-test-automation-tool
Zoeken: driver.findElement(By.xpath("//div[1]/form/fieldset/a/span[2]")).click();
Verstuur : driver.findElement(By.xpath("//div[2]/form/fieldset/a/span[2]")).click();
Using xpath is easy but slow.

Resources