Cómo probar tus WebViews React-Native con Detox

¡Finalmente puede escribir pruebas de un extremo a otro para sus WebViews usando Detox!

… Bueno, en Android de todos modos.

Por el momento, iOS no es compatible. Sin embargo, es probable que eso cambie en el futuro. Además, aunque existe funcionalidad para realizar pruebas en Android, los documentos de Detox no se han actualizado oficialmente para incluir pruebas de vista web. Esto sugiere que el trabajo podría estar en curso y bastante silencioso .

Independientemente, poder probar las vistas web en Android sigue siendo un gran paso para los desarrolladores.

Cómo agregar un WebView a su aplicación

Para incluir un WebView, agregue el react-native-webviewpaquete como una dependencia a su package.json. Importe el WebViewcomponente y pásele una fuente como se muestra a continuación.

Asegúrese de incluir un testIDen su WebView para que pueda ser encontrado por desintoxicación cuando ejecute su prueba.

Cómo escribir una prueba para la vista web

Para este ejemplo, estamos usando la página de inicio de sesión de Twitter. Nos gustaría permitirle al usuario:

• Ingrese un nombre de usuario
• Ingrese una contraseña
• Y haga clic en el botón Iniciar sesión

A veces, una vista web tarda un poco en cargarse, por lo que puede ser útil agregar un retraso para asegurarse de que termine de cargarse antes de ejecutar las pruebas.

Como se ve a continuación, podemos usar el objeto web de Detox para interactuar con la vista y hacer afirmaciones sobre los elementos ubicados.

Localización de elementos DOM:

La web de Detox se basa en Expresso-Web de Android y proporciona una lista de funciones para seleccionar elementos DOM.

• id - encuentra un elemento en el árbol DOM por su identificación
• text : Busca un elemento en el árbol DOM por su clase CSS
• cssSelector : Encuentra un elemento en el árbol DOM que coincide con el selector de CSS proporcionado
• name : Busca un elemento en el árbol DOM por su atributo "nombre"
• xpath : Busca un elemento en el árbol DOM por su XPath
• href: Busca un <a>elemento en el árbol DOM por el texto del vínculo
• hrefContent: Busca un <a>elemento en el árbol DOM por su texto de enlace parcial
• tag : Busca un elemento en el árbol DOM por su nombre de etiqueta

Después de localizar su elemento, puede simular la interacción del usuario con los siguientes métodos autoexplicativos:

• tap
• typeText
• getText
• clearText
• replaceText
• scrollToView
• getCurrentUrl
• getTitle
• runScript
• runScriptWithArgs

Detox Web también viene con un divertido conjunto de matchers:

• toExist()
• toNotExist()
• toHaveText()
• toNotHaveText()

¡Las posibilidades son infinitas!