March 2020 Summaries

The blog post discusses the integration of Cypress end-to-end testing with Netlify's Continuous Delivery process through the use of Build Plugins, specifically the netlify-plugin-cypress. Traditionally, deploying sites via Netlify could result in broken live versions as it lacked integrated testing capabilities, necessitating separate Continuous Integration services like CircleCI or GitHub Actions. With the introduction of Netlify's Build Plugins (Beta), users can now run Cypress tests post-build, preventing broken sites from being deployed by halting the process if errors are detected. The plugin requires minimal configuration, and users can easily enable it via the Netlify interface or by modifying the netlify.toml file. It also supports recording test results via the Cypress Dashboard by setting environment variables and adjusting plugin inputs to allow artifact recording. This streamlined approach enhances the reliability of Netlify deployments by ensuring comprehensive testing is conducted before a site goes live.

Filip Hric, a QA lead at Slido and Cypress Ambassador, discusses enhancing error screenshot efficiency in Cypress testing by utilizing the cy.log() command to provide additional context to test actions. While Cypress offers excellent code readability and video recordings of test runs, Hric suggests that screenshots, when properly captioned with cy.log(), can be more efficient for diagnosing multiple test failures. By adding a numbered log to each test step and incorporating it into error messages, he creates more informative and accessible error logs that are displayed in the Cypress Dashboard, facilitating quicker debugging and ticket creation.

The blog post by Gleb Bahmutov provides an in-depth guide on using Cypress to test native HTML `<select>` elements and the popular Select2 library, which enhances these elements with additional HTML markup. It explains how to utilize the Cypress `.select` command to interact with single and multiple value `<select>` elements, highlighting the need for deep equality checks when verifying selected values. The post also covers how Select2 modifies the original `<select>` element, making it necessary to use the `force: true` option to interact with it through Cypress. Additionally, it demonstrates techniques for selecting values by typing, handling multiple selections, removing items, and programmatically retrieving selected items using Select2's API. The blog emphasizes understanding the additional markup introduced by Select2 for effective testing, providing practical examples and solutions for overcoming challenges such as retry-ability issues when fetching data via AJAX.

The blog post by Gleb Bahmutov provides a tutorial on testing an application that changes a CSS variable to update the background color when a user selects a new color via an `<input type="color">` element. The application uses CSS variables defined in an external stylesheet to manage the color changes, with a JavaScript file handling the event of a color change by updating the CSS variable. The post details a series of tests using Cypress, starting with a simple confirmation that the background color changes upon user interaction, and advancing to more complex tests that spy on and stub DOM method calls to verify the application's internal workings. The tutorial emphasizes the use of Cypress commands such as `.invoke` and `.trigger` to simulate user actions and demonstrates how to verify the functionality by observing changes in the application's state. Additionally, the post provides tips on using tools like the chai-colors NPM module and Sinon.js for more flexible assertions, and it encourages exploring further examples of testing browser and DOM APIs with Cypress.

Cypress, a company focused on enhancing the developer experience, hosted an Atlanta JavaScript meetup featuring notable speakers Tracy Lee and Gil Tayar, who emphasized the importance of inclusive software development and reducing barriers to entry in tech. Tracy Lee discussed developing an inclusive architecture using the PAM stack—Process, Abstractions, Mentorship—and highlighted how frameworks, boot camps, and free online resources have made it easier for beginners to enter the tech field. The author, a new member of the Cypress team, shared their journey from hobbyist web developer to full-time software engineer, noting the diversity and inclusivity they encountered along the way. Inspired by these experiences, they became actively involved in the Atlanta tech community, focusing on creating opportunities for underrepresented groups. Gil Tayar's insights on front-end testing resonated with the author, reinforcing their passion for Cypress and its mission to make testing accessible and reduce the fear of coding. The company's free and open-source Test Runner exemplifies its commitment to lowering entry barriers and fostering an inclusive environment in software development.

Marie Drake, a Cypress Ambassador and Principal Test Automation Engineer at News UK, discusses the advantages of using Cypress for modern web testing, highlighting its ease of use, fast setup, and active community support, which make it appealing to both developers and QA engineers. Unlike Selenium, which has been a long-standing tool for UI test automation but is often criticized for its complex setup and debugging challenges, Cypress is designed to cater primarily to JavaScript developers, offering a more streamlined and interactive testing experience. With features such as a UI Test Runner, clear error messages, and a rich plugin ecosystem, Cypress supports cross-browser testing and encourages a collaborative testing culture where developers are more involved in writing automated tests. Although Cypress is gaining popularity, particularly among JavaScript projects, it is not necessarily a replacement for Selenium, given its unique focus and the tradeoffs involved, but rather a complementary tool that addresses specific developer needs in modern web development.

The blog post by Gleb Bahmutov explores how to test edge data cases in web applications using network stubbing and app actions with Cypress, focusing on scenarios where historical data might include incomplete entries that current UI validations prevent. Using a TodoMVC application as a case study, it demonstrates how to test for edge cases like blank titles, which the application now disallows through stricter input validation. The post explains how to use Cypress to simulate and intercept network requests, allowing developers to test how applications handle data that cannot be created via the current UI. By leveraging Cypress's network stubbing and the capability to directly manipulate the application state with App Actions, developers can ensure that their applications handle unexpected data gracefully without UI-induced errors. The article concludes by highlighting that while the application prevents new blank entries, it can still display existing ones without crashing, albeit imperfectly, thereby maintaining robustness against legacy data issues.