El mayor obstáculo para probar ExtJS con Selenium es que ExtJS no procesa elementos HTML estándar y el IDE de Selenium generará ingenuamente (y con razón) comandos dirigidos a elementos que simplemente actúan como decoración, elementos superfluos que ayudan a ExtJS con todo el escritorio. mira y siente. Aquí hay algunos consejos y trucos que he recopilado mientras escribía una prueba automática de Selenium contra una aplicación ExtJS.
Consejos generales
Elementos de localización
Al generar casos de prueba de Selenium registrando las acciones del usuario con Selenium IDE en Firefox, Selenium basará las acciones registradas en los identificadores de los elementos HTML. Sin embargo, para la mayoría de los elementos en los que se puede hacer clic, ExtJS utiliza identificadores generados como "ext-gen-345" que probablemente cambiarán en una visita posterior a la misma página, incluso si no se han realizado cambios en el código. Después de registrar las acciones del usuario para una prueba, es necesario realizar un esfuerzo manual para realizar todas las acciones que dependen de los identificadores generados y reemplazarlos. Hay dos tipos de reemplazos que se pueden realizar:
Reemplazo de un localizador de identificación con un localizador CSS o XPath
Los localizadores CSS comienzan con "css =" y los localizadores XPath comienzan con "//" (el prefijo "xpath =" es opcional). Los localizadores CSS son menos detallados y más fáciles de leer y deberían preferirse a los localizadores XPath. Sin embargo, puede haber casos en los que sea necesario utilizar localizadores XPath porque un localizador CSS simplemente no puede cortarlo.
Ejecutando JavaScript
Algunos elementos requieren más que simples interacciones de mouse / teclado debido a la compleja representación realizada por ExtJS. Por ejemplo, un Ext.form.CombBox no es realmente un <select>elemento, sino una entrada de texto con una lista desplegable separada que se encuentra en la parte inferior del árbol del documento. Para simular correctamente una selección de ComboBox, es posible simular primero un clic en la flecha desplegable y luego hacer clic en la lista que aparece. Sin embargo, localizar estos elementos mediante localizadores CSS o XPath puede resultar engorroso. Una alternativa es ubicar el propio componente ComoBox y llamar a métodos en él para simular la selección:
var combo = Ext.getCmp('genderComboBox'); // returns the ComboBox components
combo.setValue('female'); // set the value
combo.fireEvent('select'); // because setValue() doesn't trigger the event
En Selenium, el runScriptcomando se puede usar para realizar la operación anterior de una forma más concisa:
with (Ext.getCmp('genderComboBox')) { setValue('female'); fireEvent('select'); }
Hacer frente a AJAX y renderizado lento
Selenium tiene sabores "* AndWait" para todos los comandos para esperar a que se cargue la página cuando una acción del usuario da como resultado transiciones o recargas de página. Sin embargo, dado que las recuperaciones AJAX no implican cargas de página reales, estos comandos no se pueden usar para la sincronización. La solución es hacer uso de pistas visuales como la presencia / ausencia de un indicador de progreso AJAX o la aparición de filas en una cuadrícula, componentes adicionales, enlaces, etc. Por ejemplo:
Command: waitForElementNotPresent
Target: css=div:contains('Loading...')
A veces, un elemento aparecerá solo después de una cierta cantidad de tiempo, dependiendo de la rapidez con que ExtJS procese los componentes después de que una acción del usuario produzca un cambio de vista. En lugar de utilizar retrasos arbitrarios con el pausecomando, el método ideal es esperar hasta que el elemento de interés esté a nuestro alcance. Por ejemplo, para hacer clic en un elemento después de esperar a que aparezca:
Command: waitForElementPresent
Target: css=span:contains('Do the funky thing')
Command: click
Target: css=span:contains('Do the funky thing')
Confiar en pausas arbitrarias no es una buena idea ya que las diferencias de tiempo que resultan de ejecutar las pruebas en diferentes navegadores o en diferentes máquinas harán que los casos de prueba sean inestables.
Elementos en los que no se puede hacer clic
El clickcomando no puede activar algunos elementos . Esto se debe a que el detector de eventos está en realidad en el contenedor, observando los eventos del mouse en sus elementos secundarios, que finalmente llegan al padre. El control de pestañas es un ejemplo. Para hacer clic en la pestaña a, debe simular un mouseDownevento en la etiqueta de la pestaña:
Command: mouseDownAt
Target: css=.x-tab-strip-text:contains('Options')
Value: 0,0
Validación de campo
Los campos de formulario (Ext.form. * Componentes) que tienen expresiones regulares o vtypes asociados para la validación activarán la validación con un cierto retraso (ver la validationDelaypropiedad que está establecida en 250ms por defecto), después de que el usuario ingresa el texto o inmediatamente cuando el campo pierde foco - o desenfoques (ver la validateOnDelaypropiedad). Para activar la validación de campo después de emitir el comando de tipo Selenium para ingresar texto dentro de un campo, debe realizar una de las siguientes acciones:
Activación de la validación retrasada
ExtJS activa el temporizador de retardo de validación cuando el campo recibe eventos de activación. Para activar este temporizador, simplemente emita un evento de keyup ficticio (no importa qué tecla use, ya que ExtJS lo ignora), seguido de una breve pausa que es más larga que validationDelay:
Command: keyUp
Target: someTextArea
Value: x
Command: pause
Target: 500
Activación de la validación inmediata
Puede inyectar un evento de desenfoque en el campo para activar la validación inmediata:
Command: runScript
Target: someComponent.nameTextField.fireEvent("blur")
Comprobación de los resultados de la validación
Después de la validación, puede verificar la presencia o ausencia de un campo de error:
Command: verifyElementNotPresent
Target: //*[@id="nameTextField"]/../*[@class="x-form-invalid-msg" and not(contains(@style, "display: none"))]
Command: verifyElementPresent
Target: //*[@id="nameTextField"]/../*[@class="x-form-invalid-msg" and not(contains(@style, "display: none"))]
Tenga en cuenta que la verificación "display: none" es necesaria porque una vez que se muestra un campo de error y luego debe ocultarse, ExtJS simplemente ocultará el campo de error en lugar de eliminarlo por completo del árbol DOM.
Consejos específicos de elementos
Hacer clic en un botón de formulario externo
Opción 1
Comando: haga clic en Destino: css = botón: contiene ('Guardar')
Selecciona el botón por su título
opcion 2
Comando: haga clic en Destino: css = # botón guardar-opciones
Selecciona el botón por su id.
Seleccionar un valor de un formulario ComboBox externo
Command: runScript
Target: with (Ext.getCmp('genderComboBox')) { setValue('female'); fireEvent('select'); }
Primero establece el valor y luego dispara explícitamente el evento select en caso de que haya observadores.