May 2021 Summaries

Cecelia Martinez and Mike Cataldo from Cypress hosted a webcast focused on managing flaky tests within test suites, highlighting common causes such as DOM, network, and environment-related issues. They discussed best practices for creating flake-resistant tests and utilizing Cypress features like test retries and flaky test identification to manage test flakiness. The session included a live audience interaction through Zoom and Slido, with positive feedback received via a post-webcast survey. Participants were encouraged to follow Cypress on Twitter for updates on future webcasts, and those who completed the survey were promised a surprise.

In the blog post by Gleb Bahmutov, the process of conducting full-cycle testing of HTML emails using SendGrid and Ethereal accounts is detailed. The testing involves sending emails through the SendGrid SMTP server and retrieving them from temporary Ethereal email accounts to ensure proper formatting and functionality. This process is integrated into a Next.js web application that requires users to register by confirming a code sent via email. The testing uses Cypress Test Runner to automate the end-to-end process, verifying that emails are correctly sent and received, and ensuring that the confirmation code is accurate and functional. To enhance the test's reliability, a retry mechanism is implemented to handle potential delays in email delivery, using the cypress-recurse plugin to repeatedly check for the email's arrival without relying on hardcoded wait times. This approach increases the robustness and efficiency of the testing process, allowing for a more seamless and dependable confirmation email flow.

The blog post by Bart Ledoux discusses how to integrate Cypress component testing with Storybook to efficiently test design system components. Storybook allows for the isolated rendering of components, which is ideal for showcasing them, while Cypress is used for testing these components. The challenge is to reuse Storybook's configuration for Cypress testing without rewriting everything, as components often need specific contexts, themes, or global styles to render correctly. The solution involves using the @storybook/testing-react library to compile decorators and configurations into a format that Cypress can use, allowing for the testing of Storybook stories with consistent styling and context. This approach saves time by not duplicating configurations and ensures that global styles and decorators are applied during Cypress testing. However, some limitations remain, such as the need for manual configuration for MDX files and the lack of support for certain Storybook features, but ongoing updates aim to address these issues.

The blog post by Gleb Bahmutov explores the process of testing HTML emails using Cypress with a local SMTP server to ensure they function and display correctly. It provides a detailed guide on setting up a testing environment using Node and the nodemailer module to send emails, and smtp-tester to receive them. Bahmutov explains how to create reusable transporter objects for sending emails and how to set up a local SMTP server to capture and log incoming messages. The post includes step-by-step instructions for testing the registration and confirmation process of an application, utilizing Cypress to automate the testing of both plain text and HTML emails. The tutorial highlights the benefits of using Cypress for testing email functionalities, offering insights into debugging and confirming that the HTML content and links within the emails work as expected. Lastly, the post suggests extending tests for better accessibility and styling consistency across different viewports, and it hints at using third-party services for email testing if needed.

A webcast hosted by the Cypress Team on May 19, 2021, aims to address the challenges of managing flaky tests in software development. It will cover test-writing best practices and provide insights into the different types of test flakiness, including those related to the DOM, network, and environment. The session will also demonstrate how Cypress can assist in reducing test flakiness through features like test retries and flaky test identification. Attendees will have the opportunity to participate in a live Q&A session, and those who register will receive a recording if they cannot attend the live event.

In this blog post by Gleb Bahmutov, the process of deploying a static site to GitLab Pages and conducting end-to-end browser tests using Cypress and GitLab CI is explored. The example project is a static site created from a Markdown file using VuePress, and the source code is accessible on GitLab. The post outlines the setup of utility scripts for local testing and the execution of lightweight smoke tests to ensure the site's functionality. It details the use of GitLab CI to automate testing and deployment, emphasizing caching strategies to optimize CI performance. The GitLab CI pipeline is designed with stages for testing, deploying, and conducting a confidence check on the deployed site, allowing for efficient validation and debugging through test artifacts and the Cypress Dashboard. The process ensures that every major transformation, such as building and deploying, does not introduce errors, with additional guidance on integrating Cypress with GitLab for enhanced testing capabilities.