Adaptador de GUI HTML

TAST ha creado este Adaptador que nos permite interactuar con todo tipo de páginas web para: navegar, extraer datos, validar, etc. A través del Adaptador GUI HTML, TAST se conecta con aplicaciones web basadas en HTML y es posible probar dichas aplicaciones. Este adaptador tiene un importante compañero llamado Mapeo Selectivo, que es un asistente JavaScript que aporta una interfaz de usuario más amigable para ayudar a la creación de mapeos TAST. Es posible realizar pruebas individuales con este Adaptador o pruebas End to End conectando con otros Adaptadores.

En el mapeo de este Adaptador necesitamos proporcionarle unos datos que son necesarios para establecer la conexión y poder hacer uso de este:

• Url: primera dirección web a localizar cuando se crea el Adaptador.
• Browser (opcional): el navegador que utilizará en la prueba (por ejemplo, IE, Chrome). Se usa Internet Explorer por defecto.
• Validate Insert Values: indica si el Adaptador debe validar o no los valores que recibe el Adaptador durante la ejecución. Por defecto, no está marcada. La recomendación es que se mantenga sin revisar por razones de rendimiento. Este campo es muy útil en casos de pruebas especiales, pero en general no es necesario usarlo.
• Full Screenshot: en este “checkbox” si lo marcamos tomará una captura de pantalla de toda la página (no solo la parte visible), Si no está marcado, los pantallazos se tomarán de la parte visible de la pantalla.
• Create Selenium JSON: haciendo click en este checkbox se genera un archivo .side tras la ejecución de la navegación.
  
  

Los siguientes parámetros se usarán únicamente si se quiere emular la vista móvil en el navegador.

• Emulador del dispositivo: se utiliza para poder tener la vista móvil en la ejecución. Permite elegir el emulador entre los distintos dispositivos proporcionados. Si no se selecciona ninguno, no habrá emulación; la ejecución se realizará con el formato estándar. Cuando se elige un dispositivo, se muestran las medidas por defecto de ese dispositivo en los tres campos siguientes y el formato de la ejecución será con esas medidas. Estas medidas se pueden cambiar manualmente a elección del usuario:
  
  
  • Ancho del dispositivo
  • Altura del dispositivo
  • Zoom del dispositivo
    
    
• Modo horizontal: haciendo click en este checkbox, la vista de la ejecución será en formato horizontal.

• allOptionsAreSelected(Element): verifica si todas las opciones están seleccionadas. Se aplica para seleccionar múltiples html. Como parámetro de entrada tenemos Element (Element es un elemento html con el cual se interactúa, como son los links, inputs, checks, etc. También hay una entrada SearchBy que se utiliza para buscar el tipo de “etiqueta” o “valor” que puede tener el elemento. Esas etiquetas son ClassName, CssSelector, Id, LinkText, Name, PartialLinkText, TagName y xPath).

• checkBox(Element): marca la casilla de verificación en el elemento. Como parámetro de entrada tenemos Element; en esta función el usuario le indica cual es el checkbox que tiene que activar mediante este parámetro, y lo marca.

• checkRadio(Element): marca la opción del botón de radio (radio button). Como parámetro de entrada contamos con un Element que en este caso es para indicar que botón de radio queremos marcar.

• clear(Element): borra el valor del elemento. Se indica con el parámetro Element que debe borrar la función.

• clearAndType(Element): borra el valor del elemento y escribe el nuevo valor. Como con la función clear, le indicas con el parámetro Element que debe borrar y escribir y con un value que añadimos en el mapeo del mensaje, el mensaje que queremos que escriba.

• click(Element): hace click con el ratón sobre el elemento html. El elemento html en cuestión se determina con el parámetro de entrada Element.

• clickAction(Element): esta PF tiene un comportamiento similar al de click() PF. Sin embargo, en este caso, antes de hacer click en el control, simula el movimiento del ratón. Este comportamiento es obligatorio en varias aplicaciones.

• clickAndHold(Element,Time): función que hace click en un elemento y lo deja pulsado. Esta función obtiene un parámetro de entrada (Element) en el cual se indica en que elemento hay que pulsar y otro parámetro (Time) en donde el usuario indica el tiempo que el elemento se mantendrá pulsado (como valor opcional). Por defecto la duración de la pulsación será de 1 segundo. También, esta función recoge un pantallazo a mitad del tiempo indicado en el parámetro time.

