CSS selector for a single attribute out of multiple attributes - xpath

how do you select a single attribute within the element
<img src="xyz.jpg" title="xyz" alt="xyz">
just need the img src
seems to be an overlooked question
as all assumed implementations yield the entire tag still

Assuming your element is actually something like
<img src="xyz.jpg" title="xyz" alt="xyz">yo!</img>
the xpath expression
//img/#src
Should get you xyz.jpg.

Related

I have doubts about two mappings on the site-prism

I don't want to use xpath on the elements below.
element :img_login, :xpath, '//[#id="main-wrapper"]/div/section/div/div[2]/div/div/div[1]/img'
element :msg_login_senha_invalidos, :xpath, '//[#id="main-wrapper"]/div/section/div/div[2]/div/div/div[2]/div/p'
They are on the page as follows:
element img_login
<div class="sc-jRQAMF eRnhep">
<img src="https://quasar-flash-staging.herokuapp.com/assets/login/flashLogo-3a77796fc2a3316fe0945c6faf248b57a2545077fac44301de3ec3d8c30eba3f.png" alt="Quasar Flash">
</div>
element msg_login_senha_invalidos
<p class="MuiFormHelperText-root MuiFormHelperText-contained Mui-error MuiFormHelperText-filled">Login e/ou senha inválidos</p>
You have asked multiple questions about converting from using XPath to some other type of selector when using Site-Prism. StackOverflow is meant to be a place to come, learn, and improve your skills - not just to get someone else to do your work. It really seems you'd be better off reading up on CSS and how it can be used to select elements. Also note that there's nothing specifically wrong with using XPath, per se, it's just the way people new to testing and selecting elements on a page tend to use it (just copying a fully specified selector from their browser) that leads to having selectors that are way too specific and therefore brittle. A good site for you to learn about the different general CSS selector options available is https://flukeout.github.io/ - and you can look at the built-in selector types provided by Capybara at https://github.com/teamcapybara/capybara/blob/master/lib/capybara/selector.rb#L18
In your current case the below may work, but with the HTML you have provided all that's possible to say is that they will match the elements shown however they may also match other elements which will give you ambiguous element errors.
element :img_login, :css, 'img[alt="Quasar Flash"]' # CSS attribute selector
element :msg_login_senha_invalidos, :css, 'p.Mui-error', text: 'Login e/ou senha inválidos' # CSS class selector combined with Capybara text filter

XPath to get an element that does have the "itemtype" attribute

I need to search for microdata in an html page, and I want to search the elements that have the "itemtype" attribute.
The elements could be:
<div itemtype="...">
Or:
<strong itemtype="...">
I do not know which elements I have to search, I just know that they have to have the "itemtype" attribute.
I found something like this:
(/bookstore/book[#itemtype='US'])[1]
But in my case I don't know the name of the element and the value of the attribute.
How can I find out? Thanks.
To find all the elements that have an itemtype attribute, you can use this XPath expression:
//*[#itemtype]

How do I get span text value in prototype

This is my prototype code:
$$('coupon-value').findAll("price").innerHTML
<span class="coupon-value"><span class="price">66.67</span></span>
How do I get the value of .price in the prototype? In my html code there are multiple price classes. In jquery it would be simple:
$(".coupon-value").find(".price").text();
But in prototype I have no idea. Can you help me?
If you would like to get the contents of the <span> with the price class that is a child of a <span> with the coupon-value class you would do it like this
$$('.coupon-value .price').first().innerHTML
This will give you the first element that matches that CSS selector. You can also be very specific with your CSS selection as well.
$$('span.coupon-value span.price').first().innerHTML
you can also select that element and then traverse down the DOM like this
$$('.coupon-value').first().down('.price').innerHTML
Just be aware $$() returns an array of elements that match the CSS selector so you cannot just operate on them like a jQuery collection. However all of the elements in that array are already extended with the PrototypeJS extensions.
Try:
$$('coupon-value').getElementsByClassName("price").innerHTML;
You can change innerHTML for [0]
Like this:
$$('coupon-value .price')[0];
Or even this:
$$('span.price')[0];

selenium find child's child elements

I have following html like:
<form name="form1">
<input name="a" ...>
<input name="b" ...>
...
<div><span><select name="c">...</select></span></div>
</form>
I would like to find out all elements within the form element. First I use findElement() to get the form element form1, then use form1.findElements(By.xpath(".//*[#name]")) to get all its children having attribute name. However, for the select element, since it's grand-grand child of form1, how can I get it as well?
Is there a way to find all elements containing attribute name (not only child elements, but also child's child's child...) within form1?
Thanks!
if you want to get an WebElement by xpath, and so get child of it... you may use webElement.findElement(By.xpath("./*")) ... this "." before the "/" makes the magic, you'll need it to get only the children of the webElement...
Do you have to find the form element? If not, then you can do it in one select statement using css or xpath.
The css would be 'form[name="form1"] [name]'
Note the space between the closing and opening brackets.
You would use this selector with FindElement on the driver object rather than finding the form first.
You should be able to use the descendant:: as described in this post.
http://hedleyproctor.com/2011/05/tutorial-writing-xpath-selectors-for-selenium-tests/
Here are a few examples from the article:
//div[h3/text()='Credit Card']/descendant::*
//div[h3/text()='Credit Card']/descendant::input[#id='cardNumber']
//div[*/text()='Credit Card']/descendant::input[#id='cardNumber']
webDriver.findElement(
By.xpath("//div[*/text()='Credit Card']/descendant::input[#id='cardNumber']")
).sendKeys("1234123412341234");

How to get node text without children?

I use Nokogiri for parse the html page with same content:
<p class="parent">
Useful text
<br>
<span class="child">Useless text</span>
</p>
When I call the method page.css('p.parent').text Nokogiri returns 'Useful text Useless text'. But I need only 'Useful text'.
How to get node text without children?
XPath includes the text() node test for selecting text nodes, so you could do:
page.xpath('//p[#class="parent"]/text()')
Using XPath to select HTML classes can become quite tricky if the element in question could belong to more than one class, so this might not be ideal.
Fortunately Nokogiri adds the text() selector to CSS, so you can use:
page.css('p.parent > text()')
to get the text nodes that are direct children of p.parent. This will also return some nodes that are whtespace only, so you may have to filter them out.
You should be able to use page.css('p.parent').children.remove.
Then your page.css('p.parent').text will return the text without the children nodes.
Note: the page will be modified by the remove

Resources