TestJS Summit

TestJS Summit 2023

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

TestJS Summit 2022

The workshop is led by Filip Nits, a QA lead in Slido, who teaches testers about web development and developers about testing. The workshop focuses on using Cypress for end-to-end testing of the Trello app, covering topics such as installation, writing tests, automating Trello board and element selection, using plugins, and testing cart creation and deletion. It also explores concepts like chaining commands, writing assertions with Chai, sending HTTP requests, intercepting requests, and combining UI and API tests. The workshop provides practical challenges and encourages participants to code along.

The web has evolved. Finally, testing has also. Cypress is a modern testing tool that answers the testing needs of modern web applications. It has been gaining a lot of traction in the last couple of years, gaining worldwide popularity. If you have been waiting to learn Cypress, wait no more! Filip Hric will guide you through the first steps on how to start using Cypress and set up a project on your own. The good news is, learning Cypress is incredibly easy. You'll write your first test in no time, and then you'll discover how to write a full end-to-end test for a modern web application. You'll learn the core concepts like retry-ability. Discover how to work and interact with your application and learn how to combine API and UI tests. Throughout this whole workshop, we will write code and do practical exercises. You will leave with a hands-on experience that you can translate to your own project.

How to Start With Cypress

Automated atomic tests are a great way to improve UI tests by making them less brittle and faster. The tests focus on testing a single feature or component and have minimal UI interactions. The Talk explores examples of automated atomic tests and their implementation on web applications. It also discusses the analysis of atomic tests, login tests, and working with JSON Web Tokens for authentication and authorization. The Talk concludes by highlighting the use of UI and web requests in automated atomic testing.

Yes, Big things do come in small packages. For example, isn’t a unit test’s speed, feedback, and reliability fantastic? Did you know we can also have fast, focused, and reliable feedback from our functional e2e tests? Atomic e2e tests are those that are targeted and focused. They’re tiny in size but large in their impact. This tutorial will teach you how to create atomic e2e tests with several code examples. First, we will use Cypress.io to authenticate by setting a cookie. Instead of using a UI. Second, we will use Cypress.io to set a JSON Web Token for authentication. Join me, and let’s write tiny tests for large results.

Tiny Tests, Large Results

Nikolay Advolodkin

Cypress is a powerful tool for end-to-end testing and API testing. It provides instant feedback on test errors and allows tests to be run inside the browser. Cypress enables testing at both the application and network layers, making it easier to reach different edge cases. With features like AppActions and component testing, Cypress allows for comprehensive testing of individual components and the entire application. Join the workshops to learn more about full circle testing with Cypress.

Cypress has taken the world by storm by brining an easy to use tool for end to end testing. It’s capabilities have proven to be be useful for creating stable tests for frontend applications. But end to end testing is just a small part of testing efforts. What about your API? What about your components? Well, in my talk I would like to show you how we can start with end-to-end tests, go deeper with component testing and then move up to testing our API, circ

Full-Circle Testing With Cypress

TestJS Summit 2021

Cecilia Martinez, a technical account manager at Cypress, discusses network requests in Cypress and demonstrates commands like cydot request and SCI.INTERCEPT. She also explains dynamic matching and aliasing, network stubbing, and the pros and cons of using real server responses versus stubbing. The talk covers logging request responses, testing front-end and backend API, handling list length and DOM traversal, lazy loading, and provides resources for beginners to learn Cypress.

Whether you're testing your UI or API, Cypress gives you all the tools needed to work with and manage network requests. This intermediate-level task demonstrates how to use the cy.request and cy.intercept commands to execute, spy on, and stub network requests while testing your application in the browser. Learn how the commands work as well as use cases for each, including best practices for testing and mocking your network requests.

Network Requests with Cypress

Cecelia Martinez

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

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

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

The Workshop on Migrator.cyprus.io covered the migration of Protractor test scripts to Cypress using the Migrator.cyprus.io application. The workshop included running tests, discussing project architecture, and code improvements. Custom commands were introduced to reduce code duplication. The workshop also covered guidelines for writing code, version updates, and optimization techniques. Participants shared their experiences and recommendations for using Cypress for UI and API testing.

In this workshop, I will introduce you to the migrator.cypress.io project in an unconventional way, where in addition to going over the Cypress commands equivalent to Protractor (and showing you how Cypress is simpler), I will also introduce you how I tested such a project evolving the automated test scripts on-demand, architecting the test suite in an evolutionary way.

Web Testing Architecture and Refactoring With Cypress

Walmyr

