End-to-end testing is complex by definition. There are many possibilities and possible paths that users can postdate within an interface. In increase, there are many edge suit that you ’ ll motive to account for in order to avoid errors and application crashes. This clause will present you to Cypress, a test runner for web applications. We will explain what it is, how it helps, and how to use it to run single and parallel tests.

What is Cypress?

Cypress is a tool that facilitates end-to-end examinationfor applications that run in a browser. It is an all-in-one testing fabric that unifies the whole testing process within a single tool in order to make it easygoing for developers and QA analysts to act. This signify that Cypress allows you to write, configure, run, and debug tests with less effort.

Since Cypress is a JavaScript coating, it can be installed in your web app. That means it can run aboard your project, which make it easy to apply TDD and end-to-end testing during the development operation. In addition, Cypress enable you to record your tests, so you can make snap and run tests again as needed.

The Benefits of Cypress

Cypress is easy to install and easy to use. Since the instalment process follows the basic flow of any JavaScript package, you don ’ t need any additional knowledge to get started. The syntax for write tests is also similar to that employ with other testing frameworks (like Jasmine and Mocha). Therefore,anydeveloper can publish exam case – not just test analysts.

Since Cypress does not use Selenium, it does not execute removed bid (because it ’ s already inside the application). This means that you can run test faster, and you likewise receive more control when you run tests and commands that have to wait for something else to execute. Cypress can also notice changes in your trial and effectively make them act in real clip by automatically running them again. Since Cypress acts as an active listener within your coating, you don & # x27; t have to finish maturation and then run it all over again.

However, the most exciting feature for developers is that – just as we can debug web applications – Cypress can debug tests. When debugging JavaScript code, we can use the developer tools of any supported browser to access the errors and all available information by scrutinise the document ’ s contents and any values that need to be validated.

Cypress vs. Other Frameworks

There are many alternatives to Cypress on the market, and it can be difficult to know which ones are worth considering. Testers don & # x27; t invariably have programming skills, and write tests with code takes clip (as does keeping them updated). Therefore, we need tools that enable a new way of testing such as a framework that allows us to create tests without get to write test codification. In this section, we will explore some of these alternative frameworks and excuse how they act.

Playwright

Playwrightis a tryout framework for end-to-end testing, including the power to run tests in parallel. In fact, all tests are run in analogue by default, but parallelism is configurable by allowing you to disable it as well.

The advantage of Playwright is that it is available in many different languages, which helps the developer to choose harmonize to their preferred lyric. It will be easier to use without take to learn a new language or a new testing framework. Playwright is available for use with Java, C #, Python, JavaScript, and TypeScript.

Like languages, Playwright is also cross-browser and cross-platform, indorse most common browser and operating systems. This is useful when you need to test in multiple environments or even when you have a diverse squad that doesn & # x27; t feature platform restriction for developers.

However, the big feature available in Playwright is without a doubt the Test Generator, also cognise asCodegen. This feature will log the test run in the browser and generate test code that can be exported in the language of your choice. Then you can edit and run it as many multiplication as you care. This feature is extremely useful for tester who don & # x27; t have enough scheduling skills but want to create different test scenarios that can be improved by a developer.

Selenium

Seleniumis one of the old test frameworks created with test automation in mind. Since its origin, Selenium has focused on generating exam code from the steps executed in its interface. In this way, through theSelenium IDE, it is possible to record the executing of the tests and export the test codification to Java, C #, Python and Ruby languages.

Selenium has a lineament calledGrid, which allows exam scripts to be run in parallel on multiple machine, enabling cross-browser and cross-platform test execution.

The most important vantage that Selenium has is having a lot of supererogatory documentation on the web. Selenium has created a new paradigm for testing through its vision of automating browsers and its long life and wide use have generated a lot of substance with the almost diverse use suit that you can apply.

How to Get Started With Cypress

As we mentioned earlier, Cypress is easygoing to use. To get started with Cypress, you just need to make sure that you have NPM or Yarn installed on your machine. We will use Yarn for our demonstration, but if you ’ d rather use an installing with NPM, you can find a direct download in the documentation.

First, open your terminal and access your projection folder (which should already have theyarn.lockfile). Add Cypress to your project employ the following bidding:

$ yarn add cypress -- dev

Now, run the command below to open the Cypress window:

$ yarn run cypress open

Choose theE2E Testingoption in the Cypress window to finish the undertaking configuration. In the next pace, you will see that one JSON file and three JavaScript files experience been added to your project in a new folder callcypress. To proceed, click theContinue button.

Now, you will be asked to choose a browser. You can find a list of the many browser that Cypress supportshere. For our demonstration, we will preferChromeand so click on theStart E2E Testing in Chrome button.

This will open a new Chrome window with Cypress specification, settings, and information. As this project doesn & # x27; t have any tests yet, it give us the option to create our maiden spec using model or to create an vacuous one. If you attain this page, it means that your Cypress facility was successful. We ’ ll show you how to create a spec from scratch in the following section.

How to Run a Single Test

Let & # x27; s start by running a single, straightforward tryout. Select thecreate new empty specchoice on the main Cypress page. You will see a modal where you can delineate the path to the specification file or use a route and name suggested by Cypress. We will use Cypress ’ s suggestion for this demonstration. When you ’ re finished, clickCreate Spec.

Click on theSpecsmenu in the sidebar to see all of your project ’ s specs. Then, click on thespec.cy.jsfile to open the trial. This will run the examination automatically.

Make sure you have a page approachable in the browser. As you can see below, our test page is running and available athttp: //localhost:3000. Cypress will store the specs inside a brochure telephonecypress/e2e. You can besides admission Cypress examination by clicking on a spec name and opening it in your preferred IDE.

First, let ’ s test against the page title. In the following code, we ’ ll add a title tag to an empty HTML file withCypress - Homeas the content and we ’ ll check to see if the rubric is equal to the await content in the test codecypress/e2e/spec.cy.js:

This is just one example of the many benefit that Cypress has to proffer. It also has very useful (and discharge)documentation on assertionsfor creating any type of test. In addition,Chai, which Cypress uses as a BDD/TDD assertion library, has a well-documented API with helpful explanation and examples ofasserts and expect/should.

How to Run Tests in Parallel

After you ’ ve create your test suite, you can run your tests in latitude. If you want to really see this in action, you ’ ll need to feature a considerable routine of test scenarios or various tryout that conduct a long time to run. When it comes to parallelization, Cypress scat each test on a virtual machine. This is possible because Cypress uses a balanced strategy for lam each spec on a machine (so each specification must be contained in a file that will be addressed to a machine).

If you don ’ t have a Cypress account, you ’ ll postulate to create one before you can run your tests in parallel. Just go back to theSpecsmenu in the sidebar and click on theget started with Cypress Dashboard button.

Then, log in, fill in the information for your arrangement, and clickcreate arrangement.

To connect your local project to the organisation, you need to update yourcypress.config.js with the projectIdgenerated in the Cypress Dashboard.

Finally, just configure a new environment variable with the key generated in the Cypress Dashboard like this:

$ export CYPRESS_RECORD_KEY=XXX

Cypress will try to identify the CI that we ’ re using, but since we ’ re running the tests locally, we ’ ll need to pass it ourselves. We ’ ll passgithubActions as ci-build-idfor our example, but Cypress works with many alternative, including:

•  AppVeyor

•  Azure

• AWS CodeBuild

•  Bamboo

•  Bitbucket

•  Buildkite

•  Circle

• CodeShip Basic

• CodeShip Pro

•  Concourse

•  Codefresh

•  Drone

• GitHub Actions

•  GitLab

•  GoCD

• Google Cloud

•  Jenkins

•  Semaphore

•  Shippable

• Team Foundation

•  Travis

•  Netlify

•  LayerCI

Make sure that the coating is running before you run the tryout. To run your tests in parallel, just use the command below. That & # x27; s all you need to do to run tests in analog!

$ yarn run cypress run -- record -- parallel -- ci-build-id githubActions

Wrapping Up

Cypress is a developer-friendly testing framework with several features that improve test growth. With Cypress, you can achieve a professional examination flow without adding much more complexity to the evolution routine. Given that there are many Cypress alternatives, it ’ s important to realise that there is no one-size-fits-all solution. Even if your QA squad has excellent development acquirement, Cypress is still a great creature to use for test (because it ’ s open source and free to use). If they don ’ t, you can open up your possibility with a new and modern approach.

Products

Spheric tools

Set up and integrate

Resources

Company