Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native

Entonces, hola a todos, y bienvenidos a nuestra masterclass Detox 101. Estoy súper feliz de verlos a todos aquí. Hoy, en realidad intentaremos hacerlo práctico. Intentaremos practicar mucho y luego aprender la herramienta. Y en realidad aprenderemos a escribir pruebas estables de extremo a extremo para su aplicación React Native.

Pero primero, permítanme presentarme. Hola, mi nombre es Yevgenia. Puedes llamarme Jane. Soy de Ucrania y actualmente también en Ucrania. Soy una gerente de QA en Wix, y mi enfoque principal durante los últimos años fue en realidad en desarrollar estrategias, best practices, educación y soporte de pruebas para la automation en ambos web y móvil en Wix. Y para la web tenemos nuestra solución interna, y para móviles, como ya sabrán, tenemos nuestro open-source end-to-end testing framework para aplicaciones móviles, que es llamado DtoX. Y hablaremos de eso hoy. También soy instructora autorizada en ICA Agile, y soy fundadora de la escuela de QA en Ucrania, donde educamos a los QA sobre cómo hacer una buena automation de pruebas. También soy una oradora pública. Normalmente hablo en conferencias de QA, pero ustedes me invitaron a hacer el challenge y hacer una masterclass en una DevConference, así que es mi primera vez. Deséenme suerte. Y estoy súper emocionada de hacerlo. Y soy una loca amante de los Corgis, especialmente de este pequeño. Su nombre es Ruby, y está por aquí hoy. De hecho, fue nombrado después de un lenguaje de programación, así que es uno de los participantes. Pero él no es el tema hoy. Hoy estamos aquí para hablar sobre detox.

Y ya que estamos hablando de una herramienta de testing, antes de empezar a pasar a la herramienta en sí, también vale la pena decir que hoy tenemos con nosotros a un increíble equipo de detox. Casa llena. Chicos, por favor, saluden. Genial. Entonces, tenemos a Amit, Asaf, Joseph y Jonathan. Muchas gracias por unirse. Chicos, en realidad estarán aquí para ayudarte durante la masterclass. En caso de que tengas algún problema o pregunta o cualquier cosa, siempre eres bienvenido a publicar en el canal de Discord creado para esta masterclass. Se llama RSH Detox 101 y está dedicado a nuestra masterclass. Así que en caso de que te enfrentes a algún problema durante la masterclass, estarán allí para ayudarte. Y también he publicado un mensaje allí llamado For Q&A. Si tienes preguntas que quieres obtener una respuesta como, cuál es tu próxima característica reporté algún error, ¿cuándo lo vas a arreglar?, o ¿cómo puedo contribuir?, vamos a reservar tiempo al final para las preguntas y respuestas. Así que solo ponlo en el hilo. Y de nuevo, no dudes en pedir ayuda en caso de que sea necesario. Vale. Y vamos a mantenernos en silencio. Pasaré por el flujo de la masterclass y los chicos estarán allí para ustedes en Discord para ayudar.

Antes de empezar a hablar de nuevo, de las pruebas de extremo a extremo y las herramientas, vale la pena recordar el concepto principal en la automation, podrías haberlo ya visto antes. Es un concepto de la pirámide básica de automation. Entonces, lo que realmente dice es que deberíamos tener múltiples niveles de testing para cubrir nuestra aplicación de la manera más rentable. Deberíamos tener tantas unit tests como sea posible, porque están testing el code en sí, las funciones exactas. Son las más baratas, las más rápidas, así que podemos tener tantas como sea posible. Luego deberíamos tener una menor cantidad de pruebas de integración. Y puede ser una integración regular, puede ser pruebas de componentes y algunos otros niveles intermedios. Deberíamos tener menos de ellos para conectar esas unidades juntas. Y luego tenemos pruebas de extremo a extremo para cualquier otra cosa que quede. Y las pruebas de extremo a extremo, pensamos que debería ser la menor cantidad de ellas, porque en realidad están conectando los puntos actuando como un usuario real simplemente presionando botones en tu aplicación, comprobando visualmente algo y tal.

En este caso, cuando usualmente hablo con los desarrolladores, porque trabajo mucho con grupos de desarrollo en Wix. Escucho que usan mucho las pruebas unitarias, escucho que les gustan las pruebas de integración, pero casi nunca escucho que les encanta escribir pruebas de extremo a extremo. Y usualmente, las pruebas de extremo a extremo se consideran problemáticas. Y la razón de eso es usualmente la inestabilidad. Entonces, a veces, ya que las pruebas de extremo a extremo están relacionadas, dependen de muchas, muchas circunstancias. Así que dependen de la, incluso la conexión, los otros modules que estás testing, internet terceros, todo. Porque están literalmente haciéndolo como un usuario real. Así que significa que terminas teniendo tus pruebas inestables, e incluso porque no fue como tu problema. Y lo bueno es que Detox fue creado en realidad con este problema en mente.

Así que por favor conozcan a Detox. Detox fue desarrollado por Wix para resolver el problema de slowness e inestabilidad en la automation de pruebas y utilizado por React Native como su propia herramienta de testing de extremo a extremo. Para explicar por qué, y cómo Detox es diferente de otros frameworks y por qué es popular en la React Native community. Lo primero es que Detox es de caja gris y no de caja negra. Podrías haber oído los términos como, caja negra es cuando estás testing algo como un usuario real, no tienes idea de lo que está pasando bajo el capó y la caja blanca es cuando sabes todo y sabes cómo funciona cada función, así que usualmente está cerca de la unidad testing y tal. Pero también hay un concepto intermedio entre ellos, que se llama caja gris. Así que la caja gris es cuando sabes algo sobre cómo funciona tu sistema bajo el capó y puedes trabajar de acuerdo a ello. En términos de automation de pruebas, cuando miras la caja negra, la caja negra es cuando solo sabes sobre la jerarquía de UI de tu aplicación. Básicamente sabes cuáles son los componentes que tienes aquí y sabes que puedes interactuar con ellos. Eso es todo. No tienes nada más. Pero cuando estamos hablando del concepto de caja gris, puedes acceder a la memoria, puedes leer el estado de la aplicación y puedes sincronizar con el hilo principal de tu aplicación.

Entonces, ¿qué significa esto en realidad? La forma en que funciona Detox es que se sincroniza con tu aplicación y trabaja con este super gráfico simple. Así que espera a que la aplicación esté inactiva y continuamente cada milisegundo verifica si la aplicación está inactiva y en caso de que no lo esté, seguirá esperando hasta que esté inactiva. Y solo una vez que lo esté, procederá. Y básicamente te evitará fallar en muchos, muchos casos. Estás ingresando a alguna pantalla, tuviste que bajar la ejecución, y especialmente sucede mucho en la web, simplemente presionas el botón que no estaba presente y tu prueba falló porque tu aplicación todavía estaba haciendo algunas solicitudes o cargando alguna animation o algo y la prueba falló porque la aplicación no jugó realmente. Este framework en realidad no esperó a que la aplicación estuviera inactiva y Detox lo hace. Así que salva a muchas pruebas de fallar y las hace mucho más estables. Otra cosa es que Detox es cross-platform, lo que significa que puedes escribir la misma prueba, funcionará tanto para iOS como para Android, lo cual es genial. También puedes tener algún code específico de la plataforma como usar algunos gestos específicos de la plataforma o algunos componentes específicos que solo iOS tiene o Android, pero aún así puedes usar algo unificado y aún tener una prueba que se ejecutará tanto en Android como en iOS, lo cual realmente probaremos hoy. Detox no depende de WebDriver, fue construido para aplicaciones móviles desde cero y tiene soporte de primera clase para React Native. Y hoy realmente jugaremos un poco con él. Usaremos la aplicación React Native para hacer todo con Detox, y esto es realmente Detox en acción. Te mostraré cómo escribir pruebas hoy, y estaremos en, como, la agenda detallada estará en unos minutos, pero probaremos muchas acciones diferentes, aprenderemos algunos tips y best practices, y aquí puedes ver cómo funciona. Así que trabajaremos con el proyecto de demostración que he preparado para esta masterclass. Es una aplicación de películas super básica. Espero que te gusten las películas, porque a mí me encantan. Y esta aplicación fue preparada para la masterclass. Es super fácil, y tiene algunos componentes añadidos, así que jugaremos con ella. Y realmente espero que hayas tenido la oportunidad de clonarla ya. Instala todo, y, como, haz que funcione. En caso de que no lo hayas hecho, por favor hazlo ahora mismo. Tienes el enlace en el Canal de Discord en la parte superior, así que solo búscalo y asegúrate de seguir los requisitos previos, para que podamos... Te animo mucho a que lo hagas conmigo.

Genial. Hoy, en nuestra agenda, haremos, como, cuatro cosas principales. Lo primero es que haremos la configuración real de Detox. Configuraremos Detox para iOS y Android. Lo haremos... Como, para iOS, será bastante fácil, pero para Android, será un poco más, como... Más acciones, porque necesitaremos configurar nuestro proyecto nativo para Android para que funcione.

Luego, pasaremos a escribir pruebas. Jugaremos con diferentes, como, conceptos que tenemos en Detox. Jugaremos con la coincidencia del elemento, haciendo algunas acciones diferentes, haciendo expectativas. Y luego, en la tercera parte, estaremos ejecutando nuestras pruebas de muchas formas diferentes. Aprenderemos cómo ejecutarlas en paralelo, aprenderemos cómo debug una prueba fallida, qué son los comandos CLI que tenemos para hacer eso. Y también aprenderemos algunos tips sobre la inestabilidad, como, cómo escribir tu prueba para que no sea inestable, porque cada testing framework no es la magia. Hace todo lo mejor que puede, pero aún necesitamos escribir buenas pruebas, para que sean no inestables.

Y como dije antes, al final, tendremos algo de tiempo para preguntas y respuestas, así que en caso de que tengas preguntas, hay un mensaje en el canal para preguntas y respuestas. Solo publica tus preguntas en el hilo o guárdalas para el final. Abrimos la sala para que cualquiera pregunte. Y de nuevo, tendremos una pequeña estructura para esta masterclass, como tres horas es mucho. Haremos dos descansos. Haremos una hora, descanso de diez minutos, otra hora, de nuevo, descanso de diez minutos, y una última hora, para que puedas tomar un café, refrescarte y volver. Y de nuevo, estaré aquí durante la mayoría de los descansos, así que en caso de que tengas algún problema o algo, primero, no dudes en preguntar en Discord. Segundo, puedes esperar hasta el descanso para preguntarlas en persona.

Genial, ¿estamos bien, chicos? Por favor, dame alguna reacción. Utilizaré el mecanismo de reacción con ustedes para ver que estamos bien. Sólo dame alguna reacción, que todavía escuchas. Okay, genial, perfecto. Okay, cool. No veré todas las reacciones, pero intentaré cambiar. Genial.

Entonces, comencemos con la primera parte. Realmente instalaremos DTalks. Configuraremos el archivo de configuración de DTalks, y haremos la configuración de iOS y Android. En caso de que estés haciendo sólo una plataforma, quédate con nosotros porque la otra plataforma tomará algo de tiempo. Pero realmente te animo a hacer ambas en caso de que puedas porque será más interesante, creo. Genial, entonces estoy cambiando a mi VS Code. La forma en que trabajaremos es que te mostraré algo, y después de eso, una vez que te muestre algo, te daré unos minutos para hacerlo en tu máquina, y luego una vez que hayas terminado, sólo dame algunas reacciones de que lo has hecho, y seguiré adelante.