• clickByJavaScript(Element): hace click en el elemento html mediante ejecución de JavaScript.

• clickLink(Element): hace click con el ratón sobre el elemento html. Se usa cuando se abre una nueva ventana. Cuando la aplicación abre una nueva página html, tenemos que usar clickLink porque la aplicación no tiene el foco de la segunda página html.

• clickPrint(Element): hace click en el botón 'print' de la página, este se indica mediante el parámetro de entrada Element (solo en caso de que la pagina en cuestión tenga botón de imprimir).

• closeAllWindows(): cierra todas las ventanas del adaptador. No necesita parámetros de entrada.

• closeOthersWindows(): cerrar todas las ventanas extra abiertas, dejando la principal activa. No necesita parámetros de entrada.

• closeWindow(Element): cierra el navegador de prueba. No podemos usar la función closeWindow si más tarde usamos la función openUrl, porque perderemos la instancia HTML GUI Adaptor. Como parámetro de entrada tenemos Element, con seleccionar cualquier elemento de la página que queremos cerrar.

• cookiesManage: hace click en el botón de aceptar las cookies.

• countElements(Element): cuenta los elementos encontrados en html y guarda el valor en una variable entera. Como parámetro de entrada tenemos Element, con el cual indicamos que parte de dicho html queremos que cuente.

• deleteAllCookies(): elimina todas las cookies del navegador. No requiere parámetros.

• deselectAllOptions(Element): anula todas las opciones de html seleccionado. Se aplica cuando se han seleccionado múltiples html, como parámetro de entrada tenemos un Element, indicamos la parte de la página en la que queremos que se aplique esta función.

• doubleClick(Element): hace doble click en el elemento. Con el parámetro de entrada Element indicamos que elemento queremos que se use el doble click.

• dragAndDrop(): función para mover un elemento a otro. Con el parámetro “ElementFrom” elegimos cual es el elemento que queremos desplazar y con el parámetro “ElementTo” la ubicación de otro elemento en el cual queremos que termine el primero. El resultado es el desplazamiento del elemento seleccionado.

• dragAndDropClickAndHold(): cumple la misma función que dragAndDrop, pero mueve el elemento de una manera diferente. Debe ser usado si no funciona dragAndDrop. Tiene un parámetro extra opcional para esperar antes de soltar el elemento seleccionado.

• fileDownload(Element): descarga un archivo. El parámetro de ruta (ruta para descargar el archivo) es opcional. Si no se especifica, el archivo se descargará de forma predeterminada en la carpeta de registros.
  • En el diagrama no es necesario utilizar previamente un click o cualquier otra acción.
  • Actualmente, hay dos tipos de elementos permitidos para ser descargados:
    • files: En este caso, al inspeccionar la página desde la que se descargará el archivo, debe aparecer la etiqueta <href>, que incluirá la URL desde la que se descargó el archivo:
      
      
      
      
    • images: en este caso, al inspeccionar la página desde donde se descargará la imagen, debe aparecer el elemento 'src':
      
      
      
      

• fileDownloadDialog(Element): descarga un archivo.
  • Se utiliza cuando en la página desde la que se quiere descargar el archivo hay un botón, enlace u otro elemento que al pulsar sobre él se descarga un archivo.
  • Tener en cuenta que cuando se utiliza fileDownloadDialog no es necesario abrir ninguna ventana del Explorador, ya que de lo contrario, en la ejecución de la prueba se perderá el foco y la prueba puede fallar.
    
    Ejemplo de una página donde se puede usar filedownload:

• fileDownloadURL(URL To Download a File. Path To Store The File): descarga un archivo de una URL determinada a una ruta específica donde se almacenará el archivo descargado.
  • URL para descargar un archivo: debe proporcionar una URL desde la cual descargará directamente un archivo.
  • Ruta para almacenar el archivo: este es un archivo opcional. En caso de que este campo esté vacío, el archivo se almacenará en la carpeta predeterminada actual para la descarga de archivos, de lo contrario, el archivo se almacenará en la carpeta asignada por el usuario.

