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()
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 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 want to create a dynamic action, that will set a value to an item on the page, when the value of another item (autocomplete text field) is set.
So the proccess goes like this:
Click on the autocomplete field
type some letters
choose one of the suggested values
I cannot find an event that will be executed when the selection of one of the suggested values happens. This way, I cannot see how I can read the value of the autocomplete field, once a suggested value is selected.
The change event doesn't fit my needs, it doesn't execute when one suggested value is selected.
I had the same problem, found this link: https://community.oracle.com/thread/2130716?tstart=0 and modified my dynamic action as follows to get the desired behaviour:
Event = Custom
Custom Event = result
From the link:
the problem seems to be the default behavior of the browser. When you
enter some text into the autocomplete and the list is displayed, the
focus is still in the text field. Also if you use the keyboard cursors
to pick an entry the focus will still be in the textfield. That's why
the change event of the textfield doesn't fire. It only fires if you
leave the field.
On the other side if you pick an entry with the mouse, the browser
will remove the focus from the text field for a moment (before the
JavaScript code puts the focus back), because you clicked outside of
the field. But that's enough so that the browser fires the change
event.
I had a look into documentation of the underlaying jQuery Autocomplete
widget
(http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/) and
there is actually an event called "result" which can be captures if an
entry is selected from the drop down list.
Try "Lose Focus" as event. It will trigger your dynamic action when you leave the autocomplete field, i.e. your curosr is moved to another field.
This probably depends on the APEX version you are using.
In case of 18.2, because the underlying component is based on Oracle JET's "inputSearch" component, you need to use following configure to capture the select change event for text with autocomplete:
event: Custom
custom event: ojupdate
Reference:
https://docs.oracle.com/cd/E87657_01/jet/reference-jet/oj.ojInputSearch.html#event:optionChange
I turned on the browser console, then turned ApEx Developer toolbar debug, and found that, on the contrary, the "Change" event does fire upon user clicking with the mouse on one of the selections. However if the user uses keyboard (type a few letters to narrow the list down, then use down arrow key to arrive at desired value, then press enter) then the Change event does not fire, just as you say.
Moreover: even when you do get the value sent back via mouse-click initiated Change event, the value isn't the autocomplete's complete and valid value, but instead the possibly partial and wrong-case value just as typed by the user. I.e., the the change event's submission of the value precedes the autocomplete's substitution.
The answer that #VincentDeelen gave is the best alternative that I can see, although it doesn't quite give that "instantantenous synchronicity" feel. You could maybe use the "Key Down" event, but be careful with that. You could get a really excessive amount of web and db traffic as each and every keystroke (including corrections) results in another firing of the dynamic action.
Testing environment: ApEx 4.2.3 with Chrome 33 as well as IE 9.
p.s. This might be worth a mention to the ApEx development team as well.
It's not really ideal, but you could use onfocus(). I'm looking for the same thing you are, I think, a custom event that fires when the selection of a suggested value happens. I haven't found it yet though and that is my work-around for now. It will run whatever function you've created for this initially with no value, but once the selection is made it will return focus and run the function again with the right value. Like I said, not ideal but it works.
Jeffrey Kemp is right. You can set it up through a dynamic action using the custom event, result. You can also register it on page load using document.getElementById("{id}").addEventListener("result", {function}); or $("#{id}").result( function( event, data, formatted ) { //something here });.
Oracle apex 19 now added a "component event" when you create a dynamic action called "Update [Text Field with autocomplete]" - this action is fired when you select a value from the list, but not when you leave the field (similar to adding the custom event "ojupdate").
I need help in figuring out the event that is fired when I select a dropdown value from dijit.form.Select. I already know of the onChange event and would like to know an event which fired even when the value is not changed.
Use Case
I am using dijit.form.Select in my project. I have some values like {Multiple,a,b,c,d} in this select drop down. When I select Multiple then it launches the pop up dialog. When I select other values a,b,c or d then that value gets set in that drop down.
Currently I catch onChange event to check if user has selected "Multiple" value so that I can launch the pop up dialog.
Now here is one issue. 1. Lets assume that by default selected value is a. 2. Now I select Multiple, onChange gets fired and pop up dialog gets launched. 3. Now again if I select Multiple then onChange event won't be fired and thus code would not launch pop up dialog.
I want to launch this dialog every time user selects "Multiple" value in the dropdown. Any suggestions to do this? I have tried useing onClick, onBlur and onFocus events but they are not of much use to me.
Please help.
You can Capture the 'onExecute' event of the dropDown of the dijit.form.Select widget for this behaviour. However, keep in mind that you wont get the newVal as an argument to the function for this event. to get the new value, use the following line as the first line of your function:
var newVal = this.focusedChild.option.value;
This will work for sure :)
This is what I am trying to do:
Open my web application
Go to the details page to create a new entity
While creating entity, I need to select some values form the drop
down and record it on Selenium IDE
Did all the above steps, they were recorded into Selenium IDE
When I play back, it is trowing an error whenever it is trying to
run the script, where some
selections from dropdown is needed.
Have been stuck with this for quite sometime now. Tried using "focus", but it did not work as well. Can anyone help in this regards?
Get Firebug
Inspect the element to find out the class ID of that UI Element.
Command: Select
Target: class ID
Value: label=[value in drop down of this ID] For example (label=Hawaii if you're dealing with a state and that is the value in the drop down)
The code where you get that state value would look like this where you use the label.
option value="HI">Hawaii</option
That should do it.
Since I don't know your web application I am going to make a number of suggestions.
Record and replay will not always capture all of the items that it needs to reply. This is a misnomer unfortunately.
Try doing select | locator | itemInSelect
It might be worth adding a waitForX, where X is the item you are waiting for it, call before that in case that select is not loaded when the test hits that point.
I had a similar issue with post code boxes into which you enter a postcode, and then select a Store from the dropdown that appears.
The actions recorded were not completely accurate.
I ended up fixing it by using sendKeys (not relevant to you), pause and click (got the xpath of the selection)