How to test React JS dropdown with Selenium and java

Question

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>

Comments

Using Break point sometimes very very longtime. Is there any other suggestible way

---

Hey @Sriswapna Pothana, Have you tried @Samarpit's solution?

Answer 1

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

hope it helps!

If you need to know more about React, Its recommended to join React JS course today.

Thank You!!

Answer 2

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 .

Comments

Hi Pooja, thank you for explaining the steps. Can you also share some code snippet to make your answer more clear?

---

Thank you Pooja. It helped :)

---

Thanks for your contribution. Please do upvote the answer in case you found it helpful!

---

Can you share the code snippet. I do not see the code snippet here

---

Hello @pgvishnu,

You can refer this for test case senario test case 

Hope this is helpfull for you!!

---

sometimes this is taking very long time for click action in debug mode. Is there any other suggestable way

---

Hello @Sriswapna Pothana

If your application takes a long time to start in debug mode that this can be resolved if you simply 'Delete All Breakpoints' under the Debug menu. This solved an annoying problem for me even though I only had a handful of breakpoints set at the time.