Name: TestJS Summit 2023
Start: 2023-12-07T08:00:00.000Z
End: 2023-12-11T20:00:00.000Z

Sophie Kolbe

Vlad Dumitrica

Irina Baeva

Lera

Nicolas Carlo

Theodore Vorillas

Varun

Joran Quinten

Thibault Van den Broecke

Tally Barak

Artem Zakharchenko

Nicolas Dubien

Daniel Rios Pavia

Miguel Ángel Durán

Alla Kaplia

David Pugh

Robert

Thijs Broerse

Bernie Green

Nils BUntenbeck

JDog

Hans Scheuren

Bob Fornal

Kyle

Bruno da Hora

Dariusz

Michiel van der Ros

Ola Pawlus 

tripple❌dm

Devan

Rocío

Svetlana Smirnova

Davide

Echemos un vistazo a cómo Playwright puede ayudarte a escribir tus pruebas de extremo a extremo con herramientas como Codegen que generan pruebas basadas en la interacción del usuario. Exploraremos el modo UI para una mejor experiencia de desarrollador y luego repasaremos algunos consejos para asegurarnos de que no tengas pruebas inestables. Luego hablemos de cómo poner en marcha tus pruebas en CI, depurar en CI y escalar usando fragmentos.

Todos pueden escribir pruebas fácilmente

Playwright is a reliable end-to-end testing tool for modern web apps that provides one API, full isolation, fast execution, and supports multiple languages. It offers features like auto-weighting, retrying assertions, seamless testing of iframes and shadow DOM, test isolation, parallelism, and scalability. Playwright provides tools like VS Code extension, UiMode, and Trace Viewer for writing, debugging, and running tests. Effective tests prioritize user-facing attributes, use playwright locators and assertions, and avoid testing third-party dependencies. Playwright simplifies testing by generating tests, providing code generation and UI mode, and allows for easy running and debugging of tests. It helps in fixing failed tests and analyzing DOM changes, fixing locator mismatches, and scaling tests. Playwright is open source, free, and continuously growing.

Let’s take a look at how Playwright can help you get your end to end tests written with tools like Codegen that generate tests on user interaction. Let’s explore UI mode for a better developer experience and then go over some tips to make sure you don’t have flakey tests. Then let’s talk about how to get your tests up and running on CI, debugging on CI and scaling using shards.

Everyone Can Easily Write Tests

Debbie O'Brien

<ul><li>En esta demostración rápida mostraré cómo Codium, una herramienta generativa de IA de vanguardia, está revolucionando la integridad del código. Demostraremos la capacidad de Codium para generar pruebas Mocha útiles, tomadas de un repositorio público y destacaremos la integración perfecta. Puedes ver a Codium transformando escenarios de prueba complejos en información accionable, impulsando la cobertura de código hacia adelante. ¡Únete a nosotros para un vistazo perspicaz al futuro de las pruebas automatizadas donde la velocidad se encuentra con la calidad!</li></ul>

Cobertura de código con IA

Codium is a generative AI assistant for software development that offers code explanation, test generation, and collaboration features. It can generate tests for a GraphQL API in VS Code, improve code coverage, and even document tests. Codium allows analyzing specific code lines, generating tests based on existing ones, and answering code-related questions. It can also provide suggestions for code improvement, help with code refactoring, and assist with writing commit messages.

<ul><li>In this lightning demo I will showcase how Codium, a cutting-edge generative AI tool, is revolutionizing code integrity. We will demonstrate Codium's ability to generate useful Mocha tests, taken from a public repository and highlight the seamless integration. You can see Codium as it transforms complex test scenarios into actionable insights, propelling code coverage forward. Join us for an insightful peek into the future of automated testing where speed meets quality!</li></ul>

Code coverage with AI

Jaap Brasser

En esta charla, exploramos el mundo divisivo de las pruebas, donde los desarrolladores a menudo se encuentran divididos entre no escribir pruebas y esforzarse por una cobertura de pruebas del 100%. Aprenda a navegar estas posiciones polarizantes y adopte una estrategia más matizada que hace que las pruebas sean eficientes y efectivas. Profundizaremos en el concepto de 'Vistas Humildes', donde minimizamos los objetos no probables extrayendo la lógica de los elementos de la interfaz de usuario a partes amigables para pruebas del código base. Este enfoque simplifica las pruebas, centrándose en la lógica de negocio en lugar de las complejidades de la interfaz de usuario. Descubra cómo la arquitectura Modelo-Vista-Presentador (MVP) ayuda a lograr esto, con los presentadores sirviendo como una capa lógica para las pruebas y los hooks ayudando a separar la lógica de los componentes de la interfaz de usuario. A lo largo de la charla, discutiremos los compromisos de este enfoque, el papel de las pruebas de extremo a extremo (E2E), y cómo lograr el equilibrio perfecto entre demasiadas y pocas pruebas. ¡Únase a nosotros mientras nos adentramos en el arte de crear 'Vistas Humildes', asegurando que nuestras aplicaciones React Native sean escalables, mantenibles y efectivamente probadas!

El Arte de las 'Vistas Humildes': Probando Aplicaciones React Native de Manera Inteligente

This Talk discusses the challenges of testing in React and React Native applications, particularly with regards to barcode scanning. It explores the violation of separation of concerns in React and proposes the use of the HumbleObject model to simplify testing and improve code cleanliness. The MVP model is also introduced as a way to separate UI state and logic from the component. The importance of following patterns, standardization, and teaching principles is emphasized, along with the benefits of using custom hooks to share business logic. The potential of AI tools in code refactoring is mentioned as well.

In this talk, we explore the divisive world of testing, where developers often find themselves torn between writing no tests and striving for 100% test coverage. Learn how to navigate these polarizing positions and adopt a more nuanced strategy that makes testing efficient and effective.We'll dive into the concept of 'Humble Views,' where we minimize untestable objects by extracting logic from UI elements into test-friendly parts of the codebase. This approach simplifies testing, focusing on business logic instead of UI complexities. Discover how the Model-View-Presenter (MVP) architecture helps achieve this, with presenters serving as a logical layer for testing and hooks aiding in separating logic from UI components.Throughout the talk, we'll discuss the trade-offs of this approach, the role of End-to-End (E2E) tests, and how to strike the perfect balance between too much and too little testing. Join us as we delve into the art of creating 'Humble Views,' ensuring that our React Native apps are scalable, maintainable, and effectively tested!

