Find element with specific child element with capybara - xpath

I am trying to write a test in which I need to find an a element, that contains a specific icon
<span class="icon icon-checkmark></span>
I tried using xpath but I am doing something wrong I guess..
save_button = find(:xpath, '//a[span(., "icon-checkmark")]')
What would be the proper way to find my save button?

You're close, except you need to specify that you're looking for a class name.
find(:xpath, ".//a[.//span[contains(concat(' ',#class,' '), ' icon-checkmark ')]]")
The concat and extra spaces are to make sure it matches the specific class name and not a substring of a different class name.

Try this: '*//a/span[contains(#class,'icon-checkmark')]'

Related

How to find the exact element path without using xpath

I'm currently trying to locate this check box. I know I can use a xpath to locate it but I'm trying to see if there's a more efficient way of doing it. The problem I'm seeing is that there are multiple div class with the same name. I'm trying to find this specific one and isolate it. I'm trying to make my code more efficient if possible.
Xpath
/html/body/div/div/div/div[1]/cow-data/cat-panel/section/div[1]/div/div/md- checkbox[4]/div[1]
Element path:
<div class="cd-container" cd-gar-ripple="" cd-gar-ripple-checkbox=""><div class="cd-icon"></div></div>
Code I'm trying to use:
find('cd-container').click
The problem I'm seeing is that the div id 'cd-container' has multiple occurrences on the page and thus this doesn't work. I'm trying to see if I can find a more efficient way of doing this.
As per the HTML cd-container is the value of the class attribute but not id attribute. So your effective line of code will be:
find('.cd-container').click
If you want to find an element (AND THEN), return it's xpath. Use capybara.
This will allow you to locate using text / css selector. And then you can just return the path of the element.
i.e.
page.find('td', text: 'Column 1').path # Random td with text
page.find('#main').path # ID
page.all('div').select { |element| element.text == 'COoL dIv' }.first.path # First div that matches certain text
page.find('.form > div:nth-of-type(2)').path # Specific structured div
page.all('p div li:nth-child(3)').sample.path # Random li

Would like to use wildcard within an xpath

I have two links on a page that have the text 'London'. I want to choose the second one on the page, but I want to define the xpath in a way that it chooses by the parent div, but I want to use wildcard in case the link is moved.
So, the two xpaths are
//div[#id="first-id"]/div/div[2]/a[text()="London"]
//div[#id="second-id"]/div[2]/div[3]/div/a[text()="London"]
I want to use a wildcard and define the xpath within the parent div:
i.e. //div[#id="second-id"]/*/a[text="London"]
I already understand I can just use the full xpath and not have any wildcards, but I want to know if there's a way to do what I am proposing using xpath. I thought maybe contains() in some way would work but am not familiar enough with it.
To find the a element wherever it may appear within the div element, the descendant path is represented simply by //:
//div[#id="second-id"]//a[text="London"]

Referring to "title" of <a> in Xpath request

I'm making an Xpath as part of a scraping project I'm working on. However, the only defining feature of the text I want is the title attribute of the enclosing <a> tag like so:
This is what I want to scrape
Is it at all possible to refer to that title and create a path like this?
//tr/td[style='vertical-align:top']/a[title='Vacancy details']
Attributes in XPath expressions need to be prefixed with the # symbol...
//tr/td/a[#title='Vacancy details']
//tr/td/a[#title='Vacancy details']/#title
You can grab just the title if that's all you want

How to use Selenium using Xpath to determine the classes of an element?

I am trying to use xpath within selenium to select a div element that is within a td.
What I am really trying to do is determine the class of the div and if it is either classed LOGO1, LOGO2, LOGO3 and so on. Originally I was going to just snag the image:url to determine with logo.jpg was used but whoever made the target website used one image for each logo type and used css to determine which portion of the image will be displayed. So Imagine 4 images on one sprite image. This is the reason why I have to determine the class of the div instead of digging through the css paths.
In selenium I am using storeElementPresent | /html/body/form/center/table/tbody/tr/td[2]/div[3]/div[2]/fieldset/table/tbody/tr[2]/td/div/table/tbody/tr[${i}]/td[8]/div//class | cardLogo .
The div has multiple classes so I am thinking that this is the issue, but any help is appreciated. Below is the target source. This is source from within the table in the tbody. Selenium has no problems identifying all the way up to td[8] but then fails to gather the div. Please help!
<td class="togglehidefields" style="width:80px;">
<div class="cardlogo LOGO1" style="background-image:url(https://www.somesite.com/merchants/images/image.jpg)"></div>
<span id="ContentPlaceHolder1_grdCCChargebackDetail_lblCardNumber_0">7777</span>
</td>
I was fiddling with selenium.getAttribute() but it kept erroring out, any ideas there?
This <div/> element has one class attribute with one value, but this one is tokenized when parsed as HTML.
As selenium only supports XPath 1.0, you will need to check for classes like this:
//div[contains(#class, "LOGO1") or contains(#class, "LOGO2")]
Extend that pattern as needed and embed it in your expression.
With XPath 2.0 and better, you could tokenize and use the = operator which works on a set-based semantics:
//div[tokenize(#class, ' ') = ("LOGO1", "LOGO2")]
Old post but I'll put the solution I used up just in case it can help anyone.
xpath=//div[contains(#class,'carouselNavNext ')]/.[contains(#class, 'disabled')]
Fire of your contains, and then follow with /. to check children AND the current element.

Parsing class name in html of span class

I'm checking results of values to verify that they are correct.
Using watir-webdriver.
In this case javascript generates a color class:
eg:
<span class="storyEdit limeGreen"> x </span>
in ruby currently I'm trying to parse the information from the using .html
so this is something like what I've parse so far
=> <span class=\"storyEdit limeGreen\"> x </span>
I'd like to only return limeGreen so I can say:
color = resultOfParsedSpan
This would be for a few different colours, so I was wondering is there a way to only pull the class name from the html?
If I haven't explained anything well enough, please feel free to let me know so I can add extra information!
Watir let's you do this directly; you do not need to manually parse the HTML yourself. The Element#class_name method will give you the element's class.
Example (assuming it is the first span):
browser.span.class_name
#=> "storyEdit limeGreen"
From that, you would have to parse the string to figure out what color it is. Given that the classes might be in any order and the infinite number of possible colors, I do not believe there is a general way to get just the color. The solution would depend on what you want to do with color and if the possible colors are known ahead of time.
well, a quick approach would be something like this:
span = '<span class="storyEdit limeGreen"> x </span>'
color = $1.split.last if span =~ /class="(.*)"/
but it would be generally better to use some html parsing libraries for this sort of things, like nokogiri or hpricot

Resources