Así que este es el proyecto que tengo. Te lo mostraré en GitHub. Jaroslav ya envió un enlace al canal, de nuevo, para que puedas conseguirlo. Básicamente, esta es una aplicación React Native con algunas películas mostradas, y lo importante para explicar aquí es que tiene dos carpetas. Tiene la carpeta para la aplicación, esta, y también tiene la carpeta para las hojas de trucos. Así que las hojas de trucos son básicamente como hojas de trucos con una lista de los comandos que estaré usando durante la masterclass, así que puedes abrirlas y simplemente copiar y pegar y no necesitas escribir después de mí. Esta es la que ya te envié sobre cómo iniciar el proyecto, e instalar todo, y empezar tu aplicación iOS y Android, así que espero que ya lo hayas hecho. En caso de que no lo hayas hecho, asegúrate de al menos ejecutar NPM install y la instalación de pods, para que podamos proceder. Trabajaremos con otras hojas de trucos más adelante. Otra cosa a mostrar es que tiene varias ramas. Así que tenemos una rama master con la que trabajaremos. En esta rama tenemos con detox configurado, que ya tiene detox configurado, así que después de la primera hora de la masterclass. Así que en caso de que te quedes atascado, no estás seguro de por qué no está funcionando para ti, o qué te falta, siempre puedes cambiar a esta rama con detox configurado y continuar desde ese punto. Y con pruebas es en realidad tener el resultado final de nuestra masterclass, como con la prueba escrita y todo como configurado, puedes usarlo como referencia después de la masterclass, en caso de que quieras probarlo en tu proyecto, o quieres trabajar con alguien más, eres super bienvenido a usar todos los materiales que provienen de esta masterclass.

Genial. Creo que estamos listos para empezar. Estoy cambiando a mi VS Code y te pido que abras esta primera hoja de trucos en esta como carpeta de abajo. Ves, hay una configuración de detox, sólo ábrela como yo la estoy abriendo en modo de previsualización, como en el lado derecho, y lo primero que realmente haremos es que realmente instalaremos detox. Así que durante tus pasos previos, ya deberías haber instalado el CLI de detox, que nosotros también estaremos usando, pero también necesitamos instalar el detox como una dependencia e instalar el corredor de pruebas para detox. Así que hagamos eso hoy. De nuevo, te estoy mostrando algo y explicándote algo. Luego te doy un minuto para hacerlo en tu lado y me das algunas reacciones de que lo hiciste. Okay. Así que vamos a la carpeta y esperemos que nada salga mal. Estoy cambiando a esta carpeta y literalmente sólo copio y pego el comando. Así que estarás seguro de que lo estás haciendo correctamente. Lo primero que hago es instalar detox como una dependencia de desarrollo. Puedes trabajar con las últimas versiones siempre. En caso de que haya algún problema, también publicaré después, el repositorio de detox y el discord de detox. En caso de que tengas algún problema o pregunta, puedes unirte y preguntar. Esta es en realidad la primera cosa que haremos. La instalación de Detox tomará algún tiempo. Así que ahora puedes cambiar para hacerlo en tu máquina. Te daré un minuto. Sólo usa esta primera línea e instala detox en tu máquina y dame alguna reacción una vez que hayas terminado. Espero que alguien esté haciendo esto conmigo hoy. Detox CLI fue en realidad parte de los pasos previos por lo que debería haber sido instalado ya. Pero en caso de que no lo hayas hecho, asegúrate de pasar por la hoja de trucos del proyecto cero y comprueba que tienes todo mientras estamos haciendo esto y hablando. Veo algunas reacciones, así que espero que estés bien. Genial. El siguiente paso, estamos instalando Jest. De nuevo, estoy copiando este comando y lo instalo aquí. Estoy instalando el último Jest. Así que, ya está trabajando con Detox. Así que, básicamente, Detox, antes y ahora también, era independiente del corredor de pruebas, lo que significa que podrías trabajar con cualquier corredor de pruebas que quisieras, como Mocha o Jest. Pero recomendamos encarecidamente usar Jest porque en el futuro, podríamos quedarnos sólo con el uso de Jest y por eso recomendamos encarecidamente, en caso de que estés configurando tu proyecto ahora mismo, que lo uses con Jest. En caso de que, por alguna razón, necesites algo más como Mocha, también puedes encontrar ejemplos en el repositorio de detox donde tenemos algunos proyectos de ejemplo y puedes encontrar allí una configuración de Mocha. Genial. Así que, hazlo en tu máquina y dame algunas reacciones, todo está bien. La segunda línea estaba instalando el Detox, lo siento, el Jest. Pasemos al siguiente paso y el siguiente paso es en realidad iniciar detox. Así que, para esto, ya estamos usando el CLI de Detox. Así que, en caso de que no lo tengas instalado, obtendrás un error y en este caso, sólo asegúrate de volver al inicio del proyecto, encuentra la línea sobre el CLI de Detox e instálalo. Así que, presta atención a mi pantalla. Una vez que ejecute detox init, se crearán archivos de plantilla de acuerdo al corredor de pruebas Jest y obtendré cuatro archivos creados. Así que, lo que tienes a la izquierda es que tendrás carpetas E2E creadas, que tienen tres archivos, y también tendrás el Detox RC JSON, que es un archivo de configuración para detox.

Entonces, hazlo ahora y después de que hayas terminado, comenzaré a explicar y comenzaremos a configurar Detox. Así que, tómate un minuto y hazlo.

Vale, genial. Chicos, gracias por darme reacciones porque necesito de alguna manera entender si todavía me están escuchando o no. Y, genial. Así que, espero que hayas terminado con eso porque era un comando super pequeño. Entonces, ahora veamos qué hemos hecho realmente. Así que, hemos creado cuatro archivos. Entonces, el primero es un archivo JSON de configuración, que es en realidad como una configuración para nuestro runner. Puedes ver aquí, como, las líneas más importantes aquí es la cantidad de trabajadores que serán relevantes para la ejecución en paralelo. Como, más tarde, hablaremos de ello. Luego también ves este corredor de pruebas especificado. Estamos usando Jest Circus automáticamente para este proyecto. También, hay un tiempo de espera para la prueba. Es básicamente el tiempo de espera de tu prueba para esperar hasta que falle porque no pudo hacer algo o no pudo, como, alguna, no sé, animation infinita o algo así. Así que los 120 milisegundos, esperará hasta que realmente falle debido al tiempo de espera. Y luego lo importante es que hay una expresión regular de prueba para saber dónde están tus archivos de prueba colocados. Así que en caso de que estés, como, cambiando la estructura, recuerda actualizarlo aquí también. Luego tenemos un archivo de entorno, que no tocaremos, y nosotros, como, no necesitamos realmente prestar mucha atención allí. Y cambiemos a esta primera prueba, E2E. Así que la primera prueba, E2E, es en realidad archivos de prueba de plantilla que no tendrán sentido para nuestra aplicación, por supuesto. Pero aún así, puedes ver aquí un ejemplo de algunas pruebas que es, como, esperando que algo sea visible, luego la prueba se detiene en algo, verifica algunas pruebas y tal. Modificaremos esas pruebas para que funcionen para nuestra aplicación un poco pronto. Pero déjalos como están ahora. Y luego tenemos nuestro último archivo, que es DetoxRCJSON, que es en realidad una configuración de detox. Así que principalmente tiene tres partes. Tiene las tres partes importantes. Tiene las especificaciones de las aplicaciones, es decir, como tu comando de compilación de iOS, tu aplicación de iOS ruta, tu comando de compilación de Android, tu ruta de compilación de Android y, como, cualquier otra compilación que necesites. Así que si necesitas compilaciones debug para iOS y Android, o necesitas compilaciones de lanzamiento para ambos, las especificas allí con los comandos exactos, como tu comando de compilación regular que usas para tu aplicación. Luego también, lo haremos en unos minutos, y luego tienes una parte de dispositivos. Así que los dispositivos son simuladores o emuladores reales que tienes en tu máquina. El ejemplo tendrá mi propio simulador, así que necesitas reemplazarlo para tener el tuyo. Y luego tenemos configuraciones, que son en realidad una combinación de dispositivo y la aplicación. Así que aquí dices, vale, digamos que quiero tener una configuración de lanzamiento de iOS, y dirá que quiero construir mi lanzamiento de iOS e instalarlo en mi iPhone 12 o algo así, y puedes hacer las combinaciones de lo que necesites. Genial.

Así que el paso dos es en realidad empezar a configurar nuestras aplicaciones. Así que para iOS, será extremadamente fácil. Sólo necesitaremos actualizar nuestro detox RCJSON, es decir, poner una configuración válida en allí, y para Android tomará un poco más de tiempo, porque estaremos haciendo los cambios en la aplicación nativa en sí, pero como, no te preocupes, así que solo ve paso a paso y lo haremos. Y por favor abre. Ahora puedes hacerlo como en weascode o en otro monitor, puedes abrir esta vista previa a la configuración. Este archivo es bastante largo. Tiene todo lo que necesitamos para configurar, y después también puedes usarlo como guía para la configuración de tu propio proyecto. Así que lo primero que haremos es que realmente abriremos nuestro archivo detox RCJSON, y empezaremos a configurarlo. En realidad, detox tiene muchas opciones de configuración. Puedes ver un enlace en la parte superior del documento. En realidad, detox mira muchos tipos de archivos de configuración. Mira DetoxRc, el JS por defecto y RCJSON. También puedes, de otra manera popular, también puedes poner una sección de detox en tu paquete JSON en caso de que tu configuración sea como pequeña. Por ejemplo, estás ejecutando solo iOS. Entonces puedes ver todas las otras configuraciones que puedes hacer. En realidad, la documentation de Detox tiene muchas guías y muchos ejemplos. Literalmente estaremos copiando y pegando de él hoy y puedes hacer lo mismo en tu proyecto. Ahora, empecemos a configurar la primera parte. A la derecha ves que ya tenemos preparado todo este archivo JSON. Simplemente lo copiamos y lo pegamos en nuestro Detox R-C Json. Simplemente tómate un minuto y hazlo ahora, y te explicaré lo que tenemos dentro de este archivo. Por favor, dale tus reacciones de nuevo para que hayas terminado con eso y pueda pasar al siguiente paso. Veo algunas reacciones. Genial, espero que todavía estés conmigo. Lo que he pegado aquí es en realidad una configuración bastante grande. Tengo aquí cuatro configuraciones de aplicaciones. Tengo iOS en versión de lanzamiento y debug, y debug para Android y lanzamiento para Android también. Puedes ver aquí que tengo tres cosas principales. Tengo un tipo de compilación, Tengo la ruta binaria, donde estará mi aplicación exacta después de hacer la compilación. Es como pasar a tu archivo dot app, y luego tienes un comentario de compilación en sí. Puedes poner aquí tu comentario de compilación regular o puedes intentar usar el mío. Solo reemplaza el nombre de tu proyecto una vez que lo estés haciendo en el tuyo. Lo mismo para el debug de iOS. En Android, es bastante genérico. Puedes ver aquí que hacemos la compilación de ensamblaje debug, y también ensamblamos Android test, que es importante para detox.