The Art of ‘Humble Views’: Testing React Native Apps the Smart Way

Mo Khazali

¿Qué harías de manera diferente si pudieras viajar atrás en el tiempo? Los marcos de prueba modernos han transformado esta pregunta caprichosa en una práctica, al crear sus propias “máquinas del tiempo”. La línea de tiempo de Cypress, el visor de trazas de Playwright y las grabaciones de Replay.io han ofrecido una mirada retrospectiva a la vida de una prueba, asegurando que los desarrolladores y probadores ya no estén limitados a mensajes de error básicos en fallas de pruebas.Sin embargo, estas diferentes máquinas del tiempo aportarán diferentes perspectivas. Entonces, ¿cómo decides? La decisión sobre cuál usar puede marcar una diferencia significativa en el tiempo dedicado a depurar una prueba inestable. En esta presentación me centraré en comparar diferentes soluciones de máquinas del tiempo y mostraré varios ejemplos de pruebas inestables para demostrar cómo navegar a través del proceso de depuración y, lo creas o no, hacerlo divertido. Puntos clave:<ul><li>- aprender sobre cómo funcionan las diferentes soluciones de máquinas del tiempo</li><li>- descubrir cómo usar eficazmente las máquinas del tiempo para depurar una prueba inestable</li><li>- averiguar sobre las fuentes de inestabilidad dentro de la prueba y dentro de la aplicación en prueba</li></ul>

Luchando contra la inestabilidad de las pruebas con máquinas del tiempo

The Talk discusses the importance of learning from the past in software testing and troubleshooting test flakiness. It highlights the challenges of using memory and communication to gather information. The introduction of Replay.io, a time-traveling debugger, is proposed as a solution. The benefits of using Replay Chromium for recording and debugging, as well as the features of the Replay debugger, are emphasized. The Talk also addresses the relationship between test flakiness and app flakiness, and the significance of simulating real-world scenarios in testing.

What would you do differently if you could travel back in time? Modern testing frameworks have transformed this whimsical question into a practical one, by creating their own “time machines”.Cypress’ timeline, Playwright’s trace-viewer and Replay.io’s recordings have offered a retrospective look into the life of a test, ensuring that developers and testers are no longer limited to basic error messages on test failures.However, these different time machines will bring different insights. So how do you decide? The decision on which one to use can make a significant difference in time spent on debugging a flaky test.In this presentation I will be focusing on comparing different time machine solutions and showing various flaky test examples to demonstrate how to navigate through debugging process and believe it or not - make it fun.Key Takeaways:<ul><li>- learn about how different time machine solutions work</li><li>- discover how to effectively use time machines to debug a flaky test</li><li>- find out about sources of flakiness within the test and within the application under test</li></ul>

Fighting Test Flakiness with Time Machines

Filip Hric

En el panorama siempre en evolución del desarrollo de software, garantizar la fiabilidad y funcionalidad de las API se ha vuelto primordial. "Pruebas de API con Postman" es una masterclass completa diseñada para equipar a los participantes con los conocimientos y habilidades necesarios para sobresalir en las pruebas de API utilizando Postman, una herramienta poderosa ampliamente adoptada por profesionales en el campo. Esta masterclass profundiza en los fundamentos de las pruebas de API, avanza a técnicas de prueba avanzadas y explora la automatización, las pruebas de rendimiento y el soporte multiprotocolo, proporcionando a los asistentes una comprensión holística de las pruebas de API con Postman. Únete a nosotros para esta masterclass para desbloquear todo el potencial de Postman para las pruebas de API, agilizar tus procesos de prueba y mejorar la calidad y fiabilidad de tu software. Ya seas un principiante o un probador experimentado, esta masterclass te equipará con las habilidades necesarias para sobresalir en las pruebas de API con Postman.

Masterclass de Pruebas de API con Postman

This workshop on API testing with Postman covers a wide range of topics, including creating workspaces and collections, working with variables and dynamic data, testing syntax and methods, building workflows, automating testing with Postman CLI and Postbot, and advanced testing techniques. Postman provides extensive documentation, resources, and tools like Postbot for generating tests and documentation. The workshop also highlights the versatility of Postman in supporting various protocols and types of testing, such as contract testing, performance testing, and regression testing.

In the ever-evolving landscape of software development, ensuring the reliability and functionality of APIs has become paramount. "API Testing with Postman" is a comprehensive workshop designed to equip participants with the knowledge and skills needed to excel in API testing using Postman, a powerful tool widely adopted by professionals in the field. This workshop delves into the fundamentals of API testing, progresses to advanced testing techniques, and explores automation, performance testing, and multi-protocol support, providing attendees with a holistic understanding of API testing with Postman. 1. Welcome to Postman- Explaining the Postman User Interface (UI)2. Workspace and Collections Collaboration- Understanding Workspaces and their role in collaboration- Exploring the concept of Collections for organizing and executing API requests3. Introduction to API Testing- Covering the basics of API testing and its significance4. Variable Management- Managing environment, global, and collection variables- Utilizing scripting snippets for dynamic data5. Building Testing Workflows- Creating effective testing workflows for comprehensive testing- Utilizing the Collection Runner for test execution- Introduction to Postbot for automated testing6. Advanced Testing- Contract Testing for ensuring API contracts- Using Mock Servers for effective testing- Maximizing productivity with Collection/Workspace templates- Integration Testing and Regression Testing strategies7. Automation with Postman- Leveraging the Postman CLI for automation- Scheduled Runs for regular testing- Integrating Postman into CI/CD pipelines8. Performance Testing- Demonstrating performance testing capabilities (showing the desktop client)- Synchronizing tests with VS Code for streamlined development9. Exploring Advanced Features - Working with Multiple Protocols: GraphQL, gRPC, and more Join us for this workshop to unlock the full potential of Postman for API testing, streamline your testing processes, and enhance the quality and reliability of your software. Whether you're a beginner or an experienced tester, this workshop will equip you with the skills needed to excel in API testing with Postman.

API Testing with Postman Workshop

Pooja Mistry

