Selenium - Using Java, click on the dropdown and select a value
I am trying to automate the loading of a large set of indicators on an ongoing basis. So far, from the script, I can open the url, login, switch tab and navigate to the section I want. I have a problem with clicking on a dropdown and selecting a value to expand the list from 10 to 100.
Here is my code so far
SoltraDownload.java
import java.util.Scanner;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class SoltraDownload {
public static void main(String[] args) {
//PROMPT USER FOR Password
//System.out.print("Please Enter Your Username: ");
//Scanner scanner = new Scanner(System.in);
//String username = scanner.next();
//PROMPT USER FOR Username
//System.out.print("Please Enter Your Password: ");
//String password = scanner.next();
//GET WEB DRIVER
System.setProperty("webdriver.chrome.driver", "chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("EDITED FOR QUESTION");
driver.manage().window().maximize();
//GET INSTANCE OF Soltra HOME PAGE
SoltraHomePage SoltraHomePage = new SoltraHomePage(driver);
//LOGIN TO SOLTRA
SoltraHomePage.loginP("EDITED FOR QUESTION");
SoltraHomePage.loginU("EDITED FOR QUESTION");
SoltraHomePage.loginC();
//MOVE TO FEEDS PAGE
SoltraHomePage.FeedPage();
//PAGE CLICK ON FEED SELECTION
SoltraHomePage.ChooseFeed();
//SELECT DROPDOWN value 100
SoltraHomePage.Dropdown();
}
}
SoltraHomePage.java
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.FindBy;
import org.openqa.selenium.support.How;
import org.openqa.selenium.support.PageFactory;
import org.openqa.selenium.support.ui.Select;
import org.openqa.selenium.htmlunit.HtmlUnitDriver;
public class SoltraHomePage {
@FindBy(how = How.ID, using = "username") private WebElement Username;
@FindBy(how = How.ID, using = "password") private WebElement Password;
@FindBy(how = How.ID, using = "loginbutton") private WebElement loginbutton;
@FindBy(how = How.LINK_TEXT, using = "Feeds") private WebElement Feeds;
@FindBy(how = How.ID, using = "feedlist") private WebElement feedlist;
@FindBy(how = How.CLASS_NAME, using = "container") private WebElement container;
@FindBy(how = How.LINK_TEXT, using = "Default") private WebElement Default;
@FindBy(how = How.CSS, using = "control-bar") private String control;
// Create a new instance of a driver
WebDriver driver = new HtmlUnitDriver();
public SoltraHomePage(WebDriver driver) {
PageFactory.initElements(driver, this);
}
public void loginU(String text) {
this.Username.clear();
this.Username.sendKeys(text);
}
public void loginP(String text) {
this.Password.clear();
this.Password.sendKeys(text);
}
public void loginC(){
this.loginbutton.click();
}
public void FeedPage() {
this.Feeds.click();
}
public void ChooseFeed() {
feedlist.findElement(By.partialLinkText("Default")).click();
}
public void Dropdown() {
//Code to select dropdown value
}
}
Here is a subset of the html code - I am looking to select the value 100 in the dropdown menu
<div class="row control-bar">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<ul class="pager">
<li class="previous"><input type="button" class="btn btn-default" data- bind="click: goFirst, disable: page()==1" value="<<"></li>
<li class="previous"><input type="button" class="btn btn-default" data- bind="click: goPrev, disable: page()==1" value="<"></li>
<li><small data-bind="text: page"></small> of <small data-bind="text: totalPages"></small> (<small data-bind="text: totalRows"></small>
<small data-bind="if: totalRows()!==1">rows</small><small data-bind="if: totalRows()==1">row</small>)</small></li>
<li class="next"><button class="btn btn-default" data-bind="click: goNext, disable: page() == totalPages()">></button></li>
<li class="next"><button class="btn btn-default" data-bind="click: goLast, disable: page() == totalPages()">>></button></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="pager">
<li class="pull-right"><small>Indicators per page: </small>
<select data-bind="value: pageSize, event: { change: loadData }" style="width:auto">
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
**<option value="100">100</option>** //This is the value I am looking to choose
</select>
</li>
</ul>
+3
source to share
3 answers
I always create a custom action class and place it there:
public static void selectByValue(WebElement element, String value) {
Select selectElement = new Select(element);
selectElement.selectByValue(value);
}
public static void selectByText(WebElement element, String text) {
Select selectElement = new Select(element);
selectElement.selectByVisibleText(text);
}
They take your WebElement, transform it into a Select element (org.openqa.selenium.support.ui.Select) and use the Select methods to select your option. This only works with html select elements. You would use it like this:
At the top:
@FindBy(how = How.CSS, using = "li.pull-right select") private WebElement soltraSelect;
In the test:
CustomActions.selectByValue(soltraSelect, "100");
+3
source to share
You can do this with a Select object, or define the correct XPath:
1) Using Select:
Select element = new Select(webelement);
element.selectByValue(value);
2) Using XPath:
By option = By.xpath("//select[@class = 'expression']/option[@value = 'value']");
driver.findElement(option).click();
+2
source to share
Since the value attribute has the same meaning as the text, I would suggest moving on to the next cssSelector for a better search result
String val = "100";
By css = By.cssSelector("select>option[value='" + val + "']");
driver.findElement(css).click();
Alternatively, you can use a method selectByValue
to accomplish the same task instead of visual text. See doc
+1
source to share