Asegúrate de no perderte nada cuando lo estés haciendo de tu lado. Pero para nosotros, básicamente está configurado. Lo siguiente que te pedirán que hagas es actualizar tus dispositivos. Esta configuración actual tiene mis dispositivos aquí, pero necesitaremos reemplazarlos por los tuyos. Para obtener los nombres de tus simuladores de iOS, puedes abrirlo desde Xcode, y ver así, como hacer clic derecho y hay un dispositivo. Ves los nombres exactos de los dispositivos que tienes. Lo más probable es que si tienes el último Xcode, puedas tener un iPhone 12. Puedes dejarlo tal como está. Y para Android, es un poco más complicado obtener la lista de tus simuladores. Puedes ir a Android Studio, lo que lleva mucho tiempo, o puedes ejecutar un simple comando llamado emulator -list avids, y obtendrás el nombre exacto de tus simuladores por nombre AVD. Es importante que aquí, pongas el nombre exacto del AVD del simulador que tienes en tu sistema, y solo copia y pega desde aquí. Y en caso de que solo tengas un Pixel 5, no lo encontrará, necesitas tener el nombre exacto del AVD. Genial, así que ahora, te doy, toma un minuto y actualiza los dispositivos para que sean los correctos en tu archivo de configuración, y eso es todo para iOS. Comenzaremos la construcción de iOS justo después de eso. Genial. Sí. Vale. Vale, genial. Así que veo algunas reacciones, así que espero que estemos bien. Así que ahora, lo que necesitaremos empezar es en realidad, comenzaremos la construcción. La construcción llevará mucho tiempo, así que durante este proceso de construcción, estaremos configurando Android de nuestro lado. Así que simplemente ejecutemos la construcción desde el CLI de detox. Así es como lo haces, simplemente revisas cuáles son las configuraciones que tienes. Puedes cambiar los nombres, puedes decidir cuáles son los que quieres tener. Y básicamente, aquí tengo cuatro configuraciones. Tengo iOS SimRelease, debug, y Android Debug y Release. Solo usaré debug para esta masterclass. Y la razón de eso es que cambiaremos nuestra aplicación. Y al igual que cuando haces el desarrollo, quiero que sea actualizable, así que usaré la construcción debug. Y es como la mejor práctica probablemente para el desarrollo local. Una vez que estás ejecutando y escribiendo tus pruebas mientras escribes la aplicación. Pero una vez que lo estás haciendo en tu CI, y detox está diseñado para CI, así que puedes hacer todo desde la línea de comandos, y antes del lanzamiento, por supuesto, es mejor hacer la construcción en la configuración de lanzamiento y ejecutar tu prueba de la misma manera. Así que lo que haré, comenzaré mi construcción. Haré detox, build, menos C que es para configuración, y pondré iOS sim debug. Solo copiaré y pegaré desde aquí, así que estaré seguro. Así que detox build, menos C iOS sim debug. Por favor, tómate un minuto para hacerlo de tu lado y asegúrate de que no falle desde la primera línea. Pero en caso de que lo haga, solo publica una pregunta en el discord y te ayudaremos. Y dame una reacción una vez que hayas terminado con eso. No una vez que tu construcción esté terminada, sino solo una vez que hayas iniciado el comando, por favor, porque llevará mucho tiempo. Vale, mi construcción falló. Vale, genial. Así que déjame revisar. Lo siento, creo que tengo algún problema con el simulador, solo un segundo. Vale. Pero podría salir mal, por supuesto, en la demo en vivo. Vale, genial. Vamos a hacerlo. Vale, ejecutaré mi construcción un poco más tarde para ver, solo un segundo. Arreglémoslo de mi lado para ver que todo está bien. Construir sí. Vale, tengo algún problema aquí. Vale, así que comenzaré a configurar Android y lo arreglaré un poco más tarde. Así que, veamos si estoy ahora en ello. Así que simplemente comencemos a configurar Android de nuestro lado. Así que lo siguiente que tendremos es que configuraremos el proyecto Android. Así que para hacer eso solo dices. Lo siento, solo diciendo, bueno, comencé desde tu rama y se construye bien en mi máquina. Sí, sí, sí. Es solo, sí, es algo que necesito arreglar en mí mismo. No te preocupes, lo haré en un segundo una vez que hagamos la configuración de Android. Claro, genial. Hasta ahora puedo ver que funciona. Sí, vale. Así que simplemente comencemos la configuración de Android y luego, durante el descanso, ejecutaré mi construcción. Genial. Así que lo que haremos es que iremos a nuestra carpeta exacta de Android y en la carpeta Android, lo que haremos es comenzar a configurar nuestro archivo build gradle para agregar alguna configuración de detox. Así que comienza abriendo tu build gradle, este desde la raíz de Android. Asegúrate de abrir el de la raíz porque necesitaremos editar ambos. Y aquí ves que tenemos esta sección X y tenemos nuestras dependencias.

Entonces necesitaremos pegar una línea en esta parte X, solo copia desde este lado derecho como la versión de Kotlin, blah, blah, blah. Solo pégalo aquí. Y lo que necesitarás hacer, necesitarás reemplazar la versión exacta de Kotlin que tienes en tu máquina. Entonces, la forma de comprobarlo es en realidad ir a tu, como, es un poco estúpido, pero necesitas ir a tu Android Studio, no necesitas abrir ningún proyecto. Lo que haces, haces clic en Android Studio, preferencias, y bajo las preferencias, tienes idiomas y framework y tienes Kotlin. Entonces aquí, tienes esta versión actual del plugin de Kotlin. Puedes ignorar el 2.1.1. Así que solo pon este 1.6.21, cópialo y simplemente ponlo en tu build.gradle. Así que tómate un minuto, hazlo ahora mismo. Lo dejaré aquí para que puedas encontrarlo donde sea que lo tengas, y solo dame alguna reacción una vez que hayas terminado con eso y yo simplemente arreglaré mi construcción durante este segundo.

Genial, así que lo siguiente que añadimos es esta clase pass Kotlin gradle plugin, la versión de Kotlin aquí en tus dependencias. Así que por favor añádela ahora. Y luego en otras cosas que necesitaremos hacer es también gestionar el cambio de nuestro informe completo, la sección de repositorio, que está más abajo. Así que por favor añade esta línea a tus dependencias y luego copia estos dos repositorios aquí y ponlos aquí. Yo reemplazaré Google porque ya lo tengo. Así que necesitas tener estos dos en la sección de repositorio. Así que por favor hazlo ahora mismo y dame la reacción de que estás bien. Vale, genial, así que lo siguiente a lo que realmente pasamos es que necesitamos también editar nuestro archivo build gradle de la aplicación, que se encuentra en la carpeta de la aplicación. Asegúrate de guardar y cerrar este y no te confundas entre estos y debajo de tu aplicación también tienes un build gradle, simplemente ábrelo y también necesitaremos hacer algunas pegatinas aquí. Genial, así que desplázate hasta el final del archivo y un poco hacia arriba, y verás que hay una sección de dependencias aquí y necesitaremos añadir dos dependencias para Android. Necesitaremos añadir alguna implementación de prueba que realmente nos permita trabajar con alguna aplicación de prueba que yo hablaré en unos minutos, así que simplemente pégala al principio de tus dependencias o al final, no importa. Simplemente añade estas dos líneas y luego también copia esta segunda parte, ves estas dos líneas, y las pegas en la sección de configuración predeterminada. Puedes buscarlo, pero es como en la parte superior del archivo, y justo después de esta parte, simplemente ponlo aquí, arregla algún problema espacial, y estas son dos líneas que se necesitan para que detox funcione con la aplicación de prueba porque en realidad en Android, detox necesita dos archivos de aplicación, el real que construyes y también el archivo de prueba para que pueda trabajar con él. Así que tómate un minuto y por favor hazlo ahora mismo y dame una reacción de que estás bien con estos dos. Vale, veo que sois super rápidos, genial. Vale, así que solo un segundo más, luego pasamos al siguiente. El siguiente paso es un poco más complicado. Necesitamos crear un archivo Java de prueba de detox, una clase de prueba de detox, y nos gustaría, necesitamos estar seguros de que estamos usando la ruta exacta correcta que tengo aquí. Así que vas a tu carpeta src de la aplicación, y dentro de ella, necesitas crear esta ruta que termina con el nombre de tu paquete. En nuestro caso, nuestro nombre de paquete es detox masterclass en minúsculas. Y aquí lo tienes en una configuración predeterminada, y simplemente asegúrate de que tu ruta es correcta. Así que lo estoy creando bajo el src creando una nueva carpeta, simplemente lo pegaré así, y también pondré la masterclass de detox aquí. Así que esta es la ruta final que tendré, y presiona Enter. Hazlo por favor, ahora mismo. Porque es como un poco de lío, así que no romperemos nada. Simplemente hazlo y vale. Veo que la gente ha terminado con ello. Genial, me encanta. Es como si fueras realmente rápido. Me preocupaba que fuera demasiado aburrido hacerlo juntos conmigo. Vale, genial, y ahora lo que necesitamos hacer, necesitamos abrir el enlace aquí, y abre el proyecto de ejemplo del repositorio de detox. Y literalmente necesitamos copiar y pegar todo el archivo. Ya está precreado, no necesitas diseñarlo por tu cuenta. Así que simplemente copia todo el archivo. Solo mira, presta atención a lo que tengo, y luego ve a esta carpeta de la masterclass de detox, y crea un archivo debajo de ella, que se llamará detoxtest.java, así. Asegúrate de que el nombre exacto del archivo sea así, y luego simplemente pega todo lo que copiaste de ese archivo aquí. Hazlo ahora mismo, y luego lo modificaremos un poco, para que funcione para nuestro proyecto. Vale, vale, genial, veamos, vale, todo el mundo ha terminado. Vale, genial, veo reacciones, genial. Entonces, después de pegarlo, necesitamos actualizar nuestro nombre del paquete en la parte superior. Así que, de nuevo, reemplázalo por detox masterclass como ya hicimos en la carpeta. Y la segunda cosa que necesitas hacer es algo opcional en tu proyecto. Yo eliminaré la sonda de prueba de Butler. Es en realidad una cosa que te ayuda a depurar los fallos y los bloqueos en tu aplicación mejor pero no lo usaremos para esta masterclass específicamente así que simplemente lo eliminaré para que no tengamos ningún problema durante la construcción y simplemente guardar. Así que esto es más o menos todo. Genial, esto es lo que necesitamos para este archivo. De nuevo, dame reacciones una vez que hayamos terminado y procederemos al siguiente paso. Genial, y mi construcción todavía está en marcha así que tenemos tiempo para un paso más. Así que el último paso es en realidad habilitar el tráfico de prueba claro para detox desde creo que Android 28. Fue como deshabilitado y detox en realidad necesita acceder al tráfico. Así que por eso haremos una pequeña configuración. Así que vamos a SRC, dentro de SRC encontramos main res y aquí necesitamos crear nuestra carpeta xml así que simplemente crearé una carpeta así y dentro de esta carpeta creo este archivo la red de seguridad config xml, así que simplemente copia el nombre y créalo bajo tu carpeta xml justo así. Y lo único que necesitas añadir ahí es lo mismo, déjame cerrar el resto de cosas y puedes tomar estos minutos para hacer el archivo y la carpeta y mi ordenador dice que es demasiado para él. Así que vale lo que necesitas hacer es que necesitas en realidad vale necesitas en realidad copiar esta parte versión xml blah blah blah primer fragmento en este archivo y guardar. Así que hazlo por favor, dame reacciones de que has terminado. Genial, ahora me siento un poco como un blogger hoy pidiendo a la gente que me dé muchas reacciones en marcha. Vale genial, genial veo. Vale increíble. Así que la última última cosa que hacemos es que en realidad añadimos este archivo a nuestro manifiesto de Android. Así que simplemente copia esta única línea y ve al manifiesto de Android que está muy cerca de este archivo y dentro de él, pongámoslo aquí genial, y dentro de tu aplicación así que en esta parte justo antes de la última etiqueta de cierre, simplemente ponlo así y hemos terminado con nuestra configuración de Android. Espero que todavía estés vivo porque es lo más aburrido espero que no estés demasiado aburrido pero eso es en realidad y mi construcción ha tenido éxito así que podemos intentar ejecutar la prueba. Así que como recordarás que hemos creado esto plantilla de prueba que no tiene ningún sentido para nuestra aplicación y quiero que mi prueba sea verde desde la primera ejecución así que lo que podemos hacer es que podemos eliminar estas dos pruebas y lo que haré es que sé que mi aplicación tiene un texto llamado películas de tendencia aquí así que simplemente modificaré mi prueba, mi única prueba para que coincida con el elemento esperado por un texto específico, lo siento, películas de tendencia para que sean visibles y simplemente lo ejecutaré después. Así que por favor abre este archivo de prueba, modifícalo así para que lo tengamos en verde y dame una reacción para que pueda empezar a ejecutar la prueba. Mhm. Mhm. Vale, vale, veo. Genial, impresionante. Vale, vale, así que, genial y ahora vamos a ejecutar nuestra prueba para ejecutar la prueba necesitamos el mismo comando exacto que usamos para la construcción, lo único que reemplazamos es la palabra construcción por la palabra prueba. Así que simplemente hazlo así y cerraré Android Studio para que mi Mac no explote y en realidad presionaré enter y debería empezar a ejecutar mi prueba. Así que tengo mi simulador en segundo plano así que simplemente lo iniciaré manualmente para que también lo veas.

