Cannot select item from drop down in Selenium IDE - selenium

I'm writing a Selenium script that containing a drop down list.
<select id="seats" class="form-control" name="seats">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">22</option>
<option value="23">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>
I've looked several answers in stack overflow to select a value form dropdown box and every time I failed. Even tried to get xpath from Selenium IDE. in that case I got same Relative XPath to both dropdown and the value.
Here is the code I'm currently using.
driver.findElement(By.id("seats")).click();
driver.findElement(By.xpath("//form[#id='side-form']/div/div/div/div/div[3]/div/select")).click();
Here what i need to select is 4. but, it selecting 1.
Can someone tell me how to select 4 from my dropdown. Any help would be appreciated.
Thanks in advance. :)

It is a bit awkward that your dropdown has 2 options with the same value. Anyway, here is one possible XPath which will return the last option of certain value, from dropdown with id equals 'seats' :
driver.findElement(By.xpath("//select[#id='seats']/option[#value='3'][last()]")).click();

Please try below sample
new Select(driver.findElement(By.id("seats"))).selectByValue("4");
Edit
WebElement select = driver.findElement(By.id("seats"));
List<WebElement> allOptions = select.findElements(By.tagName("option"));
for (WebElement option : allOptions) {
if(option.getText().equals("4")){
option.click();
}
}

Related

(Capybara, Ruby) How do i check the dropdown has more than 1 value (7 values in this case)?

