I'm testing FluentLenium.
I found "fill("#sb_form_q").with("FluentLenium");" for input(s).
I want check and uncheck Checkbox.
I want choose a radiobutton in a group.
How to do ?
If you want to click on the radiobutton that have the id "male" just do something like that :
find("#male").click();
You could use any of the css selectors to find the element you want (radiobutton or checkbox) and act on it (most of the time by clicking).
If you have an element such as:
<input type="radio" id="radioButton1">
You can use either the Lazy Find Annotation:
#Findby(id = "radioButton1")
FluentWebElement radioButton;
Or the locators:
FluentWebElement radioButton = el("input", with("id").equalTo("radioButton1");
I prefer the second method for accuracy since you can add more selectors to ensure you find the exact element you want to, the first for ease-of-use/readability.
Then you can use the FluentWebElement's methods to click and unclick.
radioButton.click(); /* Selects */
radioButton.click() /* Unselects */
You would not use fill method.
Related
Is it possible to check a mat-checkbox in a Cypress test based on it's label text?
Below is the HTML for the checkbox:
I have several checkboxes to test, so I want to re-use code to do something like -
When I check the 'Advanced search' checkbox, When I check the 'Basic search' checkbox, etc.
The <mat-checkbox> can be accessed by label text with a simple .contains(), but you must use .click() instead of .check().
cy.contains('mat-checkbox', 'Advanced search')
.click()
Using .check() gives you the error
<input> is being covered by another element <label>
If the label only holds one check box for Advanced search, then you can use .contains() with label as the selector along with text of the checkbox, then .find() the checkbox to check.
// this will get label element
cy.contains('label', /advanced search/i)
// this will get checkbox input
.find('input[type=checkbox]')
.check()
Here is a working example.
I have a container with dynamic UI components including checkboxes. How can I know the selection status of a particular component?
Using isSelected() doesn't work as it is always false because it seems to pick the last checkbox in the list which returns false since it is unselected.
bool_isMemberSelected = cb_member.isSelected(); //returns false.
I am able to get the checkbox at a particular index in the parent component but once I have it there is no isSelected option on it. So I use a dirty way by tokenizing the string representing the component to get to the selected status. There must be a better way.
System.out.println("Checkbox Data "+cnt_tablerow[Integer.parseInt(lbl_memberno.getName())].getComponentAt(0)); //Checkbox Data: CheckBox[x=0 y=0 width=63 height=152 name=524, text = , gap = 2, selected = true]
String str_chkbox = StringUtil.tokenize(StringUtil.tokenize(cnt_tablerow[Integer.parseInt(lbl_memberno.getName())].getComponentAt(0), ']').get(0), '[').get(1);
String str_status = StringUtil.tokenize(StringUtil.tokenize(str_chkbox, ',').get(3), '=').get(1).trim();
if(str_status == "true"){}
You could generate and set a name for each component when generating your dynamic UI. With a name you can use the ComponentSelector API or a simple for to get the Checkbox you want and then use the isSelected method.
If you want to keep your actual selection logic with the index, you can simply check the instance of your component and cast it to a CheckBox, that would also do the trick.
I am using redux-form in my Laravel project (implementing React 15.4.2) and the form I have includes several radio buttons. I need a handleChange function in order for these to remember what is checked (if they are changed from a previous value or selected for the first time) but I don't want to have to write a separate one for each radio button, or implement a huge if else set of rules to handle each one.
Here's one of my fields (just the 'yes' value):
<input type="radio" onChange={this.handleChange.bind(this, 'maintain_licence', 'yes')} checked={maintain_licence.value === 'yes'} id="maintain-licence-yes" value="yes" name="maintain_licence" /><span>Yes</span>
And this is what I have for a single radio button on change, based on the radio button called maintain_licence being interacted with:
handleChange(fieldName, value) {
if(fieldName === 'maintain_licence') {
this.props.fields.maintain_licence.onChange(value);
}
}
This works fine - however, since I have about 20 radios in my form, I can imagine this function getting rather long. Ideally, I'd want something similar to:
handleChange(fieldName, value) {
this.props.fields.fieldName.onChange(value);
}
But as it's trying to find a field actually named 'fieldName' it throws an error stating that it cannot run onChange on an undefined value.
Basically I just need to find a way of using a single function to handle the changes on all radio buttons but I don't know how to do this.
You could use property accessors to get the property you want. Something like:
handleChange(fieldName, value) {
this.props.fields[fieldName].onChange(value);
}
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors
I am clicking to modal window which is pretty simple. In general only relevant part is this:
<div id="partSelection">
<button value="0" name="partSelection">BLATNÍK P L</button>
<button value="1" name="partSelection">BLATNÍK P P</button>
I need to click one of this button, I know how to click this with:
xpath:
element(by.xpath('//*[#id="partSelection"]/button[2]')).click();
also way with button text:
element(by.buttonText("BLATNÍK P P")).click();
but I noticed there as different values for each button and I belieave this is something which is not going to change by developers. Is there a way how to click element base on value?
Thank you for your advises.
Adding to an existing answer.
You can solve it using the following CSS selector:
element(by.css("#partSelection button[value=0]")).click();
Or, using a by.xpath() locator:
element(by.xpath("//div[#id='partSelection']/button[#value='0']")).click();
Note that, if you are going to use the "by value" technique often, to follow the DRY principle, it could be a good idea to define a custom by.value() locator:
How to globally add a custom locator to Protractor?
this example should work if you want to just look up a specific attribute. I usually refer to this css selectors when I'm trying to figure out the best way to find a specific attribute.
basically the breakdown is to find the tag you want in our case we want button and then we want to find the attribute within that tag. So we have the choice of value or name. Name is the same for both buttons so we don't want to use that. However the value is different for each button so that would be good to use in this case.
element(by.ccs('tag[attribute=""]');
tag = button
attribute = value
element(by.css('button[value="0"]')).click(); // button with text BLATNÍK P L
element(by.css('button[value="1"]')).click(); // button with text BLATNÍK P P
I'm trying to add a select box to a Backgrid.Grid in order to fire a function that will reset the state: {pageSize} to the value the user selects. But I can't figure out how or where to bind the events to the grid.
My understanding is that the element needs to be part of the view (which I believe is the Backgrid.Grid), so I added the select box to the footer of the grid and gave it an id and tried adding an events parameter and matching function to it, but it does nothing.
So, in my footer I have
select id="changePageSize"
And in the grid
events: {
'change #changePageSize' : 'changePageSize'
},
changePageSize: function(){ console.log('hooray!');}
I believe my approach is completely wrong at this point but can't find anything to direct me down the correct path.
What I ended up doing was adding the event listener and function to the backgrid-paginator extension.
Added the select box to the _.template('...
_.template('...<div class="page-size"><select name="pageSize" class="pageSize"><option...');
Under events I added:
'change select.pageSize' : 'changePageSize'
And then created the function:
changePageSize: function(e){
e.preventDefault();
this.collection.state.pageSize = Math.floor(e.currentTarget.value);
this.collection.reset();
},
It makes sense to make this function and its display optional and to also allow a developer to assign an array to generate custom option values. When I get time.
Regarding Duffy Dolan's answer: everything si great in your example, except if you are on let's say on third page and select to have all results only on one page, you get an error.
You just need to add:
this.collection.getPage(1); // it will always select first page