De acuerdo, de acuerdo. De acuerdo, mm-hm, mm-hm. Oh, sí. Ya ha instalado mi aplicación. La ejecutaré de nuevo para que puedas verla y luego entraremos en detalles sobre lo que está sucediendo aquí. Pero lo bueno es que tenemos la primera prueba aprobada así que bien por mí, salió bien. Hazlo ahora mismo en tu máquina, por favor. Ejecuta la primera prueba, asegúrate de que esté en verde, dame tu reacción. Solo un pequeño consejo en caso de que estés ejecutando y el nombre de tu simulador sea incorrecto. En este caso, Detox fallará pero te dará una especie de consejo como que estos no son los nombres reales que tienes y estos son los simuladores que tienes así que puedes copiarlos de allí y simplemente ponerlos en tu archivo Detox RC para configurarlo para que se ejecute en uno específico.

Genial, así que en realidad nuestra primera parte está casi terminada y lo último que necesitaremos hacer es construir nuestro proyecto de Android y en realidad comenzar la prueba pero propongo comenzar la construcción ahora mismo e ir a un descanso para que regresemos una vez que se haya completado la construcción y podamos ejecutar nuestra prueba una vez más. Así que de nuevo, estoy haciendo la construcción de detox menos C. En caso de que ejecutes sin menos C especificando tu configuración, simplemente fallarás porque dirá que hay múltiples configuraciones como esta y si alguien tiene algún problema durante el descanso estamos aquí así que me iré solo por un segundo así que ayudaré con los problemas. Así que ejecutas detox build menos C y luego simplemente copias de tu detox RC porque no quiero crear un error como este y simplemente lo ejecutas y eso es todo para la primera parte. Así que creo que podemos comenzar la segunda parte así que en realidad hemos hecho toda la configuración que necesitamos. Hemos instalado detox. Hicimos la configuración de detox tanto para iOS como para Android. Mi construcción en realidad está en verde así que es genial desde el primer intento y ahora simplemente ejecutaré lo mismo pero solo para ver que mi prueba de detox para Android también está bien. Así que por favor, hazlo junto conmigo. Simplemente ejecuta tu prueba de Android. Debería iniciar tu simulador e instalar la aplicación de la misma manera que lo hizo para iOS y la prueba debería verse exactamente igual que la de iOS porque es la misma prueba.

De acuerdo. Mm-hmm, genial. De acuerdo y las aplicaciones se recargaron, genial, y la prueba está en verde, genial. Android también está en verde, genial. Tenemos dos pruebas en verde en diferentes plataformas, lo cual es increíble. Entonces, a partir de este punto, en realidad cambiaré a usar solo iOS porque todas las pruebas serán correctas y serán multiplataforma. Entonces, en caso de que quieras, también puedes cambiar a usar solo una plataforma, ya sea iOS o Android, lo que prefieras. Yo usaré iOS, pero nuevamente, si quieres puedes seguir usando ambos, y solo usaré el de iOS usaré solo el de iOS. Así que lo pondré en algún lugar aquí para que puedas verlo todo el tiempo. De acuerdo, genial. Y en realidad, en esta parte, practicaremos cómo escribir pruebas con Detox. Aprenderemos cómo se ve realmente la prueba de Detox, de qué se compone, la sintaxis básica. Aprenderemos cómo encontrar el elemento porque en caso de que tengamos algunas mejores prácticas de las que hablaré, y algunos otros consejos y trucos que puedes usar en caso de que no puedas usar la mejor práctica. Hablaremos sobre tres conceptos principales en Detox que son medidas, acciones y expectativas. Y también intentaremos cómo hacer acciones específicas de la plataforma en caso de que lo necesites o en caso de que estés, como, trabajando solo con una plataforma y cosas así. Así que podrás escribir, como, una prueba y literalmente funcionará incluso con pasos específicos de la plataforma para ambas plataformas.

Genial. Entonces, por favor, denme alguna reacción de que sus pruebas también están en verde y están listos para continuar desde este punto para que pueda comenzar a mostrarles la parte de escritura de pruebas. De acuerdo. Verde, verde, genial. De acuerdo. Veo que más personas realmente están dando reacciones, lo cual mejora mi estado de ánimo aún más. Y ahora simplemente cambiaré a la escritura de pruebas. Así que tenemos otra hoja de trucos para esta parte también. Así que simplemente ábrela en otro lugar. Solo comenzaré mostrándote un buen lugar al que ir en caso de que estés comenzando a escribir tus pruebas con Detox. Así que tenemos documentación, como referencia de API para tres tipos de cosas en Detox. Tenemos medidas, tenemos acciones y expectativas. Las medidas son la forma en que encuentras tu elemento, como selectores en la web. También compararé un poco con la web en caso de que estés familiarizado con otros tipos de automatización. Es como selectores en la web. Una forma de encontrar tu elemento en la pantalla. Luego están las acciones, que son, como, lo que quieres hacer, tocar, desplazarte, deslizar, lo que sea. Y también puedes tener expectativas. Debes tener expectativas en tu prueba, que es en realidad el propósito de tu prueba, es verificar algo. Y puedes esperar que algún elemento sea visible, que esté enfocado o que tenga algún texto, etc., tener cualquier tipo de expectativa que desees. Asegúrate de que una buena prueba siempre tenga la expectativa, y termina con la expectativa, así que asegúrate de tenerla, y verifica solo una cosa dentro de tu prueba, lo cual siempre es una buena práctica. Genial. Así que comenzaremos hablando de las medidas. Así que cerraré esto, para que veas mejor. Básicamente, veamos primero qué hace esta prueba. Entonces, tengo un típico JustSyntax que probablemente ya estés familiarizado. Tenemos describe, que es como un conjunto de pruebas, como todas tus pruebas que tienes en este archivo. Luego tienes beforeall y beforeeach, que es el código que se ejecutará antes de todas las pruebas, solo una vez, o antes de cada prueba que tengas. Entonces, aquí puedes ver que antes de todas las pruebas, estoy lanzando la aplicación. Y antes de cada prueba que tengo, estoy recargando el React Native. Entonces, en caso de que ejecute mi prueba, déjame mostrarte.

Entonces, verás que parece abrirse dos veces porque la primera vez, ves que se está instalando en el simulador. Y una vez que lo hace, lo abre, lo lanza por primera vez. Entonces, se ejecutó beforeall y luego lo recargó porque reload React Native funcionó y luego mi prueba estaba realmente funcionando. Entonces, lo necesitaremos en caso de que tengamos múltiples pruebas porque siempre es la mejor práctica comenzar desde un estado limpio. Al final, si tenemos tiempo, jugaremos con algunas cosas de flackiness. Te mostraré cómo hacer que tu prueba no sea estable, como los dos y los no con tu flackiness. Jugaremos con eso un poco más tarde, pero solo para tu información, por eso lo necesitamos.

Y luego, tenemos nuestra prueba, que está bajo la declaración it. Y solo renombraré, comenzaré con algunas pruebas súper básicas que pulsarán este botón y esperarán que aparezca este texto de presión de botón. Entonces, para hacer eso, necesito pulsar el botón amarillo. Por cierto, si sientes que te estás aburriendo, siempre puedes jugar con él y probarlo antes de que yo lo haga y luego comparar con cómo lo estoy haciendo y jugar con él, si estás esperando. Entonces necesitas pulsar el botón amarillo y esperar que se muestre el texto. Entonces, para hacerlo, en realidad, como dije antes, literalmente iré a la documentation de detox. Tienes un enlace a ella en tu chitchat. Iré a acciones y como quiero pulsar, encontraré la acción de pulsar aquí y puedes ver que hay ejemplos de trabajo, por lo que puedes copiar y pegar. Así que acabo de copiar esta línea. Espero que el elemento sea pulsable y simplemente lo pegaré en mi prueba así. Y lo siguiente que necesitaré reemplazar será mi ID de prueba. Así que por ahora, solo pongamos la ID de prueba que tengo. Explicaré cómo encontrarlo o por qué esta ID de prueba. Más adelante, no necesitamos centrarnos en ello ahora mismo. Así que solo hazlo como yo. Así que agregarás esta línea a tu prueba y luego agregaré mi ID de prueba y tú harás lo mismo. Así que tómate un minuto y agrega esta línea de expect elemento por pulsable tap. También puedes copiarlo de Docs y dame una reacción una vez que lo hayas agregado. Y buscaré la ID de prueba exacta mientras estás esperando. ¿Estamos bien aquí? ¿Has agregado esta línea o la has encontrado? ¿Está arriba? Por favor, avísame.

De acuerdo, veo, genial. De acuerdo, entonces lo que necesitamos actualizar en esta prueba. También te daré más tiempo una vez que complete esta prueba. Así que también lo harás y lo ejecutarás. Entonces, lo que también necesitaremos agregar aquí. Así que solo pon las mismas ideas que tengo ahora mismo. No prestes realmente atención a por qué es así. Y explicaré después de que ejecutemos nuestra prueba, como por qué necesitamos esta ID y cómo crearla. Y yo, ya que el texto que estoy buscando es botón presionado, también reemplazaré esto por texto con botón, de acuerdo, de acuerdo, mm-hmm, de acuerdo, guardar, y ejecutaré mi prueba. Así que tómate un minuto, haz lo mismo. Se queda en la pantalla. Así que solo haz lo mismo. De acuerdo, creo que tendrás tu primer fallo aquí. Sí, podría. Sí. Genial. Entonces, está bien, sí, está bien. Es un fallo a propósito, así que estamos bien. En realidad haremos todo a través de fallar y arreglar para que aprendas algunas mejores prácticas y todo eso. Y solo dame una reacción una vez que hayas terminado con ello. Y arreglaremos la prueba. Lo haremos verde, y luego cambiaremos a otro ejercicio. De acuerdo. Me encanta que tengamos participantes tan atentos. De acuerdo, genial. Así que tenemos nuestra primera prueba y en realidad está haciendo lo mismo que necesitamos. Pero actualmente falla por la razón de que no puede encontrar la medida que estamos buscando. Entonces, en este caso, solo tenía un texto incorrecto escrito. Y esa es la razón por la que mi prueba falló. Pero también puedes tener algún error en tu ID de prueba o algo y en este caso, es bastante claro que fallará. Entonces, en caso de que realmente lo reemplace así, debería pasar ya. Arréglalo en el code. Sí, arréglalo en el code. Entonces, en realidad es algo bueno a veces cuando tu prueba falla y en realidad escribiste algo significativo, escribiste el texto correcto en tu lógica, pero la prueba falló, a veces realmente significa que necesitas actualizar algún texto en tu aplicación porque no tiene sentido. Entonces, mi prueba está en verde ahora, está funcionando. Por favor, quienquiera que esté haciendo esto, dame una reacción de que tus pruebas también están en verde ahora y continuaré a la parte más interesante, porque es como por ahora, es algo súper básico, básico.

De acuerdo, genial. Entonces, básicamente, lo que hacemos aquí, pulsamos en algún botón y esperamos que algún texto sea visible. Y estamos esperando aquí elemento, estamos pulsando en el elemento por ID. Entonces, ¿qué significa realmente esta ID? Entonces, la mejor práctica en la escritura de pruebas de Detox es siempre coincidir con tu elemento por la prop de test ID. En realidad puedes tener muchas opciones diferentes como por qué coincidir, puedes coincidir por texto, como hicimos con las cadenas de prueba que estamos buscando en Alert. Podemos coincidir por etiqueta, podemos coincidir por rasgos para iOS, y que tiene algún ancestro o descendiente específico, podemos coincidir con alguna combinación de medidas como elemento para tener esta ID y este texto, y también podemos coincidir en índice. Podemos tener muchas medidas complicadas diferentes, pero la ID de prueba siempre será la mejor opción.

