I am trying to fetch visible text from a dropdown which does not have a selected option.
For dropdown which has selected option, i am using below code to fetch value from dropdown.
DenominationDropdown = element(by.css('[id*="MainContent_uxDenomination"] select'));
expect(DenominationDropdown.element(by.css('[selected="selected"]')).getText()).toBe('All Denominations');
In my second dropdown, there is selected value is not getting populated. I want to fetch current visible value (default value) which in my case is "All Dates" but below code is not working as there is no selected value.
DatesDropdown = element(by.css('[id*="MainContent_uxDates"] select'));
expect(DatesDropdown.element(by.css('[selected="selected"]')).getText().toBe('All Dates');;
Can someone please suggest a way in protractor to read current visible text or default value of dropdown?
HTML of dropdown:
<select name="ctl00$ctl00$ctl00$ctl00$body$body$MainContent$MainContent$uxDates" id="ctl00_ctl00_ctl00_ctl00_body_body_MainContent_MainContent_uxDates" class="ClassName">
<option value="%">All Dates</option>
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
.......
</select>
If it doesn't actually have the attribute selected=selected in the HTML, there should be another way. I tried this in my app on a dropdown and it worked fine:
var el = element(by.model('myDropdown')).$('option:checked');
expect(el.getText()).toEqual('test');
Note the above was for a dropdown, I originally thought it would be option:selected but that threw an invalid locator error. I have done this for radios in the past too:
var el = $('input[type=radio]:checked');
And, in case you werent aware, the $ is syntax equivalent to element(by.css())
getText() should return you the visible text only, by definition, which means that, if you call it on your select element, you should get the currently "selected" option:
expect(DatesDropdown.getText()).toEqual('All Dates');
In the case that doesn´t work with $.('option:checked'). you can try with add to end element(by.css('option:checked'));
var el = element(by.model('myDropdown')).element(by.css('option:checked'));
expect(el.getText()).toEqual('test');
Related
I have an issue with the Blazor InputSelect control displaying an incorrect value at the client if the list changes. I post this article partly as a question but also as a solution
The InputSelect resides in a Blazor Component and is configured to provide a changed event to the parent control since various calculations must be performed which eventually affect other display elements and controls. Therefore, a simple bind of the value doesn't work for me and I use the three-parameter binding model.
The InputSelect displays an initial list. It is bound to a class instance property which is set on first load - this correctly reflects to the displayed value in the browser.
A user can choose a smaller set of values for the list. Even if this shorter list contains the selected value at the client, after setting the new list at the server, the client now displays the fist (incorrect) item in the list and not the correct value at the server. The bound property at the server still shows the correct value if other server interaction occurs and the value is inspected.
Looking at browser values, I noted that none of the option values within the client select had a selected property set. After changing my code to enforce a selected property the rest of the code worked as expected.
I assume that the internal state of the InputSelect and the html select element at the browser are not in step if the selected option is not set. Does anyone else suffer this issue?
<InputSelect Value="#ApertureValue" ValueChanged="#((double value) => SelectChanged(value))" ValueExpression="#(() => ApertureValue)" class="form-control form-control-sm">
#foreach (Aperture i in Aperture.GetApertures(PreferredWorkingStopsInUse))
{
<option value=#i.ApertureValue>#i.ApertureValueDisplay</option>
}
</InputSelect>
<InputSelect Value="#ApertureValue" ValueChanged="#((double value) => SelectChanged(value))" ValueExpression="#(() => ApertureValue)" class="form-control form-control-sm">
#foreach (Aperture i in Aperture.GetApertures(PreferredWorkingStopsInUse))
{
if (i.ApertureValue == ApertureValue)
{
<option selected value=#i.ApertureValue>#i.ApertureValueDisplay</option>
}
else
{
<option value=#i.ApertureValue>#i.ApertureValueDisplay</option>
}
}
</InputSelect>
I have a select tag with some options under it . I select one value out of those along with other field values and move to next page. Once I return to previous page I want to check whether the dropdown value is same as that I selected. How can I get the already selected value using protractor. Can someone please help.
Following #Grasshopper's comment, I read this, and the following worked for me:
expect(element(by.xxxxxx('xxxxxxx')).$('option:checked').getText()).toEqual('xxxxxx')
var dropdownval=element(by.xpath/css("Xpathofdropdown/cssofdropdown")).element(by.css('option:checked')).getText();
console.log(dropdownval);
The following code helps me to resolve the issue,now the variable contains the value of the dropdown selected
var dropdownval=element(by.xpath("XpathOfDropdown")).element(by.css('option:checked')).getText();
console.log(dropdownval);
First select the input, then select the option using css, with the option:selected tag:
var selected = element(by.css('#ID_OF_THE_SELECT option:selected'))
I am new to Scala and the Play Framework. My goal is to display a checkbox in a view with values from a model. I would also like to grab those checkbox values from the view, process in a controller (make sure at least one value is selected), and add to a record in a model.
I have my controller built which displays the view and passes the checkbox values:
public Result addProfile() {
List<Service> services = Service.find.all();
return ok(profile.render(form(ProfileRegister.class), services));
}
I have my view built:
#(profileForm: Form[Application.ProfileRegister], servicesList: java.util.List[Service])
#main(null) {
#for(service <- servicesList) {
<input type='checkbox' name='servicesThis' value=#service>#service <br>
}
}
However, when the view displays, it looks like this:
I would like to have a checkbox appear -- it just displays text with no box to check. I wanted to also show the value of each record, such as the name property/field.
I would appreciate any help on this.
Thanks!
Try to put the value between double or single quotes, i.e. value="#service"
I got it to work with this:
#for(service <- servicesList) {
<label><input type="checkbox" name="services" value=#service.name><span>#service.name</span></label>
}
What is the best way to grab those checked values (multiple values) in a controller? And how to display if that record is opened for editing?
I appreciate the help.
While executing protractor tests, I would like to clear a dropdown. I know how to select a particular option in dropdown. How can it be cleared?
The dropdown is part of a form. The values of the options for dropdown are loaded with an ajax call. So, the select looks something like this.
<select>
<option>First Value</option>
<option>Second Value</option>
<select>
Now, when the form is loaded, no value is selected. But, as soon as a value is selected it is not possible to clear it (even manually) as this is a mandatory field. It is only possible to select an alternate value from the dropdown.
However, I would like to do a second test, which checks if the value of this field is blank (no selection). For this I have to clear the dropdown. Does protractor provide a way?
Let's say I can't change the order of tests for some reason.
Currently, I reload the entire form in order to clear the dropdown.
If the dropdown cannot be typed into, the only way to clear a dropdown using Protractor is to have an option in your dropdown that acts as a default selection before a user has selected 'First Value' or 'Second Value. This can be a blank option as well, like you desire
Something like this:
<select>
<option></option>
<option>First Value</option>
<option>Second Value</option>
</select>
And then select the first option via
element.all(by.tagName('option')).get(0).click();
This should get you the desired effect. Let me know if this helps!
I want to set value of autocomplete field using xf:setvalue. I know that firstly I have to set value of field and then set label (#label). I try to do that in following way:
<xf:setvalue ref="xxf:instance('fr-form-instance')//*[name() = $autocomplete-name]" value="'myValue'"/>
<xf:setvalue ref="xxf:instance('fr-form-instance')//*[name() = $autocomplete-name]/#label" value="'labelValue'"/>
After that in form builder I see, that in main instance it looks properly:
<xf:instance id="fr-form-instance" xxf:exclude-result-prefixes="#all">
<form>
<section-5>
<control-10 label="labelValue">myValue</control-10>
</section-5>
</form>
</xf:instance>
but unfortunately in my autocomplete field there is no change. I can notice the change only if I go to 'edit source' button in form builder, and without any change, I click 'apply'. Then autocomplete is automatically refreshed and I see my label: 'labelValue'. What should I do, to refresh autocomplete field after setvalue ??
regards
You need to do this by setting the label of the autocomplete, not its value, which is done by dispatching the fr-set-label event to the autocomplete control. Then, internally, the autocomplete will do something very similar to what it does if the user had entered that label, in particular calling the service to retrieve the corresponding value.