Corrección de Tests con Playwright y Visual Studio Code

¿Cómo limpiar un input de búsqueda utilizando Playwright?

Entrar en el mundo de la automatización y pruebas de software puede ser emocionante y desafiante. Uno de los aspectos cruciales es entender cómo trabajar con elemento HTML a través de herramientas sofisticadas como Playwright. En esta sección, te guiaré a través de un proceso fundamental: limpiar un input de búsqueda. Este proceso incluye la identificación y resolución de errores comunes que podrían surgir.

¿Cómo ejecutar y verificar pruebas en Visual Studio Code?

Inicialmente, debemos asegurarnos de ejecutar solo el test que estamos interesados en comprobar. Esto se logra utilizando la etiqueta only en nuestro código antes del test específico. Si estamos listos para resolver el test, removemos la etiqueta del primer test y se la asignamos al segundo. Siguiendo estos pasos, podemos centrar nuestra atención en identificar y corregir errores específicos en el código de testeo.

En la terminal de Visual Studio Code, ejecuta el siguiente comando para ejecutar las pruebas:

npx playwright-test

Playwright generará un reporte con los resultados del test indicando los errores y las líneas de código problemáticas. Por ejemplo, si un test para limpiar un input de búsqueda arroja un error debido a un texto esperado que no está presente, este error se indicará en el reporte con detalles sobre lo que fue esperado pero no encontrado.

¿Cómo solucionar el problema de texto en un input?

Al trabajar con inputs en HTML, uno de los errores más comunes es verificar incorrectamente el contenido de un input. Los inputs no contienen texto visible como tal, sino valores que son atributos de ese elemento HTML. En Playwright, la función toHaveText se utiliza comúnmente para textos de un elemento, pero en el caso de los inputs, necesitamos verificar sus atributos value.

Para corregir este error, debes modificar tu código para utilizar expect con toHaveAttribute. Aquí te dejo un ejemplo de cómo podría lucir:

const locator = page.locator('#your-input-id');
await expect(locator).toHaveAttribute('value', 'some random text');

¿Cómo ejecutar nuevamente la prueba y asegurar su funcionamiento?

Luego de realizar las modificaciones necesarias, regresa a la terminal y ejecuta nuevamente el test:

npx playwright-test

Si el test se ejecuta correctamente sin errores, significa que la modificación fue exitosa. El reporte confirmará que todos los tests ahora están pasando sin problemas, validando efectivamente que tu input ha sido limpiado correctamente.

Recuerda que mientras más te familiarices con herramientas de debugging y documentación, más eficaz serás en el desarrollo y la corrección de tests automatizados.

Finalmente, si quieres seguir mejorando tus habilidades en testing, te animo a resolver otro test pendiente en el curso. Esto podría ayudarte a completar tu aprendizaje y obtener un reconocimiento formal. ¡Sigue avanzando, la práctica constante te llevará al dominio del testing automatizado!