Scroll a div tags list using webdriver

Question

We have a drop down list written using div tags. Selenium fails to identify the elements which are not in the display and throws an error.Using JS code to scroll - .scrollBy(0,y) option wouldn't work here.

The drop-down list is not written using the select tag. It is more like a list. The list is first displayed as a picker button. When it is clicked it displays a list which can be scrolled. The list is written using div tags.

<div id="xxx_pickerMenuItem1" type = "button">
    <div id = "xxx_pickerMenuItem1_text">Text1</div>
<div>
<div id="xxx_pickerMenuItem2" type = "button">
    <div id = "xxx_pickerMenuItem2_text">Text2</div>
<div>
.
.
.
.

Is there a way to scroll the list down and check whether the element required is displayed or not?

Abhishek Singh · Accepted Answer · 2013-09-02 12:39:03Z

1

Just wrap your WebElement into Select Object as shown below

Select dropdown = new Select(driver.findElement(By.id("identifier")));

Once this is done you can select the required value in 3 ways. Consider an HTML file like this

<html>
<body>
<select id = "designation">
<option value = "MD">MD</option>
<option value = "prog"> Programmer </option>
<option value = "CEO"> CEO </option>
</option>
</select>
<body>
</html>

Now to identify dropdown do

Select dropdown = new Select(driver.findElement(By.id("designation")));

To select its option say 'Programmer' you can do

dropdown.selectByVisibleText("Programmer ");

or

dropdown.selectByIndex(1);

or

dropdown.selectByValue("prog");

if the value is not present you will get an WebDriverException !

Edit: The dropdown is composed using div's

driver.findElement(By.name("applicantContact.areaOfOd")).click()
driver.findElement(By.name("applicantContact.areaOfOd")).sendKeys(
                            Keys.ARROW_DOWN);
driver.findElement(By.name("applicantContact.areaOfOd")).sendKeys(
                            Keys.ARROW_DOWN);
driver.findElement(By.name("applicantContact.areaOfOd")).sendKeys(Keys.ENTER);

Above code does click on element and then press Arrow down twice and then press Enter. Hope this help you frame your solution.

edited Sep 2, 2013 at 12:39

answered Sep 2, 2013 at 12:09

Abhishek Singh

9,86524 gold badges78 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

testerteaser Over a year ago

Thank you for the response. The drop-down list is not written using the select tag. It is more like a list. The list is first displayed as a picker button. When it is clicked it displays a list which can be scrolled. The list is written using div tags. <div id="xxx_pickerMenuItem1" ...> <div id = "xxx_pickerMenuItem1_text">Text1</div> <div> <div id="xxx_pickerMenuItem2" ...> <div id = "xxx_pickerMenuItem2_text">Text2</div> <div> . . . .

testerteaser Over a year ago

Unfortunately, it doesn't respond to the arrow keys when i try it manually. So, i guess it wouldn't respond the above code.The only way to make the options visible is to scroll down using the mouse.

testerteaser Over a year ago

We can scroll the dropdownlist using the mouse scroll and then click on the desired option

Abhishek Singh Over a year ago

Why dont you write the code to do the exact same thing ? Whats the problem ?

testerteaser Over a year ago

I don't know the code to scroll the list down. window.scrollBy(x,y) or element.scrollBy(x,y) wouldn't work

Brantley Blanchard · Accepted Answer · 2013-09-04 23:28:10Z

Try figuring out how to select without using the arrow or scroll button. Often times, you can click the button then start typing to quickly select the correct item in the list. In selenium, that would be these steps...

Click picker button
Select the div list and use "SendKeys" and type the exact text as it appears. You can send a "\n" if you need to click enter to select the item you wanted. Also you may need to do a focus event on it first.
Now that the item has been selected, you can simply get the .Text of the item that was selected.

Alternatively, you can

Click picker button
Select the element that holds the list and use the (string allOptions = myElement.Text;)
see if it's in the list (bool textFound = allOptions.Contains("what I'm looking for");)

Collectives™ on Stack Overflow

Scroll a div tags list using webdriver

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related