How to test React JS dropdown with Selenium and java?

0 votes

I have a code which populates dynamically using React JS. How can I select a value from this dropdown?

Below is the HTML code. The div which has "Year" text is the dropdown, but when as soon as I click on the Year, it gives me few options like 2015,2014,2013 etc. But I am not sure how to access these values using Selenium.

<div class="fitment-box__first-select" data-reactid=".2.0.0.0.0.2.1"><span data-reactid=".2.0.0.0.0.2.1.0">My vehicle was made in</span><div class="Select fitment-box__select-year" data-reactid=".2.0.0.0.0.2.1.1"><input type="hidden" name="year" value="" data-reactid=".2.0.0.0.0.2.1.1.0"><div class="Select-control" data-reactid=".2.0.0.0.0.2.1.1.1"><div class="Select-placeholder" data-reactid=".2.0.0.0.0.2.1.1.1.0:$placeholder">Year</div><div class="Select-input " tabindex="0" data-reactid=".2.0.0.0.0.2.1.1.1.1">&nbsp;</div><span class="Select-arrow-zone" data-reactid=".2.0.0.0.0.2.1.1.1.4"><span class="Select-arrow" data-reactid=".2.0.0.0.0.2.1.1.1.4.0"></span></span></div></div></div>
May 14, 2018 in Selenium by Martin
• 4,220 points
3,026 views

2 answers to this question.

0 votes

Below code will help you:

Actions act = new Actions(this.getDriver());

act.moveToElement(element).click().build().perform();

act.click(elementValue).build().perform();

Use action class in this

answered May 14, 2018 by Samarpit
• 5,130 points
0 votes

First of all you need to click the dropdown arrow icon , Then after Dropdown displayed . You need to get dropdown hierarchy as dropdown is dynamic so we cant inspect its element directly.

For that we need to follow below steps for writing dropdown selection code:

1) open your console.

2) click on source tab -- then go to right corner side open Event listener Breakpoints--click on mouse --click on click

3) Now you will face some debugger point try to click .. now you can see dropdown hierarchy and inspect it and can also write xpath for it .

answered Aug 20 by ghoshPooja
• 140 points
Hi Pooja, thank you for explaining the steps. Can you also share some code snippet to make your answer more clear?

Related Questions In Selenium

0 votes
1 answer

How to create a Base Class in Selenium and use it with test scripts?

Hi Donna, you can use following code ...READ MORE

answered Jul 18 in Selenium by Anvi
• 12,860 points
79 views
0 votes
1 answer
0 votes
1 answer

Finding WebDriver element with Class Name in java

The better way to handle this element ...READ MORE

answered Apr 10, 2018 in Selenium by nsv999
• 5,090 points
592 views
0 votes
1 answer
0 votes
1 answer

Geo-location microphone camera pop up

To Allow or Block the notification, access using Selenium and you have to ...READ MORE

answered May 11, 2018 in Selenium by Samarpit
• 5,130 points
900 views
0 votes
1 answer

How to use such xpath to find web elements

It's much simpler to use: #MyDiv123 > div.super or ...READ MORE

answered Jun 14, 2018 in Selenium by Samarpit
• 5,130 points
577 views
0 votes
1 answer

How to get next sibling element using XPath and Selenium for Java?

Below code will help you: Try following-sibling axis : WebElement ...READ MORE

answered May 15, 2018 in Selenium by Samarpit
• 5,130 points
5,538 views
0 votes
1 answer

How to login a forum using Selenium with Python

You should try to directly log in ...READ MORE

answered Apr 27, 2018 in Selenium by Samarpit
• 5,130 points
299 views