Protractor select the wrong option in dropdown.
I have to:
select the first dropdown to open another dropdown (in my situation: select Payment Method (1st dropdown) to open the 2nd dropdown - available credit cards):
The IMPORTANT moment: if the 1st dropdown has a default value - the 2nd dropdown CAN NOT be visible.
My piece of code had different variation:
let paymentDropdown = element(by.name("payment-method"));
let dynamicBlock = $$(".dynamic").first();
let useThisCardButton = element(by.name("do-add-payment-method»));
let paymentConfigBlock = element(by.id("payment-config-container"));
browser.wait(EC.visibilityOf(paymentDropdown), 5000);
$("#payment-method-0 > option:nth-child(2)").click();
browser.wait(EC.visibilityOf(dynamicBlock), 5000);
useThisCardButton.click();
browser.wait(EC.visibilityOf(paymentConfigBlock), 5000);
So, I’ve tried for the first dropdown:
1. $("#payment-method-0 > option:nth-child(2)").click();
2. element(by.name("payment-method"))
.all(by.tagName('option'))
.get(1)
.click();
3. element(by.cssContainingText('option', 'Credit Card')).click();
4. element(by.name("payment-method")).$('[value="cc"]').click();
Html is:
<select name="payment-method" id="payment-method-0" style="display: inline-block;">
<option value="0">Select Payment Method</option>
<option value="cc">Credit Card</option>
</select>
And Nothing! I don’t know how does it work, but the 1st dropdown has Default Value, and the 2nd dropdown is VISIBLE! Then I click on «Use this method» button and got Fail!
1 test from 10 tests choose the right 1st value, so test passed. But other 9 trials are failed. Why? How to do it correct and how to be sure that it will select the right option?
Try the below one. Here you can select the values without opening the drop down.
var firstDrop = element(by.css('#payment-method-0'));
browser.wait(EC.elementToBeClickable(firstDrop), 5000);
firstDrop.sendKeys('Credit Card');
browser.wait(EC.visibilityOf(dynamicBlock), 5000);
Hope it helps you
Related
I have 3 select tags with a lot of options inside them. One for year, one for month and one for day.
The question is ... How to set selected on the option I want.
I was thinking of this solutions:
Pass the options as array to the view. After that forech them in the select tag and with "#if" check every single one if its the right one and set "selected:selected".
But in my case this isnt good solution because I have many options ... that means the array will be very very big.
Put if statement in every option in the html and check if its te right one and set "selected:selected" to that option. This is also a bad solution ... there will be like 200+ if statements.
Maybe create 3 db tables with this options inside. Getting them in the controller method, foreaching them in the select tag and checking them with if statement and setting "selected" to the right one.
I really dont know if Im thinking in the right way. I will apriciate some help.
what you r doing is right here is a solution that it did worked for me, i have a user city, and when i want the user to update the city i show it as selected
just pass the arrays to the view then :
#foreach ($citys as $city)
#if (Auth::user()->city_id == $city->id)
<option value="{{$city->id}}" selected="selected">{{$city->name}}</option>
#else
<option value="{{$city->id}}">{{$city->name}}</option>
#endif
#endforeach
here is a short version u can use
#foreach ($citys as $city)
<option value="{{$city->id}}" #if (Auth::user()->city_id == $city->id) selected="selected" #endif > {{$city->name}}</option>
#endforeach
I'm struggling and googling on how to control the v-autocomplete for a while, but still didn't find a good answer. I'm trying to use v-autocomplete for multiple city selection and attempting to limit a user to select at maximum of 5. I would expect that it would stop the user from adding more selection. Currently, the counter only turns red, but still lets the user add more when it passes 5. Is there any Props or functions to let me do this? I ran into description somewhere and it said I had to use other validation API, but I didn't find any example anywhere.
Also, one of the options is Top 5 Cities. I'd like to consider it as 5 cities being selected. Is there a way to advance the count of this option to 5? And, disable the Top 5 option when remaining counter is less than 5? Thank you,
<v-autocomplete
label="Cities"
v-model="selectedValue"
:items="itemList"
item-text="name"
item-value="id"
hide-no-data
hide-selected
counter="5"
multiple
chips
deletable-chips
></v-autocomplete>
My sample code is here. https://codepen.io/OpPen/pen/LYpJppa
Thank you very much.
I managed to get it mostly working.
Menu will be disabled when the computedCouterValue reaches 5 or more.
computedCouterValue counts each selected as 1 unit, but Top 5 is counted as 5.
If user select Top 5, other cities cannot be further selected. Menu is disabled
If a city is selected, Top 5 is disabled as it would exceed max total count.
If there are better ways to do this or Vuetify has something out of the box I can use, please let me know.
One thing that I cannot find get resolved is that I cannot set the counter value to reflect my custom count from computedCounterValue. I want the counter to show 5/5 when Top 5 is selected. I tried to use prop "counter-value", but it doesn't take effect.
<v-autocomplete
label="Cities"
v-model="selectedValues"
:items="itemList"
item-text="name"
item-value="id"
hide-no-data
hide-selected
:counter="maxSelected"
:counter-value="computedCounterValue"
:menu-props="menuProps"
multiple
chips
deletable-chips
#input="adjustOptions"
></v-autocomplete>
</v-container>
https://codepen.io/OpPen/pen/LYpJppa
You can add computed property for autocomplete items and if selected length would be more than 4 (5), you just return selected items to autocomplete items, so user just couldn't pick something else. Availablitity to pick will return only if he remove at least 1 city.
I only add a function when #change is active and inside the function I check the model size. I remove the last value of the model, for example. So the user cannot select other option.
<v-select
v-model="currentCategories"
:items="categories"
item-text="name"
item-value="id"
chips
placeholder="Select category"
multiple
outlined
dense
#blur="updateGifts"
#change="limiteCategory"
></v-select>
limiteCategory() {
if (this.currentCategory.length > 5) this.currentCategory.pop();
},
I had a similar problem that I solved with a workaround. I ended up rendering the form invalid and showing a message instead of preventing user input after the threshold.
<v-autocomplete
...
:counter="maxNumberOfChoices"
:rules="validationRules"
>
computed: {
validationRules () {
return this.maxNumberOfChoices ? [this.validateMaxNumberOfChoices] : []
}
},
methods: {
validateMaxNumberOfChoices (selectedChoices) {
return selectedChoices.length <= this.maxNumberOfChoices || `Choose ${this.maxNumberOfChoices} at most.`
},
}
HI I have following Kendo Dropdown, even though I have a value in ng-model, the dropdown is not selecting the default values.
<select name="myDropDown"
id="myDropDown"
class="width-90"
kendo-drop-down-list k-data-text-field="'key'"
k-data-value-field="'value'"
k-data-source="myDataSource"
ng-model="model.selectedProperty"></select>
model.selectedProperty does have the value . However the UI does't select the options.
DataSource Values:
[{"key":"Critical","value":0},{"key":"High","value":1},{"key":"Medium","value":2},{"key":"Low","value":3}]
model.selectedProperty = 1
The above one should have selected the second option, but the dropdown selects none
Well I have to make the selected value same object as in the list:
$scope.model.selectedProperty = {"key":"Critical","value":0}
And I updated the select tag to,
<select name="myDropDown"
id="myDropDown"
class="width-90"
ng-model="model.selectedProperty"
ng-options="option.key for option in myDataSource track by option.value">
</select>
Using Robot Framework, I have a dropdown with multiple options. When I use the select from list option I can see the selection become highlighted, but when the dropdown closes, the value is not changed.
Here is a sample of my code:
click element id=month
select from list xpath=//select/#name="month" September
click button css=button.submit
I have tried variants of this with the select from list by label and select from list by value, and they fail with error stating the selected list or value does not exist.
Select from list by value example:
click element id=month
select from list by value xpath=//select/#name="month" September
click button css=button.submit
Select from list by label example 1:
click element id=month
select from list by label xpath=//select/#name="month" September
click button css=button.submit
Select from list by label example 2:
click element id=month
select from list by label xpath=//select/#name="month" label=September
click button css=button.submit
Anyone experienced this before where an item gets "selected" but the value does not get changed?
Use following keyword.
Pass locator as 1st argument and value as another argument
Select from list by label and validate
[Arguments] ${locator} ${select value}
Focus ${locator}
# Select from list by label
Select From List By Label ${locator} ${select value}
# Get selected value and validate it against passed value as argument
${value} = Get Selected List Label ${locator}
Should be equal ${select value} ${value}
This is my drop down and i want to select it on its value option
<select id ="">
<option value="01" title=" 01 - Live animals"> 01 - Live animals</option>
</select>
I know that how to select drop down on its content i.e.
ie.select_list(:id, "DropDownList_Product").select("01 - Live animals")
actually I want to select drop down on its value 01,what should i have to do for that ?
Something like this should work:
ie.select_list(:id, "DropDownList_Product").select_value("01")
More information at http://rdoc.info/gems/watir-webdriver/Watir/Select#select_value-instance_method