This workshop focuses on flaky test management with Cypress. Participants will work with the Cypress Real World App to learn about different types of flake and how to address them. The workshop covers topics such as managing network requests, handling flaky tests, and reducing flakiness through test data management. The use of Cypress Dashboard for flake detection and analysis is also discussed. Overall, the workshop provides practical strategies and best practices for managing flaky tests in software development.

This workshop is for Cypress users who want to step up their game against flake in their test suites. Leveraging the Cypress Real World App, we’ll cover the most common causes of flake, code through some examples of how to make tests more flake resistant, and review best practices for detecting and mitigating flake to increase confidence and reliability. Table of contents: - Cypress Real World App Overview - What is Flake? - Causes of Flake - Managing Network-related Flake (Activity) - Managing Dom-relate Flake (Activity) - Flake Detection and Mitigation Best Practices - Q&amp;A <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Flaky Test Management with Cypress

Hello, I'm Rainer Haneckamp, a trainer and consultant at Angular Architects. In this talk, we'll explore visual regression testing using tools like Puppeteer, Playwright, and Cypress. We'll learn how to use Storybook and Puppeteer with Jest for visual regression testing. We'll also see how Jest and Playwright can be used together for visual regression testing. Finally, we'll discover how to use Cypress for visual regression testing. Thank you for watching!

Visual Regression tests components via screenshot matching. I'll show how you do that in three different libraries/frameworks. Additionally, I will use Storybook to extract the components from your SPA choice.

Visual Regression with Puppeteer, Playwright and Cypress

Rainer Hahnekamp

React Advanced

React Advanced 2021

Welcome to React Advanced London where we'll learn about gaining confidence with Cypress tests. We'll explore browser testing, including tests for specific units of work, business services, APIs, and components using different tools. Cypress provides selectors for easy object selection in tests. We learned how to select objects in our tests and rerun them to check for successes and failures. We also discussed best practices for Cypress tests, including using data-cy elements, commands, mocks, and fixtures.

Have you ever wanted to refactor mercilessly but didn't want to break the fragile tower? Or have you ever pushed to production only to spend the next few days cleaning up the regressions? You need end-to-end tests, and Cypress is a great, fast way to build them. With a simple JavaScript or TypeScript interface, you can automate browsers to hit those critical functions in your app to prove it works as expected -- this time and every time. Join us to dive into building Cypress tests and leave with confidence to refactor your way to greatness. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Gaining Confidence with Cypress Tests

Rob Richardson

TestJS Summit - January, 2021

The Workshop covers various topics related to Cypress, including app control, network calls, continuous integration, and debugging. Cypress provides intelligent features such as command logging, test reruns, and powerful assertions. The documentation for Cypress is comprehensive and includes syntax, examples, and historical changes. Tests in Cypress should focus on expected behavior and utilize assertions for accurate results. Cypress offers features like time-travel debugging, conditional testing, and intercepting network requests for effective testing.

This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner. We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data. Anyone who knows JavaScript programming language and has NPM installed would be able to follow along. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Testing Web Applications Using Cypress

Gleb Bahmutov

JSNation Live

JSNation Live 2020

Gleb Akhmetov explains how to visually test React components, emphasizing the importance of addressing climate change and collaboration. He discusses component testing, styling, and the challenges of CSS changes. Gleb highlights the use of image snapshots for visual testing and the importance of controlling data for accurate results. He also discusses using Docker for consistent visual testing and the support for multiple browsers. Cypress is focused on flake-free testing and has plans for test retries and new features in the roadmap.

Many modern web frameworks use components as their building blocks. In this talk, I will show component testing using Cypress - and I mean "show" literally. You will see the component running inside a real browser, you will interact with the component like a real user, and you can debug the component using the real browser's DevTools. Finally, I will go through the current open source and commercial options for visually testing the component's styles and rendering. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

I See What is Going on: Visual Testing for Your Components

The Talk discusses common mistakes in Cypress tests, such as accessing the file system directly instead of using the Cypress command, and the importance of writing effective Cypress tests for different scenarios. It also emphasizes the need for adding assertions during navigation and alternating commands and assertions. The Talk highlights the significance of documentation and examples in providing support and addresses the advantages of using the Cypress Node test runner. It concludes with tips on debugging, data tests, and testing user journeys and edge cases.

In this talk, I will discuss the common mistakes developers make when writing Cypress tests and how to avoid them. We will discuss tests that are too short, tests that hardcode data, tests that race against the application, and other mistakes. I believe this presentation will be useful to anyone writing E2E tests using JavaScript. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#cypress