Probablemente conozcas la historia. Has creado un par de pruebas y, como estás utilizando Cypress, lo has hecho bastante rápido. Parece que nada te detiene, pero luego - prueba fallida. No fue la aplicación, no fue un error, la prueba fue... ¿inestable? Bueno sí. El diseño de la prueba es importante sin importar la herramienta que utilices, incluyendo Cypress. La buena noticia es que Cypress tiene un par de herramientas bajo su cinturón que pueden ayudarte. Únete a mí en mi masterclass, donde te guiaré lejos del valle de los anti-patrones hacia los campos de pruebas estables y siempre verdes. Hablaremos sobre los errores comunes al escribir tu prueba, así como depurar y revelar problemas subyacentes. Todo con el objetivo de evitar la inestabilidad y diseñar pruebas estables.

Mejores Prácticas para Escribir y Depurar Pruebas de Cypress

The Workshop covered best practices and debugging of Cypress tests, including common mistakes and how to target the correct elements. The use of the 'contains' command was highlighted to ensure stable tests. Debugging and stability in Cypress tests were discussed, along with strategies for avoiding flaky tests and waiting for API calls. The importance of test readability and the use of tools like Cypress Plugin Steps and Replay for debugging were emphasized. The session command in Cypress was recommended for optimizing login sequences, and the differences between Cypress and Playwright were explored.

You probably know the story. You’ve created a couple of tests, and since you are using Cypress, you’ve done this pretty quickly. Seems like nothing is stopping you, but then – failed test. It wasn’t the app, wasn’t an error, the test was… flaky? Well yes. Test design is important no matter what tool you will use, Cypress included. The good news is that Cypress has a couple of tools behind its belt that can help you out. Join me on my workshop, where I’ll guide you away from the valley of anti-patterns into the fields of evergreen, stable tests. We’ll talk about common mistakes when writing your test as well as debug and unveil underlying problems. All with the goal of avoiding flakiness, and designing stable test.

Best Practices for Writing and Debugging Cypress Tests

Las pruebas son importantes. Las pruebas unitarias adecuadas pueden eliminar la posibilidad de que aparezcan errores. Pero, ¿qué marco de pruebas será adecuado? Exploremos cómo podemos desarrollar una estrategia confiable y eficiente para el desarrollo y prueba de componentes con Vitest

Pruebas de Componentes con Vitest

This Talk explores the challenges of choosing and learning testing frameworks, emphasizing the importance of planning, automation, and prioritizing unit testing. The VTEST framework is introduced as a fast and stable option for unit testing JavaScript and TypeScript code, with a focus on logic and mocking external dependencies. The Talk also covers testing React hooks, integration testing with TestingLibraryReact, component testing, and achieving code coverage. Best practices include performing accessibility tests, planning tests before coding, and using data test IDs for stability.

Testing is important. Proper unit tests can eliminate the chance for bugs to appear. But which testing framework will be suitable? Let’s explore how we can develop a reliable and efficient strategy for component development and testing with Vitest

Component Testing With Vitest

Maya Shavin

Todos somos enseñados a seguir la Pirámide de Pruebas pero la realidad es que construimos el Árbol de Pruebas de Navidad. En esta masterclass, David te explicará cómo desglosar proyectos y poner las pruebas donde necesitan estar. Al final de la masterclass, podrás actualizar tus proyectos para que cualquiera y todos puedan empezar a contribuir y realmente vivir según "La calidad es el trabajo de todos". Te guiará a través de:<ul><li>- Pruebas de Componentes</li><li>- Pruebas de API</li><li>- Pruebas de Regresión Visual</li><li>- Pruebas A11Y</li></ul> También te explicará cómo configurar todo esto en tu pipeline de CI/CD para que puedas obtener ciclos de feedback más cortos y rápidos.

Construyendo una suite de pruebas significativa que no sea todo E2E

Today's Workshop covered topics such as optimizing the CI/CD pipeline, scaling and trust in CI/CD, TDD and trust in testing, setting up Nightwatch for mobile testing, exploring Nightwatch and configuring environments, unit testing with Nightwatch and JavaScript styles, API testing and mocking with Nightwatch, managing complexity in software design, modularity and composition in software design, complexity of browsers and component testing, component testing and UI complexity, visual and accessibility testing in Nightwatch, best practices for visual regression and end-to-end testing, and the challenges of testability in front-end frameworks.

We're all taught to follow the Testing Pyramid but the reality is that we build out the Testing Christmas Tree. In this workshop, David will talk you through how to break down projects and put the tests where they need to be. By the end of the workshop you will be able to update your projects so that anyone and everyone can start contributing and truly living up to "Quality is everyone job". He will walk you through:<ul><li>- Component Testing</li><li>- API Testing</li><li>- Visual Regression Testing</li><li>- A11Y testing</li></ul> He will also talk you through how to get these all setup in your CI/CD pipeline so that you can get shorter and faster feedback loops.

Building out a meaningful test suite that's not all E2E

David Burns

Comienza a usar la IA a pleno rendimiento. Genera escenarios, escribe pruebas y crea datos de prueba más rápido con ChatGPT. La demostración se proporcionará a través de la herramienta Cypress.

IA en Pruebas de API: Cómo Probar Más Rápido Con ChatGPT

This Talk discusses the use of AI in API testing and provides a step-by-step strategy for incorporating artificial intelligence with chat.dpt. It emphasizes the importance of analyzing documentation and creating test cases using tools like Swagger and Cypress. The Talk also addresses the role of human involvement in testing, the balance between manual work and AI assistance, and the need for validation of AI-generated tests. Overall, AI can significantly speed up the testing process, but human analysis and vigilance are still necessary for accurate results.

Start using AI at full power. Generate scenarios, write tests, and create test data faster with ChatGPT. The demonstration will be provided via Cypress tool.

AI in API Testing: How to Test Faster With ChatGPT

Olga Trofimova

Node.js test runner es moderno, rápido y no requiere bibliotecas adicionales, pero entenderlo y usarlo bien puede ser complicado. Aprenderás a utilizar Node.js test runner a su máximo potencial. Te mostraremos cómo se compara con otras herramientas, cómo configurarlo y cómo ejecutar tus pruebas de manera efectiva. Durante la masterclass, haremos ejercicios para ayudarte a sentirte cómodo con el filtrado, el uso de afirmaciones nativas, la ejecución de pruebas en paralelo, el uso de CLI y más. También hablaremos sobre trabajar con TypeScript, hacer informes personalizados y la cobertura de código.

