cy.get()

cy.find()

cy.debug()

cy.visit()

cy.mount()

cy.click()

cy.type()

cy.pause()

cy.within()

cy.contains()

cy.each()

cy.dblclick()

cy.get()

cy.find()

cy.debug()

cy.filter()

cy.eq()

cy.clearCookie()

cy.pause()

cy.end()

cy.within()

cy.contains()

cy.each()

cy.within()

cy.contains()

cy.eq()

cy.end()

cy.filter()

cy.clearCookie()

cy.visit()

cy.mount()

cy.click()

cy.type()

cy.within()

cy.contains()

cy.eq()

cy.end()

cy.each()

cy.dblclick()

cy.get()

cy.find()

cy.debug()

cy.each()

cy.dblclick()

cy.eq()

cy.end()

cy.within()

cy.contains()

cy.each()

cy.dblclick()

cy.pause()

cy.visit()

cy.mount()

cy.click()

cy.type()

cy.get()

cy.find()

cy.debug()

cy.filter()

cy.clearCookie()

cy.get()

cy.find()

cy.debug()

cy.within()

cy.mount()

cy.contains()

cy.visit()

cy.type()

cy.click()

cy.within()

cy.contains()

cy.visit()

cy.mount()

cy.click()

cy.type()

cy.filter()

cy.clearCookie()

cy.pause()

cy.contains()

cy.filter()

cy.eq()

cy.end()

cy.eq()

cy.end()

cy.each()

cy.filter()

cy.dblclick()

cy.clearCookie()

cy.each()

cy.dblclick()

cy.eq()

cy.end()

cy.get()

cy.find()

cy.debug()

cy.pause()

cy.filter()

cy.clearCookie()

cy.pause()

cy.eq()

cy.end()

cy.blog()

Sharing our challenges, mistakes, hacks, successes, opinions and news

Add your missing tests faster, with Test Generation in UI Coverage

Releases Today we are proud to launch AI-powered Test Generation in Cypress Cloud, to help you quickly add tests for the untested elements detected in UI Coverage reports, in a way that follows your existing practices and conventions. Test generation in UI Coverage is the first of a set of AI-powered test generation tools that Cypress will release this year, and it works in just three steps: 1. Select an interactive element in your UI Coverage report, from any state of your application 2. Click “Gene Read more

Animation showing the process of choosing and element and generating test coverage for it

All Releases Community Education

Company

UI Coverage interface showing tested and untested elements in list form on the left had side, represented visually on the right hand side.

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

UI Coverage, stylized interface showing tested and untested elements on the left in a list, and red/green highlights on DOM nodes on the right

Keeping up: Test coverage that works with AI-accelerated development

A 2024 GitHub survey found that nearly all enterprise developers (97%) are using Generative AI coding tools. The majority of companies surveyed actively encourage the use of AI. At the same time, GitClear reports declining code quality metrics, and more frequent revisions of existing code, when code is written with the help of AI assistants. All of this puts more pressure on the test automation pipeline as the gatekeeper for quality, and the early warning system for when code isn’t ready to rel

UI Coverage — Automatic Test Creation: Cypress AI + Studio with Peter Stakoun

Automatic Test Creation: Your Questions Answered

Thank you to everyone who joined us for our recent webinar on Automatic Test Creation with Cypress AI and Studio. During the webinar, we received an enthusiastic set of questions about the capabilities that teams are excited about. Let's walk through some of the biggest themes and questions we heard. How Test Generation Works Participants frequently asked about the technology powering Test Generation; specifically how we interpret existing code bases to generate tests with high relevance, acc

Improving Accessibility in Legacy Applications

Over the years, accessibility is something that I’ve come to see as foundational to front-end application quality. Not optional, not an afterthought, not a debate. As the product manager for Cypress Accessibility, I’ve been able to talk to hundreds of people about how they and their companies manage accessibility in their approach to development and quality. One thing is clear: lots of us are working in less than ideal conditions when it comes to making applications usable for people with disabi

Elevate Your Cypress Testing: Top 10 Essential Plugins

Discover how to maximize the potential of Cypress with these top 10 essential plugins.

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

Debugging with Cypress vs. Playwright

Explore how Cypress's advanced debugging features, including time travel and Test Replay, provide a superior experience compared to Playwright, streamlining the process of diagnosing and resolving test issues.

Cypress in Action: Fitting Testing into Your Software Development Practices

Testing in the software development cycle is a critical phase that ensures the final product is reliable, functional, and meets user expectations. By identifying and fixing bugs early, testing prevents them from snowballing into larger, more complex issues, ultimately saving time and resources. Thorough testing significantly improves software quality, ensuring it functions as intended, meets requirements, and delivers a positive user experience, leading to higher customer satisfaction and a bett

Introducing UI Coverage

Learn how UI Coverage by Cypress enhances your testing strategy by providing visual insights into test coverage, identifying gaps, and optimizing your test suite.

Understanding Selectors in Frontend Development and Cypress Testing

This blog delves into the intricacies of selectors, the challenges of traversing the DOM, and the importance of selector stability, with a special focus on the Cypress frontend testing framework.

Webinar Recap: Unlocking Testing Stability – Strategies and Tools for Handling Flakiness

In a recent webinar, David Ingraham, a seasoned Senior SDET at Matium and Cypress ambassador, talked about the perplexing issue of test flakiness in software development and testing and provided an in-depth strategy for tackling test flakiness. Below we’ll drive into the comprehensive approach shared during the session. 1. Understanding the Causes Effective flakiness mitigation starts with a clear understanding of the factors influencing test outcomes. Common culprits include tool misuse, env

Crafting a Robust Testing Strategy: A Comprehensive Guide to Scale Your Testing Efforts

This comprehensive guide provides a roadmap for scaling your testing efforts and navigating the challenges of modern software development.

Webinar Recap: Using Cypress and GitHub Actions to Build an Automation Pipeline

This week we were joined by Carter Capocaccia, Senior Engineering Manager of Quality Automation at Hilton, for an illuminating webinar where the he demystified the intricacies of setting up CICD workflows and integrating quality automation, using GitHub Actions, Cypress, and Vercel. Here are the top five takeaways from that insightful session: 1. Understanding CI/CD: The Foundation of Quality Automation Continuous Integration (CI) and Continuous Delivery (CD) form the backbone of efficient de

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

Introducing Cypress Accessibility

Updated March 2025. Looking for a free trial? Sign up here. Introduction We built Cypress Accessibility to help teams measure and improve the accessibility of their applications by adding highly effective, zero-effort accessibility checks to the Cypress Cloud platform. To do this, we automatically generate rich, interactive accessibility reports based entirely on existing tests being recorded to Cypress Cloud. This requires no setup or configuration, so it can be adopted instantly at any time

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

Webinar Recap: Introducing The New Era of Debugging

Recently, we were joined by Cypress Ambassadors and Brian Mann, the visionary founder behind Cypress, to discuss an exciting new feature released in Cypress 13: Test Replay! In this article, we’ve summarized the key takeaways from the webinar. If you’re curious for more, the full recording is available on YouTube. Last week, we announced the release of Test Replay in Cypress Cloud. This feature allows you to interact with previous tests as they occurred during Continuous Integration (CI), elimi

Move Your Protractor Tests to Cypress Faster with the Cypress Migrator

We’ve created an educational tool to help you visualize and learn the differences between Protractor and Cypress APIs to move your tests over more rapidly: the Cypress Migrator! The tool is a hands-on playground where you can easily paste in code snippets from Protractor to see what they look like in Cypress. It is worth noting that since there are major differences in the way Protractor code and Cypress code are written, it’s not intended, at this time, to be a tool that would transform entire

Webinar Recap: Unlocking the Power of Test Replay

Recently, Brian Mann, the visionary founder behind Cypress, unveiled an exciting new feature that promises to revolutionize debugging in Cypress: Test Replay! In this article, we've distilled the key takeaways from the webinar, and if you're curious for more, the full recording is available on YouTube. 🎉 Over the past year, the Cypress team has dedicated themselves to bringing Test Replay to life. This powerful feature aims to tackle the persistent challenges associated with debugging web appl

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

Webinar Recap: Speed up your E2E Testing with ephemeral environments from Shipyard

Recently the team at Shipyard joined us for a webinar on speeding up end-to-end testing with ephemeral environments. We’ve captured the highlights, and you can watch the recording here on YouTube. 🎉 This is a guest post from Benjie De Groot, Co-founder at Shipyard. Hello, I'm Benjie. I'm a co-founder with a passion for DevOps and releasing code I know will work! I have been an avid Cypress.io fan and user for years and love spreading the gospel around ephemeral environments + e2e testing. Fin

Component Testing for Engineering Leadership

This post is the third of a series that explores how Component Testing can benefit different parts of your team or organization. If you’re wondering why you and your team should adopt Component Testing, this series is for you! We covered how developers and QA teams can improve the quality of their front-end code through Cypress Component Testing. In this post, we’ll dig into how Component Testing can improve the efficiency of the managers’ teams. As an engineering leader, you are often challen

Make Sure You Do This Before Switching To Signals in App Development Testing

This blog post was originally published on dev.to. This time last year Standalone Component's were the talk of the Angular town. This year signals have replaced that buzz throughout the Angular Ecosystem. Though it will take some time for the introduction of signals into Angular's ecosystem to take hold, it is important for us to begin thinking about how these changes may or may not affect our applications. In fact, I am proposing one thing that everyone should do before switching to signals. B

Quickly Export Cypress Tests Directly from Google Chrome

This is a guest post from Jecelyn Yeen. I'm Jecelyn Yeen, a developer advocate at Google, working on Chrome DevTools. I speak English, Mandarin, Cantonese, Malay, C#, Java, Typescript & of course JavaScript 😎. Find me on: Twitter, LinkedIn, Facebook, Github. You may watch this video of me on Youtube too... and many more. In this blog post, we’ll share how you can use the Cypress Chrome Recorder extension in the Chrome DevTools Recorder panel to easily export and view Cypress test scripts with

Using Dependency Injection in React with Cypress Component Testing

Testing React components is relatively straightforward. However, you might run into an instance where some of the modules imported in your component are getting in the way of testing its functionality, and you'd like a way to work around them. A technique that can be used to help with this problem is called dependency injection. In this post, I'll cover what dependency injection is and a simple method of implementing it so you can get on testing your components! What is Dependency Injection?

Test-Driven UI Development with Cypress Component Testing

As developers, testing can sometimes feel like extra work that we need to take on after building our UI components. We build a component, manually test it in the app, and then write tests to describe how our component should behave. At least, that’s how I used to think about testing my UI components before I started using Component Testing at Cypress. Before joining Cypress, I was used to component testing tools that rendered components using a simulated DOM like jsdom. However, this wasn’t an

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

New for 12.7: Component Framework Definition API

Cypress Component Testing Integration Framework Definition API

Cypress prides itself on providing a first-class experience for Component Testing. Part of this experience is our onboarding process that automatically detects the library and framework used in a project, and scaffolds the relevant files and configuration. Starting with Cypress 12.7, we are exposing our internal API for the community to leverage and integrate directly into Cypress. This reduces the configuration burden, allowing developers to start testing their components more quickly and easi

Effective component testing for next.js with Cypress

Component Testing Next.js with Cypress

Cypress Component Testing allows you to build and test individual components using popular front-end frameworks, and one of the most popular frameworks in use today is Next.js. Front-end libraries like React and Vue are designed to structure your application into small, reusable components, but a framework like Next.js provides a set of capabilities that layers on top of those components which can blur the lines between what is and what isn't a "component behavior". This can make it difficult t

Learn the value of Component Testing for QA teams

What Cypress Component Testing Means for QA and "Shifting Left"

This post is the second of a series that explores how Component Testing can benefit different parts of your team or organization. If you’re wondering why you and your team should adopt Component Testing, this series is for you! In our first post of this series, we discussed how Cypress Component Testing isbeneficial for developers. In this post, we'll delve into how Component Testing can improve collaboration and alignment between development and QA teams by allowing them to run end-to-end and

Learn the value of component testing for developers

What Cypress Component Testing Means for Developers

Recently, we launched Component Testing to GA! In this blog series, we’re going to break down how Component Testing brings layered benefits to different parts of your team or organization. If you’re wondering why you and your team should adopt Component Testing, this series is for you! In this first post, we’ll dive into Component Testing benefits for developers. Let’s start with the development workflow. Cypress Component Testing is a leap forward in the experience of writing component tests,

Announcing Cypress Component Testing GA and Performance Improvements in Cypress 11

Today your tests get an upgrade as we launched Cypress 11! We have a few exciting additions to share. Let's dig in! Cypress Component Testing Goes GA Cypress Component Testing (CT) allows you to build and test individual components using popular front-end frameworks in isolation. Tests run in the browser and enable you to test the behavior of components with the tooling you are accustomed to. Since it's still Cypress, you use the same familiar APIs to write and organize component tests and ha

Upcoming Changes to Component Testing

Cypress 7 introduced the alpha version of a new testing type – the first since Cypress’ inception – Component Testing. Cypress 10 brought a number of updates and improvements, marking the beta version of Component Testing. Early next week, we will be releasing Cypress 11. With this release, we are excited to announce that we are removing the beta tag. Cypress Component Testing has a stable API, and is now considered generally available. As part of Cypress 11, we are making some small changes t

How Cypress Component Testing changed our workflow (and how I came to work here)

Before I joined Cypress last year, the alpha version of Cypress Component Testing [https://on.cypress.io/component] changed the way my team did front-end work at my previous job, allowing us to consolidate three tools into one. This was the experience that ultimately led to me joining the Component Testing team at Cypress, where I got to help move the feature out of alpha and towards a full release. Since then, we’ve released Cypress 10 with support for testing React, Vue, Angular, and (soon!)

Cypress 10.5.0: Introducing Angular Component Testing

Earlier this year, we announced our biggest release [https://www.cypress.io/blog/2022/06/01/cypress-10-release/] of Cypress ever. This introduced a new unified UI, faster test runs, and support for a new type of testing, Component Tests. This initial release included Component Testing support for both React and Vue with the plan to add additional framework support over the next few months. Today, we are happy to deliver on that promise by adding first-class support for Component Testing for Ang

Announcing Cypress 10 with Component Testing Beta!

Hello, friends! Today, we have an exciting announcement to share. The title up above might have given it away, but in case you missed it, Cypress 10 is here 🎉! Cypress 10 is our most exciting release yet, and we have a lot to unpack, so let's dive in and look at some of the new functionality. New Cypress App The new Cypress appWe reworked the Cypress app from the ground up to modernize the interface, streamline workflows, and integrate better into your overall development experience. In addi

Share Cypress Commands in an Nx Workspace

In this article, we’re going to see how to bring that to the next level by learning how to use Cypress in an Nx workspace, in particular how to share common Cypress custom commands in an Nx monorepo.

Guest Post: Automating sensor processing tests with synthetic data

Learn how Yembo, the leader in AI-powered virtual inspections, used automated sensor processing tests with synthetic data.

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

Webcast Recording | Faire + Cypress: Building an E2E Strategy that Scales

Last week, Director of DX at Cypress, Amir Rustamzadeh, and Software Engineer at Faire, David Mamujee, presented a live webcast on how Faire scaled their E2E testing strategy with Cypress. Some of the key topics they covered include: * How Faire organizes their multi-repo setup for testing both their retailer and brand experience. * How the team manages flaky tests with methods like tagging tests and running their E2E tests against a local backend instance. * How the team uses Cypress E2E

Live Webcast | Faire + Cypress: Building an E2E Strategy that Scales

Join us Wednesday, September 29th at 2:00pm EDT/11:00am PDT to find out how the team built their E2E testing setup from scratch using Cypress.

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

Webcast Recording | Flaky Test Management with Cypress

Last week, Cecelia Martinez, Technical Account Manager at Cypress, and Mike Cataldo, DX Engineer at Cypress, presented a live webcast on how to find and manage flaky tests in your test suite. Some of the key topics they covered include: * The common causes of test flakiness, including DOM-related, network-related, and environment-related flake * Best practices for writing flake-resistant tests * How to manage flakiness in your test suite with Cypress features like test retries, flaky test i

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

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

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

Live Webcast | Flaky Test Management with Cypress

Register Tired of battling flaky tests? Join us Wednesday, May 19th at 2:00pm EDT/11:00am PDT to find out how to focus your efforts with test-writing best practices, how to understand different types of flake, and the many ways in which Cypress can help you eliminate flake for good. Your Webcast Hosts In this webcast, we'll define flake and the many ways that it can impact your tests. Next, you'll learn: * The common causes of test flakiness, including DOM-related, network-related,

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

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.

Webcast Recording | How Cypress helped Ansible re-write their entire UI from scratch

Last week, Distinguished Engineer at Cypress, Gleb Bahmutov, and Senior Automation Engineer at Ansible, John Hill, presented a live webcast on how how Ansible revamped their testing efforts by deleting all of their old tests and starting from scratch with Cypress. Some of the key topics they covered include: * How the team implemented Cypress, and their initial testing strategy for their re-write * How their Cypress usage has evolved over the past two years—including how they run their entir

Webcast Recording | How Pendo maintains a culture of quality with Cypress

Last week, Distinguished Engineer at Cypress, Gleb Bahmutov [https://twitter.com/bahmutov], and Senior Quality Engineer at Pendo [https://www.pendo.io/], George Palfreyman [https://twitter.com/georgepalf], presented a live webcast on why Pendo's quality engineers chose Cypress to rebuild their test suite and continue their commitment to quality. Some of the key topics they covered include: * Why the QE team switched to Cypress for testing * How they scaled Cypress within their organization (

Live Webcast | How Cypress helped Ansible re-write their entire UI from scratch

Register Red Hat® Ansible® Automation Platform enables thousands of users to centralize and control IT infrastructure with a visual dashboard, role-based access control, job scheduling, integrated notifications, and graphical inventory management. Join us Thursday, April 15th at 2:00pm EDT/11:00am PDT to find out how Ansible's team completely re-wrote Ansible Automation Platform's complex UI, and how they relied on Cypress for testing confidently throughout their project. Your Webcast H

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.

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.

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

Live Webcast | How Pendo maintains a culture of quality with Cypress

Join us Wednesday, April 7th at 5:00pm GMT/1:00pm EDT/10:00am PDT to find out why Pendo's quality engineers chose Cypress to rebuild their test suite and continue their commitment to quality.

Webcast Recording | Build, test, and deploy your site with confidence using Netlify and Cypress

Last week, Distinguished Engineer at Cypress, Gleb Bahmutov, and Principal Developer Experience Engineer at Netlify, Jason Lengstorf, presented a live webcast on how to use the Cypress Netlify build plugin to make sure your Jamstack site deploys are bug-free, every time.

Live Webcast | Build, deploy, and test your site with confidence using Netlify and Cypress

Register [https://go.cypress.io/netlify-webcast-registration?utm_source=Cypress_blog&utm_medium=web&utm_campaign=Netlify_Webcast] Developers use Netlify [https://www.netlify.com/]'s powerful serverless platform for Jamstack to increase productivity and simplify site building. Join us Thursday, March 18th at 2:30pm EST/11:30am PST [https://go.cypress.io/netlify-webcast-registration?utm_source=Cypress_blog&utm_medium=web&utm_campaign=Netlify_Webcast] to find out how you can easily add Cypress t

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

Testing periodic network requests with cy.intercept and cy.clock combination

This blog post tests an application that fetches new data every 30 seconds, but the test itself runs in milliseconds because it controls the application's clock and stubs the network responses.

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?

Webcast Recording | Ship safer code with Cypress and Codecov

Last week, Distinguished Engineer at Cypress, Gleb Bahmutov, and Developer Relations Lead at Codecov, Tom Hu, presented a live webcast on how to ship safer code with Cypress and Codecov.

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

Live Webcast | Ship safer code with Cypress and Codecov

Join us on Wednesday, January 13th at 2pm EST/11am PST to find out how you can use Cypress tests with Codecov to write highly durable code that allows you to deploy with confidence.

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

Webcast Recording | How Carvana Transformed their Testing with Cypress Test Analytics

Last week, our VP of Engineering, Gleb Bahmutov [https://twitter.com/bahmutov], Sr. QE at Carvana [https://www.carvana.com/], Tyler Monteith, Engineer II, Quality at Carvana, Arick Hanna, presented a live webcast how the Carvana team used Cypress to accelerate and strategize their testing efforts. Some of the key topics they covered include: * How Carvana scaled Cypress within their organization * How the team managed a 140% increase in tests written * How they used Cypress Test Analytics a

Retry, Rerun, Repeat

> If at first you don't succeed, then dust yourself off and try again. - American R&B singer Aaliyah (1979-2001) The modern Internet is built on retries. Software and hardware failures are normal and expected. Every action can fail, and thus every software system includes code to retry the action several times. During testing, the application might be slower than expected, and thus the test runner needs to

Webcast Recording | Using Code Smells to Fix Flaky Tests in Cypress

Last week, our VP of Engineering, Gleb Bahmutov [https://twitter.com/bahmutov], and Web Platform Lead at Big Nerd Ranch [https://www.bignerdranch.com/], Josh Justice [https://twitter.com/codingitwrong], presented a live webcast on the concept of code smells as a way to categorize problems in code, and how this concept can make it easier to fix flaky Cypress tests. Some of the key topics they covered include: * Why test flake is so difficult to troubleshoot * How the concept of code smells ca

Introducing cy.intercept - Next Generation Network Stubbing in Cypress 6.0

Today, we're elevating the power and scope of Cypress' network handling capabilities with the introduction of the cy.intercept command in Cypress 6.0.

Live Webcast | How Carvana Transformed their Testing with Cypress Test Analytics

Register [https://go.cypress.io/carvana-webcast-registration?utm_source=blog&utm_medium=web&utm_campaign=Carvana_Webcast] Carvana [https://www.carvana.com/]'s leading e-commerce platform for buying and selling used vehicles offers a browsing selection of more than 20,000 vehicles with delivery in 262 markets across the U.S. Join us on Wednesday, December 2nd at 2pm EST/11am PST [https://go.cypress.io/carvana-webcast-registration?utm_source=blog&utm_medium=web&utm_campaign=Carvana_Webcast] to f

When Can the Test Submit a Form?

In this blog post we continue exploring flaky tests and how to fix them. We will look at the situation when a page submits a form and then continues to interact with the page, which causes a problem. Tip: you can find all existing similar posts under the tag Flake [https://cypress.io/blog/tag/flake/]. You can find the source code for this blog post in Cypress example recipes [https://github.com/cypress-io/cypress-example-recipes] repository. The error The original error [https://github.com/cyp

Testing an Application in Offline Network Mode

Modern web applications need to continue working when a network is unavailable, or at least show users the current network status. In this blog post, I will show how Cypress can simulate an offline network status during a test. Note: the source code for this blog post can be found in the "Offline" recipe [https://github.com/cypress-io/cypress-example-recipes#server-communication]. navigator.onLine A web application can ask the browser if there is a network connection; there is a widely support

Live Webcast | Using Code Smells to Fix Flaky Tests in Cypress

Register [https://go.cypress.io/code-smells-webcast-registration?utm_source=blog&utm_medium=web&utm_campaign=Code_Smells_Webcast] The concept of code smells is a way to categorize problems in code for the purpose of fixing them—in turn, this concept can also make it easier to fix flaky tests. Join us on November 18th at 2PM EST/11AM PST [https://go.cypress.io/code-smells-webcast-registration?utm_source=Cypress_blog&utm_medium=web&utm_campaign=Code_Smells_Webcast] to learn how to identify and f

Webcast Recording | How Userlane dramatically reduced flaky E2E tests with Cypress

Last week, our VP of Engineering, Gleb Bahmutov [https://twitter.com/bahmutov], Tobias Muelller, Sr Software Engineer at Userlane, and Haydeé Muñoz De la Rocha, Sr Frontend Engineer at Userlane, presented a live webcast on how Userlane [https://www.userlane.com/enterprise] used Cypress to transform their automated E2E testing to increase stability, improve performance, and ensure quality for their CI/CD process while maintaining developer happiness. Some of the key topics they covered include:

Introducing Flaky Test Detection & Alerts

Empowered with test retrying capabilities, we're excited to introduce test flake detection for the Cypress Dashboard...

Live Webcast | How Userlane dramatically reduced flaky E2E tests with Cypress

Userlane's interactive, step-by-step guides help users instantly use any software without formal training. Find out how the team uses Cypress to increase stability, improve performance, and ensure quality for their CI/CD process while maintaining developer happiness.

Debug a Flaky Visual Regression Test

In our Cypress RealWorld App [https://github.com/cypress-io/cypress-realworld-app] we are using visual regression testing [https://on.cypress.io/visual-testing] to catch unintended style and layout changes. We are using the Percy.io [https://percy.io/] service, and you can see the screenshots at https://percy.io/cypress-io/cypress-realworld-app. During tests, we periodically take image snapshots using cy.percySnapshot command: it("creates a new bank account", function () { cy.getBySel("siden

Guest Post: Retrying your tests is actually a good thing (If your approach is right)

Today I want to share my personal opinion on using test retries without hiding or ignoring problems with your test cases.

Webcast Recording | How GoFundMe’s QA Engineers and Developers Test 30x Faster with Cypress

Last week, our VP of Engineering, Gleb Bahmutov, and Sr. QA Engineer at GoFundMe Charity, Todd Williams, presented a live webcast on how GoFundMe’s QA team and developers achieved 30x faster test runs with Cypress.

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.

Live Webcast | How GoFundMe’s QA Engineers and Developers Test 30x Faster with Cypress

GoFundMe Charity's subscription-free fundraising platform uses powerful tools, including donation buttons, data solutions, and custom campaigns to provide a world-class fundraising experience for charities. In our upcoming webcast, find out how...

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.

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

Webcast Recording | Build invincible integration tests using Cypress and cypress-testing-library

Last week, our VP of Engineering, Gleb Bahmutov, and Frontend Developer at Fiverr, Roman Sandler, presented a live webcast on how to write durable, future-proof Cypress tests using cypress-testing-library.

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

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

Live Webcast | Build invincible integration tests using Cypress and cypress-testing-library

Register [https://go.cypress.io/cypress-testing-library-webcast-registration?utm_source=blog&utm_medium=web&utm_campaign=Roman_Sandler_Webcast] A member of the testing-library.com [https://testing-library.com/] family, cypress-testing-library [https://testing-library.com/docs/cypress-testing-library/intro] is a collection of simple and complete custom Cypress commands and utilities that encourage good testing practices. Join us on Wednesday, July 8th at 1pm EDT/10am PDT [https://go.cypress.io

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

Guest Post: Core Cypress Lessons We Learned That 10x-ed Our E2E Automation

For some time now, I've been leading the QA efforts at Stoplight - a USA-based startup that we are the engineering partner.

Webcast Recording | How Optimizely Tests Features and Feature Flags 300% Faster with Cypress

Last week, our VP of Engineering, Gleb Bahmutov, Software QA Engineer at Optimizely, Todd Seller, and Engineer Manager in Quality at Optimizely, Jeff Sing, presented a live webcast on how Optimizely tests features and feature flags 300% faster with Cypress.

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.

Live Webcast | How Optimizely Tests Features and Feature Flags 300% Faster with Cypress

Optimizely’s Progressive Delivery & Experimentation platform helps companies deliver better software, products, and growth. In our upcoming webcast, find out how the team uses Cypress to ensure quality across multiple platforms and third party integrations.

Webcast Recording | Keep your UI Sharp: Ensuring Functional and Visual Quality with Cypress.io + Happo.io

Last week, our VP of Engineering, Gleb Bahmutov, and Happo.io Founder, Henric Trotzig, presented a live webcast on how to add visual regression testing with Happo to your Cypress.io test suite, to ensure functional and visual quality with your UI.

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.

Webcast Recording | Shipping with Confidence: How DHL reduced test execution time by 50%

Last week, our VP of Engineering, Gleb Bahmutov, and DHL Software Engineer, Rick Fleuren, presented a live webcast on how the DHL team uses Cypress in combination with Docker and Jenkins to cut their test execution time in half.

Live Webcast | Keep your UI Sharp: Ensuring Functional and Visual Quality with Cypress.io + Happo.io

Happo.io is a cross-platform, cross-browser screenshot testing tool for modern user interfaces. By integrating Happo screenshots with your Cypress test suite, you can easily ensure both functional and visual quality in your applications.

Webcast Recording | Set up faster, easier, end-to-end testing with CircleCI and Cypress

In early April, our VP of Engineering, Gleb Bahmutov, and CircleCI Solutions Engineer, Vinny Thanh, presented a live webcast on how teams can use the Cypress Orb with CircleCI to run end-to-end tests against different environments...

Live Webcast | Shipping with Confidence: How DHL reduced test execution time by 50%

DHL Parcel, widely known as one of the world's leading logistics companies, serves a global market of 220 countries and delivers over 1.5 billion parcels per year. With the company experiencing rapid growth, the business-to-business and business-to-consumer (B2X) team relies on Cypress tests...

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.

Webcast Recording | How Lightstep Quadrupled Deployment Velocity with Cypress

Last week, our VP of Engineering, Gleb Bahmutov, and Lightstep Product Engineers, Jonah Moses and Ted Pennings, presented a live webcast on how the team went from a 15-page document of step-by-step QA instructions for each deployment, to quadrupling deployment velocity with Cypress.

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.

Guest Post: High Quality React apps with Nx & Cypress

It all started with sprinkling some jQuery here and there to make our server-side rendered pages more dynamic and appealing. Since then we’ve come a long way.

Live Webcast | How Lightstep Quadrupled Deployment Velocity with Cypress

Join us on Wednesday, April 15th at 2 pm ET/11 am PT to learn how the Lightstep Product Engineering team went from a 15-page document of step-by-step QA instructions for each deployment, to quadrupling deployment velocity with Cypress.

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.

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.

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.

Guest Post: Improve your error screenshots in Cypress

Cypress makes it incredibly easy to read their code. Even people that don’t work with Cypress here at Slido can easily understand what is going on in the test code...

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.

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...

Guest Post: Modern Web Testing with Cypress

This blog post aims to convince my fellow QA engineers to learn and use Cypress.

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.

Guest Post: Some UI testing problems and the Cypress way

Why is testing a web application so hard? Why generic browser automation tools do not fit well the UI/E2E testing needs? Why does Cypress outstand? A generic features comparison is not enough to understand what are the main UI Testing pains and how Cypress removes them.

Webcast Recording | How PlanGrid (Autodesk) Achieved Consistency in Automation Across 20 Development Teams

Last week, we presented a live webcast on how the Automation Platform team runs over 900 Cypress tests daily to make sure PlanGrid’s mission-critical services are available worldwide with the highest quality and accuracy.

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.

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.

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...

Guest Post: Software tests as a documentation tool

Why tests are perfect to tell a story of your code.

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

Webcast Recording | How Siemens SW Hub increased their test productivity by 38% with Cypress

Last week, our VP of Engineering Gleb Bahmutov, and Test Lead for Siemens SW Hub, Murat Ozcan, presented a live webcast...

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?

Guest Post: I did a Cypress workshop and this is what I learned

Note: This post was originally published by Filip Hric [https://twitter.com/filip_hric] on Medium [https://medium.com/@filiphric/i-did-a-cypress-workshop-and-this-is-what-i-learned-8de28b2fbaeb] . Filip is a QA lead at Slido [https://cypress-io.ghost.io/blog/p/0d09534f-c558-4166-8e6f-8ae839cadca4/sli.do], a lifelong IT enthusiast with a background in psychology, and a Cypress [https://www.cypress.io/] ambassador. --------------------------------------------------------------------------------

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?

Guest Post: Writing E2E Tests Without Breaking Your Development Flow

Getting started with a fullstack JavaScript project these days is exciting, but often overwhelming. There's so much tooling that can make our lives easier, but if we're not careful then we can lose a tonne of time to choosing between similar tools, and making others play nicely together.

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 🥧.

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

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?

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

Guest Post: New to front-end testing? Start from the top of the pyramid!

An easier approach to get immediate results (and satisfaction) from the front-end testing world.

Webcast Recording | Continuous Integration with Cypress

Last week, our VP of Engineering Gleb Bahmutov [https://twitter.com/bahmutov], and Cypress Ambassador + Founder of Let Your Nerd Be Heard [https://letyournerdbeheard.com/], Justin James [https://twitter.com/digitaldrummerj], presented a live webcast on how to set up Cypress correctly on a variety of CI providers, from TeamCity to Travis to CircleCI. Some of the key topics they covered include: * The difference between "cypress open" vs "cypress run" * Setting up Cypress on CI * CI examples

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

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 + [email protected] $ 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

Guest Post: The concept of "Monitoring Tests"

Some months ago I worked on the business.conio.com site, based on Gatsby. Apart from sharing some plugins I wrote, I wanted to improve the website performances as much as we could. Luckily, Gatsby stands out by self when speaking about performance but you know, it’s never enough.

Guest Post: Sleeping better at night with Cypress.io

This post was originally published by Tomasz Łakomy on dev.to. Tomasz is a Senior Frontend Engineer at OLX, tech speaker, egghead.io instructor, and jQuery evangelist.

Guest Post: Await, do not make your E2E tests sleep

Sleeping: the worst practice in E2E testing and the concept of Deterministic Events.

Guest Post: Angular - Adding Cypress UI Tests to Your DevOps Pipeline

This post was originally published by Justin James on Medium. Justin is the founder of Let Your Nerd Be Heard, a Microsoft MVP, Angular lover, speaking coach & speaker specializing in making the complex simple and easy to understand.

Live Webcast | Slido’s QA Journey With Cypress

Register [https://zoom.us/webinar/register/6815640994232/WN_vTkLQ3oyRq2ZtoEptyKxVg] You’ve probably seen Slido used at events and meetings. With over 244,000 successful events and 7.1 million questions asked, Slido enables users to crowdsource top questions to drive conversations and engage participants in live and online events. With top customers including Spotify, Lufthansa, and the BBC - Slido has to make sure these interactions execute flawlessly; and in order to do so, they had to find th

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.

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

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

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

Picture of a woman typing on a keyboard at a desk

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

An abstract, closeup image of water bubbles under water

Using Nrwl Nx to Add Cypress to Your Angular Development Workflow

This is a guest post from Benjamin Cabanes, an Angular Engineer at the Angular consulting firm Nrwl (Narwhal Technologies Inc.) in Toronto. As an active contributor to Nrwl’s Nx open source project, Ben also works with Nrwl’s American enterprise clients in the Telecom and Financial Services space. Ben regularly blogs about best practices when building Angular applications at scale. One of our goals at Nrwl.io is to modernize the enterprise. That’s why we built Nrwl Nx–a set of extension

An abstract image of computer code in a code editor

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

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

Image of a frozen lake in the winter with ice that is starting to break into pieces

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

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

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

An image of someone on his phone in front of a computer looking at a stock trading application

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

An abstract image of different shades and colors

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

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

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

Angular + Cypress = Love

This is a guest post from Jeff Whelpley, CTO at Swish, Google Developer Expert, co-creator of Angular Universal (server rendering for Angular 2+), co-organizer of Boston Angular Meetup, co-organizer of Boston AI Meetup, guest/panelist on AngularAir and Adventures in Angular podcasts, and frequent speaker at local Boston meetups. I’ve always been a big fan of really good all-in-one solutions like Angular. My general philosophy has been to rely on a small set of closely related technologies and o

An abstract, closeup image of code in a code editor that is blurred

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

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

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

An abstract image of javascript code up close

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

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

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:

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

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

An image of a code editor displaying CSS / SASS code

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

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 ques

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

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