What is preventing the Date Picker in Selenium from accepting attribute values when using JavaScript for the Spice Jet application?

My implementation of JavaScript for the Date picker in Selenium is running successfully, however, the date is not being selected in the date picker.

    public class SpicJetBooking {
    static WebDriver driver;
    public static void main(String[] args) throws InterruptedException {

        ChromeOptions options = new ChromeOptions();
        options.addArguments("--disable-notifications");
        System.setProperty("webdriver.chrome.driver","C:\\Downloads\\chromedriver.exe");
        driver = new ChromeDriver(options);
        driver.manage().window().maximize();
        driver.manage().deleteAllCookies();
        driver.manage().timeouts().pageLoadTimeout(Duration.ofSeconds(10));
        driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));

        driver.get("https://www.spicejet.com/");
        System.out.println("Site Opened");
        Thread.sleep(3000);
        driver.findElement(By.xpath("//div[contains(text(),'round trip')]")).click();
//        driver.findElement(By.xpath("//div[@data-testid='return-date-dropdown-label-test-id']")).sendKeys("Wed, 23 Mar 2022");
//        WebElement element = driver.findElement(By.xpath("//div[contains(text(),'Return Date')]"));
        WebElement element = driver.findElement(By.xpath("//div[@data-testid='return-date-dropdown-label-test-id']"));
//        element.click();
        String datVal = "Wed, 23 Mar 2022";
        selectDateByJS(driver, element, datVal);
        System.out.println("Complete Execution");
    }
    public static void selectDateByJS(WebDriver driver,WebElement element, String datVal){
        JavascriptExecutor js = (JavascriptExecutor) driver;
        js.executeScript("argument[0].setAttribute('value','"+datVal+"');", element);
//        String scriptVal = "arguments[0].setAttribute('value','\"+datVal+\"')";
//        String scriptVal = "arguments[0].setAttribute('value','12-Mar-2022')";
//        js.executeScript(scriptVal, element);
        System.out.println("JS Executed");
    }
}

Although I referred to Selecting calendar date from JavaScriptExecutor in Selenium, it seems that the date picker has been updated and the solution is no longer effective

https://i.sstatic.net/CQ8B8.png

https://i.sstatic.net/YiWwp.png

Answer №1

I attempted:

$x("(//div[text()='Return Date'])/following-sibling::div/child::div")[0].innerText = 'Wed, 23 Mar 2023'

and it worked perfectly for me. It is essential to use:

(//div[text()='Return Date'])/following-sibling::div/child::div** xpath as a locator and update your **selectDateByJS

method line where you are executing js

js.executeScript("argument[0].innerText="+datVal, element);

Here is the complete code:

public class SpicJetBooking {
static WebDriver driver;
public static void main(String[] args) throws InterruptedException {

    ChromeOptions options = new ChromeOptions();
    options.addArguments("--disable-notifications");
    System.setProperty("webdriver.chrome.driver","C:\\Downloads\\chromedriver.exe");
    driver = new ChromeDriver(options);
    driver.manage().window().maximize();
    driver.manage().deleteAllCookies();
    driver.manage().timeouts().pageLoadTimeout(Duration.ofSeconds(10));
    driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));

    driver.get("https://www.spicejet.com/");
    System.out.println("Website Opened");
    Thread.sleep(3000);
    driver.findElement(By.xpath("//div[contains(text(),'round trip')]")).click();
    WebElement element = driver.findElement(By.xpath("(//div[text()='Return Date'])/following-sibling::div/child::div"));
    String datVal = "Wed, 23 Mar 2022";
    selectDateByJS(driver, element, datVal);
    System.out.println("Execution Complete");
}
public static void selectDateByJS(WebDriver driver,WebElement element, String datVal){
    JavascriptExecutor js = (JavascriptExecutor) driver;
    js.executeScript("argument[0].innerText="+datVal, element);
    System.out.println("JS Executed");
}
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using xmlHttpRequest, the euro symbol may appear as a question mark

This dynamic script (taken from dynamicdrive) allows me to fill a div with the specified id dynamically: var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no) var loadedobjects="" var rootdomain="ht ...

Attaching a text to the root URL using Protractor with Selenium

In my Config file, I have set a baseURL. I currently have 5 different specs running simultaneously, each with a unique GUID added to the baseURL. Each of my spec contains the following code: //The below one navigates to the Home Page for my credentials. ...

How can I empty the value of a UI widget (such as an input field, select menu, or date picker) in Webix UI?