Así que con el ID de prueba, puedes hacer algunos trucos para hacerlo súper único y trabajar siempre con él. Por lo tanto, recomendamos encarecidamente añadir el ID de prueba a tu componente de React Native, y sólo una vez que lo hagas, coincidir con tu ID de prueba. Así que en realidad, una vez que estás pasando tu prop de ID de prueba a tu componente de React Native, eventualmente se transforma en el identificador de accessibility en iOS y en la etiqueta en Android. Así que en caso de que vayas a buscar el ID de prueba, eventualmente, puedes abrir Xcode. Te mostraré antes del descanso cómo hacerlo porque creo que es como, es una cosa opcional. Puedes hacerlo así, pero usaremos los IDs de prueba preparados antes de la masterclass. Así que no vamos a gastar tiempo en ello, pero básicamente en Xcode, si fueras a debug tu clave kara, puedes encontrar esta sección de accessibility aquí y ves el identificador, que es nuestro ID de botón que acabamos de usar. Y en Android, es un poco diferente. Se llama etiqueta. Puedes encontrar en la lista de los atributos de la misma manera también como en Android puedes usar Android Studio, adjunta tu inspector de diseño a la jerarquía que tienes, a las pantallas que tienes y ver la tecnología de esta manera. Así que por qué necesitarías esta forma de buscar el ID de prueba es cuando tienes una estructura súper complicada de tu proyecto y realmente no puedes recordar cómo diseñaste tu ID de prueba y no puedes obtener la versión final. Así que en este caso lo necesitarás. Pero ya he añadido los IDs de prueba a este proyecto. Así que simplemente, lo usaremos tal cual. Así que si quieres, puedes simplemente buscar a través de estos componentes y encontrar los IDs de prueba que necesitas o puedes usar los míos juntos con, genial.

Así que eso fue todo lo aburrido por hoy. Pasemos a la escritura de pruebas. Genial, hagamos algo más. Tenemos esta segunda sección, que se llama películas de moda y tiene como un carrusel con estas diferentes películas mostradas. Y es más o menos la misma imagen y componente de título repetitivo. Así que hay muchos de esos, podemos deslizarlos y ver lo que más tenemos.

Así que lo que quiero hacer es que realmente quiero hacer clic en esta imagen de películas de moda y esperar que se muestre este texto de descripción general. Así que empezamos con solo practicar dos acciones diferentes y más adelante también practicaremos las mejores expectativas. Así que renombremos, esta prueba a debería hacer clic en el botón y copiémosla para hacer la segunda. Así que quiero hacer clic en esta imagen. Iré a esta galería de películas y veré cuál es mi ID de prueba. Así que en este caso, tengo una ID de prueba aquí. Así que se pasa como una propuesta así en caso de que estés añadiendo ID de prueba a tu componente React Native, podría no ser compatible, así que tendrás que pasarla como propuesta hacia abajo y hacia abajo y hacia abajo a tu componente nativo real como herramienta. Como aquí tengo imagen. Así que básicamente, por eso lo estoy pasando así, como props test ID dot image. Así que mi ID de prueba final eventual contendrá dos cosas. Contendrá esta ID de prueba películas de moda y tendrá dot image. Así que mi ID de prueba será dot image así. Y quiero hacer clic en ella y asegurarme de que mi descripción general se mostrará realmente. Y vamos a hacer clic en la imagen. Y vamos, como toma tu minuto, haz lo mismo, y ejecutemos nuestra prueba para ver que realmente falla y luego averiguaremos por qué.

Bueno, genial, espero que hayas terminado con esta prueba. Y ahora déjame explicarte cuál es la razón de esto. Así que una vez comparando con la automation web, cuando estás buscando algún elemento, como quieres hacer clic en alguna imagen que es repetitiva, o tienes algún componente de lista y tienes títulos que son repetitivos. Y en realidad tienen la misma ID de prueba. Así que en mi caso, todas estas imágenes, esta y esta y esta y esta, todas ellas tienen la misma ID de prueba porque es un componente repetitivo. Así que si estás trabajando con automation web, en la mayoría de los casos lo que haría esta prueba, en realidad haría clic en la primera que se encontrara. Pero DDoS no funciona así, en realidad fallará con el problema de que se encontraron múltiples elementos con esta medida, lo cual es bueno para tu capacidad de prueba porque en este caso prestarás atención y tendrás que reemplazar esta medida para ser súper único para hacer clic en uno específico. Y en este caso como lo hice, es súper genérico y podría hacer clic en cualquier imagen. Y para que esto pase, necesitaré especificar cuál es la imagen específica en la que quiero hacer clic. Así que de nuevo, la mejor práctica es siempre hacer que tu ID de prueba sea única. Así que lo que puedes hacer con ello, podrías tener en realidad en este componente, Galería de películas, lo que podrías hacer, podrías de alguna manera aquí generar tu índice de la imagen. Así que tendrías tu ID de prueba como punto cero, tendrías el índice de la imagen en la que quieres hacer clic. Así que cada imagen tendría una ID de prueba única, como la primera tendría cero, la segunda tendría uno y blah, blah, blah. Así que esta es la mejor práctica, pero sería demasiado fácil si solo tuviéramos best practices. Así que hagámoslo de otra manera. Solo lo eliminaré. Y usaremos otra opción que tenemos. Tenemos una medida llamada at index. De nuevo, volveré a la documentation para mostrártelo. Tenemos una medida llamada at index. Y siempre te muestro la documentation porque dependiendo de las medidas que uses, a veces tendrás una estructura diferente de esta línea. Así que presta atención a todas estas partes donde la estás colocando. Así que solo copiaré este at index y lo pondré justo aquí antes del top. Y haré clic en la imagen cero, que es la primera imagen en mi línea. Así que la película Shawshank, y esperaré que suceda. Y corramos para ver si es verde. Toma tu minuto, haz lo mismo, asegúrate de que tu prueba es verde. Espero que mi prueba sea verde en realidad. Sí, genial. Bueno, genial. Dame reacciones una vez que hayas terminado con ello. Genial, genial. Veo reacciones. Increíble. Genial.

Bueno. Así que ahora déjame explicar un poco lo que acaba de pasar. Así que especificamos, creo que entiendes que especificamos el índice en el que queremos hacer clic. Así que en realidad en una rama con prueba. Lo que verás es que tendrás los antiguos ejemplos de pruebas. Tendrás resultados de fallos y la razón del fallo y los verdes. Así que puedes ponerte al día con eso después pero solo mantendré la prueba verde. Así que nuestro mejor conjunto será verde. Así que lo que ves en mi prueba es que en realidad estaba recargando el estado antes de que comenzara. Así que por eso mi prueba, tengo dos pruebas ahora. Cada prueba comenzó desde el mismo punto de partida desde la pantalla de inicio. Y en caso de que yo eliminara esta línea. En realidad, la segunda prueba comenzaría desde esta escena. Jugaremos un poco con ella en la parte de flackiness pero aún así solo para tu información, realmente lo necesitamos una vez que tenemos múltiples pruebas.

Genial, así que estamos bien con un toque en la imagen por índice. Y lo siguiente que haremos, quiero tocar una imagen que está, digamos ciertamente en la línea. Así que esta, digamos El Padrino. También película, así que intentemos tocarla. Así que de nuevo, copiaré mi prueba. Debería tocar la tercera imagen por índice, y la reemplazaré para tocar en el índice dos. Y ejecuto mi prueba. Tómate un minuto, haz lo mismo y veamos qué pasa. Bueno, genial. Tenemos nuestro fallo. Así que dame una reacción una vez que también tengas un fallo para que pueda empezar a explicarlo. Y probablemente omitiré la prueba anterior que tuve para que sea más rápido. Bueno. Y esperando tus reacciones. Veo, está bien. Dame unos cuantos más y procederé. Bueno, increíble. Así que tenemos nuestro fallo. Increíble, genial. Así que ¿qué pasó en este caso? Lo que intentamos hacer es intentamos tocar esta película, que es algo posible si lo hago manualmente. Pero la razón del fallo en este caso sería que nuestra imagen en la que intentábamos hacer clic en realidad no era lo suficientemente visible para que Detox hiciera clic en ella. Esto es algo importante que debes saber en caso de que estés intentando hacer clic en un elemento que no está pasando un umbral de visibilidad puedes ver un problema aquí. Puede ser del 75% o del 100% dependiendo del tipo de componente que tengas. Pero en caso de que no lo esté pasando, fallará en este paso simplemente porque no pudo hacer clic en él. Así que para solucionar esto, lo que necesitaremos hacer es que necesitaremos hacer alguna acción de deslizamiento o desplazamiento. Y después de eso, haremos clic en la imagen que se muestra. Así que como este falló, simplemente renombrémoslo a shooter scroll, lo siento, deslizar. Y hacer clic en la tercera imagen por índice. Y de nuevo, simplemente iremos a nuestra documentation aquí, encontraremos la acción que necesitamos, que es un deslizamiento. Y de nuevo simplemente copiaré esta primera línea. Lo siento, desplazar. Necesito un deslizamiento. Bueno, ahora deslicemos, está bien. Oh así, sí. Genial. Así que lo pegaré antes de tocar. Y lo que necesitaré reemplazar, necesitaré reemplazar el componente en el que estoy deslizando, así que donde comencé la acción de deslizamiento, y luego la dirección que estoy usando para el deslizamiento. Así que mi dirección es definitivamente a la izquierda. Y el componente que estaré deslizando es en realidad mi imagen que tengo. Así que la mejor práctica en caso de que estés deslizando algo, será en realidad empezar a deslizar desde el primer componente que tienes. Así que tu deslizamiento será como el más pequeño, y algo controlable. Así que es como una pequeña pista. Así que en caso de que estés haciendo esto, estaré deslizando desde, como, así. Déjame copiar todo esto. Bueno, así. Y simplemente lo pegaré aquí. Así que empezaré a deslizar en cero. Deslizo a la izquierda, luego intento tocar, y luego espero, de nuevo, que esta página esté abierta y todo sea visible. Y estoy intentando ejecutar mi prueba. Tómate un minuto, haz lo mismo. Lo dejaré así, para que veas el code. Pero realmente te animo a que copies y pegues desde la documentation. En realidad es siempre lo más fácil y rápido. Así que, solo hazlo. Genial. Mi prueba es verde, avísame si tu prueba también es verde.

También puedes jugar con esto en tus aplicaciones. Y otra cosa que tenemos además de deslizar es también desplazar. Así que desplazar tiene en realidad muchas opciones diferentes. En primer lugar, puedes simplemente desplazarte por algún elemento específico como en una dirección específica, en una cantidad específica de espacio desplazado. Y otra opción, lo que puedes hacer es que puedes desplazarte continuamente hasta que algún elemento se muestre. Así que básicamente esto es lo que intentaremos porque creo que es la forma más estable en caso de que estés dispuesto a tocar algún componente o al menos esperar a que sea visible y esté como debajo del viewport.

