cypress expect element to be one thing or another - cypress

I have two states on a website I am testing, either the element is set to .Image or .image so I need to validate that either one is present.
cy.get(".Image").should('exist')
but of course I need to extend this so it also looks for .image
Thanks,

Cypress does not care (in this scenario).
cy.get(".Image").should('exist') will pick up both spans in
<span class="Image"></span>
<span class="image"></span>

You can use comma and then write both the selectors. This will act as a OR condition.
cy.get('.Image,.image').should('exist')

Contains method with regex should do the job:
cy.contains('/^\.\b(Image)\b/i').should('exist')

Related

How to check if div contains text (XPath)

I use https://autorefresh.io/expressions/ chrome extension for page refreshing. The next level for me is checking if a specific page part contains the predefined text. This extension supports XPath.
I was trying to use //*[contains(text(),"Brak towaru")]. It worked until I put this cell "address" instead of *.
/html/body[#class='b--desktop breakpoint-xl']/div[#class='body-inner']/
section[#class='pt-2']/div[#id='main']/div[#class='shop']/
div[#class='row mt-4 justify-content-center'][1]/div[#class='col-4 col-md-2 pt-3 text-center']
I was trying to insert this "address" in many ways... No success.
Any hints?
screenshot of XPath extension
Instead of using contains(text()) try using contains(.,). This will check for text content in the element itself and in it's child nodes.
So, instead of
//*[contains(text(),"Brak towaru")]
Try using
//*[contains(.,"Brak towaru")]
And in case this is a div element use
//div[contains(.,"Brak towaru")]
Thank you very much. Works :)
//*[#id="main"]/div/div[3]/div[3][contains(.,"Brak towaru")]

geb: select by existence of attribute

Given the following html:
<a class="foo">
<a class="foo" href="somePonderousJSIDontWantToQuoteInMyTests">
One can select the later from the former using $("a.foo", href: ~/.*/).
Is there a more elegant way of selecting an element, based on whether or not it has a certain attribute?
Thanks!
I don't know if using a CSS3 attribute matcher is more elegant but it's definitelly quicker especialy if your selector would return many elements without the filter because the filtering happens in the browser and not in the jvm as in your approach:
$("a.foo[href]")

How to find the nth element that has a class of .foo in the document with Capybara/Nokogiri

I'm trying to find the n-th element that has a special class in a document. The elements are not necessarily children of the same parent. So for example
<ul>
<li><div class="foo">This</div></li>
<li><div>Nothing</div>
<ul>
<li><div class="foo">This also</div></li>
</ul>
</li>
<li><div class="foo">And this</div><li>
</ul>
I'd like to find the first, second or third element that has the class .foo.
I tried
page.find '.foo'
Which errors in Capybara::Ambiguous: Ambiguous match, found 3 elements matching css ".foo"
I then tried
page.all('.foo')[n]
Which works nice except that it doesn't seem to wait this little time like Capybaras find does, which I need because the HTML is actually generated from ajax data. So how to do this correctly with find?
Okay after a short chat in #RubyOnRails on freenode it became clear to me that this isn't as easy possible as it sounds first. The problem is that Capybara can't know if the .foos that are already inserted into the page are "all" of them. Thats why .all has no (or doesn't need) support for waiting like .find has.
The solution would be to manually wait for an appropriate amount of time and then just use .all.
Nokogiri's CSS queries are effective for finding elements of certain classes. It is explained in the tutorial.
For example you can use the following Ruby one-liner to read from a given file and find the second element of class foo:
ruby -rnokogiri -e 'puts Nokogiri::HTML(readlines.join).css(".foo")[1]' sample.html
which returns
<div class="foo">This also</div>
Replace the number in [1] with the index of the element you want to find and replace sample.html with the html file you want to search in. If you want to pick out certain parts of the elements you can use methods of Nokogiri::XML::Element, e.g. content to get its contents.

Get specific element in webdriver containing text

What are some good ways to retrieve a specific element in WebDriver/Selenium2 based only on the text inside the element?
<div class="page">
<ul id="list">
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Grape</li>
</ul>
</div>
Essentially, I'd like to write something like this to retrieve the specific element:
#driver.find_element(:id, "list").find_element(:text, "Orange")
This is very similar to how I would use a selector when finding text inside a link (i.e. :link_text or :partial_link_text), but I would like to find elements by text inside normal, non-link elements.
Any suggestions? How do you deal with this issue? (In case you were wondering, I am using Ruby.)
You could do that with xPath. Something like this for your example:
#driver.find_element(:id, "list").find_element(:xpath, './/*[contains(., "Orange")]')
A couple years late, but I was just going to ask this question and answer it so other could find it...
I used a css selector to get all the li elements and then filtered the array based on the text:
#driver.find_elements(css: '#list > li').select {|el| el.text == 'Orange'}.first
You could then .click or .send_keys :return to select the option.

watir-webdriver click on image

Folks,
I have an image with the following HTML code:
<div unselectable="on" class="x-grid-cell-inner x-unselectable" style="; text-align: right;" id="ext-gen1453">
<img alt=""src="data:image/gif;base64,FRFRFR/GFFFFFFFFFF==" class="x-action-col-icon x-action-col-0 folder-action-add folder-action" data-qtip="Add New Music File" id="ext-gen1300">
When I click on the image it should open a pop up so that I can add new music file, I tried a few things but I am not able to click on that image. Any suggestions?
Thanks a lot
You can click on it by the class or a partial match of the class.
#browser.image(:class=>/folder-action-add folder-action/).click
Here is a list of the identifiers you can use for watir, I think it's mostly the same for watir-webdriver.
So far, you haven't got a consistent way of actually identifying the element. From what you've said in the comments, you've tried the 'text' attribute which doesn't exist, and the 'id' attribute which is auto generated and different every time.
You need to find a way of consistently identifying the element. It's usually preferable to use a semantic class on the element to make styling and testing easier and less brittle. You have a few classes declared, perhaps 'folder-action-add' expresses the intent of the button clearly? If not, you could add one such as 'add-music-file'.
Then you should be able to use watir to select an element by it's class, I'm not familiar with the syntax but at a guess, #browser.image(:class => 'add-music-file') might do the job.

Resources