(New to testautomation) Hopefully someone can help me out. I need to be able to check the dropdown has a specific amount of values (in my case 7 different values) which change every month or so. So I can't hardcode the values that are within this dropdown.
How do I get it to check the dropdown has 7 values, independent of what the actual value is?
For example:
<option value="">""</option>
<option value="123456">XZY</option>
<option value="123457">ZYX</option>
<option value="123458">ABC</option>
<option value="123459">CBA</option>
<option value="123460">BAC</option>
<option value="123461">DEF</option>```
And next month it would be:
<option value="">"-"</option>
<option value="123457">ZYX</option>
<option value="123458">ABC</option>
<option value="123459">CBA</option>
<option value="123460">BAC</option>
<option value="123461">DEF</option>
<option value="123462">FED</option>
You can try this.
within("select.form-select") do
page.all('option', count: 7)
end

How can I get optgroup label when select an option in vuejs?

I want to get country group name when select option. I've countries with several group like
<template>
<select id="countries" v-model="country" #change="getCountryGroup($event)">
<optgroup label="Asia">
<option value="AF">Afghanistan</option>
<option value="AM">Armenia</option>
<option value="AZ">Azerbaijan</option>
...
<option value="BD">Bangaldesh</option>
...
</optgroup>
<optgroup label="Australia / Oceania">
<option value="AS">American Samoa</option>
<option value="AU">Australia</option>
<option value="CK">Cook Islands</option>
</optgroup>
<optgroup label="Africa">
<option value="DZ">Algeria</option>
<option value="AM">Angola</option>
<option value="AZ">Azerbaijan</option>
</optgroup>
<optgroup label="South America">
<option value="AR">Argentina</option>
<option value="BO">Bolivia</option>
<option value="BR">Brazil</option>
</optgroup>
<optgroup label="North America">
<option value="US">United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="CA">Canada</option>
</optgroup>
<optgroup label="Europe">
<option value="UK">United Kingdom</option>
<option value="AL">Albania</option>
<option value="AD">Andorra</option>
</optgroup>
</select>
</template>
Suppose when I select Bangladesh then I want to get optgroup name Asia. Here is my vueJs method
getCountryGroup: function(event){
console.log( event.target.getAttribute('label') );
}
Here are two steps
Get the selected index
Find the selected option
Select the parent element (optgroup) for the selected option
Finally, get the label (Country group)
getCountryGroup: function(event){
// 1. Get the selected index
const index = event.target.selectedIndex;
// 2. Find the selected option
const option = event.target.options[index];
// 3. Select the parent element (optgroup) for the selected option
const optgroup = option.parentElement;
// 4. Finally, get the label (Country group)
const countryGroup = optgroup.getAttribute('label');
console.log(countryGroup);
}
Here is the demo https://codepen.io/maab16/pen/KKKpJba

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>

Unable to select a dropdown by value, visible text or index using selenium select command

I am unable to select an option dynamically using select commands by value, visible text or index, the workaround was i can use actions to click select and select a particular option or sending keys ArrowDown which is not a best way to implement because i want to use the same select function globally to automate UI all over the website like a keyword function.
sample script below:
WebElement selectElement = driver.findElement(By.xpath(.//*[#id='XYZPopUpForm:j_idt90:country_label']));
Actions selectItem = new Actions(driver);
selectItem.moveToElement(selectElement).click().perform();
selectItem.sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ARROW_DOWN).perform();
selectItem.sendKeys(Keys.ENTER).perform();
HTML Code :
<tr>
<td>
<label for="XYZPopUpForm:j_idt90:country">Country</label>
</td>
<td>
<div id="XYZPopUpForm:j_idt90:country" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all">
<div class="ui-helper-hidden-accessible">
<div class="ui-helper-hidden-accessible">
<select id="XYZPopUpForm:j_idt90:country_input" tabindex="-1" name="XYZPopUpForm:j_idt90:country_input">
<option selected="selected" disabled="disabled">--select--</option>
<option value="AF">Afghanistan</option>
<option value="AX">Ă…land Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia, Plurinational State of</option>
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
</select>
</div>
Updated Script:
WebDriverWait wait = new WebDriverWait(driver, 10);
WebElement selectElement = driver.findElement(By.id("XYZPopUpForm:j_idt90:country_input"));
((JavascriptExecutor)driver).executeScript("var select = arguments[0]; for(var i = 0; i < select.options.length; i++){ if(select.options[i].text == arguments[1]){ select.options[i].selected = true; } } ", selectElement, "Afghanistan");
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("XYZPopUpForm:j_idt90:country_input")));
Screenshot of HTML to be more clear :
Seems you are finding incorrect element By.xpath your drop-down id looks like XYZPopUpForm:j_idt90:country_input but you are finding id XYZPopUpForm:j_idt90:country_label in By.xpath, May be that is the problem. Try using Select with correct drop-down id as below :-
WebElement selectElement = driver.findElement(By.id("XYZPopUpForm:j_idt90:country_input"));
//Now use select
Select select = new Select(selectElement);
select.selectByVisibleText("Afghanistan");
or
sel.selectByIndex(1);
or
sel.selectByValue("AF");
Edited :- If above does not work due to visibility of element you should try using JavascriptExecutor as below :-
WebElement selectElement = driver.findElement(By.id("XYZPopUpForm:j_idt90:country_input"));
((JavascriptExecutor)driver).executeScript("var select = arguments[0]; for(var i = 0; i < select.options.length; i++){ if(select.options[i].text == arguments[1]){ select.options[i].selected = true; } }", selectElement, "Afghanistan");
Hope it works...:)

option tag not shown in firefox

I have the following code in html:
<select>
<option text="item9" value="9"></option>
<option text="item10" value="10"></option>
</select>
The select shows up as blank in firefox. There are no elements. But it works in IE. The following works in both:
<select>
<option text="item9" value="9">item9</option>
<option text="item10" value="10">item10</option>
</select>
I am using the following dojo code to create the dropdown:
dojo.byId("sel1").add(dojo.create("option", { text:optionText, value:docNode.childNodes[i].getAttribute("id") }));
How do I create
<option text="item9" value="9">item9</option>
with dojo?
All you really need is:
<select>
<option value="9">item9</option>
<option value="10">item10</option>
</select>
The text attribute is non-standard.
You can use:
dojo.byId("sel1").add(dojo.create("option",{
innerHTML:optionText,
value:docNode.childNodes[i].getAttribute("id")
}));