Así que recomendaría usar este while element. Así que este es un comando bastante largo. Lo que realmente hace, es que espera a que algún elemento sea visible mientras que el elemento por ID será desplazado. Así que asegúrate de que una vez que estés desplazándote estás desplazando tu vista de desplazamiento. Así que deberías tener una vista de desplazamiento para realmente desplazarla, lo cual tiene mucho sentido. Así que lo que haremos es simplemente entrar aquí, crear otra prueba para nosotros. Vale. Y lo que haremos es que realmente lo llamaremos debería desplazarse hasta que algún elemento sea visible. Y luego lo tocaremos de nuevo. O tal vez simplemente esperemos a que algo sea visible para verlo y hacer el texto. Así que quiero desplazarme hacia abajo aquí y realmente ver esta sección. Así que quiero comprobar el estilo other movies que realmente se muestra. Así que presta atención que es como un componente repetitivo de nuevo. Así que tenemos la sección de películas de entrenamiento y luego tenemos otras películas, que es la misma sección pero con un nombre diferente. Así que de nuevo, un componente repetitivo. Así que necesitas ser bastante cuidadoso en términos de como el ID de prueba, de nuevo. Así que vamos a intentarlo. Realmente te mostraré el comando de desplazamiento y luego te daré un espacio para que lo intentes por tu cuenta para encontrar la medida exacta que necesitas para encontrar este texto de otras películas y no el de abajo. Genial, así que simplemente eliminaré estos dos e iré a la documentation. Copiaré este largo comando, este. Espera un while element y lo pondré en la primera línea. Así que ahora necesitaré reemplazar el elemento por el que me estoy desplazando y el elemento que estoy esperando. Así que asegúrate de que el primer elemento es el que esperas y el segundo elemento es el que desplazas. Así que estoy esperando, hagámoslo como de una manera estúpida. Haré other movies text, así que esperaremos por texto. No necesitas una medida complicada solo para ver la pantalla de prueba. Y luego necesito desplazarme por alguna vista de desplazamiento, así que es una página de inicio. Así que simplemente comprobaré y veré si tengo el ID de prueba en realidad, que no tengo. Así que lo que haremos, lo añadiremos ahora mismo. Lo añadiré aquí y lo llamaré HomeScrollView así, así. Y lo pondré aquí y simplemente eliminaré la segunda línea, recomendaré la segunda línea por ahora y simplemente ejecutaré la primera. Así que de nuevo, tómate tu minuto ahora, copia este largo comando, luego reemplaza el texto que estás emparejando por y añade un ID de prueba a tu casa. Lo dejaré así, para que veas dónde ponerlo. Solo añade un ID de prueba HomeScrollView por el que te desplazarás. Así que tómate tus minutos, uno, dos, cinco, está bien. Solo intenta hacerlo. Y abriré la prueba allí así. Lo siento, solo un segundo, así. Así que verás tanto la prueba como la casa. Sí, hazlo y dame reacciones de que has terminado. Y ejecuta tu prueba en realidad para ver que es verde y ver lo que está haciendo. Y lo mostraré en mi máquina después. Solo comprobando dónde se supone que debemos añadir el ID de prueba a nuestra vista de desplazamiento o no todavía? Así que sí, siéntete libre de añadir. Ve a este archivo Home Js. Luego tienes esta vista de desplazamiento, que es como para toda la página. Y eres el ID de prueba justo en esto, justo así. Puedes añadir tu propio test que te guste y simplemente ponerlo allí. Y siempre recuerda la mejor práctica para hacerlo único para que no se mezcle con alguna otra vista de desplazamiento en caso de que la tengas en tu página. Chicos, cuatro minutos más para completarlo. Tómate tu tiempo y dame reacciones una vez que hayas terminado. Veo una reacción ya, super genial. Pero unos minutos más para que todos continúen. Y chicos que acaban de terminar, os recomiendo encarecidamente que vayáis a la documentation y juguéis con otras opciones del desplazamiento. Juega con el desplazamiento hacia abajo, juega con el rápido o veo más reacciones. Juega con el desplazamiento hasta el fondo, juega con este desplazamiento como este. Hay desplazamiento solo hacia arriba o hacia abajo, desplazamiento hasta el borde, simplemente juega con la API una vez que tengas tiempo. Y puedes reescribir el ejemplo anterior donde estabas usando deslizamiento en lugar de deslizamiento. Puedes usar un desplazamiento también, ¿verdad? Puede ser más estable. Pero deslizar a veces es la opción, pero diría que deslizar es más la opción en caso de que tengas algún componente de deslizador que siempre se desliza solo a uno, al segundo, el primer componente que tenemos aquí. Como este, que puede cambiar solo a la segunda imagen, así que deslizar funcionaría allí. Pero en otros casos, es mejor asegurarse de que estás buscando algo específico. Vale, bien. Veo. Vale.

Genial. Así que hagámoslo un minuto más y continuaremos con el siguiente.

Vale, unos segundos más y continuamos con la siguiente parte.

Vale, así que cerraré este HomeJS. Creo que la mayoría de la gente ya ha terminado con él. Así que lo siguiente que haremos, como lo que hicimos en esta prueba, fue desplazarnos hacia abajo hasta que algún elemento sea visible. Pero esto no es realmente una prueba. Realmente hace alguna acción y se desplaza y no falla, pero no es realmente una prueba. Y la razón de eso es que le falta una expectativa. Así que ahora descomentemos esta expectativa y hagamos mejores expectativas que las que hicimos antes. Así que lo que hicimos antes en la mayoría de los casos es que esperábamos por el texto. Pero esperar por el texto no siempre es una buena práctica. Y la razón de eso es que realmente podemos cambiar el texto. Podemos tener una aplicación multilingüe, lo que significa que el texto puede ser diferente dependiendo del idioma y más. Así que crea inestabilidad y costos de mantenimiento extra, así que no lo necesitamos. Así que la mejor práctica siempre es coincidir por ID si quieres comprobar que el elemento es visible. Pero si queremos comprobar que el elemento tiene el texto exacto, lo que necesitamos hacer es esperar, como esperar que algún elemento por ID tenga un texto específico. Así que esto es lo que haremos. También te mostraré las expectativas docs. Así que podemos esperar tener diferentes cosas. Hicimos antes la expectativa de ser visible y también podemos tener que existir, que esté enfocado, que tenga texto y tal. Y también puedes añadir una declaración de nota como esta, en caso de que quieras esperar que algún elemento, no sea visible. Así que simplemente lo añades así. Añades, esperas elemento blah, blah, blah, punto no, punto para ser visible. Así que simplemente funciona con cualquier expectativa, pero usaré una diferente usaré 'to have text'. Así que copiémoslo. Y lo que haremos en esta prueba es que quiero esperar que el elemento por ID tenga texto, otras películas. Es un poco estúpido en este caso porque en realidad estamos desplazándonos para ver otras películas y luego lo hacemos, pero aún así. Hagámoslo. Así que simplemente probaremos esta API. Así que voy a comprobar que mi componente, mi título, que estoy buscando tiene el texto correcto. Iré a mi galería de películas para obtener el ID de prueba de mi título. Creo que tampoco lo tiene. Así que simplemente lo editamos aquí. Aquí. Genial. Así que simplemente añadiré de nuevo mi ID de prueba. Lo llamaré, hagamos algo super estúpido ahora, que tendremos que arreglar eventualmente. Hagamos un título genérico llamado título, que es como nunca hacer lo mismo, pero hagámoslo solo para el experimento. Y llamémoslo título. Y simplemente lo editamos en nuestra prueba y hacemos esperar elemento por ID título para tener texto otras películas y guardar. Y simplemente volvamos a ejecutar nuestra prueba para ver qué tendremos. De nuevo, lo estoy abriendo en partes para que puedas ver ambos, añade tu ID de prueba, añade este elemento de espera por ID título para tener texto otras películas. Y déjame saber si tu prueba es verde o no, solo dame una reacción. Creo que hay alguna reacción que Yaroslav siempre está usando con la manzana verde. Así que en caso de que tu prueba sea verde, solo dame una manzana verde si la tienes en tus reacciones. Y si es rojo, dame algo más. Y también lo ejecutaré. Rojo, vale. Veamos qué obtenemos aquí. Vale, yo también tengo rojo, genial. ¿Quién más tiene el resultado rojo? Vale, genial. ¿Alguien más? Vale, tomate rojo, muy original Yaroslav. Es muy original. Vale, rojo, genial, genial. Así que puedes seguir escribiendo pruebas después de mí una vez que yo esté hablando. Así que creo que ya entiendes la razón del fallo. Y la razón del fallo es en realidad que nuestra coincidencia no es única, era extremadamente genérica. Así que hagamos otro truco para hacer esta coincidencia super única. Así que haré un pequeño desafío para ti. Así que ve a los detalles documentación en realidad, e intenta hacer esta coincidencia de título, intenta hacerla única con cualquier forma posible que encuentres. Puedes modificar esto, como en la galería de películas, o puedes hacerlo a través de las coincidencias reales que puedes hacer como puedes usar la coincidencia de fin, puedes usar ascendente o cualquier otra cosa, y simplemente hazlo, haz que tus pruebas sean verdes, como una pequeña tarea de desafío, y dame una reacción una vez que tu prueba sea verde, y eventualmente te mostraré una simple, como múltiples formas de hacerlo. Así que hubo una pregunta interesante sobre, ¿deberíamos tener múltiples expectativas en un caso de prueba o no? Así que es una buena pregunta porque realmente depende del caso. Así que en general, diría que es mejor que tu prueba compruebe sólo una cosa. No significa que tengas sólo una expectativa, pero significa que el objetivo de tu prueba es comprobar sólo una cosa específica, que alguna acción ocurrió o no sé que se creó una cuenta, y blah-blah-blah. Y una vez que lo estás comprobando, puedes tener múltiples criterios sobre cómo lo compruebas. Por ejemplo, si hiciste un registro exitoso, cuando tienes algún mensaje de éxito, y aparece una imagen de cuenta, como en realidad, el manual QA haría múltiples comprobaciones. Comprobaría que el mensaje de éxito es correcto, comprobaría que aparece la imagen, comprobaría que aparece el nombre y tal. Así que en este caso, si estás esperando múltiples elementos, podría estar bien, pero necesitas saber el inconveniente de ello es que en caso de que esta primera expectativa falle, las demás no se ejecutarán. Así que en este caso, sufres no comprobando dos expectativas más, pero para este caso específico, está bien.

Pero en caso de que estés haciendo, lo que definitivamente no deberías hacer es cuando haces paso, paso, paso, expectativa, luego dos pasos más y de nuevo expectativa, este no es el camino a seguir. Deberías dividir esas pruebas para comprobar exactamente lo mismo. Así que incluso si tienes algo como que estás haciendo el registro y digamos que estás introduciendo tus data y luego presionas el botón y luego quieres comprobar, digamos que tu botón se activó, luego lo presionas y quieres comprobar que tu cuenta fue creada, no es el mejor enfoque. Es mejor reemplazarlo con dos pruebas diferentes o en este caso, preferiría reemplazarlo con diferentes niveles de pruebas. Como comprobar el botón deshabilitado, habilitado, lo comprobaría con otros niveles, probablemente como pruebas de componentes o algo así. Y el escenario real como del registro, por ejemplo, lo comprobaría con la prueba completa de extremo a extremo Así que de nuevo, úsalo sabiamente, intenta usar una expectativa, pero en caso de que quieras comprobar múltiples situaciones para aparecer en el mismo punto, puedes usar múltiples. Espero que responda a la pregunta.