Dominando Node.js Test Runner

This workshop introduces the Node.js Test Runner and its features, including filtering, subtesting, reporting, marking, watch mode, and code coverage. Participants need Node.js 20 or 20.9 LTS and Git. The Test Runner is fast and simple, shipped within the Node.js binary, and can be used as a starting point for other libraries. It supports filtering tests by name pattern and offers a powerful assertion library. It also provides features like parallel testing, test hooks, mocking, custom reporters, TypeScript support, and test coverage. Sharding allows for efficient test execution across multiple machines.

Node.js test runner is modern, fast, and doesn't require additional libraries, but understanding and using it well can be tricky. You will learn how to use Node.js test runner to its full potential. We'll show you how it compares to other tools, how to set it up, and how to run your tests effectively. During the workshop, we'll do exercises to help you get comfortable with filtering, using native assertions, running tests in parallel, using CLI, and more. We'll also talk about working with TypeScript, making custom reports, and code coverage.

Mastering Node.js Test Runner

Marco Ippolito

¿Qué son los fixtures? ¿Cómo puedo crear uno? ¿Cómo puedo usarlo? Responderé todas estas preguntas con un pequeño pero explicativo ejemplo de código en vivo.

Fixtures en Playwright - Pequeña Guía

Fixtures in Playwright are like small environments where you define methods and control the testing process. By creating reusable fixtures, you can make tests more readable and reusable. The fixture structure consists of a before block, the test, and an after block. Using fixtures allows you to access methods created in a page object, improving code readability and reusability.

What are fixtures? How can I create one? How can I use it? I will answer all this questions with a small but explanatory live code example.

Playwright Fixtures - Little Walkthrough

Lia Moreira

CCT vs RTL habla sobre las similitudes entre las herramientas, las diferencias, compara las formas de hacer las mismas cosas con las herramientas, y finalmente da una demostración de comparación de la experiencia del desarrollador.

Pruebas de Componentes con Cypress vs Biblioteca de Pruebas de React

The Talk discusses the differences between Cypress component testing and React Testing Library (RTL). It highlights the benefits of using Cypress Component Testing, such as easier handling of complex components and a more stable testing experience in CI. The comparison between SignOn and Jest focuses on low-level spying and mocking capabilities. The comparison between Cypress Intercept and Mock Service Worker (MSW) examines their network spy and mocking capabilities. The Talk also emphasizes the superior developer experience and observability provided by Cypress component testing compared to RTL.

CCT vs RTL talks about the similarities between the tools, the differences, compares the ways of doing the same things with the tools, and finally gives a developer experience comparison demo.

Cypress Component Testing vs React Testing Library

Murat K Ozcan

Cuando se escriben pruebas de rendimiento web, las pruebas que se crean a partir de estas herramientas provienen de datos de laboratorio recopilados en entornos predefinidos, dispositivos y configuraciones de red. Los datos de laboratorio te permiten reproducir los resultados de rendimiento de manera repetible, lo que es útil para detectar y solucionar problemas de rendimiento temprano.Sin embargo, los datos de laboratorio ignoran un aspecto muy importante: la experiencia real de tus usuarios al utilizar tus aplicaciones. Los datos de campo, recopilados de usuarios reales en diversas condiciones, reflejan cómo se utiliza tu aplicación en el mundo real y rastrean el rendimiento que experimentan tus usuarios e incluso los errores que encuentran.Los usuarios reales también tienen diferentes comportamientos de usuario, que no se pueden simular de manera realista mediante scripts de prueba o casos de prueba. Los usuarios reales utilizan diferentes dispositivos, condiciones de red, mecanismos de almacenamiento en caché e incluso fuentes de sistema que pueden afectar cómo se carga un sitio.Por lo tanto, aún debes complementar tus herramientas de rendimiento que utilizan datos de laboratorio con datos de campo o soluciones de monitoreo de usuarios reales (RUM) para lograr un enfoque integral en las pruebas de rendimiento web. Una forma de hacer esto es complementando <a href="https://k6.io/docs/using-k6-browser/overview/" target="_blank">Grafana k6 browser</a> con <a href="https://grafana.com/oss/faro/" target="_blank">Grafana Faro</a>.

Enfoque Integral de Rendimiento Web con Grafana y K6

Today's Talk focused on achieving a holistic web performance approach using Grafana and K6. The importance of complementing lab data with field data for realistic user experience testing was highlighted. The use of GrafanaFaro for collecting performance metrics and integrating with other Grafana OSS products was discussed. Detailed instructions on setting up GrafanaFaro with the QuickPizza sample application were provided. The benefits of using K6 for reproducing errors, improving testing, and demonstrating browser testing capabilities were explained.

When writing web performance tests, the tests you create from these tools come from lab data collected from pre-defined environments, devices, and network settings. Lab data allows you to reproduce performance results repeatably, making it useful for detecting and fixing performance issues early. However, lab data ignores a very important aspect: your users’ real experience of using your applications. Field data, collected from real users under various conditions, reflect how your application is being used in the real world and track the performance your users experience and even the errors they encounter. Real users also have different user behaviors, which cannot be all simulated realistically via test scripts or test cases. Real users use different devices, network conditions, caching mechanisms, and even system fonts that can impact how a site loads. Therefore, you must still complement your performance tools that are using lab data with field data or real-user monitoring (RUM) solutions to achieve a holistic approach to web performance testing. One way to do this is by complementing <a href="https://k6.io/docs/using-k6-browser/overview/" target="_blank">Grafana k6 browser</a> with <a href="https://grafana.com/oss/faro/" target="_blank">Grafana Faro</a>.

Holistic Web Performance With Grafana and K6

Marie Cruz

Las pruebas de rendimiento automatizadas pueden ayudar a detectar los efectos perjudiciales de los cambios de código en el rendimiento de la aplicación. Aprenda a utilizar herramientas como Lighthouse y Web Core Vitals en su CI y establezca umbrales de rendimiento para mantener un rendimiento óptimo del frontend en esta sesión.

Medir y Mejorar el Rendimiento del Frontend Utilizando la Automatización de Pruebas

The Talk focuses on the importance of testing and gathering information for building good applications. It highlights the use of test automation for performance monitoring and logging for performance measurement. The Talk also discusses the impact of performance on user engagement and search engine rankings. It emphasizes the use of Cypress plugins for monitoring performance metrics and setting thresholds for tests. Overall, the Talk emphasizes the value of test automation tools in providing valuable information at a low cost.

Automated performance testing can help detect the harmful effects of code changes on application performance. Learn how to use tools like Lighthouse and Web Core Vitals in your CI and set performance thresholds to maintain optimal frontend performance in this session.

Measure and Improve Frontend Performance by Using Test Automation

Ramona Schwering

Ha pasado medio decenio desde que Mock Service Worker (MSW) cambió la forma en que los desarrolladores abordan y piensan en la simulación de API en JavaScript. Con toda su innovación, sentí que podríamos hacer más. Pasé el último año haciendo que eso sucediera. ¡No puedo esperar para compartirlo con todos ustedes!

Mock Service Worker 2.0

MSW is an API mocking library that simplifies the process of intercepting requests and mocking responses. It leverages standard JavaScript APIs like the ServiceWorker API and the Fetch API. MSW has seen significant adoption, with over 90,000 projects on GitHub and 2.5 million weekly downloads on npm. The recent release of Node.js 18 has allowed for refactoring and simplification in MSW. MSW supports TypeScript and can be used for contract testing with tools like PACT I-O.

It's been half a decade since Mock Service Worker (MSW) has changed the way developers approach and think of API mocking in JavaScript. With all its innovation, I felt we could do more. I spent the last year making that happen. I can't wait to share it with all of you!

<div>Centrarse en estar donde están tus usuarios no es tan difícil como piensas. Muchos grupos ahí fuera te dirán que su herramienta es la mejor y que aunque ninguno de tus usuarios use ese navegador o configuración móvil está bien. En esta charla, David hablará sobre todas las diferencias que surgen, por qué los proveedores de navegadores incluso están diciendo a la gente que no se centren en los motores de navegadores o doms virtuales, y cómo la configuración de los entornos de desarrollo es simple de establecer estos días. </div>Al ignorar el amor que se está impulsando a los desarrolladores y testers a través del trabajo que se está realizando, puede haber pruebas que están pasando pero tus usuarios están fallando en usar tu aplicación! No te preocupes, David tendrá los ejemplos del mundo real para mostrarte cómo están las cosas rotas :)

Frameworks de Pruebas, Frameworks Móviles y los Navegadores Aman a los Desarrolladores y Testers

Today's Talk covered various topics including testing frameworks, browsers, and the challenges faced in testing complex systems. The importance of improving testing setup and productivity was highlighted, along with the principle of least surprise and the need for framework upgrades. The Talk also discussed the different browser engines and their unique features, as well as the benefits of sharing ideas and approaches within the software development community. The session concluded with insights on browser testing and the use of tools like Playwright and WebKit.

<div>Focusing on being where your users are isn't as difficult as you think. A lot of groups out there will tell you that their tool is the best and that even though none of your users use that browser or mobile setup it is fine. In this talk, David will talk about all the differences that come up, why browser vendors are even telling folks not to focus on browser engines or virtual doms, and how the setup of development environments is simple to set up these days. </div>By ignoring the love that is being pushed to developers and testers through the work being done there can be tests that are passing but your users are failing to use your application! Don't worry, David will have the real world examples to show you how broken things are :)

Testing Frameworks, Mobile Frameworks, and Browsers Love Developers and Testers

Es muy común que los equipos tengan procesos de revisión de código y esto suele suceder a través de las solicitudes de extracción. Cada comentario representa un paso hacia la mejora de la calidad del software, sin embargo, existe una amplia variedad de puntos de vista. La antigüedad del equipo, el propio equipo, la empresa, el tiempo restante, la mentalidad, los acuerdos internos, todo esto impacta la forma de revisar el código. Como probador, necesito entender qué sucede en el código y al revisarlo, para identificar fallas en el proceso de desarrollo y mejorar mi estrategia de prueba. En esta charla, traeré los resultados de la investigación que realicé analizando los comentarios contenidos en las solicitudes de extracción de los 10 proyectos de Github más populares creados en Javascript y aportaré algunas ideas relacionadas con lo que descubrí. Entre ellos: cuáles son las características de calidad del software que más ejercen los Devs, cuáles son los puntos débiles en su proceso de desarrollo, dónde podemos mejorar nuestras pruebas para anticipar fallas y herramientas que se pueden utilizar para probar de manera más completa, entre otros.

Lo que aprendí sobre la calidad del software de los 10 proyectos de Javascript más populares en Github

The Talk discusses the code review process and the importance of software quality. It emphasizes the need for maintainability in code and the use of guidelines tailored to the team. The Talk also highlights the significance of functional suitability and the challenges of code review. Automation and documentation are recommended to improve code reviews and ensure software quality.

It is very common for teams to have code review processes and this usually happens through pull requests. Each comment represents a step towards improving the quality of the software, however, there is a wide variety of points of view. The seniority of the team, the team itself, the company, the time left, the mentality, internal agreements, all of this impacts the way of reviewing code. As a tester, I need to understand what happens in the code and when reviewing it, to identify flaws in the development process and improve my testing strategy. In this talk, I will bring the results of research I carried out analyzing the comments contained in pull requests from the 10 most popular GitHub projects created in Javascript and bring some insights related to what I discovered. Among them: are which software quality characteristics are most exercised by Devs, which are weak points in their development process, where we can improve our tests to anticipate failures, and tools that can be used to test more comprehensively, among others.

What I Learned About Software Quality From The 10 Most Popular Javascript Projects On Github

Júlio de Lima

Descubre el poder de Cypress Contract Tests, un enfoque de vanguardia que lleva tus pruebas a nuevas alturas. En esta presentación, exploraremos el concepto de pruebas de contrato y cómo aseguran una comunicación fluida entre microservicios. Luego, nos adentraremos en las capacidades revolucionarias de Cypress, mostrando su potencial inigualable para elevar tus prácticas de prueba de bueno a excelente. Únete a nosotros para obtener ideas, mejores prácticas y ejemplos del mundo real sobre cómo integrar Cypress Contract Tests en tus flujos de trabajo existentes y revolucionar tu estrategia de pruebas.

