July 2020 Summaries

Gleb Bahmutov's tutorial demonstrates how to verify the sorting functionality of an Ag-Grid table using Cypress for testing. The example involves an HTML file that creates a "smart" table widget with sortable columns for car make and price, utilizing vanilla JavaScript. The test begins by loading the table and ensuring the presence of three rows, then verifies sorting by price. Despite visual confirmation of sorting through the UI, the initial test fails due to Ag-Grid's use of the translateY property to reposition rows without altering the DOM order. The test is refined by attaching a row index attribute from the parent element and converting price text to numbers for accurate verification of sorted order, ultimately passing when the list of prices aligns with the expected sorted order. This exercise highlights the importance of understanding DOM manipulation in testing dynamic table functionalities.

In the blog post by Gleb Bahmutov, the author addresses a common issue encountered when using the Cypress Test Runner, specifically the "detached DOM element" error that can occur during tests involving dynamic data fetching in Select2 widgets. Bahmutov explains that this error arises due to race conditions between the test runner and the application updating the DOM, particularly on Continuous Integration (CI) environments where network calls and browser updates can be slower. The post uses a detailed scenario to illustrate how a test can fail due to this error, and it suggests solutions such as implementing waiting mechanisms for DOM updates and using Cypress's built-in retry-ability to avoid race conditions. Additionally, the author recommends simulating slower network responses with fixtures to ensure the test runner waits for the application to complete its actions, thereby making the test more reliable and flake-free. The discussed solutions aim to enhance test stability by ensuring synchronization between the test runner and the application's asynchronous operations.

A recent webcast hosted by Gleb Bahmutov, VP of Engineering, and Roman Sandler, a Frontend Developer at Fiverr, focused on building robust and maintainable integration tests using Cypress and cypress-testing-library. The presentation emphasized the importance of addressing brittle tests to reduce maintenance burdens and highlighted key Cypress features like “within” to resolve common testing issues. The event, which included a live Q&A session via Zoom and Slido, received positive feedback from attendees, who could access additional resources such as the webcast recording, presentation slides, and a GitHub repository. The organizers expressed gratitude for the participation and feedback, hinting at future webcasts and inviting followers to stay updated via Twitter for upcoming events.

Ionic Framework is a free, open-source tool for developing native mobile applications using web technologies like Angular, React, and soon, Vue, allowing apps to run in a browser during development. This feature enables the use of Cypress, a testing tool, to efficiently test mobile app functionality before deploying it on a native device, bypassing the need for device-specific setups like Android Studio. However, it cannot directly test native functionalities such as fingerprint authentication. The blog provides a demonstration using a modified version of the Ionic Conference App, showcasing how to configure Cypress for mobile testing, including setting the viewport to simulate devices like the iPhone 5 and accessing app storage through custom commands. It outlines testing capabilities such as swiping through onboarding tutorials and enabling dark mode. The flexibility of Cypress in simulating mobile behaviors is emphasized, with resources available for further exploration of its capabilities in mobile app testing.