Genial, en realidad hay múltiples opciones posibles que podrías haber usado. Podrías haber ido a esta prueba escribiendo chitchat aquí y ver, como esto. Vale, así que puedes ver aquí múltiples opciones diferentes. Así que puedes generar tu ID de prueba para tales componentes repetitivos. Así que podrías haber añadido algo como, en lugar de tener aquí, solo el ID de prueba del título, podrías haber pasado las propiedades test ID dot title, y en este caso usarlo. Otra opción que podrías usar es usar estas dos opciones, ya sea con ANCESTOR o con el coincidente 'and'. Así que con ANCESTOR significa que tu componente ANCESTOR, como este, por ejemplo, debería tener algún ID de prueba específico. Así que en nuestro caso, lo más fácil sin siquiera cambiar el componente code es decir con ANCESTOR otras películas, porque mi ANCESTOR tiene como otras películas ID y funcionaría. Así que si lo hago, simplemente copiaré mi línea completamente para no gastar tiempo en eso porque tenemos más cosas que hacer. Así que lo haría así, si no quiero cambiar el componente code, lo haría así y debería funcionar. Intentemos ejecutarlo y verlo. Pero por supuesto no es la mejor práctica. Estoy mostrando este ANCESTOR, descendientes, índices y todo solo para casos cuando realmente no puedes modificar cosas o estás importando algún componente. En este caso puedes usar, y solo para jugar con la API de Dedux también. Pero en caso de que estés, puedes hacer que tus IDs de prueba sean únicos, entonces ve con eso. Genial, nuestra prueba es verde, lo cual es genial. Así que ahora quería mostrarte una última cosa para jugar. Quería mostrarte cómo añadir un code específico de la plataforma. Así que simplemente copiaré mi primera prueba. Y solo, será como, solo para mostrar el concepto. No vamos a escribir ningún code complicado. Es una cosa fácil de hacer. Lo llamaré debería tener code específico de la plataforma. Y simplemente modificaré esta prueba para ejecutar el code específico de la plataforma. Digamos, haré, es en realidad una cosa fácil. Simplemente haré si device.getplatform. Así que si device.getplatform es igual a iOS, entonces en este caso haré algo. Y puedo tener el mismo code para que ocurra en Android. Y, básicamente, significa que, en caso de que estés ejecutando en la plataforma iOS, creo que todos entienden cómo funciona. Simplemente irá a este y ejecutará esta línea, e ignorará las líneas que están en Android. Esta es una forma realmente buena de hacer que tus pruebas sean genéricas para ambas plataformas, en caso de que quieras usar algunas acciones específicas de la plataforma como las que has visto en las acciones. Así que intentemos ver si realmente funciona. Así que, he puesto este top en el botón amarillo de la primera prueba en el iOS, por lo que debería ser ejecutado en mi ejecución de iOS. Y luego la prueba debería ser verde. Pero en caso de que lo ponga en Android, debería ser ignorado y la prueba debería fallar porque no hay tal cosa. Así que hagamos dos pruebas como esta. Así que lo probaremos. Solo mírame ahora. Y luego intentarás lo mismo. Como esto. Y lo pondré en el iOS, y lo ejecutaré en ambos en iOS. Vale. Genial. Deberíamos tener dos pruebas. Vale. Así que la primera funcionó porque en realidad era la plataforma iOS. Y la segunda falló porque ignoró el code que estaba en la parte de Android. Así que de nuevo, un último ejercicio de escritura de pruebas. Tómate un minuto, haz lo mismo, y luego te mostraré cosas relacionadas con la ejecución de pruebas. Creo que esta cosa, como mientras trabajaba también, como trabajé con diferentes frameworks, como frameworks híbridos para la automation móvil antes. Y con Detox, creo que esta es una forma realmente genial de hacer que tus pruebas sean genéricas porque me gusta, creo que a muchas personas les gusta reutilizar el code tanto como sea posible. Así que iría con esto en caso de que estés haciendo genérico. Y de nuevo, dame una reacción una vez que tus pruebas estén bien. Una debería ser verde, la otra debería ser roja. Así que Yaroslav, el emoji perfecto para esto sería probablemente un semáforo. Vale, veo reacciones. Genial, hagamos un minuto más y finalmente cambiaremos a debug en una prueba fallida. Vale. Vale. Genial, así que, creo que continuaré desde este punto. Simplemente eliminaré estas pruebas que tengo y omitiré todas mis pruebas porque cambiaremos a la parte de escritura de pruebas y jugaremos un poco con las pruebas fallidas. Así que con lo que realmente empezaremos. Así que, en Detox tienes muchas, muchas pruebas y en Detox tienes muchas, muchas opciones diferentes mientras estás ejecutando tu prueba.

Por favor, abre la hoja de trucos de escritura de pruebas que tienes. De nuevo, y encuentra como desplázate hacia abajo, encuentra la sección de pruebas fallidas. Entonces, usualmente cuando estamos pensando cómo queremos ejecutar nuestra prueba, simplemente vas a la documentation de Detox, a la CLI de Detox y puedes ver realmente cuáles son las opciones que tienes para la prueba. Así que para la prueba, puedes especificar la configuración con la que ejecutas como hicimos antes. Puedes hacer la ejecución de nuestra configuración en caso de que tengas múltiples configuraciones en tu proyecto. Puedes especificar el nombre del dispositivo como si quisieras ejecutar un específico. También puedes trabajar con niveles bajos si lo intentas lo cual es útil para debugging. Puedes usar artefactos de prueba. Si quieres intentarlo, también lo intentaremos en unos segundos que es como capturas de pantalla y videos que es mi herramienta más adorable en Detox porque realmente te ayuda a debug tus pruebas súper rápido, y también puedes especificar algunos reintento, limpieza después de tus pruebas. Puedes especificar trabajadores para ejecutar en paralelo y lo intentaremos todo ahora mismo. Así que no más charla de mi parte. Solo jugando con eso. Así que probemos la primera cosa. Hagamos que algunas pruebas fallen. Hagamos que sea esta segunda prueba que recuerdas que estaba tocando en Imagen por Índice. Y dejemos esta línea tal como está y simplemente cambiemos el texto en Resumen a ResumenblahBlah. Así que esta prueba debería fallar y luego omitirla y simplemente ejecutar para ver que falla. Así que solo quiero ver la prueba roja y empezar a hacer algo con la rojez. Solo esperemos que falle. Vale, está sucediendo aquí. Sí, así que falló. Así que digamos que queremos saber cuál es la razón de este fallo. Queremos entrar en detalle. Así que lo primero en esto que puedes hacer es que puedes ejecutar con un nivel de registro diferente. Así que tienes muchas opciones. Recomiendo usar detallado. Así que hagámoslo ahora mismo. Añade a tu comando de ejecución menos L y pon detallado aquí. Y ejecuta con eso. Toma tus minutos, haz lo mismo y comprueba lo que verás en tus registros sucediendo. Verás las interacciones exactas con tu aplicación sucediendo. Así que verás mucha más información al respecto. Genial, así que en realidad, como Amit escribió en el chat, el nivel de registro predeterminado es información. Así que podemos profundizar con el detallado y puedes ver realmente las cosas que tenías en tu pantalla y es como súper largo pero es realmente informativo en caso de que estés buscando un problema y no estés seguro de cuál es. En nuestro caso, es bastante claro pero aún así, en caso de que no estés seguro, solo intenta usar este nivel de registro. Probemos la segunda cosa. Intentemos tomar capturas de pantalla de nuestro fallo. Ddocs tiene una API que toma capturas de pantalla para tu prueba dependiendo del indicador que le des, puede hacer capturas de pantalla de todas tus pruebas, puede hacer capturas de pantalla de pruebas específicas, puede hacer capturas de pantalla solo de las fallidas o ninguna. Así que voy a hacer una captura de pantalla de la prueba fallida que tengo. Solo vamos a comprobar que mi comando es correcto. Sí, lo es, genial. Así que de nuevo, toma tu minuto, ejecuta lo mismo y te explicaré lo que acaba de pasar y dónde buscar esas capturas de pantalla. Vale. Vale, así que mi prueba falló, tengo las capturas de pantalla. Así que dame reacciones una vez que hayas terminado con eso para que pueda empezar a mostrar y hablar sobre las capturas de pantalla por favor y todo. Vale, genial. Veo muchas reacciones, genial. Así que puedes ver a la izquierda, quizás ya te diste cuenta de que tienes aquí una carpeta de artefactos creada. Y esta carpeta de artefactos, ¿qué tiene? En realidad tiene las tres capturas de pantalla. Así que la primera captura de pantalla que tiene es en la prueba iniciada. Así que la forma en que la prueba se ve una vez que se inicia. La segunda captura de pantalla que verás es en el fallo. Así que este es el punto exacto de tu prueba cuando falló y luego tienes la prueba hecha, que es el último punto después de todas las limpiezas finales o como después de que se ejecutó el code. Así que este es el último, que verás en mi caso, ya que no estoy ejecutando nada después de mi prueba, será simplemente el mismo, pero básicamente estás teniendo tres capturas de pantalla. Así que puedes comprobar si te falta algo en tu pantalla, como si estás esperando algún elemento y realmente lo estás perdiendo o algo más. Ves que como en la web, es realmente popular obtener tal fallo porque algo aún no se cargó en la pantalla, pero aquí no enfrentamos este problema porque aunque tenemos múltiples cargadores en nuestra aplicación, Dtox espera que esté inactivo, y solo entonces espera o como comprueba que algo sea visible, por lo que no necesitamos esos camareros para agregar, no necesitamos como hacer algunos camareros personalizados para animation y tal. Lo hace automáticamente. Así que, esto es como la cosa de la captura de pantalla, realmente me encanta, es súper útil si estás trabajando con tu propio proyecto puedes jugar con él también, y una vez que estás configurando Dtox para CI, que es un punto para una masterclass diferente, pero aún así, en ese caso también estarás, como puedes hacer algo de magia, ya sabes, sube tus capturas de pantalla a algún lugar y simplemente accede a ellas desde allí o puedes como usar esta API de captura de pantalla donde quieras. Genial, y la próxima cosa que realmente intentaremos, la última cosa en como investigar el fallo es saber por qué falló nuestra prueba por el video. Así que, intentemos usar el comando de grabar videos. Es casi lo mismo que tomar capturas de pantalla, pero simplemente añades aquí grabar videos y pones en fallo y lo ejecutas y de nuevo, hazlo, ve lo que pasa. Intenta encontrar tu video. Estará en la misma carpeta de artefactos y dame alguna reacción. Oh, vale. Vale, ¿estamos bien? ¿Has encontrado el video grabado? Vale, veo una reacción. Vale, genial, veo dos. Genial. Vale. Así que, para cada ejecución, tendrás esta carpeta creada con la fecha y hora exactas de la ejecución, así que puedes encontrar tu ejecución exacta. Y aquí tendrás tu video del archivo de prueba.

Simplemente lo revelaré en mi Finder, y vamos a abrirlo para ver qué estaba pasando. Así que esta es la prueba exacta. Realmente se detuvo, y luego falló. Así que volvamos a reproducirla. Así que este es el video completo, y probablemente es la mejor herramienta en caso de estar debugging tu fallo de prueba. Puedes ver los pasos completos de la prueba y ver qué estaba pasando. Así que esto es realmente casi lo último para debugging un fallo, porque usualmente esas cosas son más que suficientes. Pero en caso de que quieras debug paso a paso como normalmente haces con tu aplicación, también puedes usar un indicador de punto de interrupción InSpec regular en tu comando de prueba, el mismo comando de prueba, luego vas a InSpec. Siempre está adjunto... Como lo haces para tu aplicación regular, puedes debug de la misma manera en caso de que lo necesites, pero en la mayoría de los casos para debug tu prueba específica, este artefacto de prueba será suficiente. Y es realmente una de las características más adorables que creo que tiene Detox. Genial. Todas las características son por supuesto adorables, pero esta es mi favorita.

