---
title: "cy.blog()"
url: "https://www.cypress.io/blog/tag/tutorials"
description: "Browse every Cypress blog post tagged Education: Tutorials, newest first, with articles from the Cypress team and community."
---

# cy.blog()

Releases, AI-assisted testing, and quality guides from the Cypress team. See what changed, whether it affects you, and how teams ship with confidence.

[See all posts in category 'Education'](/blog/category/Education)

## Posts marked with tag tutorials

[Making the Most of UI Coverage UI Coverage quantifies how well your Cypress tests exercise your application by mapping interactive elements to those actually tested. The resulting insights expose gaps in critical user flows and can power quality gates that can be enforced in CI through our Results API. As a Technical Account Manager with extensive hands-on experience with configuring UI Coverage for users and in close collaboration with the product team, I’ve gathered some best practices for configuring UI Coverage to yield s Read more](/blog/making-the-most-of-ui-coverage)

[Cypress for Beginners: 5 Commands to Kickstart Your Testing Journey To any newcomers of testing: Welcome to the exciting world of Cypress! If you're new to web application testing, Cypress is a fantastic framework that makes writing and running tests a breeze. To start your journey, let's explore five essential Cypress commands that will quickly become your testing arsenal. 1. Visit Your Test Subject: cy.visit() The first step in any Cypress end-to-end test is to tell it where to start – enter cy.visit(). This command loads the web page you want to interact w Read more](/blog/cypress-for-beginners-5-commands-to-kickstart-your-testing-journey)

[How to Execute Test Cases In Parallel with Cypress Cloud Using GitHub CI/CD Actions In a world where time equates to money, minimizing execution time for various actions is imperative. This holds true for testing, where parallelizing test cases becomes a key strategy to reduce testing durations and accelerate test suite execution. Cypress Cloud, in conjunction with GitHub Actions, facilitates the parallel execution of test cases, enabling simultaneous testing across multiple computers or environments. This blog post will explore the following aspects: * Introduction to Cypre Read more](/blog/how-to-execute-test-cases-in-parallel-with-cypress-cloud-using-github-ci-cd-actions)

