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()
Related
By default it's not possible to trigger a click on a select element using cypress, and you will get a warning to use .select() instead:
cy.get('.myselect').click({ force: true });
CypressError: cy.click() cannot be called on a element. Use cy.select() command instead to change the value.
In my case, clicking on a select triggers an api call to populate the select with a list of values, from which you can then select. So I cannot select anything until the options actually exist. Is there any way around this behaviour?
Since there is no way to for Cypress to open the select dropdown (its a native widget), Cypress errors.
However, you can still use cy.get(...).trigger('click') to send the event (docs).
Note: you should listen to the focus event instead for accessibility reasons since users can also tab into a select. In that case you can use cy.get(...).focus()
I need to load select's options asynchronously (
through a service), using the Angular Material md-select component.
Actually, I use a click event to load data. It works but I need to click the select twice to show the options. That it's a problem.
The expected behavior is shown at this link (AngularJs Material)
The actual behavior is shown at this link.
Is Async options' loading supported by md-select?
The reason you need to click twice is because when you first click, there are no options in the select control and so it doesn't try and open the panel. Then your async method loads the options into the DOM and on the next click it will open.
In order to deal with this, you must always include at least one <mat-option> in your <mat-select>. You can add a disabled <mat-option> with a <mat-spinner> showing that the data is loading for example.
Here the most simple example of that. This is not the best approach... see below.
However, this still uses the click event which isn't the best approach. If you put the click event on the <mat-select> there are spots where you can click on the control but your click event wont trigger even though the dropdown panel still opens (places like the floating label area). You could put the click event on the <mat-form-field> but then there will be places where you can click and trigger the click event but the dropdown panel wont open (places like the hint/error text area). In both cases you lose keyboard support.
I would suggest using the <mat-select> openChanged event instead of a click event. This has its own quirks too but they are manageable.
Here is an example using the openChanged event. I also made the component more robust overall.
I also made a version that uses the placeholder element to show the spinner instead of using a disabled mat-option. This required View Encapsulation to be turned off.
Note: In my example, the service can return different data depending on the circumstances. To simulate this my fake service keeps track of how many requests you send it and changes the options returned accordingly. So I have to set the option list back to empty and clear the formControl's value every time the list is opened. I save the selected value before clearing the formControl so that if the service returns a list with the same item I can automatically reselect the value. If you only need to load the options once, then you would want to modify the code a bit to only load the options the first time the user opens the select.
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.
How do you handle the case where you asked nightwatch/selenium to click an element, but it doesn't click it so another element that you check is not visible. How do you handle the case where clicks do not work?
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.