Is there a way in Webix UI to clear widget values individually, rather than collectively based on form id? I'm looking for a method using a mixin like $$(<form-id>).clear(). I need control of individual elements, so is there a proper way to res ...

Press the button using Selenium

Whenever I try to click on the list, it keeps resulting in a time out error. You can access the page through this link: https://i.sstatic.net/eH3lf.png The following is the code snippet: from selenium.webdriver.common.by import By from selenium.webdriver ...

NodeJS: Error - Unexpected field encountered in Multer

Having trouble saving an image in a SQL database and getting the error message MulterError: Unexpected field. It worked fine in similar cases before, so I'm not sure what's wrong. H E L P!! <label id="divisionIdLabel" for="divis ...

Tips for accessing the parent reference while binding using the .on() method

I needed to attach an event like this $("div").on("click", "li",function() { var div= $(this).parent().parent(); //this is what i'm using //..... }); above the <div> <ul> <li>1</li> <li>e2</l ...

Developing custom functions in ejs for individual posts

In my blog, I have a feed where all users' posts are displayed dynamically using ejs. There is a comment section that remains hidden until the user clicks the comments button. Below is a snippet of my ejs file: <% posts.forEach(post => { %> ...

Trimming whitespace from strings within HTML tag attributes can be achieved using various methods

I have been reviewing the .cshtml pages of a website with the aim of adding ID attributes to various divisions and elements for testing purposes. These pages utilize AngularJS, and many of the elements I need to add ID attributes to are part of a list tha ...

Formik state is mysteriously reverting field values to their default state

I've encountered an issue with my form and song state while trying to add a new field called "appleMusicId". Unfortunately, every time I add this field, it seems to reset the values of timeDescription and sceneDescription. I've spent hours tryin ...

Difficulty encountered in displaying HTML within a React component

Struggling to display HTML in my React code, whenever I click 'signup' after starting the page, it shows the 'login' view instead. Could there be an issue with how I'm linking everything together? App.js class App extends Compon ...

Node.js server allows for accessing AJAX requests seamlessly

I need to send a parsed AST of JavaScript code to a server for processing, and then receive a list of completions back. However, when I log the AST to the client console before sending it, the structure appears like this: [ { "id":0, "type":"Program", "ch ...

How can I retrieve the xpath of an element that is saved in a separate file using the page object model methodology?

Let's say I have saved a WebElement in the LoginPage.java class as seen below. @FindBy(xpath="//input[@name='user_name']") WebElement username; Now, from my test file, VerifyLogin.java, I need to access the xpath of the username stored in ...

Identify the nested Object within the Json data

I am looking to add and name a nested object within my Json data structure. The current structure of my Json is as follows: { "MH": [ { "MHF46": "Ledig", "MHF60": "60", }, ...

Issue with Vue 3: defineAsyncComponent is not able to resolve .vue files or split chunks properly

I'm currently attempting to dynamically load Vue 3 components in an asynchronous manner. I have come across a function called defineAsyncComponent which is intended to be utilized as shown below: const GameUI = defineAsyncComponent(()=>import(file ...

Using Accordions in Jquery to dynamically adjust page height during ajax calls

I am currently using AJAX to call in a page and animate its height successfully. However, I have encountered an issue with an accordion-like function that is supposed to toggle the visibility of an element and adjust the height of the containing element ac ...

To achieve proper display of multiple boxes, it is essential for each box to be

My current approach involves adding boxes to the scene based on specific dimensions for height, width, and depth, and it works perfectly when the boxes are all square. https://i.sstatic.net/HdDSX.png However, the issue arises when I try to use a rectangu ...

Transforming a string into JSON format for the purpose of implementing JSON Patch

I am encountering an issue while attempting to retrieve a request using postman for a JSON string in order to apply a JSON patch. Unfortunately, I am facing difficulties in converting the string to JSON once the data is posted through a variable. Each time ...

ms-card malfunctioning due to data issues

I'm facing difficulties in transferring the data to the template. Although I can access the data in HTML using vm.maquinas and maquina, I am unable to pass it to the TEMPLATE through ng-model. Information about ms-cards was not abundant. Module ang ...

What is the method to select a checkbox in Python3 using Selenium?

I usually try to avoid using xpaths unless absolutely necessary. Currently, I'm experimenting with a simple checkbox found here: w3schools.checkbox My goal is to select the "I have a bike" option. I attempted to use the find_element_by_name method on ...

Convert the html list to a select dropdown with a hidden input type

In the process of revamping some code created by a fellow colleague, I have decided to modify his list into a more suitable select-option drop-down list. The PHP code provided by him looks like this: echo "<ul>"; echo "<li><a href='#& ...