Checking radio buttons in Cypress - javascript

I'm very new to Javascript and it's my only second week using Cypress, so I need help in getting radio buttons to be clicked. I'm getting errors from Cypress all the time.
The element that I'm trying to check looks like:
<input class="XyzTypeRadio" type="radio" name="zzz_type" value="2">
And what I tried to implement after reading the Cypress documentation (at https://docs.cypress.io/api/commands/check.html#Syntax )was:
cy.get('[type="radio"]').first('.XyzTypeRadio').check('value=2')
Also tried simply .... .check('2') and ... .check('Xyz')

(edited and working answer)
Try this:
cy.get('[type="radio"].XyzTypeRadio').check("2")
Or if you don't care which radio button is checked, you could check the first one:
cy.get('[type="radio"].XyzTypeRadio').first().check()
Takeaways:
The first() function does not understand selectors, that's why we need to pass our selector ".XyzTypeRadio" to get().
The check() function expects the value or values as its argument, so instead of "value=2" we simply give it "2".
The check() function does a bit of selecting, ie the result of everything before calling check("2") is a list of inputs and the check("2") function searches and selects the one whose value is "2".
We could use first().check() if we want to check the first radio button, or we could remove first() and check a radio button with a specific value using check("2").

cy.get('[value="Other"]').first().check()
this worked for me as there are 3 radio buttons each with a value so it was just a matter of selecting the correct value

Related

Want to take a radio and checkbox value from one form to another

I have values from one form that need to be transferred to another.
var manager = $('input[type=checkbox]:checked').val();
I'm capturing the value with this. and trying to send it to this.
$('input[type=checkbox]:checked').val(manager);
but I don't know what to put into the next set of jquery to transfer it over.
.val() works for strings/numbers but not checkboxes or radio buttons which I am trying to do.
Please advice.
Try jQuery prop() function to transfer the state of one checkbox to another.
Also use correct selectors. $('input[type=checkbox]:checked') will only select CHECKED checkboxes.
see this fiddle for an example: https://jsfiddle.net/iPirat/p5f07br4/
in this fiddle, the checkbox in the first form is selected similarly to what you did.
the checkbox insecond form is selected using an ID.

Checkbox and onchange method usage

I have a table with some rows that have checkboxes on the first column where if user clicks, it calls some javascript methods that disable the other fields of the respective rows.
The structure of these inputs is this:
<input type="checkbox" name="ans_R2057321_Q2060122" id="ans_R2057321_Q2060122" value="2002241" onclick="matrix.disableFields(this, 'R2057321');recalculateRowFormulas('2057321'); alignTDs();" />
I implemented a link where when user clicks on it, it has to select all these checkboxes, so I did it this way:
function noQuoteAllRowsOfCurrPage(){
jQuery("input:checkbox[id^=ans_R]").each(function(i,e) {
jQuery(e).prop('checked', true);
});
}
This simply iterates in each checkbox on the screen whose id starts with ans_R, and then check the CB state to true. It does works, but the problem is that the javascript functions called on the onclick property of the input checkboxes aren't running. First thing I did was changing from onclick to onchange, which should be the correct way to do that, since the state of checkbox is changing, but somehow it doesn't work... any ideas what of what can I do?
JQuery's .prop() function does not trigger the change event. You either can
1 - Trigger the event manually
jQuery(e).prop('checked', true).trigger('change');
2 - Use the .click() function that will check the input, and trigger the event as well..
jQuery(e).click();
I found what I was missing and since I saw several people with the same problem, I think my solution can be helpful for others..
I just added a trigger for 'change'.
function noQuoteAllRowsOfCurrPage(){
jQuery("input:checkbox[id^=ans_R]").each(function(i,e) {
jQuery(e).click();
jQuery(e).prop('checked', true).trigger('change');
});
}

Checkbox value: optional or required?

According to MDN the value attribute is optional except when the value of the type attribute is radio or checkbox. But it doesn't seem to be correct. Is there anything wrong with the following:
<input type="checkbox" id="input">
<script>
document.getElementById('input').onchange = function () {
alert('Checked!');
};
</script>
DEMO
The value attribute is only required if you want the checkbox to post through a value when you submit a form. If you're not submitting a form but just want to know when it's clicked, then there's nothing wrong with your example.
Note that your example will also alert "Checked!" when the user un-checks the box too. That's why you might also want to look at the value of the checked attribute in your Javascript.
I think document says that it is mandatory to have the value when you need the selected option when posted back and to know what value is selected, i am not sure how why do you think your code should not work . In current case if you submit the form and you have to checkbox you will not come know what value is being selected.
checkbox: A check box. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected. You can also use the indeterminate attribute to indicate that the checkbox is in an indeterminate state (on most platforms, this draws a horizontal line across the checkbox).
For checkbox you may check for the 'checked' propoerty is true or false since checkbox is always used either as a flag / Boolean expression .
document.getElementById('input').onchange = function () {
alert('Checked!');
alert(document.getElementById('input').checked);
};

jquery - issue checking/styling a radio button wrapping it with an anchor

I'm trying to customize radio buttons with jquery.
I know there are tons of solutions working out there, but I need to set a different image for each radio button. This is needed because there is no label description, so each radio button must be styled to understand its meaning (example: two radio buttons, one with an image containing "$" and one "€" to check the preferred currency).
I'm creating a simple function called "Stylize" (actually I've tried it only on firefox, but I'll make it work up to IE6/7 and previous versions of major browsers).
By the way the function doesn't seem to work as expected, because it sets the checked attribute on all radio buttons, giving a weird result.
Here is the fiddle containing a simple example. I've analyzed the attributes with firebug. Actually it doesn't accept a different class name for each radio button, but this is the next step. As you can see the solution I'm working on is to wrap the radio button with an anchor tag and then bind a onclick event handler to select its radio button.
What can I do to make it work properly?
Thank you, Alex.
Here's a working example: http://jsfiddle.net/bFYW6/2/
Your problem was quite simple: You called var wrapper = $(radio).parent(); before actually wrapping the radio element. Therefore, .parent() referred to the <form> element, not the <a> that you went on to wrap the radio element in.
All I did was switch the order of those two lines and voila!
Another change you could make would be to the final line that actually binds the click event on the wrapper. Rather than:
$(wrapper).click(function() {
$(radio).attr("checked", true);
});
You could do:
$(wrapper).click(function() {
$(this).children().attr("checked", true);
});
By using $(this) in the above example, it will always find the radio element that is it's child. That allows you to then call the Stylize() function just once: Stylize("#radio1, #radio2"); or Stylize("input[type=radio]");.
Example: http://jsfiddle.net/bFYW6/6/
As a final point, you shouldn't use a capital 'S' for your Stylize() function. Beginning a function with a capital letter in JavaScript generally suggests that it is a constructor function for a class, which yours is not.

ExtJS ToolBar radio group change menu item manually

How to manually change selected radio item in "Radio Options" menu?
http://www.extjs.com/deploy/dev/examples/menu/menus.js
Don't pay attention on id absent (for menu), I just want to know which method should be use.
I tried setActiveItem but it didn't work.
Thanks
I might misunderstand your question, but what about using the method
setValue( value {String/Boolean} ) : Ext.form.Field
"Sets either the checked/unchecked status of this Radio, or, if a string value is passed, checks a sibling Radio of the same name whose value is the value specified."
I would think that the radio group would make sure that the already checked button would be unchecked.
finally I found a solution:
Ext.getCmp("our_id").menu.items.get(index).setChecked(true, true);
I found that this method has some issues, for example, setChecked works fine
from firebug (only needed item checked), but if it run from javascript file, it
doesn't work like radiobutton, but like checkbox.
For this case, you should run across all items and explicitly checked and unchecked them.
Also be sure, to suppress emit signal (second parameter in setChecked method), to avoid recursion.

Categories

Resources