How to remove space from dropdown value while selecting in selenide Xpath - selenium

My source html-snippet:
<select id="X1" class="">
<option data-auto="X-input-option" value=""> --Select-- </option>
<option data-auto="X-input-option-0" value="10 "> 10 -XYZ </option>
<option data-auto="X-input-option-1" value="100 "> 100 -ABC </option>
<option data-auto="X-input-option-2" value="200 "> 200 -MNP </option>
</select>
part of code
abc= ".//select[#id='X1']";
$(By.xpath(abc)).shouldBe(visible).selectOptionByValue(ID);
Issue is :Dropdown values has spaces in it , how to select a value by using selectOptionByValue if it has spaces.

See i.e.:https://www.guru99.com/select-option-dropdown-selenium-webdriver.html
Than this could be your solution:
$(By.xpath(abc)).shouldBe(visible).selectOptionByValue('10 ');

Related

How to select the first option if the ID of the user who is viewing the component is not there? Vue

I have a select where I list sellers, the issue is that I have validated that when entering that component in the select I am automatically located, the problem is that I do not go out in that list so the select is empty instead of the first option.
Example
<select
v-model="filter_user"
class="pull-right float-right mr-2 btn btn-light btn-lg"
>
<!-- <option v-for="user in sales_man" :key="user.id" :value="user.id" >
{{ user.name }}
</option> -->
<option value="">All sales man</option>
<option value="3">sales man 3</option>
<option value="4">sales man 4</option>
<option value="7">sales man 7</option>
</select>
I leave the foreach that fills me the same options but commented, but to be understood I put them option 1 to 1, the issue that I am ADMIN so my ID is 1 and every time I enter that option I want to leave me in the first option to see all executives and not 1 specific, how could I do it and not show me the blank select?
Refer: option:selected
<option value="" selected>All sales man</option>

selected not working in option in angular 8

I am writing the following code:
<select
formControlName="abc"
type="text"
class="form-control"
id="abc"
aria-describedby="abcHelp"
[(ngModel)]="optionValue"
>
<option value="" disabled selected>
Select Yes/No
</option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
It works fine without [(ngModel)]="optionValue" but I need to make it work with NgModel so that I can access values of options.

v-model and selected is not working at the same time... --vue.js

UPDATED
select input's selected option is not working if I use v-model on select.
<p class="topics">fruits</p>
<select class="select" v-model="selectFruit">
<option selected value="">--all--</option>
<option :key="index" :value="item" v-for="(item,index) in fruitList">{{item}}</option>
</select>
if I don't use v-model, then selected is working. But I need that v-model bind for filter my array. But it looks like I can't use v-model and selected at the same time.
Use selected attribute
https://www.w3schools.com/tags/att_option_selected.asp
<select class="select" v-model="searchCity">
<option value="" selected>--全部--</option>
<option :value="item" v-for="item in uniqueCity">{{item}}</option>
</select>
Adding a bonus to the above answer, if you want to have a default placeholder but not a valid value (Like "Select country here") you can do it like this:
<select>
<option value="" selected disabled hidden>Select country here</option>
<option value="1">Bulgaria</option>
<option value="2">Serbia</option>
<option value="3">Cyprus</option>
</select>

Angular 5 dropdown setting default value

I am trying to preselect (set as default) value from Angular 5 drop down.
There are three values and I am trying to set the second one with this code but it doesn't work. I can't make any changes in the component, only in the template.
<select [(ngModel)]="declaration.media" name="media" (change)="onChangeMedia()" class="form-control form-control-sm" required>
<option *ngFor="let media of mediaArray" value="{{media.value}}" selected = "{{media.value == '02'}}">{{media.text}}</option>
</select>
UPDATE: if I remove [(ngModel)] then it works, but no two way binding.
<select>
<option value="" selected disabled hidden>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>

Disabling and enabling select using angular

I want to disable and enable a select, using angular based on a condition.
<select [disabled]="!isContinentSelected" class="form-control" formControlName="country">
<option value="">Select Your Country</option>
<option *ngFor="let country of countries" value="{{country.id}}">{{country.name}}</option>
</select>
isContinentSelected returns true or false. But the is always enable even the condition is false. Im using Angular 5. How can I achieve this?
<select [attr.disabled]="isContinentSelected ? '': null" class="form-control" formControlName="country">
<option value="">Select Your Country</option>
<option *ngFor="let country of countries" value="{{country.id}}">{{country.name}}</option>
</select>
Please try with this code.
This works in my case.