jquery ui - How to capture and assert the value populated via a datepicker using selenium

Question

I'm trying to test the date-picker to this site. and selected a date , which resulted in populating a text field with the selected date.

Now I wanted to validate, if the date selected is as expected. I was able to do up to selecting the date and populating the text field.

But when trying to validate the value, I'm getting back spaces from text field.

How can I capture the value populated by date-picker and assert the same ?

I have done to this below mentioned code, but it didn't help me.

driver.get(" https://www.jqueryui.com");
driver.findElement(By.linkText("Datepicker")).click();
WebElement element1 = driver.findElement(By.className("demo-frame"));
driver.switchTo().frame(element1);
driver.findElement(By.xpath(".//*[@id='datepicker']")).click();        
driver.findElement(By.xpath("//span[contains(text(),'Next')]")).click();
List<WebElement> element = driver.findElements(By.xpath(".//*[@id='ui-datepicker-div']/table/tbody/tr/td"));
int count = element.size();
for (int i = 0; i < count; i++) 
{
    String data = element.get(i).getText();
    if("2".equals(data))
    {
        element.get(i).click();
        break;
    }
}

driver.findElement(By.xpath(".//*[@id='datepicker']")).click();
WebElement element2 = driver.findElement(By.xpath(".//*[@id='datepicker']"));

String value = element2.getText();
Assert.assertEquals("04/02/2017",value);

My expectation is value will hold 04/02/2017, as 2 was selected. Apparently DOM is not updated. So, what should I be doing here to capture and assert the value selected ?

Answer 1

Explanation: Use .getAttribute() to get the value of date selection and pass attribute as value For more details on this refer below code.

For Explanation refer below image also.

Try this below code, I have done this solution using array method.

driver.get("https://jqueryui.com/datepicker/");
driver.manage().window().maximize();
driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

WebElement iframe = driver.findElement(By.tagName("iframe"));        //Move inside iframe.
driver.switchTo().frame(iframe);
Thread.sleep(2000);

WebElement date_texbox = driver.findElement(By.id("datepicker"));    
date_texbox.click();                                             //Date-picker text-box element
Thread.sleep(2000);
WebElement date = driver.findElement(By.xpath("//a[@title='Next']/span"));  
date.click();                                                     //Move to the April Month 2017 from date picker.

int[] array_date = new int[]{1,2,3,4,5,6,7,8};   //Create int array for dates.

int k = 1;                                       //K refers to tr tag
int l = 7;                                       //l refers to td tag
for(int j=0;j<array_date.length;j++)
{
    if(l==8)
    {
        k++;
        l=1;        
    }

    if(k==2 & l==1)
    {
        System.out.println("Date = 04/02/2017");
        String second_april_2017 = driver.findElement(By.xpath("//table/tbody/tr[2]/td[1]/a")).getText();
        System.out.println(second_april_2017);  

        driver.findElement(By.xpath("//table/tbody/tr["+k+"]/td["+l+"]/a")).click();

        String get_date_value = driver.findElement(By.id("datepicker")).getAttribute("value");
        System.out.println("Date Selection Value = " +get_date_value);
        Assert.assertEquals("04/02/2017", get_date_value);                          //verify condition for this 04/02/2017 date.
    }

    System.out.println(k);
    System.out.println(l);

    if(!(k==2 & l==1))     //if date selection is 04/02/2017 then this condition will not execute.
    {
        driver.findElement(By.xpath("//table/tbody/tr["+k+"]/td["+l+"]/a")).click();     // pass array value of k and l to the xpath.
    }

    Thread.sleep(2500);
    date_texbox.click();
    Thread.sleep(2500);
    l++;
}

driver.switchTo().defaultContent();    //Move out side to the frame.