De Bueno a Excelente: Mejora las Pruebas con Cypress Contract Tests

This Talk discusses the challenges of testing multiple services in a microservices architecture and introduces the use of Cypress and Pact to address these challenges. It explains how to use Cypress to write a contract and generate and share it with the provider. The verification process and CI workflow for the consumer and provider are also discussed. The Talk emphasizes the importance of contract testing to ensure seamless communication between microservices.

Discover the power of Cypress Contract Tests, a cutting-edge approach that takes your testing to new heights. In this presentation, we'll explore the concept of contract testing and how it ensures seamless communication between microservices. Then, we'll delve into the game-changing capabilities of Cypress, showcasing its unmatched potential to elevate your testing practices from good to great. Join us for insights, best practices, and real-world examples on how to integrate Cypress Contract Tests into your existing workflows, and revolutionize your testing strategy.

From Good to Great: Elevate Testing with Cypress Contract Tests

Petros Plakogiannis

Las pruebas son una parte esencial del desarrollo de software, pero pueden ser un proceso complicado y que consume mucho tiempo. El paquete popular testing-library es una herramienta ampliamente utilizada que ayuda a los desarrolladores a escribir pruebas de frontend confiables y mantenibles basadas en un enfoque orientado al comportamiento, pero muchos usuarios no están completamente conscientes de cómo funciona. En esta charla, yo, como uno de los mantenedores del paquete, brindo una mirada detallada a testing-library. Aprenderás cómo testing-library está diseñado para fomentar buenas prácticas de prueba y cómo puede ayudarte a escribir pruebas más mantenibles.

Testing Library: Todo el mundo lo usa, pero nadie lo entiende

This Talk is about a developer's first open source contribution to the Testing Library, exploring how it works and its importance in testing. It discusses the challenges of testing in a Node environment and the use of getByRole query to find elements. The Talk also highlights the complexities of implicit roles and the need for specific attributes to filter elements. It emphasizes the importance of verifying visibility and accessibility when querying elements and the process of test clean up.

Testing is an essential part of software development, but it can be a tricky and time-consuming process. The popular testing-library package is a widely used tool that helps developers write reliable and maintainable frontend tests based on a behavior driven approach, but many users are not fully aware of how it works. In this talk, I, as one of the maintainers of the package, give an in-depth look into testing-library. You will learn how testing-library is designed to encourage good testing practices and how it can help you write more maintainable tests.

Testing Library: Everybody Uses It, But Nobody Understands It

Matan Borenkraout

La charla "Explorando Node.js Test Runner" profundiza en el concepto de un test runner, arrojando luz sobre su papel esencial dentro del ecosistema de Node.js. Proporciona una visión general de por qué el desarrollo de un test runner para Node.js tomó un tiempo considerable, y presenta una exploración de su funcionamiento interno.

Explorando Node.js Test Runner

Today's Talk introduces the new Node.js test runner and its features, including filtering, sub-testing, and reporting. It also discusses executing and writing tests in Node.js, as well as the features of the Node.js testing library. The advantages of the Node.js test runner include the ability to create custom test reporters and use TypeScript. However, there are limitations such as a small ecosystem and limited libraries. Upcoming features include test planning, faster test running, and continuous evolution. The Q&A session covers topics like test runner speed, reporters, sharding, and parallelization.

The talk "Exploring Node.js Test Runner" delves into the concept of a test runner, shedding light on its essential role within the Node.js ecosystem. It provides an overview of why the development of a test runner for Node.js took considerable time, and presents an exploration of its inner workings.

Exploring Node.js Test Runner

"Revolucionando las pruebas de JS con IA: Desenmascarando el futuro de la garantía de calidad" es una charla progresista que se adentra en el poder transformador de la IA en las pruebas de JavaScript. La presentación ofrece una exploración iluminadora de los principios de las pruebas de IA, las aplicaciones prácticas y el potencial futuro. Al presentar herramientas impulsadas por IA como Testim, ReTest, Datadog y Applitools, esta charla da vida a la teoría, demostrando cómo la IA puede automatizar la generación de casos de prueba, optimizar la detección de anomalías y agilizar las pruebas de regresión visual. Los asistentes también obtendrán información sobre los avances anticipados en las pruebas de IA para JavaScript. La charla concluye con un animado Q&amp;A, invitando a todos a profundizar en el mundo de la IA y las pruebas de JavaScript. ¡Prepárate para reimaginar tu proceso de QA con IA!

Revolucionando las pruebas de JS con IA: Desenmascarando el futuro de la garantía de calidad

AI testing with generative AI is revolutionizing JS testing by automating test creation and improving software test processes. Key technologies like natural language processing and neural networks, as well as quality data, play a crucial role in AI testing. The benefits of AI testing include speed, efficiency, adaptability, bug detection, and limitless potential. Generating JavaScript tests can be tailored to different tools like Selenium, and there are popular tools available for automating test automation. AI tools like Datadog, RecheckWeb, and Applitools Eyes offer powerful capabilities for anomaly detection, visual regression testing, and code list testing. The horizon for AI in testing continues to expand with evolving capabilities, and understanding AI's role in testing revolution and machine learning is crucial for practical application and continuous learning.

"Revolutionizing JS Testing with AI: Unmasking the Future of Quality Assurance" is a forward-thinking talk that delves into the transformative power of AI in JavaScript testing. The presentation offers an enlightening exploration of AI Testing principles, practical applications, and future potential. By featuring AI-driven tools like Testim, ReTest, Datadog, and Applitools, this talk brings theory to life, demonstrating how AI can automate test case generation, optimize anomaly detection, and streamline visual regression testing. Attendees will also gain insights into the anticipated advancements in AI Testing for JavaScript. The talk concludes with a lively Q&amp;A, inviting everyone to delve deeper into the world of AI and JavaScript testing. Be prepared to reimagine your QA process with AI!

Revolutionizing JS Testing with AI: Unmasking the Future of Quality Assurance

Renaldi Gondosubroto

