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,320 points
16,857 views
Using Break point sometimes very very longtime. Is there any other suggestible way
Hey @Sriswapna Pothana, Have you tried @Samarpit's solution?

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

hope it helps!

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

Thank You!!

answered May 14, 2018 by Samarpit
• 5,910 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, 2019 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?
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.

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, 2019 in Selenium by Anvi
• 14,150 points
12,016 views
0 votes
1 answer

How to create a test case with TestNG in Selenium?

Hey Deepak, to create a Test Case ...READ MORE

answered May 22, 2019 in Selenium by Abha
• 28,140 points
971 views
0 votes
1 answer
0 votes
2 answers

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,500 points
12,619 views
0 votes
2 answers

Problem while using InternetExplorerDriver in Selenium WebDriver

enable trusted connection  in internet explorer by ...READ MORE

answered Aug 31, 2020 in Selenium by Sri
• 3,190 points
8,572 views
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,910 points
6,629 views
0 votes
2 answers

How to use such xpath to find web elements

xpath are two types. 1) Absolute XPath:    /html/b ...READ MORE

answered Sep 3, 2020 in Selenium by Sri
• 3,190 points
7,519 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,910 points
20,280 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,910 points
2,342 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP