How to Start With Cypress

Rate this content
Bookmark

The web has evolved. Finally, testing has also. Cypress is a modern testing tool that answers the testing needs of modern web applications. It has been gaining a lot of traction in the last couple of years, gaining worldwide popularity. If you have been waiting to learn Cypress, wait no more! Filip Hric will guide you through the first steps on how to start using Cypress and set up a project on your own. The good news is, learning Cypress is incredibly easy. You'll write your first test in no time, and then you'll discover how to write a full end-to-end test for a modern web application. You'll learn the core concepts like retry-ability. Discover how to work and interact with your application and learn how to combine API and UI tests. Throughout this whole workshop, we will write code and do practical exercises. You will leave with a hands-on experience that you can translate to your own project.

Filip Hric
Filip Hric
146 min
21 Nov, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The workshop is led by Filip Nits, a QA lead in Slido, who teaches testers about web development and developers about testing. The workshop focuses on using Cypress for end-to-end testing of the Trello app, covering topics such as installation, writing tests, automating Trello board and element selection, using plugins, and testing cart creation and deletion. It also explores concepts like chaining commands, writing assertions with Chai, sending HTTP requests, intercepting requests, and combining UI and API tests. The workshop provides practical challenges and encourages participants to code along.

Available in Español

1. Introduction to the Workshop

Short description:

My name is Filip and I have been a QA lead or a QA test Automation lead in Slido for almost 7 years now. Today I like to teach testers about web development and teach developers about testing. You can find everything that I do on my webpage, filibris.com, where I put Cypress tips almost every week. I do workshops, presentations, webinars, and all that. This is a link to my page. So Filip Nits, that's my name,.com slash workshop, where you can find like the full version of what we are going to be experiencing today. If you want to experience the full thing, I have an upcoming workshop actually starting next week. If you are considering doing that, hit me on Discord with a DM. I will give you a promo code.

So, let's dive in. Short introduction. My name is Filip. I have been a QA lead or a QA test Automation lead in Slido for almost 7 years now. So, it's actually, this slide needs an updating. And what I do there is mostly, I do test automation. I do have a background in Psychology, which I guess sort of goes with the teaching, maybe? I don't know. But yeah, that's kind of my background.

Today I like to teach testers about web development and teach developers about testing. You can find everything that I do on my webpage, filibris.com, where I put Cypress tips almost every week. I had quite a big gap because I was doing lots of new courses. And I will be continuing with that. But yeah, the whole page is basically dedicated to Cypress and giving different tips. So if you want to, if you're searching for something, you can search also there. And yeah, so I do workshops, presentations, webinars, and all that. I think I said it all about myself. This is a link to my page. So Filip Nits, that's my name,.com slash workshop, where you can find like the full version of what we are going to be experiencing today. So this is, as I said, not everyone was here. This is sort of a smaller demo version of the workshop, if you will. And if you want to experience the full thing, I have an upcoming workshop actually starting next week. So if you want to sign up for that and get the full experience, you can. And if you are considering doing that, hit me on Discord with a DM. I will have, I'll give you a promo code, because it doesn't really make sense if you do some parts twice. So to get some value of that, I'm going to send you a promo code if you're interested in having the full experience.

2. Workshop Format and Overview

Short description:

The workshop will consist of a chapter overview, a demo, and practical challenges. During the demo, it is recommended to watch rather than code along to avoid missing important points. The demo will be available in the demo start and demo end files, with additional information in the notes folder. The practical challenges will provide instructions in the challenge.cy.js file and solutions in the challenge solution file. It is not necessary to complete all the challenges, as the goal is to keep participants engaged even after the workshop.

So the workshop form will go like this. You can, by the way, scan this QR code, because we will be using that. But the workshop form goes like this. I'm going to do a chapter overview, basically tell you what you will be learning in that chapter. And then we will go through a demo. Or rather, I will be going through the demo, basically show you something, how everything works. And then we have a practical challenge. So I will be silent and you will be doing the coding work. So feel free to do that.

And for the Q&A, we can absolutely do that continually. In fact, we are a fairly small group. We just have like 15 participants. That includes me and Alex who is on the Zoom call as well, from TestJS crew. So I think we can safely go with just unmuting Mike and asking a question. Feel free to do that. To get some additional value from this. But we can also use Slido. That's where I'm from. It's a great tool for having an interaction. If you are shy or if you feel like you have a stupid question, you don't. But if you feel that way, you can use Slido to ask anonymously. And I'll probably say that's not a stupid question, that's a great question. And I'll answer that. But I also have a question for you. And that's why I wanted you to scan that QR code. So let me jump into that. And my question is how well do you know Cypress? I would like to know where you are at currently with your knowledge. And so one star means that you are just starting. You don't know much or you don't know anything. And six stars would be that you use it daily, you already know your way around, and basically you're here for improving your knowledge. Maybe find some extra tips. Alright, we are very well spread here. Oh we got 1 sixth, that's great. So we are spread on both sides, mostly in the middle. Oh, that's good. That's good. By the way, don't worry if you are too much on the right side or too much on the left side. Normally when I do this I do breakout rooms to break out this meeting into smaller ones. Not sure if we'll be able to do that today, but we'll see. We'll see how we handle that. Maybe we'll stay in the same room. All right. All right. So we got 3.6 the score. We got some beginners, some people that are in the middle, some are more advanced. That's awesome. Thank you. Thank you for answering that question. That really helps to sort of get me to get an idea.

Let me continue with explaining how this workshop is going to work. I already kind of said a little bit about this, but for the demo, I will be doing a short presentation. So during that, don't try to code along. In fact, it's better if you don't because I tend to go a little bit fast. And if you are switching between coding and watching, you might miss some points. So it's better for you to just watch. In order for you to not get lost, you can see everything that I did in the demo end file and I will be starting at the demo start. So that's demo start, demo end. In the project folder, you'll have the name of the chapter. Oops, that was not underlining, but crossing. So you have the name of the chapter we will be in and then I will be always starting from demo start and finished state will be at demo end. So you will get an insight into everything. Plus, everything I plan on seeing is inside the notes folder, but I tend to improvise so you will not find everything, but hopefully you'll find most of the information that you need.

After we do the demo, I'm going to go to the Practical challenges and again, I'm showing you here the folder structure. So in there what you will be doing during the practical challenges is take a look into the challenge.cy.js. Inside there you will find instructions on what you should do and inside the challenge solution you will find the solution for that particular example. Don't feel bad if you look into that. In fact I would encourage you to take a look into that, maximize your learning by getting as much information as you can, don't try to figure it out from memory or something. Use the documentation, use the solution file, do everything you can to gather knowledge. Important note on the practical challenges, you don't need to finish them all. In fact my goal is to keep you active even after the workshop so if you don't finish them all and you're feeling uncomfortable with them not being finished all, that's actually a good thing, I like that, because that will probably force you to open that repository again and play with Cypress a little more.

QnA

