Cómo seleccionar la fecha de DatePicker con Selenium WebDriver
En este tutorial vamos aprender a seleccionar un elemento que se encuentra dentro del control DatePicker, control que es muy habitual en las paginas o aplicaciones web. Sigue el paso paso y aprenderas a seleccionar una fecha especifica en un DatePicker.
Para la selección de DateTime, HTML5 tiene un nuevo control que se muestra a continuación.
Si quieres acceder a un ejemplo de este control de HTML presiona clic aquí
Si vemos el DOM del control DateTime Picker, sólo habrá un cuadro de entrada (input box) para la fecha y la hora.
Así que para manejar este tipo de control primero vamos a llenar la fecha sin separar con el delimitador (/), es decir, si la fecha es 09/25/2013, entonces vamos a pasar 09252013 al input text. Una vez hecho esto, cambiaremos el enfoque de la fecha a la hora pulsando la tecla ‘Tab ‘ y llenamos el tiempo.
Si necesitamos poner en el input text 02:45 PM, le pasaremos un ‘0245PM ‘ a la misma caja de entrada.
El código para DatePicker es parecido a este.
import java.util.List;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;
public class DateTimePicker {
@Test
public void dateTimePicker(){
System.setProperty("webdriver.chrome.driver", "chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
driver.get("http://demo.guru99.com/test/");
//Buscar el control datepicker
WebElement dateBox = driver.findElement(By.xpath("//form//input[@name='bdaytime']"));
//llenar la fecha (dd/mm/aaaa) sin delimiter (/)
dateBox.sendKeys("09252013");
//Presione la tecla Tab para desplazar el foco al campo time
dateBox.sendKeys(Keys.TAB);
//llenar el tiempo con 02:45 PM
dateBox.sendKeys("0245PM");
}
} El resultado debe ser algo así:
Veamos otro ejemplo de calendario. Vamos a utilizar Telerik DateTimePicker control. Se puede acceder aquí
Aquí si tenemos que cambiar el mes, tenemos que hacer clic en el centro de la cabecera del calendario.
Del mismo modo, si tenemos que cambiar el año, entonces podemos hacerlo haciendo clic los botones siguientes (>) o anteriores (<) en el DatePicker.
Y, finalmente, para cambiar el tiempo podemos seleccionar la hora correcta desde el menú desplegable (Nota: aquí el tiempo se selecciona en un espacio de 30 minutos, es decir, 12:00, 12:30, 1:00, 1:30, etc.).
Un ejemplo completo seria algo como esto:
import java.util.Calendar;
import java.util.List;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.annotations.Test;
public class DatePicker {
@Test
public void testDAtePicker() throws Exception{
//Fecha y hora que se establecerán en TextBox
String dateTime ="12/07/2014 2:00 PM";
WebDriver driver = new FirefoxDriver();
driver.manage().window().maximize();
driver.get("http://demos.telerik.com/kendo-ui/datetimepicker/index");
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
//botón para abrir el calendario
WebElement selectDate = driver.findElement(By.xpath("//span[@aria-controls='datetimepicker_dateview']"));
selectDate.click();
//Botón para desplazarse a la siguiente en el calendario
WebElement nextLink = driver.findElement(By.xpath("//div[@id='datetimepicker_dateview']//div[@class='k-header']//a[contains(@class,'k-nav-next')]"));
//Botón para hacer clic en el centro del encabezado del calendario
WebElement midLink = driver.findElement(By.xpath("//div[@id='datetimepicker_dateview']//div[@class='k-header']//a[contains(@class,'k-nav-fast')]"));
//botón para mover el mes anterior en el calendario
WebElement previousLink = driver.findElement(By.xpath("//div[@id='datetimepicker_dateview']//div[@class='k-header']//a[contains(@class,'k-nav-prev')]"));
//Particionar el datetime para obtener solo la parte de la fecha
String date_dd_MM_yyyy[] = (dateTime.split(" ")[0]).split("/");
//Obtener la diferencia de año entre el año actual y el año a establecer en el Calendario
int yearDiff = Integer.parseInt(date_dd_MM_yyyy[2])- Calendar.getInstance().get(Calendar.YEAR);
midLink.click();
if(yearDiff!=0){
//Si se tiene que mover a el proximo año
if(yearDiff>0){
for(int i=0;i< yearDiff;i++){
System.out.println("Year Diff->"+i);
nextLink.click();
}
}
//Si tienes que moverte al año anterior
else if(yearDiff<0){
for(int i=0;i< (yearDiff*(-1));i++){
System.out.println("Year Diff->"+i);
previousLink.click();
}
}
}
Thread.sleep(1000);
//Obtener todos los meses de calendario para seleccionar uno correcto
List<WebElement> list_AllMonthToBook = driver.findElements(By.xpath("//div[@id='datetimepicker_dateview']//table//tbody//td[not(contains(@class,'k-other-month'))]"));
list_AllMonthToBook.get(Integer.parseInt(date_dd_MM_yyyy[1])-1).click();
Thread.sleep(1000);
//obtener todas las fechas del calendario para seleccionar una correcta
List<WebElement> list_AllDateToBook = driver.findElements(By.xpath("//div[@id='datetimepicker_dateview']//table//tbody//td[not(contains(@class,'k-other-month'))]"));
list_AllDateToBook.get(Integer.parseInt(date_dd_MM_yyyy[0])-1).click();
///PARA EL TIEMPO
WebElement selectTime = driver.findElement(By.xpath("//span[@aria-controls='datetimepicker_timeview']"));
//clic en el boton timepicker
selectTime.click();
//Obtiene la lista de times
List<WebElement> allTime = driver.findElements(By.xpath("//div[@data-role='popup'][contains(@style,'display: block')]//ul//li[@role='option']"));
dateTime = dateTime.split(" ")[1]+" "+dateTime.split(" ")[2];
//Seleccionar el time correcto
for (WebElement webElement : allTime) {
if(webElement.getText().equalsIgnoreCase(dateTime))
{
webElement.click();
}
}
}
}
El resultado será algo como esto.
Te recomendamos continuar con nuestro Tutorial Selenium WebDriver hay temas que te ayudaran a continuar formándote como todo un Automatizador de Pruebas.
