How do I get span text value in prototype - prototypejs

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

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

CSS selector for a single attribute out of multiple attributes

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.

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]

Xpath - Selecting attributes using starts-with

I am trying to write an xpath expression that selects all div tags that have an attribute id that start with CompanyCalendar. Below is a snippet of the HTML that I am looking at:
<td class="some class" align="center" onclick="Calendar_DayClicked(this,'EventCont','Event');">
<span class="Text"></span>
<div id="CompanyCalendar02.21" class="Pop CalendarClick" style="right: 200px; top: 235px;"></div>
There are multiple divs that have an id like CompanyCalendar02.21 but for each new month in the calendar, they change the id. For example, the next month would be CompanyCalendar02.22. I would like to be able to select all of the divs that are equal to CompanyCalendar*
I am rather new at this so I was using some example off the net to try and get my xpath expression to work but to no avail. Any help would be greatly appreciated.
I am trying to write an xpath expression that selects all div tags that have an attribute id that start with CompanyCalendar.
The following expression is perhaps what you are looking for:
//div[starts-with(#id,'CompanyCalendar')]
What it does, in plain English, is
Return all div elements in the XML document that have an attribute id whose attribute value starts with "CompanyCalendar".
While checking in Browser console with the $x() call, it worked only after flipping the quotes - i.e. double quotes inside the Xpath starts-with() call.
$x('//div[starts-with(#id,"CompanyCalendar")]')

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

Resources