Watch more workshops on topic

Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
Detox 101: How to write stable end-to-end tests for your React Native application
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
API Testing with Postman Workshop
TestJS Summit 2023TestJS Summit 2023
48 min
API Testing with Postman Workshop
Top Content
WorkshopFree
Pooja Mistry
Pooja Mistry
In the ever-evolving landscape of software development, ensuring the reliability and functionality of APIs has become paramount. "API Testing with Postman" is a comprehensive workshop designed to equip participants with the knowledge and skills needed to excel in API testing using Postman, a powerful tool widely adopted by professionals in the field. This workshop delves into the fundamentals of API testing, progresses to advanced testing techniques, and explores automation, performance testing, and multi-protocol support, providing attendees with a holistic understanding of API testing with Postman.
1. Welcome to Postman- Explaining the Postman User Interface (UI)2. Workspace and Collections Collaboration- Understanding Workspaces and their role in collaboration- Exploring the concept of Collections for organizing and executing API requests3. Introduction to API Testing- Covering the basics of API testing and its significance4. Variable Management- Managing environment, global, and collection variables- Utilizing scripting snippets for dynamic data5. Building Testing Workflows- Creating effective testing workflows for comprehensive testing- Utilizing the Collection Runner for test execution- Introduction to Postbot for automated testing6. Advanced Testing- Contract Testing for ensuring API contracts- Using Mock Servers for effective testing- Maximizing productivity with Collection/Workspace templates- Integration Testing and Regression Testing strategies7. Automation with Postman- Leveraging the Postman CLI for automation- Scheduled Runs for regular testing- Integrating Postman into CI/CD pipelines8. Performance Testing- Demonstrating performance testing capabilities (showing the desktop client)- Synchronizing tests with VS Code for streamlined development9. Exploring Advanced Features - Working with Multiple Protocols: GraphQL, gRPC, and more
Join us for this workshop to unlock the full potential of Postman for API testing, streamline your testing processes, and enhance the quality and reliability of your software. Whether you're a beginner or an experienced tester, this workshop will equip you with the skills needed to excel in API testing with Postman.
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Best Practices for Writing and Debugging Cypress Tests
TestJS Summit 2023TestJS Summit 2023
148 min
Best Practices for Writing and Debugging Cypress Tests
Workshop
Filip Hric
Filip Hric
You probably know the story. You’ve created a couple of tests, and since you are using Cypress, you’ve done this pretty quickly. Seems like nothing is stopping you, but then – failed test. It wasn’t the app, wasn’t an error, the test was… flaky? Well yes. Test design is important no matter what tool you will use, Cypress included. The good news is that Cypress has a couple of tools behind its belt that can help you out. Join me on my workshop, where I’ll guide you away from the valley of anti-patterns into the fields of evergreen, stable tests. We’ll talk about common mistakes when writing your test as well as debug and unveil underlying problems. All with the goal of avoiding flakiness, and designing stable test.
Effective Detox Testing
React Advanced Conference 2023React Advanced Conference 2023
159 min
Effective Detox Testing
Workshop
Josh Justice
Josh Justice
So you’ve gotten Detox set up to test your React Native application. Good work! But you aren’t done yet: there are still a lot of questions you need to answer. How many tests do you write? When and where do you run them? How do you ensure there is test data available? What do you do about parts of your app that use mobile APIs that are difficult to automate? You could sink a lot of effort into these things—is the payoff worth it?
In this three-hour workshop we’ll address these questions by discussing how to integrate Detox into your development workflow. You’ll walk away with the skills and information you need to make Detox testing a natural and productive part of day-to-day development.
Table of contents:
- Deciding what to test with Detox vs React Native Testing Library vs manual testing- Setting up a fake API layer for testing- Getting Detox running on CI on GitHub Actions for free- Deciding how much of your app to test with Detox: a sliding scale- Fitting Detox into you local development workflow
Prerequisites
- Familiarity with building applications with React Native- Basic experience with Detox- Machine setup: a working React Native CLI development environment including either Xcode or Android Studio

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Network Requests with Cypress
TestJS Summit 2021TestJS Summit 2021
33 min
Network Requests with Cypress
Top Content
Whether you're testing your UI or API, Cypress gives you all the tools needed to work with and manage network requests. This intermediate-level task demonstrates how to use the cy.request and cy.intercept commands to execute, spy on, and stub network requests while testing your application in the browser. Learn how the commands work as well as use cases for each, including best practices for testing and mocking your network requests.
Testing Pyramid Makes Little Sense, What We Can Use Instead
TestJS Summit 2021TestJS Summit 2021
38 min
Testing Pyramid Makes Little Sense, What We Can Use Instead
Top Content
Featured Video
Gleb Bahmutov
Roman Sandler
2 authors
The testing pyramid - the canonical shape of tests that defined what types of tests we need to write to make sure the app works - is ... obsolete. In this presentation, Roman Sandler and Gleb Bahmutov argue what the testing shape works better for today's web applications.
Full-Circle Testing With Cypress
TestJS Summit 2022TestJS Summit 2022
27 min
Full-Circle Testing With Cypress
Top Content
Cypress has taken the world by storm by brining an easy to use tool for end to end testing. It’s capabilities have proven to be be useful for creating stable tests for frontend applications. But end to end testing is just a small part of testing efforts. What about your API? What about your components? Well, in my talk I would like to show you how we can start with end-to-end tests, go deeper with component testing and then move up to testing our API, circ
Test Effective Development
TestJS Summit 2021TestJS Summit 2021
31 min
Test Effective Development
Top Content
Developers want to sleep tight knowing they didn't break production. Companies want to be efficient in order to meet their customer needs faster and to gain competitive advantage sooner. We ALL want to be cost effective... or shall I say... TEST EFFECTIVE!But how do we do that?Are the "unit" and "integration" terminology serves us right?Or is it time for a change? When should we use either strategy to maximize our "test effectiveness"?In this talk I'll show you a brand new way to think about cost effective testing with new strategies and new testing terms!It’s time to go DEEPER!
Playwright Test Runner
TestJS Summit 2021TestJS Summit 2021
25 min
Playwright Test Runner
Top Content
Everyone Can Easily Write Tests
TestJS Summit 2023TestJS Summit 2023
21 min
Everyone Can Easily Write Tests
Let’s take a look at how Playwright can help you get your end to end tests written with tools like Codegen that generate tests on user interaction. Let’s explore UI mode for a better developer experience and then go over some tips to make sure you don’t have flakey tests. Then let’s talk about how to get your tests up and running on CI, debugging on CI and scaling using shards.