November 2017 Summaries

In this blog post, Gleb Bahmutov explores testing a Vue.js web application using Cypress.io, focusing on a TodoMVC clone that utilizes a Vuex data store and a REST backend server. The article provides detailed guidance on writing end-to-end tests to ensure the UI elements are visible and functional, resetting data before tests, and verifying interactions with the REST API by simulating user actions like adding, deleting, and viewing todo items. It demonstrates how to manage a predictable test environment by resetting the database and mocking server responses. Additionally, the post emphasizes the importance of testing Vuex store interactions, verifying that actions like adding todos are correctly reflected in both the UI and the state store, and ensuring synchronization with the backend server. Bahmutov advises starting with basic UI tests before integrating more complex tests involving the store and API to streamline development and prevent regressions. The post is structured to help developers understand the testing process and best practices for maintaining scalable and reliable web applications.

Cypress, a testing tool known for running test code directly in the browser, has introduced a Plugins API as of version 1.1.0, allowing users to customize and extend its functionalities. This API facilitates writing Node.js code in a newly seeded file, cypress/plugins/index.js, enabling users to tap into various lifecycle events of Cypress. The initial event added is file:preprocessor, which allows modifications to the way test files are prepared, including adding support for languages like TypeScript and CoffeeScript, or using Webpack instead of the default Browserify. By packaging the internal transpilation components into separate NPM modules like @cypress/browserify-preprocessor and @cypress/webpack-preprocessor, Cypress allows users to independently manage and update these modules. The Cypress team plans to introduce more events for broader customization, such as changing configuration settings and integrating application code for database operations. Additionally, they aim to promote community and official plugin submissions, with future plans to include ESLint and JS framework-specific extensions like React, Angular, and Vue.

In his blog post, Gleb Bahmutov explores techniques for controlling an AngularJS application directly from end-to-end (E2E) tests using Cypress. The post explains how Cypress's close proximity to the application allows developers to manipulate application code directly, bypassing the Document Object Model (DOM). Bahmutov demonstrates how to modify an application's data model from the DevTools console and how to access AngularJS instances within the Cypress Test Runner. He provides examples of setting properties on an AngularJS scope object, triggering updates with the digest cycle, and using helper functions to interact with elements and their scopes. The post also discusses the complexity of directly manipulating application internals, such as localStorage, and the potential risks of tightly coupling tests to implementation details. Bahmutov concludes by advising developers to carefully consider the trade-offs of such direct access in E2E testing.

The blog post by Gleb Bahmutov discusses the integration of a graphical user interface (GUI) into end-to-end API tests, highlighting the benefits of using a single tool for both API and browser automation testing. The author emphasizes the versatility of the Cypress Test Runner, which, due to its extensive API, can effectively manage HTTP requests and provide a detailed, step-by-step graphical test report. This approach allows for efficient inspection and debugging of test results without cluttering the code with log statements. The post provides a practical example using a simple API, demonstrating how Cypress can be set up to test API endpoints while maintaining test independence through state reset before each test. It also underscores the advantage of using Cypress for consistent testing both locally and in continuous integration (CI) environments, including video recording of the test execution. The post concludes with an invitation to try Cypress, which is available for free and open source, and provides links to further resources and examples.