Manejo de DatePicker

La mayoría de los datapickers no permiten modificar el input de la fecha de forma sencilla, ya sea enviando con el comando de enviar texto web o modificando el value con Javascript.

Dependiendo de la librería o framework que utilice la página que quieres automatizar, será el método que debes seguir.

Angular

Para saber si la web está desarrollada en angular, el input que laza el datepicker debe tener algún atributo que comience con ng-, por ejemplo:

<input id="datepicker_id" type="date" ng-model="mov.calendar.fromDate" ng-change="mov.update"/>

Para modificar datepicker, debes seguir los siguientes pasos:

1. Copiar el JS Path (igual como copias el XPath) y almacenarlo en una variable, en el ejemplo, la variable se llama element .
2. Obtener el nombre del modelo. En el input de ejemplo, el modelo (ng-model) es mov.calendar.fromDate. Esta es la variable que debe modificarse con la fecha, lo escribimos después de scope() (ver ejemplo)
3. Si el input tiene el atributo ng-change, se debe repetir lo mismo que en el paso anterior, invocando la función.
4. Escribir el script de ejemplo en el comando ejecutar javascript reemplazando con los valores correspondientes.

Ejemplo:

element = document.querySelector("#datepicker_id") // Este es el JS Path
 angular.element(element).scope().mov.calendar.fromDate = "{fecha}" // Acá modificamos la fecha
 angular.element(element).scope().mov.update() // Acá aplicamos el cambio

Para saber si una aplicación está desarrollada con ember, debemos buscar si al inicio del body de la página, tiene algún id o clase con la palabra ember.

Para modificar el datepicker, se deben seguir estos pasos:

1. Obtener el nombre que aparece en la ruta de la página, luego del #. Ejemplo, si la ruta es tupagina.com/#/reporte-control, el nombre del control será reporte-control.
2. Obtener el id del input que se quiere modificar.
3. Escribir el script de ejemplo en el comando ejecutar javascript reemplazando con los valores correspondientes.

Input de ejemplo: <input id="fechaInicial" type="date"/>

Script de ejemplo:

function getApplication() {
 var namespaces = Ember.Namespace.NAMESPACES, application;
 namespaces.forEach(function(namespace) {
  if(namespace instanceof Ember.Application) {
   application = namespace;
   return false;
  }
 });
 return application;
}
app = getApplication() // obtenemos la aplicación de ember
controller = app.__container__.lookup('controller:reporte-control') //obtenemos el controlador
controller.set('fechaInicial', new Date("{fechaInicial}")) // modificamos la fecha

Nuxtjs

Para saber si una aplicación está desarrollada con nuxt , debemos buscar si al inicio del body de la página, tiene algún id con la palabra nuxt, por ejempo <Div id="__nuxt">.

Para modificar el datepicker, se deben seguir estos pasos:

1. buscar el elemento con atributo __vue__
2. Si no está, entonces buscar el ancestro que lo tenga y desde el atributo __vue__ buscar el Children(hijo)
3. luego buscar el modelo y ejecutar el callback con la fecha

Ejemplo:

element = document.getElementById('id').__vue__// buscar el elemento con atributo __vue__
element = document.getElementById('id_ancestro')._vue__.children[pos_element]// Si no está, entonces buscar el ancestro que lo tenga y desde el atributo __vue__ buscar el Children(hijo)
element.data.model.callback(new Date(mm-dd-yyyy))// luego buscar el modelo y ejecutar el callback con la fecha