Bien, genial. Así que ahora quería mostrarles una cosa más. Así que a veces otro punto de dolor en el trasero o razones para el fracaso pueden ser los IDs de prueba que agregaste a tu destino que finalmente fue incorrecto. Entonces, como prometí, solo mostraré cómo puedes ver tus estudios de prueba exactos. Así que lo mostraré en Xcode y luego también intentaré mostrarlo en Android Studio. Me retrasa un poco, así que podría mostrarlo aquí, pero incluso en caso de que no lo muestre para Android Studio, te daré instrucciones sobre cómo hacerlo de tu lado porque es como la misma lógica. Entonces, básicamente en Xcode, lo que necesitas hacer, simplemente abres cualquier proyecto, como en realidad no estoy trabajando con Xcode o Android Studio mientras trabajo con Detox porque la Línea Común es más que suficiente pero en caso de que quieras ver visualmente la jerarquía, puedes hacerlo de dos maneras. Puedes agregar una línea en tu prueba al final que hará una instantánea de tu jerarquía y puedes abrir este archivo o puedes adjuntarte al proceso que tienes en tu dispositivo aquí y en este caso, podrás simplemente adjuntarte a este. Así que usaré debug, adjuntar al proceso. Estoy obteniendo la lista de procesos y este es el que necesito. Así que solo esperaré a que esto suceda. Como puedes descansar ahora, no habrá codificación después de este lugar así que puedes descansar. Ese fue el último punto de codificación y o te gusta si estás interesado en paralelo conmigo hablando siempre puedes jugar con otras APIs. Entonces necesitas abrir si vas a hacer esto necesitarás abrir esta masterclass de detox workshop detox workshop y encontrar el archivo delegado, ábrelo y luego verás en la parte inferior aquí es un poco difícil mostrarte, no puedo agrandarlo pero ves que hay un debug en la parte inferior. Entonces, si lo presionas, lo que verás es que mi jerarquía actual se mostrará. Así que detrás del xcode puedes ver que hay otro dispositivo que estaba realmente abierto es como para adjuntarse a este proceso así que puedes ignorarlo. Pero mi UI real de este lugar se muestra aquí, y si toco cualquier elemento, verás que en el lado derecho tengo el identificador de accessibility, este, que es mi ID de prueba real que estaba pasando. Entonces, en algunos casos, si no lo has pasado correctamente al como abajo y abajo y abajo a tu componente real como componente nativo en este caso, podrías tenerlo vacío, o si hiciste algo, ya sabes, confinamiento y agregaste algunas líneas podrías tenerlo de la manera incorrecta. Entonces, para comprobarlo, puedes ir aquí y ver como ¿cuáles son los identificadores de accessibility que tienes? Entonces puedes ver aquí como en este modo y también puedes cambiar aquí al modo 3D. Puedes ver la jerarquía exacta que tienes. Puedes encontrar como componentes ancestros o descendientes para usar. Y puedes ver aquí que tengo esta imagen de Películas en Tendencia que hemos usado antes. Y este será el título de Películas en Tendencia. Entonces puedes trabajar con esta parte mientras copias y pegas los estudios de prueba en caso de que la estructura de tu proyecto sea realmente complicada o algo así. Genial. Mentí. Tenemos una cosa más realmente súper genial para probar. Totalmente olvidé de ello, pero definitivamente lo haremos. Creo que te encantará porque intentaremos correr en paralelo. Realmente haremos un ajuste súper fácil. Simplemente duplicaremos nuestro archivo de prueba. Este lo copiaremos y lo renombraremos a ser la segunda prueba. Entonces, vamos a intentarlo. Sí, y vamos a tener algunos, eliminaré la mayoría de mis pruebas para tener solo una prueba con el desplazamiento, que es bastante largo en el segundo y alguna prueba corta en la primera. Dejemos que sea esta primera prueba. Bien, genial. Ahora tengo dos archivos donde tengo prueba. Entonces, para correr en paralelo, lo que necesitas tener, necesitas tener dos archivos separados con prueba. Así que cada uno de los archivos se abrirá en Trell. Entonces, para correr en paralelo, básicamente usas este indicador de trabajadores menos V que especifica la cantidad de trabajadores para crear para ti. Crearé dos, puedes crear más, depende de ti, pero siempre debes recordar que será como un consejo. Realmente me encanta decir que una vez que estás diseñando como escribiendo tu prueba, siempre deberías escribirla como si eventualmente se ejecutara en paralelo con otras pruebas, porque una vez que estás diseñando tu prueba súper independiente, para que pueda correr y no fallar otras pruebas y no interactuar con otras pruebas y correr realmente en modo aislado independiente, en este caso tu prueba será la mejor. Si estás en prueba dependiente, siempre será un problema eventualmente. Entonces, vamos a correrlo en varios trabajadores, haré dos, haré menos V dos. Y la primera ejecución será bastante lenta porque se lanzará mi segundo emulador. Pero después de eso, una vez que lo haga la segunda vez, será mucho más rápido que hacerlo en un trabajador. Entonces, vamos a intentarlo. Bien, entonces ves que mi segundo emulador está comenzando y tomará tiempo para que comience. Entonces, en el primero, acabo de empezar a trabajar ya, lo volveré a ejecutar después. Y ahora puedes hacer lo mismo, solo toma tus minutos, crea el segundo archivo. Incluso puedes tener todas las pruebas allí, solo asegúrate de tener dos archivos para algunas pruebas y corre con este menos v2 y dame una reacción como siempre. Genial, entonces mis pruebas están realmente hechas. Dame reacciones una vez que también hayas terminado, y mientras tanto volveré a ejecutar mis pruebas. Genial. Veamos, está hecho. Genial. Y la segunda vez, puedes ver si alguien me está viendo ahora, puedes ver que sucede mucho más rápido. Entonces las pruebas están corriendo, y tomó para cada prueba mucho menos y en total fue por la prueba más larga. Fueron 15 segundos y no como 40 o 30 segundos que tendríamos si estuviéramos corriendo secuencialmente. Entonces, si continúas haciendo esto, si no has terminado, y realmente cambiaré a la parte final de esta masterclass hoy, casi hemos terminado. Quiero darte algunos consejos geniales sobre la inestabilidad porque en Wix realmente, realmente luchamos mucho contra la inestabilidad. Odiamos lo mismo, tanto en web como en móvil y tenemos una especie de herramientas que creamos alrededor de ella y algunos consejos que tenemos, entonces, y creo que realmente funcionan, así que quiero compartir algunos. Y si tienes alguna pregunta, no dudes en publicarlas ahora en el chat de Zoom y las abordaremos después una vez que tengamos preguntas y respuestas, y si no hay preguntas, daré una pequeña palabra tal vez a Amit para dar algunas ideas sobre lo que nos espera en el futuro en caso de que quiera. Y después de eso me reduciré de esta masterclass, genial. Así que abriré esta escritura de prueba y quiero hablar un poco sobre la inestabilidad, así que generalmente cuando estamos hablando de agregar a testing, la inestabilidad es algo que crearon ya sea el entorno o nuestras manos, es decir, cuando escribimos, ella nos hizo. Y debo decir que la segunda parte sucede mucho más a menudo porque a veces podemos escribir algunos partidos no únicos, podemos perder algún elemento o podemos desplazarnos de manera no consistente. Entonces, estas son las cosas que realmente crean inestabilidad. Otro punto de creación de inestabilidad es en realidad los data. Así que imagina que tienes una prueba que está haciendo algunos cambios en su perfil del usuario. Así que cambia su nombre o algo así.

Y luego tienes otra prueba que hace alguna apertura del perfil de usuario y verifica que su nombre es visible. Entonces, en este caso, lo que verás es que tus pruebas están interactuando con los mismos, mismos data. Entonces, la primera prueba realmente pasará porque estará cambiando algo, pero la segunda muy probablemente fallará porque estaba buscando algunos títulos antiguos que ya no son actuales. Y tal situación ocurre bastante a menudo porque generalmente probamos en la misma cuenta de prueba y realmente no es relevante, ya sabes, crear la cuenta de prueba para cada prueba por lo que necesitas pensar cómo hacer que tu prueba esté aislada.

Lo que funciona en este caso es como, creo que la mejor estructura probablemente, dejaré de compartir esto o veremos las caras de cada uno. Básicamente, la mejor práctica, creo que es mantener la estructura correcta de tu prueba en general. Es tener algunos pasos de preparación, a veces es incluso mejor hacerlo a través de la API, ya sabes, para crear un usuario o hacer algún cambio, y luego la prueba exacta se realizará a través de la UI, como lo hicimos hoy. Y después de eso, tendrás alguna fase de limpieza. La fase de limpieza es todo, también creo que es mejor y más rápido hacerlo a través de la API, pero incluso si no puedes, puedes hacerlo a través de la UI. Pero recuerda que en caso de que estés haciendo esas limpiezas para tu UI, si tu prueba falla, entonces tu limpieza también sucederá porque esto será un después de esto. Entonces puedes tener algún desorden sucediendo con los data. Así que todavía soy un fan de tener alguna configuración de data de API luego la prueba en sí, y luego la limpieza. Asegúrate de que no creas pruebas que son como, añadir el contacto y la segunda prueba que está eliminando el contacto. No está aislado, no es consistente porque si reemplazas el orden de esas pruebas, definitivamente fallarán. Y es como el consejo más grande probablemente es no crear pruebas dependientes. Y algunos más son una vez que estás comenzando tu prueba, asegúrate de que comienzas desde cero. Como hicimos recargar React Native antes de cada prueba que tienes, hazlo en la declaración de antes de cada uno. Así que tendrás esos, en realidad tienes esos tips en el chitchat por lo que puedes revisarlos después. Así que asegúrate de comenzar desde cero. Coincide con algo único como lo hicimos hoy. Nuevamente, resumen, como resumiéndolo, siempre es mejor coincidir con algún ID de prueba generado que es único para el componente en lugar de hacer algunos trucos en las APIs o hacer algunos trucos alrededor de ideas de prueba súper genéricas. Usa esta estructura de prueba correcta e intenta ejecutar pruebas como si se ejecutaran en paralelo. Así que incluso puedes intentarlo, como lo hacemos a veces para la web. Es un poco pesado para móvil, pero también puedes intentarlo. Lo que puedes hacer es puedes poner tus pruebas que estás dispuesto, como nuevas pruebas que creaste y estás dispuesto a empujar, puedes ponerlas en archivos separados y realmente ejecutarlas en múltiples hilos paralelos, lo que realmente te dará la imagen real en caso de que las estuvieras ejecutando no aisladas. Porque en la vida real, lo que puede suceder en caso de que estés interactuando con los mismos data, incluso puedes ejecutar en un solo hilo siempre. Puedes no tener ejecución paralela. pero puedes tener múltiples PRs sucediendo en paralelo de diferentes personas y todavía tendrás interacciones con los mismos data. En este caso, es solo un consejo, intenta ejecutar tus pruebas en paralelo con ellas mismas para ver que están aisladas y estarás bien. Y otro último punto que quería mencionar, tenemos un comando de trampa, llamémoslo, que se llama reutilizar. Entonces, en caso de que hicieras todo lo que pudiste y no pudiste arreglar tu inestabilidad, a veces sucede. Lo entendemos. Entonces, en este caso, puedes ejecutar con una bandera llamada reintentos x, como reintentos tres veces, que realmente volverá a intentar tu prueba, como volver a ejecutar tu prueba hasta tres veces para ver si pasa. Entonces, en este caso, tu prueba puede pasar desde el segundo intento o desde el tercer intento, lo cual no es bueno hacer. Pero en caso de que no tengas otras opciones y quieras hacer que tu construcción sea verde, hazlo. Esto es en realidad todo lo que quería decir para hoy. Compartiré mi pantalla para mostrar una hermosa diapositiva aquí. Lo que hicimos hoy es que realmente intentamos... Aprendimos cómo se ve la prueba de detox, aprendimos cómo encontrar un elemento, probamos diferentes medidas, acciones y expectativas. Probamos cómo trabajar con acciones específicas de la plataforma. También probamos la CLI de Detox en acción. Usamos diferentes niveles de registro. Intentamos grabar capturas de pantalla y videos de nuestras pruebas. Realmente corrimos en paralelo y aprendimos algunos tips de inestabilidad. Entonces, chicos, hicimos mucho. Fueron largas dos horas y media y tenemos algo de tiempo para preguntas. También espero que tengas algunas. Y antes de cambiar a las preguntas, solo quiero decir que Detox fue de código abierto desde el primer commit y proyecto TDD desde el primer commit. Entonces, si estás interesado en ayudarnos a desarrollar alguna característica o a corregir algunos errores que ves, o en realidad para formar parte de nuestro equipo, siempre eres bienvenido. Así que eres súper bienvenido a contribuir. Necesitas buscar en nuestro proyecto tickets llamados usuarios buscando contribuyentes para esta etiqueta. Y también tenemos una guía de contribución de Detox que puedes encontrar por enlace. Compartiré las diapositivas en el canal para la masterclass justo después y toda la información y eres bienvenido a preguntar cualquier cosa después hasta que este canal sea eliminado en realidad. Y ahora terminé de hablar. Entonces, solo cambiaré a Q y A.