Sí, necesitamos probar nuestros componentes de UI pero... Si esto te suena, y especialmente si tu aplicación tiene funcionalidades de UI avanzadas, esta charla es para ti. En esta charla, cubriremos cuáles son los factores que necesitan ser probados en los componentes de UI. Desafiaremos la pirámide de pruebas cuando se trata de pruebas de componentes de UI, y revisaremos las diferentes herramientas que tenemos hoy en día para hacer que las pruebas de componentes de UI sean completas Zen.

Zen y el Arte de Pruebas de Componentes de UI

The Talk discusses the evolution of test automation from the original test automation pyramid to the testing pyramid. It explores modern approaches to UI component testing, including isolations and testing with a fake DOM. The importance of testing in a real browser and the emergence of tools like Selenium, WebDriver.io, Puppeteer, Cypress, and PlayWrite for browser automation are highlighted. The advantages of out-of-process browser automation are explained, along with the use of Storybook and Playwright for testing components. The distinction between end-to-end testing and component testing is also mentioned.

Yes, we do need to test our UI components but... If this rings a bell, and especially if your application has advanced UI functionality, this talk is for you.In this talk, we will cover what are the factors that need to be tested in UI components. We will challenge the testing pyramid when it comes to UI Components testing, and review the different tools that we have nowadays for making UI component testing complete Zen.

Zen and the Art of UI Components Testing

En esta charla, aprenderás qué son las pruebas inestables, la importancia de las pruebas deterministas, los efectos colaterales de las pruebas no deterministas, los motivos por los que las pruebas pueden volverse frágiles y, finalmente, qué hacer (y qué no hacer) cuando encuentras pruebas inestables

¡No Más Pruebas Inestables!

The Talk discusses the harmful effects of flaky tests and the importance of writing deterministic tests. It provides strategies for identifying and addressing flaky tests, including using test retries and burning tasks on CI. The Talk also emphasizes the need to avoid arbitrary wait times and handle dependencies when writing end-to-end tests. It highlights the importance of running tests in CI and leveraging tools like Cypress Cloud for test replay and debugging. Additionally, it suggests mocking externals to improve determinism and prioritizing the work to address flaky tests promptly.

In this talk, you’ll learn what flaky tests are, the importance of deterministic tests, the collateral effects of non-deterministic tests, the motives why tests can become brittle, and finally, what to do (and what not to do) when you find flaky tests

No More Flaky Tests!

Walmyr

Una cosa en la que la mayoría de las personas están de acuerdo es que las interfaces de usuario tienen múltiples dimensiones de complejidad. Imagina que estás almorzando con algunos de tu equipo o familia, y recibes un mensaje de Slack que indica que una parte del sitio no funciona. El anuncio ya no se carga en tu sitio de noticias generador de dinero que tiene millones de usuarios mensuales. O tu formulario de inicio de sesión se carga infinitamente después de que un usuario intenta iniciar sesión, y nadie puede acceder a la aplicación. La lógica del backend funciona y todas las solicitudes de API devuelven respuestas 200. Resulta que nos perdimos un manejador de estado de carga para el componente, y la interfaz de usuario no se renderiza correctamente. ¿Cómo gestionamos todo eso? El enfoque convencional es construir el componente en la página de la aplicación donde se utiliza por primera vez y probar manualmente o utilizar pruebas de integración para verificar la interfaz de usuario. Este enfoque dificulta la verificación de todos los estados del componente. En lugar de todo este abrumamiento, quieres una simple comparación de tu interfaz de usuario y cómo se ve ahora después de hacer cambios. ¡Aquí es donde entran Storybook + una herramienta de pruebas de regresión visual!

Pruebas Visuales: Optimiza Storybook y Gana

UI testing is hard, but Storybook and Chromatic simplify the process by allowing you to build and test your UI in isolation. Chromatic compares UI changes, detects even minor visual differences, and eliminates the need for manual testing. Loading images and simulating user workflows in Storybook ensure consistent testing. Interaction tests cover user workflows and can be used for complex components, resolving issues and creating test cases.

One thing most people agree on is that UI's have multiple dimensions of complexity.Imagine you are at lunch with some of your team or family, and you get a Slack message that a portion of the site isn’t working.The Ad placement no longer loads on your money-generating news site that sees millions of monthly users.Or your login form loads infinitely after a user attempts to log in, and no one can access the application.The backend logic works and all API requests return 200 responses.It turns out we missed a loading state handler for the component, and the UI does not render correctly.How do we manage all of that?The conventional approach is to build the component on the application page where it is first used and manually test or use integration tests to verify UI.This approach makes it difficult to verify all the component states.Instead of all this overwhelm, you want a simple comparison of your UI and how it looks now after making changes.This is where Storybook + a visual regression testing tool come in!

Visual Testing: Optimize Storybook and Win

Reuben Ellis

A pesar de la emergencia de DevOp para unir desarrollo, soporte y facciones SRE utilizando procesos comunes, todavía enfrentamos desafíos culturales y de herramientas que crean los silos de Dev y Ops. Específicamente, a menudo usamos diferentes herramientas para lograr pruebas similares: un caso en punto es validar la experiencia del usuario en producción utilizando Monitoreo Sintético y en desarrollo utilizando pruebas e2e. Al unir fuerzas en torno a herramientas comunes, podemos usar la misma herramienta tanto para el monitoreo de producción como para las pruebas dentro de CI. En esta charla, discutiré cómo el Monitoreo Sintético y las Pruebas e2e son dos caras de la misma moneda. Además, mostraré cómo se puede lograr el monitoreo de producción y las pruebas de desarrollo utilizando Playwright, GitHub Actions y Elastic Synthetics.

Monitoreo Sintético y Pruebas e2e: Dos Caras de la Misma Moneda

Carly Richmond discusses the importance of shifting left in testing and monitoring. She emphasizes the need for empathy and a common toolset in the software development process. The talk explores the use of end-to-end testing and synthetic monitoring, showcasing an example with Playwrights, GitHub Actions, and Elastic Synthetics. It also covers the configuration, setup, and integration of tests in the CI workflow. The talk concludes with the benefits of monitoring application and test state, and the importance of collaboration in issue recreation.

