I am a newbie in using cucumber with capybara. I need to click on links displayed after hovering over certain elements of the web page using capybara
e.g. att.com
1. scenario is on hovering over Personal click on att.com
2. another scenario on hover over Shop --Bundles - click on Popular Bundles
How can this be accomplished using hover and click methods of capybara or is there any other method to make this work.
Option tried are
find(:xpath, ".//*[#id='ge5p_z2_p1001']").hover
find(:xpath, ".//*[#id='ge5p_z2_t1038']").click
But it complains unable to find xpath
Well there are two options here, dependent upon what your testing
1) If you want to test that the hover event triggers and then the links are clickable then try
find('.ge5p_z1-drop-down').hover
expect(page).to have_selector('.ge5p_z1-menu', visible: true) # check that menu is shown (need to have rspec for this)
click_link('att.com')
2) If you just want to test that the dropdown links take you to the correct page then treat them as links
click_link('att.com', visible: false) # this is hidden by default
let me know how you get on with this, I haven't tested it yet but should sort you out
I had a problem to click on a button that only appear when the mouse was positioned on a picture (photo) and after much research got this:
find('#follow', visible: false).trigger(:click)
In my case, the button was a link and only this way i can make my tests pass.
Related
I have an webpage (unfortunately I can't share as it's internal test one for my company) but essentially we have an item appear that has an "Accept" button for cookies, unfortunately I believe it's CSS so Cypress can't see the element if I use the selector and nor it cannot see the accept button.
Is there anyway around this?
I have tried using tab to get down to the element but as Cypress can't see the element it cannot click on it to initiate that.
You can add force: true with your click command for this.
cy.get('selector').click({force: true})
The easiest way is to select what the user can see, which is the "Accept" text on the button.
If it's visible on the page, Cypress can eventually find it but you have to design the command to retry which means adding some sort of .should() assertion on the element.
cy.contains("Accept")
.should('be.visible') // in case there's a delay in displaying the button
.click()
I have a problem with a validation error to http://www.tsiapos.gr/ (Joomla 3.9.10 - yootheme template0
https://wave.webaim.org/report#/https://tsiapos.gr/
which is related to empty link in "offcanvas"
I don't know where to find the code and how to fix it. Thank you.
That looks like your menu button which is only visible in responsive mode. If I increase my font size or run on mobile, then I see it.
There are two problems with the menu button. The first is that it doesn't have a label that a screen reader can announce. That's the error that WAVE is pointing out. You can fix that by adding an aria-label to your link.
The second problem that WAVE didn't find is that the "state" of your menu (expanded or collapsed) also needs to be conveyed. You do that with aria-expanded. Set the value to "false" when the menu is closed and "true" when the menu is open.
And if you want to get picky, there's a third problem that you're using a link instead of a button. A link should be used for navigation, opening a new page, not for an "action". I'd recommend changing your menu to a <button>.
If you want to use an <a> then you should add role="button" and make sure the space key can be used to select the link. By default, links only allow the enter to select them but a button allows both space and enter.
I'm writing automated test using Selenium WebDriver and ruby. I faced with such problem:
I need to close popup, but close-button for popup is outside DOM. In DOM I have div element with class 'promotional-wrapper' and this element have attribute data-mage-init='{"promoPopUp": {"url": {"getDataUrl": url from where DOM is updated with new nodes}}}' This div is responsible for getting popup into the page.
How to access element not directly attached to DOM?
Classic methods to get element by xpath fail, I get 'Stale Element Reference Exception'.
But interesting that when I accidentally ignored popup and wanted to click somewhere else click was intercepted by popup.
I think the pop up is being added to the DOM after you click.
so you should:
click the //div[#class='promotional-wrapper'] element
Wait for popup [exact locator TBD]
then search for element you want to interact with
The popup WILL be in the DOM after you launch it. Unless the popup is another window, in which case you will need to learn to deal with switching to windows: https://stackoverflow.com/a/36429462/1387701
I am trying to automate a booking process from an airline site.
In the second page of the booking process ('Select Flights'), there are multiple radio buttons which are very similar with other radio buttons available in the page. How can I select the radio button that I want to click?
I have already tried the xpath of the radio button but to no avail.
Here is the html code of the radio button:
Screenshot from booking.airasia.com
Please advise. Thank you
First element
Second Element
Well its true that you are getting similar elements for that given xpath but you also have to go through their siblings/parents etc for different scenarios.
Here is the xpath I tried that identified the individual elements that you were looking for, are depicted above.
//div[#class='iradio_square-green']/input[#id='trip_0_date_0_flight_0_fare_0']/following-sibling::ins
For others radio buttons you just have to change the flight number.
Hope this helps...
:)
I'm trying to complete a happy path e-commerce payment test but I cant seem to click on the nested element for credit card to be honest I'm not entirely sure which is the clickable element.
Any help to get this working would be appreciated.
When inputting forms, you typically want to interact with input and select elements. In this case, you can see that the visible input field is a radio button - ie <input type="radio">.
You access radio buttons using the radio method and select it by using the set method:
browser.radio(id: 'cc-payment').set
The element you want to click is the input with type radio. You should be able to do something like:
driver.find_element(:css, "input[id='cc-payment'][value='creditCard']").click
I'm curious if clicking on the parent item would resolve.
#browser.input(id: 'cc-payment').parent.click
If the div registers the click and sets the input then this might work. You should be able to manually verify this beahviour by clicking outside of the radial and seeing if it selects.