• fileUpload(Element): sube un archivo desde una página HTML. Para usar esta FP debe acceder a una página que tenga un elemento de entrada para subir archivos (por ejemplo, https://www.sendspace.com/), que es la que está preparada para subir archivos. El fileUpload PF tiene tres parámetros: dos para la información sobre el elemento de entrada en una página (Buscar por y Elemento), y otro para la información sobre el archivo al que se quiere subir (Valor).
  

• fileUploadDialog(Element, fileUrl, WaitinSeconds): sube un fichero a través de la ventana modal de Windows. Con el parámetro de entrada Element, elegimos donde hacer el click e invocar el dialogo de subir. El parámetro fileUrl recoge la ruta del fichero a subir y el parámetro wait in seconds sirve para indicar cuántos segundos hay que esperar antes de pegar el fileUrl; por defecto este tiempo será 1 segundo. Por último, esta función recoge un pantallazo cuando aparece el dialogo de subida de fichero.

• focus(): función para poner el foco en un elemento. Como parámetro tenemos Element con el cual se indicará que elemento queremos que contenga el foco a partir de este momento.

• generateFileAsEvidence: genera un archivo de texto como evidencias para el test.

• getAttribute(Attribute): obtiene texto, valor, atributo del elemento y lo guarda en la variable. Se localiza con un SearchBy.
  Si el atributo está presente y el campo deshabilitado se devuelve true, si no existe el atributo declarado y el campo es editable se devuelve un string vacío con un mensaje de que el atributo no existe. La función devuelve un string vacío “ ” para cualquier valor de atributo que no exista.

• getPageSource: descarga la fuente html de la página enfocada y devuelve la ruta al archivo.

• hasOptionWithValue(Element): verifica si existe una opción con un valor determinado. Se aplica para seleccionar el elemento HTML.

• isCurrentUrlContains(String): compruebe si la URL actual contiene cadena.

• isCurrentUrlEquals(String): comprueba si la URL actual es igual a la cadena exacta.

• isCurrentUrlMatches(RegularExpresion): comprueba la URL del navegador con una expresión regular.

• isDisplayed(Element): comprueba si este elemento se muestra o no.

• isExist(Element): comprueba si el elemento existe e imprime el resultado en el archivo de registro del usuario.

• isExistWithoutScroll(): comprueba si el elemento existe sin hacer “scroll” hacia él y escribe el resultado en el log. Su parámetro de entrada “element” se usa para escribir el elemento que queremos comprobar.

• isSelected(Element): determina si este elemento está seleccionado o no. Esta operación solo se aplica a elementos de entrada como casillas de verificación, botones de selección y de opción.

• isTitleEquals(String): comprueba si el título de la página es exactamente al de la cadena indicada.

• isTitleMatches(RegularExpression): comprueba si el título de la página coincide con la cadena indicada en la expresión regular

• javascriptAlertAccept: haga click en el botón Aceptar alerta de javascipt.

• javascriptAlertCancel: haga click en Cancelar el botón de alerta de javascipt.

• javascriptExecute(String): permite ejecutar javascript personalizado durante la prueba. Algunos ejemplos de uso de la función javascriptExecute:
  
  
  • Buscar elemento por ID y poner el valor:
    documento.getElementById(“ID del elemento si existe”).valor = “50”;
  • Buscar por nombre y poner el valor:
    documento.getElementsByName(“savingRatePerMonth”)[0].value=“50”;
  • Navegue a otra página con javascript:
    documento.ubicación.href = 'http://www.mozilla.org';
  • Obtener el atributo de un elemento:
    var atributo = document.getElementById(“elementId”).getAttribute(“href”);
    
    esta función no recoge el tipo de datos seleccionado en el diagrama para el output, en su lugar, devuelve el tipo de dato que da la función.

• javascriptExecuteWithParameters (code, arguments): permite ejecutar javascript personalizado durante la prueba, con los valores pasados como parámetros. Para usarlos, debe utilizar los argumentos[i] donde i es la posición del parámetro. El índice del primer parámetro es 0 (i=0).
  Un ejemplo de la función javascriptExecuteWithParameters:
  • Buscar un elemento por su nombre y poner el valor pasado como primer parámetro:
    document.getElementsByName(“savingRatePerMonth”)[0].value=arguments[0];
    
    CONSEJO: para obtener la URL de la página donde se encuentra el test y convertirla en una variable para poder usarla en el parámetro “code” tendremos que poner: return window.location.href; y crear una variable de salida para guardar el link.
    
    
• login(): permite al usuario iniciar sesión en un solo paso.

• mouseOver: sitúa el ratón sobre el elemento HTML de la página indicada en la pestaña Mapeo.

• openUrl(String): abre una nueva url del navegador. No podemos usar la función closeWindow si más tarde usamos la función openUrl, porque perderemos la instancia HTML GUI Adaptor.

• optionWithValueIsEnabled(Element): comprueba si la opción con un valor determinado está habilitada. Se aplica para seleccionar el elemento HTML.

• optionWithValueIsSelected(Element): comprueba si se ha seleccionado la opción con un valor determinado. Aplica para seleccionar un elemento HTML.

• pressEnter(Element): hace simular la pulsación de la tecla “Enter” en el teclado sobre un elemento HTML.

• resetToDefaultContent: esta función se utiliza para dejar un frame, debería usarse cuando se termine de usar el frame o cuando se quiera cambiar a otro frame.

• rightClick(Element): esta función hace click con el botón derecho del ratón sobre el elemento introducido.

• scrollToElement: hace scroll en la página hasta el elemento HTML especificado.

• searchTextOnPage: busca el texto en la página actual y devuelve el texto del elemento encontrado. Usa el parámetro Exact text para encontrar un texto exacto, por defecto es false. Usa el parámetro Count number para obtener el elemento desde el array de los elementos encontrados con este texto.

• searchTextOnPageCount: busca el texto en la página actual y devuelve el número de elementos encontrados con este texto. Usa el parámetro Exact text para encontrar un texto exacto, por defecto es false.

• searchTextOnPageXPath: busca el texto en la página actual y devuelve el Xpath hacia el elemento que contiene este texto. Usa el parámetro Exact text para encontrar un texto exacto, por defecto es false. Usa el parámetro Count number para obtener el elemento desde el array de los elementos encontrados con este texto.

• select(Element): selecciona una opción de la lista del elemento HTML seleccionado. Se selecciona mediante el parámetro de entrada element (lo busca y se puede introducir un valor de ser necesario).

• selectAllOptions(Element): selecciona todas las opciones de HTML seleccionado. Se aplica para seleccionar múltiples HTML. Se seleccionan mediante el parámetro de entrada Element (lo busca y se puede introducir un valor de ser necesario).

• selectOption(Element): se usa cuando no se encuentre el valor visible. Es necesario usar el valor de la opción: <valor=“”>.

• selectRadioButton: función para seleccionar el botón de opción por nombre de grupo y valor.

• sendKeys: manda una combinación de teclas para ejecutar.

• submit(Element): hace click en el elemento y envía el formulario. Con el parámetro de entrada (Element) indicas el elemento a pulsar.

• switchToFrame: esta función es para apuntar al frame que el usuario quiere. Se puede seleccionar con xpath, id, name o index. Si hubiese frames anidados, estarán separados por “;”.
  1.- index
  2.- name o id
  3.- Localizar el frame usando xpath o algún otro localizador.
  
  Por ejemplo:
  Si tienes este caso, y quieres seleccionar el frame con el nombre “a2”
  <frame name= “a”>
  <frame name= “a1”/>
  <frame name=“a2”/>
  </frame>
  En este ejemplo el frame “a” es un frame con 2 frames anidados “a1” y “a2”.
  
  switchToFrame se puede usar de la siguiente forma para acceder al frame que quieras:
  Si quieres acceder al primer frame switchToFrame(0); (el 0 es porque el primer frame empieza contando desde “0”) o switchToFrame(a), switchToFrame(*\\[name=“a”]).
  
  Para llegar al frame anidado a2 puedes hacerlo de la siguiente forma:
  1.- index: switchToFrame(0); switchToFrame(1)
  2.- name o id: switchToFrame(a); switchToFrame(a2)
  3.- xpath: switchToFrame(*\\[name=“a”]); switchToFrame(*\\[name=“a2”])
  O puedes hacerlo con un solo mensaje separándolo con ”;”:
  1.- index: switchToFrame(0;1)
  2.- name o id: switchToFrame(a;a2);
  3.- xpath: switchToFrame(*\\[name=“a”];*\\[name=“a2”]);
  Así es como se debería de utilizar preferiblemente.

• tableCellValue(): la función obtiene valor de la celda. Es necesaria la variable HtmlTable (el cual sacamos creando una PF “tableHTML”) y la posición del valor de la celda. El formato de la posición es: fila;columna. Las filas siempre comienzan en 1.

• tableCellXPathByPosition(): la función obtiene XPath de la celda. Es necesaria la variable HtmlTable y la posición del xpath desde la celda. El formato de la posición es: fila;columna. Las filas siempre comienzan en 1.

• tableColumnsNum(): función contar número de columnas. Como parámetro de entrada tenemos que indicar el tableHtml que anteriormente se ha debido crear.

• tableHLookUpValue(): la función le permite obtener valores de las celdas de la fila RetrieveRow haciendo una búsqueda por valor de SearchValue en las celdas de la fila SearchRow.

• tableHLookUpXPath(): la función le permite obtener XPath de las celdas de la fila RetrieveRow haciendo una búsqueda por valor de SearchValue en las celdas de la fila SearchRow.

• tableHtml(): esta función convierte la tabla HTML en una tabla de tast. Es necesario indicar Xpath de la tabla y si tiene encabezado por una variable booleana (true o false). Para todas las funciones del tipo tableHTML, es necesario utilizarlo previamente.

• tableRowsNum(): función contar número de filas. Como parámetro de entrada tenemos que indicar el tableHtml que anteriormente se ha debido crear.

• tableVLookUpValue(): la función permite obtener valores de las celdas de la columna RetrieveColumn haciendo una búsqueda por valor de SearchValue en las celdas de la columna SearchColumn.

• tableVLookUpXPath(): la función le permite obtener XPath de las celdas de la columna RetrieveColumn haciendo una búsqueda por valor de SearchValue en las celdas de la columna SearchColumn

• takeScreenshot(): toma una captura de pantalla de la página seleccionada.

• takeScreenshotFullPage(Searchby, XPathElements): esta función toma un pantallazo completo de la página HTML. La función tiene parámetros opcionales para buscar elementos en la página y ocultarlos. Una vez que el pantallazo lo ha tomado, se hace de nuevo visible. Se pueden ocultar varios parámetros indicando el Xpath separados por “;”. Esto permite al usuario ocultar, por ejemplo, la cabecera fija que se publica por cada salto de pantalla de la página.

• type(Element): añade un nuevo valor al valor existente del elemento. Se añade buscando el elemento.

• typeAction(): añade un nuevo valor al valor existente del elemento mediante una acción especial.

• typeKeys(): añade un nuevo valor al valor existente de las claves de envío del elemento.

• unCheckBox(Element): desmarca la casilla de verificación en el elemento.

• validateAttribute(Element): valida los atributos del elemento como: id, clase, href, tamaño, ancho, valor, texto … etc. Imprime el resultado en el archivo de registro de usuario.

• waitFor(TimeInSeconds): tiempo de espera en segundos recibido por el parámetro.

• waitForElement(Element, TimeSeconds): espera a que el elemento aparezca. Hasta que esté disponible en el código HTML, incluso si no está visible. Por defecto, webdriver esperará 30 segundos (podemos disminuir o aumentar este tiempo en el parámetro de entrada TimeInSeconds). La visibilidad significa que el elemento no solo se muestra, sino que también tiene un alto y un ancho que es mayor que 0.

• waitForElementTime(): espera a que el elemento “aparezca” hasta que esté disponible en el código HTML, aunque no sea visible. El webdriver espera 30 segundos por defecto. Con que no sea visible quiere decir que el elemento, aunque no se muestra, si tiene una altura y anchura mayor que 0, la función devuelve el tiempo en double. Los parámetros de entrada son TimeInSeconds para recoger el tiempo y Element para indicar de que elemento queremos recoger el parámetro.