Log in
JavaScript Conferences
TestJS Summit 2022TestJS Summit 2022
EN

Web Testing Architecture and Refactoring With Cypress

Walmyr
Walmyr
Talking About Testing online school
certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Get Multipass
Rate this content
Bookmark

In this workshop, I will introduce you to the migrator.cypress.io project in an unconventional way, where in addition to going over the Cypress commands equivalent to Protractor (and showing you how Cypress is simpler), I will also introduce you how I tested such a project evolving the automated test scripts on-demand, architecting the test suite in an evolutionary way.

This workshop has been presented at TestJS Summit 2022, check out the latest edition of this JavaScript Conference.

FAQ

You can contribute by forking the repository on GitHub, making your changes, and then submitting a pull request for review.

The projects require specific or later LTS versions of node and npm. The exact versions used are listed in the project's documentation on GitHub.

Yes, you can run the tests against a local environment by using the npm script 'npm run test:local' or by opening the Cyprus app with 'npm run site:open:local'.

Migrator.cyprus.io is an application created by the Cyprus team for educational purposes. It helps users understand how a test script created with Protractor would look after being migrated to Cyprus.

When you start the application for the first time and click 'migrate', you will see the equivalent code in Cyprus displayed.

The project is available on GitHub at github.com/WLSF82/cypress-monitor-task. You can clone the project, fork it, or contribute to it as needed.

After cloning the project and installing the dependencies, you can run the tests in headless mode by executing 'npm test' in the command line.

Yes, you can run the tests in interactive mode by using the command 'npm run side:open' after setting up the project locally.

Valmir, the workshop presenter, has a YouTube channel and offers courses on Udemy about Cyprus and other technologies, available in both English and Portuguese.

The Cyprus Migrator project demonstrates evolutionary architecture by showing how to start a suite of tasks and evolve it on demand, adding or removing complexity as needed based on application feedback.

cypress
Walmyr
Walmyr
158 min
10 Nov, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Workshop on Migrator.cyprus.io covered the migration of Protractor test scripts to Cypress using the Migrator.cyprus.io application. The workshop included running tests, discussing project architecture, and code improvements. Custom commands were introduced to reduce code duplication. The workshop also covered guidelines for writing code, version updates, and optimization techniques. Participants shared their experiences and recommendations for using Cypress for UI and API testing.
Available in Español: Arquitectura de Pruebas Web y Refactorización con Cypress
Video transcription and chapters available for users with access.
Available in other languages:

Watch more workshops on topic

How to Start With Cypress
TestJS Summit 2022TestJS Summit 2022
146 min
How to Start With Cypress
Featured WorkshopFree
Filip Hric
Filip Hric
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.
testingcypress
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.
testingjavascriptcypresse2e testing
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.
testingcypress
Flaky Test Management with Cypress
TestJS Summit 2021TestJS Summit 2021
114 min
Flaky Test Management with Cypress
Workshop
Cecelia Martinez
Cecelia Martinez
This workshop is for Cypress users who want to step up their game against flake in their test suites. Leveraging the Cypress Real World App, we’ll cover the most common causes of flake, code through some examples of how to make tests more flake resistant, and review best practices for detecting and mitigating flake to increase confidence and reliability.

Table of contents:
- Cypress Real World App Overview
- What is Flake?
- Causes of Flake
- Managing Network-related Flake (Activity)
- Managing Dom-relate Flake (Activity)
- Flake Detection and Mitigation Best Practices
- Q&A
testingcypress

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
Cecelia Martinez
Cecelia Martinez
Ionic
Cecilia Martinez, a technical account manager at Cypress, discusses network requests in Cypress and demonstrates commands like cydot request and SCI.INTERCEPT. She also explains dynamic matching and aliasing, network stubbing, and the pros and cons of using real server responses versus stubbing. The talk covers logging request responses, testing front-end and backend API, handling list length and DOM traversal, lazy loading, and provides resources for beginners to learn Cypress.
testingcypress
Full-Circle Testing With Cypress
TestJS Summit 2022TestJS Summit 2022
27 min
Full-Circle Testing With Cypress
Top Content
Filip Hric
Filip Hric
Replay.io
Cypress is a powerful tool for end-to-end testing and API testing. It provides instant feedback on test errors and allows tests to be run inside the browser. Cypress enables testing at both the application and network layers, making it easier to reach different edge cases. With features like AppActions and component testing, Cypress allows for comprehensive testing of individual components and the entire application. Join the workshops to learn more about full circle testing with Cypress.
testingcypresse2e testing
Tiny Tests, Large Results
TestJS Summit 2022TestJS Summit 2022
21 min
Tiny Tests, Large Results
Nikolay Advolodkin
Nikolay Advolodkin
Sauce Labs
Automated atomic tests are a great way to improve UI tests by making them less brittle and faster. The tests focus on testing a single feature or component and have minimal UI interactions. The Talk explores examples of automated atomic tests and their implementation on web applications. It also discusses the analysis of atomic tests, login tests, and working with JSON Web Tokens for authentication and authorization. The Talk concludes by highlighting the use of UI and web requests in automated atomic testing.
cypresse2e testing
Fighting Test Flakiness with Time Machines
TestJS Summit 2023TestJS Summit 2023
29 min
Fighting Test Flakiness with Time Machines
Filip Hric
Filip Hric
Replay.io
The Talk discusses the importance of learning from the past in software testing and troubleshooting test flakiness. It highlights the challenges of using memory and communication to gather information. The introduction of Replay.io, a time-traveling debugger, is proposed as a solution. The benefits of using Replay Chromium for recording and debugging, as well as the features of the Replay debugger, are emphasized. The Talk also addresses the relationship between test flakiness and app flakiness, and the significance of simulating real-world scenarios in testing.
cypress
Visual Regression with Puppeteer, Playwright and Cypress
TestJS Summit 2021TestJS Summit 2021
9 min
Visual Regression with Puppeteer, Playwright and Cypress
Top Content
Rainer Hahnekamp
Rainer Hahnekamp
AngularArchitects.io
Hello, I'm Rainer Haneckamp, a trainer and consultant at Angular Architects. In this talk, we'll explore visual regression testing using tools like Puppeteer, Playwright, and Cypress. We'll learn how to use Storybook and Puppeteer with Jest for visual regression testing. We'll also see how Jest and Playwright can be used together for visual regression testing. Finally, we'll discover how to use Cypress for visual regression testing. Thank you for watching!
testingcypressautomationvisual regression testing react
Don’t Make These Testing Mistakes
TestJS Summit - January, 2021TestJS Summit - January, 2021
27 min
Don’t Make These Testing Mistakes
Gleb Bahmutov
Gleb Bahmutov
Mercari
The Talk discusses common mistakes in Cypress tests, such as accessing the file system directly instead of using the Cypress command, and the importance of writing effective Cypress tests for different scenarios. It also emphasizes the need for adding assertions during navigation and alternating commands and assertions. The Talk highlights the significance of documentation and examples in providing support and addresses the advantages of using the Cypress Node test runner. It concludes with tips on debugging, data tests, and testing user journeys and edge cases.
testingcypresse2e testing