[Cypress Studio: A Beginner's Guide Embarking on a project migration to a new tool may seem like a daunting journey, especially when adapting to Cypress requires mastering JavaScript and understanding the mocha framework. However, the silver lining lies in Cypress Studio, an integrated tool within Cypress. This visual gem simplifies the creation and modification of test scripts through a graphical interface, offering a user-friendly alternative for those not as comfortable with coding. What is Cypress Studio? Cypress Studio is Read more](/blog/cypress-studio-a-beginners-guide)

[Cypress and Chatbot AI: Writing Tests Note: If you've arrived at this post looking for information about AI-powered Test Generation within Cypress, you can check out our recent webinar about the topic, including updates coming to Cypress Studio, and request access as a part of a UI Coverage trial. This is a guest post from Ambassador David Ingraham. Hello, I’m David. I’m a Senior SDET with a passion for quality and training engineers on best practices in the industry. I’ve implemented robust testing frameworks for three years with Read more](/blog/cypress-chatbot-ai-writing-tests)

[Test Isolation as a Best Practice This is a guest post from Ambassador David Ingraham. Hello, I’m David. I’m a Senior SDET with a passion for quality and training engineers on best practices in the industry. I’ve implemented robust testing frameworks for three years with Cypress.io and I’m looking forward to many more. Find and connect with me at https://www.linkedin.com/in/dingraham01/! What is Test Isolation? Test isolation is a best practice in which all tests should always be run independently from one another while stil Read more](/blog/test-isolation-as-a-best-practice)

[Uploading html5 files made easy with the .selectFile command Cypress has a built-in way for you to select files in an HTML5 input element and simulate dragging files into the browser with the introduction of the .selectFile() command. HTML5 input file upload With the .selectFile() command, you can easily select a fixture file in a form element: cy.get('input\[type=file\]').selectFile('file.json') Or multiple fixture files, as long as the file input has the multiple property: cy.get('input\[type=file\]').selectFile(\['file.json', 'file2.json'\]) You can Read more](/blog/uploading-files-with-selectfile)

[Visual Testing for Emails Sent Using 3rd Party Dynamic Templates This blog post will teach you how to visually verify the emails sent by a 3rd party service. Such verification is necessary to ensure the emails have the expected style, and include the necessary information. The post teaches you how to deal with the difficult email markup generated from dynamic templates when doing image comparison. Note: you can find the source code for this blog post in the repository cypress-sendgrid-visual-testing-example \[https://github.com/bahmutov/cypress-sendgrid-visu Read more](/blog/visual-testing-for-emails-sent-using-3rd-party-dynamic-templates)

[Full Testing of HTML Emails using SendGrid and Ethereal Accounts Imagine you are sending beautiful HTML emails using your own SMTP server or even a 3rd party service like SendGrid. What if the emails are formatted incorrectly? What if the template string is incorrect and the user sees Dear <<undefined>>? Can you test the emails to make sure they really work? In this blog post I will describe the full cycle email testing. We will send actual emails using 3rd party service SendGrid \[https://sendgrid.com/\] and we will fetch that email from a temporary email acc Read more](/blog/full-testing-of-html-emails-using-ethereal-accounts)

[Cypress + Storybook 2.0 When building a design system, we like to see components rendered in isolation. What better tool to do that than Storybook? We can see our components, wrap them in decorators, and show our stakeholders beautiful user story demos. Once we know how our components should look, we want to test them. For that part, I love to use Cypress component testing \[https://docs.cypress.io/guides/component-testing/introduction#What-is-Component-Testing\] . How great would it be if we could just re-use the stori Read more](/blog/cypress-x-storybook-2-0)

[Testing HTML Emails using Cypress In this blog post, we will use a local SMTP server to receive emails sent by the app to the user. We will test the HTML emails to make sure they look and work correctly. Note: you can find the source code shown in this blog post at cypress-email-example \[https://github.com/bahmutov/cypress-email-example\] \[https://github.com/bahmutov/cypress-email-example\] and watch a video explaining the testing process here \[https://youtu.be/16WTH7XeIVw\]. Sending emails If you want to send an email from a No Read more](/blog/testing-html-emails-using-cypress)

[Testing deployed GitLab pages using Cypress and GitLab CI In this blog post we will deploy a static site to GitLab Pages, and then we will run end-to-end browser tests against the deployed site to make sure it is working as expected. The Cypress Test Runner makes it extremely simple to write full browser end-to-end (E2E) tests, while GitLab CI is a powerful platform for running such tests. The application Today's example is a static site built from a Markdown source file using VuePress \[https://vuepress.vuejs.org/\]. You can find the full source code Read more](/blog/fast-end-to-end-browser-tests-using-cypress-and-gitlab-ci)

[Cypress and NeuraLegion: Leveraging your existing scripts for security testing automation Learn how you can use Cypress, NeuraLegion’s HAR Generator, and NexPloit together to automate AppSec testing in your pipelines. Read more](/blog/cypress-and-neuralegion)

[Getting Started with Cypress Component Testing (Vue 2/3) As of Cypress 7.0, the new Component Testing (CT) runner is now bundled with the Cypress. Learn how to configure Cypress Component Testing with Vue CLI and Vue 2/3. Read more](/blog/getting-start-with-cypress-component-testing-vue-2-3)

[Getting Started with Cypress Component Testing (React) As of Cypress 7.0, the new Component Test Runner is now bundled with Cypress! It builds on our learnings from the original component testing implementation, which was hidden behind the `experimentalComponentTesting` flag. Read more](/blog/cypress-component-testing-react)

[Make Cypress Videos Look Old School Recently, we introduced a trial feature called experimentalRunEvents \[https://on.cypress.io/experimental\] that simplifies running Node code before or after executing a spec file. Inside your plugin file \[https://on.cypress.io/writing-and-organizing-tests#Plugin-files\] you can add event hooks to perform operations that need OS access. For example, you could: * initialize the database before all tests start running (on this machine) * scaffold the database depending on the spec about to execute Read more](/blog/make-cypress-videos-look-old-school)

[Generate High-Resolution Videos and Screenshots This blog post shows how to increase the resolution of the videos and screenshots recorded during the cypress run execution. Videos with higher resolution make debugging simpler and look better when shared with other members of the team. The problem Let's look at the Wikipedia.com website. In my local Chrome browser the home page looks nice and sharp: Let's load this page from the Cypress test. it('loads the site', () => { cy.visit('/') cy.screenshot('wiki', {capture: 'runner'}) }) The Read more](/blog/generate-high-resolution-videos-and-screenshots)

[When Can The Test Blink? Let's take a page where a loading element is displayed while the application is fetching the data from the server. If the test is observing the loading element to make sure it disappears, can the loading be too fast? Can the test runner "blink" and miss the element? Read more](/blog/when-can-the-test-blink)

[Running Cypress on the Apple M1 ARM Architecture using Rosetta 2 ⚠️This post is about running Cypress 10.1.x and below on Apple M1 ARM Architecture. Cypress 10.2.0 onwards includes native Apple Silicon support \[https://cypress-io.ghost.io/blog/2022/06/21/cypress-10-2-0-run-tests-up-to-2x-faster-on-apple-silicon-m1/\] and does not require Rosetta to function. We recommend upgrading Cypress instead of following this guide for an older version. Native M1 builds run up to 3.5x faster than Rosetta-translated builds.Apple's latest ARM-based M1 chip has begun to mak Read more](/blog/running-cypress-on-the-apple-m1-silicon-arm-architecture-using-rosetta-2)

[Testing the HREF Anchor Links Once upon a time Zach Bloomquist and I were discussing how to achieve an all-time hero status. We were talking about our open source heroes of course, and I wanted to send Zach a link to the testing section of the Develop, Preview, Test blog post written by Guillermo Rauch. The testing section was in the middle of the post, I scrolled, clicked on the # link, and ... screamed in horror: the anchor URL was #undefined Of course, Guillermo quickly fixed the missing element IDs. Yet even then, he mi Read more](/blog/testing-the-anchor-links)

[When Can The Test Navigate? In this blog post I will show a test that appears simple, yet acts in surprisingly annoying and frustrating ways. We will slightly change the test to make it reliable and flake-free. Read more](/blog/when-can-the-test-navigate)

[Sorting the Table This recipe shows how to verify that an Ag-Grid table is sorted correctly. The source code can be found in the cypress-example-recipes repository under the "Testing the DOM" list. Read more](/blog/sorting-the-table)

[Do Not Get Too Detached When the Cypress Test Runner runs through the test's steps, the application can update itself, causing problems. Often a very frustrating problem our users encounter simply says cy... failed because the element has been detached from the DOM. You can see this error below and its explanation using the link "Learn more \[https://on.cypress.io/element-has-detached-from-dom\]". Element detached from the DOM error messageIn this blog post I will go through a scenario showing this problem and show how Read more](/blog/do-not-get-too-detached)

[End-to-end Testing Mobile Apps with Ionic and Cypress Ionic Framework is a free, open-source framework for developing native mobile applications using web development frameworks like Angular, React, and (coming soon!) Vue Read more](/blog/end-to-end-testing-mobile-apps-with-ionic-and-cypress)

[Experimental Fetch Polyfill Let's take an application that makes an Ajax call to the browser to load a list of ... fruits. You can find this awesome and healthy application in Cypress Example Recipes \[https://github.com/cypress-io/cypress-example-recipes#stubbing-and-spying\] under name "Stubbing window.fetch". Application Every time you visit an application you get five new fruitsThis application presents two challenges to end-to-end tests. First, the data is random - every time the test visits the page localhost:7080 a Read more](/blog/experimental-fetch-polyfill)

[When Can The Test Log Out? Recently, we released the Cypress Real World App \[https://www.cypress.io/blog/2020/06/11/introducing-the-cypress-real-world-app/\] - a modern web application with a full set of E2E and API tests showing the recommended best practices for writing tests. From the start, we had Linux continuous integration running tests on every commit. After the release, we added a Windows continuous integration workflow in #421 \[https://github.com/cypress-io/cypress-realworld-app/pull/421\]- and it started failing Read more](/blog/when-can-the-test-log-out)

[Extending the Cypress Config File In this blog post I will show how to implement extends syntax in the Cypress JSON configuration file without waiting for the Cypress team to add support. Read more](/blog/extending-the-cypress-config-file)

[Where Does the Test Spend Its Time? No one likes slow tests. But before we can make a test faster, we need to understand where the test actually spends its time. In this blog post I will show how to report the total test duration and time per individual Cypress command. Read more](/blog/where-does-the-test-spend-its-time)

[Guest Post: Testing Lists of Items We can start by testing a list with two items. In a situation where we test a couple of items, the testing flow can be pretty straightforward. In our first test, we use .get() to select our todo items and then .eq() to filter the item we want to work with. Read more](/blog/guest-post-testing-lists-of-items)

[How to Run Changed Specs First in a Pull Request Imagine a large project with hundreds of Cypress spec files. If you work on just one feature and open a pull request with small code changes and corresponding updates to 1 Cypress spec file, it makes sense to try running that changed spec file first. Read more](/blog/how-to-run-changed-specs-first-in-a-pull-request)

[Guest Post: How UR used Cypress to convert a legacy app In this blog post I’ll share my tips on how to use Cypress as a tool to convert legacy apps into a modern web framework. Read more](/blog/guest-post-how-ur-used-cypress-to-convert-a-legacy-app)

[Streaming Test Results A single Cypress test might be fast, but if you wait for an entire large test run to finish, you might as well watch the paint dry. Read more](/blog/streaming-test-results)

[Run Cypress Tests on Netlify Using a Single Line Netlify became a popular Continuous Delivery (CD) and hosting solution for a lot of organizations due to its simplicity and power. Pick your repository, click "Deploy site" ... and the site magically appears. Read more](/blog/run-cypress-tests-on-netlify-using-a-single-line)

[Working with Select elements and Select2 widgets in Cypress This blog post shows how to control native <select> HTML elements from Cypress tests. We will also look at how to work with a very popular wrapper library called Select2, that supplants the native <select> elements with an additional HTML markup. Read more](/blog/working-with-select-elements-and-select2-widgets-in-cypress)

[How to Test an Application that Changes a CSS Variable Let's take an application that has an <input type="color"> element. When the user picks a new color, the application changes a CSS variable which controls the background color. In action, it looks like this... Read more](/blog/how-to-test-an-application-that-changes-css-variable)

[Testing Edge Data Cases with Network Stubbing and App Actions Your application might be a layered cake of historical data. Often old records are missing pieces because at first the web application never asked for them, or never validated them. Read more](/blog/testing-edge-data-cases-with-network-stubbing-and-app-actions)

[Working with iframes in Cypress In this blog post I will show how to interact with DOM elements inside an iframe (even if the iframe is served from another domain), how to spy on window.fetch requests that the iframe makes, and even how to stub XHR requests from the iframe. Read more](/blog/working-with-iframes-in-cypress)

[Testing the Browser Notification API How do you test native browser APIs like Notification? If you don't have a real modern browser during tests, it seems like a challenge. But Cypress controls an Electron or Chrome or (soon) Firefox browser, so your tests can access the real thing. Read more](/blog/testing-the-browser-notification-api)

[When Can The Test Stop? Imagine a small "application" that shows Window Confirm popup when the user clicks a button. The HTML might look like this... Read more](/blog/when-can-the-test-stop)

[Asserting Network Calls from Cypress Tests The Cypress Test Runner can "see" everything happening inside the web application under test: DOM elements, cookies, local storage items, location, etc. The Test Runner can also spy on and stub network requests the application is making to its backend API or even to the 3rd party APIs. This blog post shows how easy it is to confirm the network calls from the web app as expected. What Are Network Calls? Network Calls, in the context of web applications, refer to the interactions between the ap Read more](/blog/asserting-network-calls-from-cypress-tests)

[Test Your Web App in Dark Mode Designing a good Dark appearance style takes work, which brings me to the main topic of this blog post - how do you test your web application using a Light or Dark appearance? Read more](/blog/test-your-web-app-in-dark-mode)

[Use meaningful smoke tests Let's say you cover your application with end-to-end tests. You achieve the elusive 100% code coverage using the Cypress code coverage plugin. Is this enough to guarantee a good user experience? Read more](/blog/use-meaningful-smoke-tests)

[Drastically Simplify Testing on CI with Cypress GitHub Action We are so excited to introduce cypress-io/github-action - an action we specifically coded to make running Cypress end-to-end on GitHub as easy as 🥧. Read more](/blog/drastically-simplify-your-testing-with-cypress-github-action)

[Self-testing JAM pages JAM Stack \[https://jamstack.org/\] has become a popular way to build websites - you can write your pages using Markdown (the M in JAM), build using JavaScript tools that fetch data from APIs and get mostly static sites that are very fast. In this blog post I will show how each Markdown page can also include its own end-to-end tests using the Cypress Test Runner. Code: The source repo for this blog post is at bahmutov/self-testing-jam \[https://github.com/bahmutov/self-testing-jam\] and the deploye Read more](/blog/self-testing-jam-pages)

[Split a very long Cypress test into shorter ones using App Actions How can we split a longer test into a series of independent short tests without losing the test's parts? Read more](/blog/split-a-very-long-cypress-test-into-shorter-ones-using-app-actions)

[Show Code Coverage on GitLab CI End-to-end tests can be extremely effective at covering a lot of your application's code. Even a single realistic test, because it loads and exercises the entire application, can cover 60-70% of the statements. Introduction Let's look at a concrete example in the cypress-example-todomvc-redux \[https://github.com/cypress-io/cypress-example-todomvc-redux\] repository. The spec cypress/integration/first-spec.js has a single test "adds todos" that covers 72.6% of the source code with just a few com Read more](/blog/show-code-coverage-on-gitlab-ci)

[Testing Electron.js applications using Cypress - alpha release Note: At this time, Cypress is no longer supporting testing Electron.js applications, and are no longer publishing the binaries referenced in this post. Thank you for your interest, and check out our Roadmap \[https://docs.cypress.io/guides/references/roadmap.html#Upcoming-features\] for information on upcoming features from Cypress. Cypress is great for testing web applications in its built-in Electron.js browser or in an external Chrome browser. Today I am happy to announce that we have started Read more](/blog/testing-electron-js-applications-using-cypress-alpha-release)

[Cypress code coverage for applications created using create-react-app v3 Creating a new fully featured React application using Create React App \[https://github.com/facebook/create-react-app\] v3 is as easy as two NPM commands $ npm i -g create-react-app + create-react-app@3.0.1 $ create-react-app my-new-app Then switch to the new folder my-new-app and run npm start or yarn start - the application will be transpiled, and bundled, and will be running locally at url localhost:3000. Under the hood the start script calls the react-scripts commands to actually do the he Read more](/blog/cypress-code-coverage-for-create-react-app-v3)

[Testing the first built-in browser module, KV Storage, using Cypress If you live on the bleeding edge of browser technology, you are probably excited about new standard modules that soon (might) come built-in to modern browsers. Read more](/blog/testing-the-first-built-in-browser-module)

[Using Events Emitted from Your Application during End-to-End Tests Imagine a typical web application during end-to-end testing. The test runner (in this case Cypress.io \[https://www.cypress.io\]) is driving the app via its DOM elements; it is clicking and typing and scrolling. The test runner checks if the application behaves correctly by explicitly executing assertions against the displayed text the user sees and implicitly by interacting the elements. But what is going on under the hood? Is the web application correctly processing user actions? In this blog po Read more](/blog/using-events-emitted-from-your-application-during-end-to-end-tests)

[Shrink the Untestable Code With App Actions And Effects This blog post shows how to shrink untestable code and pushes it to the edges of the applications. The core of the web application will remain easy to check from our tests, while external effects can be observed or stubbed. The Cypress.io test runner has limitations. For example, when controlling the network requests, Cypress can spy and stub XHR requests only. We will remove this limit when issue #687 \[https://github.com/cypress-io/cypress/issues/687\] lands, but for now if your application is Read more](/blog/shrink-the-untestable-code-with-app-actions-and-effects)

[Modern Front-End Testing with Cypress This is a guest post from Michael Herman, a software engineer and educator who lives in the Denver area. He is the founder of TestDriven.io. Besides development, he enjoys building financial models, tech writing, hiking, and teaching. Cypress is a modern web automation test framework designed to simplify browser testing—and it’s much more than just an end-to-end test automation tool. Cypress is a developer tool made to be used proactively by developers rather than a non-technical QA tea Read more](/blog/modern-frontend-testing-with-cypress)

[When Can The Test Click? Recently a user opened a Cypress issue #3135 asking why the cy.click() command was behaving differently than the way click behaved when a user clicks on the button. We’ve seen many people ask similar questions involving click and wanted to address how to ensure your tests behave the same way as a user’s behavior. The problem The problem is straightforward once we walk through how Cypress works. Let’s use the web application at https://github-ylq5q4.stackblitz.io as an example. This ap Read more](/blog/when-can-the-test-click)

[Application Actions: Use Them Instead of Page Objects Hello, reader. This article was an opinion piece about why app actions are better than page objects. The page object pattern is well known in the QA community, and widely and successfully used in the Cypress ecosystem. Writing maintainable end-to-end tests is challenging. Often testers create another layer of indirection on top of the web page called page objects to execute common actions. In this post I argue that page objects are a bad practice, and suggest dispatching actions directly to the Read more](/blog/stop-using-page-objects-and-start-using-app-actions)

[Element Coverage Our users are periodically asking us to instrument application code and save code coverage information after Cypress runs end-to-end tests. In this blog I will argue that code coverage is less than useful for end-to-end tests. Then I will show element coverage that might be a better metric. > Experimental feature This document shows a very early proof of concept. The API and features shown here are likely to change. Use at your own risk. How do you know that you have written enough tests? Ho Read more](/blog/element-coverage)

[Testing Redux Store Cypress tests usually operate via public browser APIs like DOM, network, or storage. But the tests can just as easily reach into the application and check if the internal state is updated correctly. In this blog post I will show you how to run assertions against a React application that uses a Redux store. This blog post assumes you’ve already installed Cypress, and you can find the source code in cypress-example-recipes#testing-redux-store. First test I have copied the offic Read more](/blog/testing-redux-store)

[Run Your End-to-end Tests 10 Times Faster with Automatic Test Parallelization I have no patience waiting for a lot of Cypress end-to-end tests to finish running on CI. Just sitting and waiting … staring at the CI badge. Any run taking longer than a minute feels like an eternity. Our Cypress development team felt this pain and decided to do something about it. Today we have a solution that slashes those waiting periods - it is automatic test file load balancing across multiple CI machines using a single --parallel flag. #Load-BalancingLoad Balancing By default cypress run Read more](/blog/run-end-to-end-tests-on-ci-faster)

[Setting up Bitbucket Pipelines with proper caching of NPM and Cypress This is a guest post from Ondřej Janošík, co-owner of Notum Technologies, full-stack developer and clean code enthusiast based in the Czech Republic. Bitbucket Pipelines & Deployments is integrated CI/CD for Bitbucket Cloud that’s trivial to set up, automating your code from test to production (at least that’s what the official site says). However, setting up your pipelines with right commands and right caching in order to be as fast as possible requires some time. In this article, I am g Read more](/blog/setting-up-bitbucket-pipelines-with-proper-caching-of-npm-and-cypress)

[Record Test Artifacts from any Docker CI We worked hard to make sure the Cypress Test Runner could be compatible with every continuous integration system. Jenkins, Travis, Circle, Zeit Now, Google Cloud Build, or your own homegrown CI system - they should all work with zero or minimum effort. We also worked hard to make our Dashboard Service particularly useful in collecting and showing all of your test artifacts in a single place. Test artifacts When you execute cypress run, the end-to-end tests produce artifacts for each spe Read more](/blog/record-test-artifacts-from-any-ci)

[Fast Tests, Tiny Docker Image If the Cypress Test Runner were a person, its best friend would be a person named Docker. Really, Cypress and Docker work so well together! For example, all our CI builds are using cypress-docker-images to include all necessary dependencies in order to successfully install and run Cypress tests. Just run npm ci and cypress run and you are good to go. FROM cypress/base:10 RUN npm install # or even better: RUN npm ci RUN $(npm bin)/cypress run We use this approach to run a lot of te Read more](/blog/fast-tests-tiny-docker-image)

[JSON Schemas are your True Testing Friend ⚠️Please note: This article refers to the json-schemas package which is no longer supported. The repository has also been archived as a result. We use JSON schemas to describe the data flowing through our system, document API routes, test server code and even validate fixtures used during end-to-end testing. This long(ish) blog post describes in detail how we did this. Introduction At Cypress we have 3 large pieces of software: * The Cypress Test Runner, an Electron desktop applicati Read more](/blog/json-schemas-are-your-true-testing-friend)

[Sliding Down the Testing Pyramid A good end-to-end test runner, like Cypress, can be very effective at performing integration tests and even at running unit tests. In this blog post I will show how to write view component tests for a Hyperapp application and how to unit test individual functions. The same approach can work for components written using other frameworks like Vue, React, Cycle, Svelte and others. End-To-End tests Recently I watched a screencast video recorded by Alex Barry where he learned Cypress by wr Read more](/blog/sliding-down-the-testing-pyramid)

[When Can The Test Start? Can the test runner be too quick? Can the tests start before the application is ready to handle the test steps? It definitely can happen. This blog post shows a little trick one can use to detect when a web application really starts, so that the test runner never has to wait longer than necessary. A slow application I will start with a tiny “web app”. It asks the user to enter a name, and then greets the user with the entered name. Here is the body of the HTML page. <body> What's your na Read more](/blog/when-can-the-test-start)

[End-to-End Snapshot Testing Snapshot testing has taken the JavaScript unit testing world by storm. It removes much of the manual coding and much of the boilerplate, leaving the test runner to save or compare produced values. This blog post shows how the Cypress Test Runner can bring the same power to your end-to-end tests. Experimental feature This document shows a very early proof of concept. The API and features shown here are likely to change. Use at your own risk. I will start by reviewing snapshot testing a Read more](/blog/end-to-end-snapshot-testing)

[An Alternative to Protractor for Angular Projects Fans of Angular CLI get Protractor end-to-end tests generated with each scaffolded project. In this blog post I will show how to add Cypress E2E tests instead with minimum effort (and TypeScript support)! Scaffolding a project Scaffolding an Angular project using ng new <name> is a huge time saver. Just 4 commands give you a complete “Hello Angular” application with all recommended practices. Let us make an app - you can find the results in bahmutov/ng-cli-hello repository. npm i Read more](/blog/an-alternative-to-protractor-for-angular-projects)

[Testing apps hosted on Codepen.io Lots of people love to quickly throw web applications on Codepen.io. Who can refuse a quick and powerful way to start writing code immediately; sharing results is almost instant. In this blog post I will show how to write end-to-end tests for web apps embedded in a Codepen. Warning: no longer working Warning ⚠️ Codepen.io has added a CAPTCHA to prevent scrapers and 3rd party tools from accessing the hosted web apps. The testing approach shown in this blog post no longer works, but we wi Read more](/blog/testing-apps-hosted-on-codepen)

[Testing Vue web applications with Vuex data store & REST backend In this blog post we will test a typical web application that uses a central data store to manage state. The data store communicates with the backend that stores the data long term. You can find patterns in React + Redux applications, Angular + MobX and countless other combinations. This example looks at a Vue.js \[https://vuejs.org/\] web application with Vuex \[https://vuex.vuejs.org/en/\] data store. The backend server implements a simple REST API to store, modify and delete data. You can find t Read more](/blog/testing-vue-web-application-with-vuex-data-store-and-rest-backend)

[Control an AngularJS Application From E2E Tests Cypress runs close to your application. Only a thin iframe separates the production code from the testing code. Thus Cypress can take shortcuts and control your application code directly, bypassing always going through the DOM. For example imagine you are developing an AngularJS 1.x TodoMVC application such as http://todomvc.com/examples/angularjs/; how could you take advantage of this? AngularJS from DevTools You can change the data in the application’s model directly from the DevTools \[https: Read more](/blog/control-angular-application-from-e2e-tests)

[Add GUI to your E2E API tests We like to pretend there are two disjointed end-to-end test types: API and browser automation tests. And that the tools used are very different; the API tests are executed by a CLI test runner, while automation tests all fire up a browser. Yet, a good E2E automation test runner, in my opinion, should be really good at working with a remote server API via HTTP. After all, this is what every useful website does. Every website exchanges data with remote servers through HTTP requests. What if the s Read more](/blog/add-gui-to-your-e2e-api-tests)

[Conditional testing and control flow in Cypress Conditional testing refers to the common programming pattern where you perform one action, or a different one. It’s also known as control flow. Typically this is expressed as: If X, then Y, else Z. Many of our users come into our chat asking how they can do “conditional testing” in Cypress. The question is usually something like this: I want to do something if the element exists, and do something different if the element doesn’t exist. How do I do that in Cypress? This question may seem Read more](/blog/conditional-testing)

[Good error messages If I can paraphrase a cliché: bad things happen to good programs Things go wrong, even in the most carefully coded and thoroughly tested applications. In my opinion, a sign of a good app is if it gives meaningful and useful error messages when things go wrong. At Cypress we spend a lot of time trying to make every type of error we display to the user as useful as possible. These include failed assertions during tests (after all, Cypress is an end to end test runner), and crashes insid Read more](/blog/good-error-messages)

[10 ways we improved our docs As part of our strategy towards going open source, we wanted to make several improvements to our documentation. There were a few problems we wanted to address: 1. There was no clear explanation of why you would want to use Cypress. 2. There were no clear “Getting Started” guides that introduced you to Cypress. 3. Most API commands were missing explanations of critical core concepts. 4. We found many users were confused by the Cypress ✨ magic ✨. 5. Our users asked the same questions o Read more](/blog/10-ways-we-improved-our-docs)

[Immutable deploys and Cypress It is simple to run Cypress both locally and on CI. And it is simple to point your tests to a different server. If you are using immutable deploys, Cypress can be the ultimate “health check”. If the tests pass locally, then on CI, and then at a newly deployed environment - the chances are very high that you can point production DNS record at the new deployment and it will work. Here is an example. Let us take a “stock” React TodoMVC app \[https://gitlab.com/bahmutov/todomvc\] and see all the mome Read more](/blog/cypress-and-immutable-deploys)

[Atom test utils At Cypress, we love creating tools that make testing easier and more productive. We also write a lot of tests ourselves to both guide our development and help prevent regressions. While having a lot of tests is a great way to prevent regressions, it can get in the way of getting quick feedback during development. The more tests there are, the longer it takes to run them all, which can slow things down. Fortunately, we can have it both ways. We can focus on certain tests during development, but Read more](/blog/atom-test-utils)