Despite the emergency of DevOp to unite development, support and SRE factions together using common processes, we still face cultural and tooling challenges that create the Dev and Ops silos. Specifically, we often use different tools to achieve similar testing: case in point validating the user experience in production using Synthetic Monitoring and in development using e2e testing. By joining forces around common tooling, we can use the same tool for both production monitoring and testing within CI. In this talk, I will discuss how Synthetic Monitoring and e2e Testing are two sides of the same coin. Furthermore, I shall show how production monitoring and development testing can be achieved using Playwright, GitHub Actions and Elastic Synthetics.

Synthetic Monitoring and e2e Testing: 2 Sides of the Same Coin

Carly Richmond

Descubre el futuro de las pruebas automatizadas de aplicaciones móviles con un brazo mecánico impulsado por JavaScript. Durante esta charla exploraremos el diseño, prototipado e implementación de esta solución de vanguardia, optimizando la eficiencia y precisión de las pruebas en dispositivos móviles reales. También discutiremos los desafíos de construir una solución de hardware para el mundo real y cómo superarlos.

El Ascenso de los Robots

This Talk discusses the possibility of robots taking over based on Asimov's three laws of robotics. It explores the use of automation robots for testing, including building and controlling them. The Talk also covers implementing interfaces, conducting math game challenges, and the capabilities of automation testing. It addresses questions about responsive design, camera attachment, and the future roadmap. The affordability of the setup and the potential for future automation are also discussed, along with a rapid fire Q&A session.

Discover the future of automated mobile application testing with a JavaScript-powered mechanical arm. During this talk we will explore the design, prototyping, and implementation of this cutting-edge solution, optimizing testing efficiency and precision on real mobile devices. We will also discuss the challenges of building a hardware solution for the real world, and how to overcome them.

Rise of the Robots

En esta charla, discutiremos cómo aprovechar las prácticas de Machine Learning en las pruebas de software con varios ejemplos prácticos y un estudio de caso que utilicé en mi proyecto para hacer el Triaje de Bugs. ¡Vamos a abrazar el futuro juntos!

El Futuro es Hoy: Aprovechando la IA en las Pruebas de Software

This Talk discusses integrating machine learning into software testing, exploring its use in different stages of the testing lifecycle. It highlights the importance of training data and hidden patterns in machine learning. The Talk also covers generating relevant code for test automation using machine learning, as well as the observation and outlier detection capabilities of machine learning algorithms. It emphasizes the use of machine learning in maintenance, bug management, and classifying bugs based on severity levels. The Talk concludes with the results of classification and bug management, including the use of clustering.

In this talk, we will discuss leveraging Machine Learning practices in Software Testing with several practical examples and a case study that I used in my project to do Bug Triage. Let's embrace the future together!

The Future is Today: Leveraging AI in Software Testing

Mesut Durukal

Storybook es un proyecto OSS complejo, que se integra con una amplia gama de stacks y es utilizado de diversas formas por millones de desarrolladores. ¿Cómo es mantener un proyecto así? ¿Cómo nos aseguramos de que no se rompa?

Cómo probamos Storybook en sí

This Talk discusses the use of TypeScript and Storybook in software development. It covers the premise of components and the complexity of testing Storybook. The setup process for Next.js and Storybook is explained, along with the testing workflow and CI integration. The Talk also touches on caching, bug reports, and the release process. Documentation management and improving test run time are discussed, as well as testing feature flags and mobile usage.

Storybook is a complex OSS project, integrating with a wide range of stacks, and used in various ways by millions of devs. What's it like maintaining a project like that? How do we ensure it doesn't break?

How We Test Storybook Itself

Norbert de Langen

En mi charla exploraré los desafíos que se enfrentan al intentar gestionar y mantener el código de prueba en múltiples proyectos y qué me hizo crear mi primer módulo Javascript.
Mostraré el proceso de construcción, publicación y versionado utilizando las poderosas capacidades de GitHub Actions. Y finalmente, hablaré sobre los beneficios de hacerlo.

Explorando Módulos Node para Automatización de Pruebas

This Talk explores the process of building a test automation library using node modules, with a focus on creating the project structure, building and testing the library, and publishing and versioning the package. It discusses the inclusion of helpful features like WAIT helpers and the use of libraries like Playwright and Cypress. The importance of clear documentation, pre-release versions, and version control is emphasized, along with the need for installation instructions and contribution guidelines.

In my talk I will explore the challenges faced when trying to manage and maintain test code across multiple projects and what made me create my first Javascript module.
I will showcase the process of building, publishing, and versioning it using the powerful capabilities of GitHub Actions. And finally, I will talk about the benefits of doing it.

Exploring Node Modules for Test Automation

Kat Kmiotek

En algún momento, aceptamos que las pruebas de extremo a extremo serán inestables, está bien agregar reintentos y es una buena práctica poner en cuarentena las malas pruebas. ¡No tiene que ser así! Esta charla cubrirá las razones más comunes para las pruebas inestables, cómo depurarlas con un depurador de viaje en el tiempo y cómo solucionarlas. Si bien las pruebas inestables son un problema tan antiguo como las pruebas, resulta que cuando puedes capturarlas e inspeccionarlas con las DevTools del navegador y los registros de consola retroactivos, son bastante solucionables. Y una suite de pruebas libre de inestabilidades se ejecuta más rápido, de manera más confiable y ayuda a detectar más problemas antes de que lleguen a producción.

Deja de Clasificar Tu Suite de Pruebas

This Talk introduces Replay, a time travel enabled browser dev tool for debugging test suites. It emphasizes the importance of collaboration between product and QA teams to maintain and improve test suites. The Talk demonstrates how Replay's DevTools can be used to debug test failures and analyze test suite health. It also highlights the benefits of using Replay for reproducibility and collaborative debugging. Additionally, it discusses integrating Replay into CI and the cost considerations associated with using the tool.

At some point, we accepted that end-to-end tests will be flaky, it’s okay to add retries, and it’s best practice to quarantine bad tests. It doesn’t have to be this way!This talk will cover the most common reasons for flaky tests, how to debug them with a time travel debugger, and how to fix them. While flaky tests are a problem that is as old as testing, it turns out that when you can capture and inspect them with Browser DevTools and retroactive console logs, they are quite fixable. And a test suite that is free of flakes runs faster, more reliably, and helps catch more issues before they reach production.

TestJS Summit 2023

Test JavaScript. Test with JavaScript.