Unable to automate the selection of a dropdown menu using Selenium WebDriver

Question

Unable to automate the selection of a dropdown menu using Selenium WebDriver

I am currently utilizing http://www.makemytrip.com/

This is the HTML code.

<div class="mrgnBot30 clearFix">
<span class="watch_icn flL"></span>
<div class="widget_inner clearFix suggest_me padBot15 flL">
<h3 class="clearFix hasBorderBottom">
<p class="clearFix checkDates">
<span class="check_date flL">
<label for="checkInDate">
Check-in Date:&nbsp;
<span id="checkInDate_day" class="dayLight">(Monday)</span>
</label>
<a id="checkInDateControl" class="cal_icn flL" href="#" tabindex="201"></a>
<input id="checkInDate" class="day flL hasDatepicker" type="text"  autocomplete="false"     value="01/21/2013"     name="searchCriteria.criterion.stayDateRanges[0].start" style="display: none;">
<span class="day date flL">
<select class="selectBox" tabindex="202" style="display: none;">
<span class="left_part flL"></span>
<span class="selectBox center_part flL selectBox-dropdown" style="display: inline-block; -moz-user-select: none;" title="" tabindex="202">
<span class="selectBox-label">21</span>
<span class="selectBox-arrow controls flR">
<a class="select_drop_icon flR" onclick="return false;" href="#"></a>
</span>
</span>
<span class="right_part flL"></span>
</span>
<span class="day month flL">
<select class="selectBox" tabindex="203" style="display: none;">
<span class="left_part flL"></span>
<span class="selectBox center_part flL selectBox-dropdown" style="display: inline-block; -moz-user-select: none;" title="" tabindex="203">
<span class="selectBox-label">Jan,13</span>
<span class="selectBox-arrow controls flR">
<a class="select_drop_icon flR" onclick="return false;" href="#"></a>
</span>
</span>
<span class="right_part flL"></span>
</span>
</span>
<span class="check_date last flL">
<span id="nights" class="nights flL">2 Night(s)</span>
</p>
</div>
</div>

There is a dropdown to choose a Check in date and Check out date. To be honest, I'm not sure how to programmatically select a value from the dropdown. During recording with Selenium IDE, it captured clicks on the dropdown values which adds to my confusion about its nature as a dropdown or not.

I attempted using a select statement to pick a value from the dropdown by identifying the Xpath value using firebug.

The code used:

 driver.get("http://www.makemytrip.com/");
 driver.findElement(By.xpath("//li[4]/a/span/span")).click();
    Select sel = new Select(driver.findElement(By
            .xpath("//div[2]/div/p/span/span/span[2]")));
    try {
        sel.selectByValue("21");
    } catch (Exception e) {
        e.printStackTrace();
    }

Unfortunately, this approach did not work for me. Below is the converted code snippet generated from Selenium IDE after recording.

Selenese Code:

driver.get("http://www.makemytrip.com/");
driver.findElement(By.xpath("//div[@id='chf_navigation']/ul/li[4]/a/span/span")).click();
assertEquals("I want to go to", driver.findElement(By.cssSelector("label")).getText());
assertEquals("Online Hotel Booking for Cheap, Budget & Luxury Hotels in India | MakeMyTrip.com", driver.getTitle());
driver.findElement(By.xpath("(//a[@onclick='return false;'])[2]")).click();
driver.findElement(By.xpath("(//a[@onclick='return false]")[3]")).click();
driver.findElement(By.xpath("(//a[@onclick='return false])"[4]")).click();
driver.findElement(By.cssSelector("li.selectBox-hover.selectBox-selected > a")).click();
driver.findElement(By.xpath("(//a[@onclick='return false]")"[5]")).click();

Here are the steps to locate and interact with the dropdown:

Visit
Click on the Hotels link
You will find the Check in Date dropdown.

Please share any helpful suggestions to help resolve this issue. Thank you in advance.

javascript html drop-down-menu webdriver selenium-webdriver

Answer 1

Answer №1

Although you have shared the HTML code with us, we still require the actual code you have written for this program. Please provide us with your code and any error messages or exceptions that were displayed.

Answer 2

Although you have shared the HTML code with us, we still require the actual code you have written for this program. Please provide us with your code and any error messages or exceptions that were displayed.

Answer 3

Answer №2

When selecting check-in dates, the IDs to use are b_checkin_day and b_checkin_month. Here is a guide on how to select them:

//select the check-in date <select> element
Element el = driver.findElement(By.id('b_checkin_day'));
Select sel = new Select(el)
// proceed with the selection

Check out dates should be selected using the IDs: b_checkout_day and b_checkout_month

Please note that this information is specific to the US version. The Indian version may have different HTML structures.

UPDATE : It appears you were referring to the Emirates website.

For selecting the day, here's the XPath to consider :

Element el = driver.findElement(By.xpath("//input[@id='checkInDate']/following-sibling::span[contains(@class,'date')]/select"))

The XPaths for month check-ins, day checkouts, and month checkouts respectively are as follows:

"//input[@id='checkInDate']/following-sibling::span[contains(@class,'month')]/select"
"//input[@id='checkOutDate']/following-sibling::span[contains(@class,'day')]/select"
"//input[@id='checkOutDate']/following-sibling::span[contains(@class,'month')]/select"

Your best solution is to utilize these XPaths for accurate selections

You can also simply verify the correct date in the form input fields by setting the desired date value in:

<input id="checkInDate" class="day flL hasDatepicker" type="text"  autocomplete="false"     value="01/21/2013"     name="searchCriteria.criterion.stayDateRanges[0].start" style="display: none;">

This method should work effectively (note the value="01/21/2013")

UPDATE2 :

Have you attempted to interact with the actual elements visible to the user? Start by clicking on the dropdown arrow (

"//input[@id='checkInDate']/following-sibling::span[contains(@class,'date')]/"

), which will display the select used by the JavaScript date selector. From there, you can make the appropriate selection by clicking on:

//ul[contains(@class,'selectBox-dropdown') and contains(@style,'block')]//a[@rel="25"]

If the desired day is 25, look at the <ul>s/<li>s at the bottom of the page to find the correct xpath for selection

Answer 4

When selecting check-in dates, the IDs to use are b_checkin_day and b_checkin_month. Here is a guide on how to select them:

//select the check-in date <select> element
Element el = driver.findElement(By.id('b_checkin_day'));
Select sel = new Select(el)
// proceed with the selection

Check out dates should be selected using the IDs: b_checkout_day and b_checkout_month

Please note that this information is specific to the US version. The Indian version may have different HTML structures.

UPDATE : It appears you were referring to the Emirates website.

For selecting the day, here's the XPath to consider :

Element el = driver.findElement(By.xpath("//input[@id='checkInDate']/following-sibling::span[contains(@class,'date')]/select"))

The XPaths for month check-ins, day checkouts, and month checkouts respectively are as follows:

"//input[@id='checkInDate']/following-sibling::span[contains(@class,'month')]/select"
"//input[@id='checkOutDate']/following-sibling::span[contains(@class,'day')]/select"
"//input[@id='checkOutDate']/following-sibling::span[contains(@class,'month')]/select"

Your best solution is to utilize these XPaths for accurate selections

You can also simply verify the correct date in the form input fields by setting the desired date value in:

<input id="checkInDate" class="day flL hasDatepicker" type="text"  autocomplete="false"     value="01/21/2013"     name="searchCriteria.criterion.stayDateRanges[0].start" style="display: none;">

This method should work effectively (note the value="01/21/2013")

UPDATE2 :

Have you attempted to interact with the actual elements visible to the user? Start by clicking on the dropdown arrow (

"//input[@id='checkInDate']/following-sibling::span[contains(@class,'date')]/"

), which will display the select used by the JavaScript date selector. From there, you can make the appropriate selection by clicking on:

//ul[contains(@class,'selectBox-dropdown') and contains(@style,'block')]//a[@rel="25"]

If the desired day is 25, look at the <ul>s/<li>s at the bottom of the page to find the correct xpath for selection

Unable to automate the selection of a dropdown menu using Selenium WebDriver

Answer №1

Answer №2

Similar questions

Here is a unique rewrite: "Strategies for effectively passing the data variable in the geturldata function within Vue.js on the HTML side vary

automatically loading data using jquery

Utilizing the controller specified in the template that has been included

Counting the days: how to calculate without using negative numbers

Facing challenges when running asynchronous mocha tests using async/await syntax

Identifying the camera model using getMediaStream

Having difficulties accessing the /playlists route with express and app.get in my code

What steps can I take to troubleshoot the "Element type is invalid" error in my React application?

Implement the useEffect() function to handle the loading of external JavaScript on the client-side, replicating the

SPRING --- Tips for sending an array of objects to a controller in Java framework

How can I make Material UI's grid spacing function properly in React?

"Learn how to dynamically update the value of a text box using a loop in jQuery when the

How can I fetch data from SQL using JavaScript based on a specific value in PHP?

Detecting characters in jQuery's onKeyPress with case sensitivity

What is the best way to retrieve a file's creation date using the file System module in Node.js

Ways to retrieve the parent DIV's width and adjust the child DIV's width to match

Adjusting the amount of rows and columns in a fluid manner with CSS grid (updated)

What is the simplest method to create a scroller for engaging narratives?

I attempted to create a test scenario to verify that the length of the tasks array is not negative. However, when trying to test this using 'not.toBe' in the code below, an error was encountered

The issue with jspdf is that it is failing to generate PDF documents of