Cypress Automation Tutorial

Test automation lets you verify and validate test scenarios via specific tools and frameworks. Cypress is one such open-source fabric built on Javascript. It is make for end-to-end examination and facilitates the automation of web application testing.

This article explores Cypress automation in detail. It discuss define up Cypress for automation, run automated tests, and more.

What is Cypress Framework?

is a NodeJS-based modern automation tool that supports JavaScript/Typescript as the programing language. There are many advantages and disadvantage of Cypress. However, despite its recency, it is the most popular and easy-to-use tool in the automation macrocosm, quickly becoming a ducky of devs and testers.

Why use Cypress For Automation Testing

Cypress is one of the almost preferred frameworks for automation testing due to the following reasons:

• Cross-browser Testing: Cypress enables users to run their tests on multiple browser concurrently as it endorse cross-browser testing.

• Easy setup: Cypress can be well include in new and current projects as it has a bare installation process that necessitate no superfluous dependance.
• Integrations: It mix seamlessly with popular Continuous Integration (CI) tools like and cloud-based testing platforms like BrowserStack.

• Automatic Waiting: Cypress mechanically waits for the component to prove up on the page before fulfil any actions or assertions. As it smartly manages asynchronous activity, it eliminates the need for explicit waits or sleep statements.
• Real-time Reloads: Cypress accelerates the debug process by automatically reload the test runner as and when you modify your test files or application codification.
• Time Travel: Cypress lets you travel forward and backward in time during test execution. Capture snapshots at various points in your test and fake the application ’ s state to debug failures.
• Flake Detection: Cypress lets you Identify and analyze unreliable tests with its flaky test direction feature.

• Interactive Test Runner: Cypress ’ s intuitive test contrabandist interface displays the application being prove in real-time, allow you interact with it, analyze its factor, and view the assertions and bid log.
• Debugging Capability: Cypress ’ s built-in debugging tools let you pause test execution at any point and visit the application province. For modern debugging, leverage your browser ’ s developer tool along with Cypress.

• Network and XHR Control: Stub or mock network postulation, change responses, and test different scenarios without having to get actual HTTP calls. Cypress gives entire control over the network and XHR requests.

The Working of Cypress Test Execution

Here ’ s how Cypress Test Execution works:

1. Once the user interacts with an app, the Cypress test scripts send commands to Cypress Runner.
2. Cypress Runner so communicates with the proxy waiter, which sends requests to the application waiter.
3. The application server treat these requests and returns the responses.
4. Cypress Runner takes snapshots and videos during this examination.
5. Finally, the testers inspect the test resultant to verify the proper performance of the application.

Cypress Installation Guide

Prerequisites:

• Install Visual Studio Code IDE[You can use any IDE]
• Install NodeJS

Here is the detailed.

How to Set up Cypress for Automation

Cypress is send as an NPM package, so install the npm package from the repository and configure it to use Cypress.

Step 1:Navigate to the desired leaflet. Create New Folder (cypressdemo).

Step 2:Inside the cypressdemo folder, open terminal or command prompt.

Step 3:Enter the bid:npm install cypress & # 8211; save-dev

Step 4:Once the installation is complete, enter the command:npx cypress open

The npx cypress opencommand prepares Cypress for the first time and launches the Cypress test runners where you can see illustration tests and play around with them.

Understanding Folder Structures in Cypress

By default, Cypress comes with a folder structure. The main leaflet iscypress, within which there are subfolders.

• Integration:This folder contains the actual tryout scripts.
• Fixtures:If you are using extraneous data inside your tests, your information can be orchestrate inside the Fixtures booklet.
• Plugins:The Plugins folder contains the peculiar files that can fulfil the codification before the project loads. If your project needs pre-processors, include them in this folder and configure them accordingly. By nonpayment, the plugins folder contains the index.js file, which can be customized to create your tasks.
• Support:The Support folder contains utilities, worldwide commands, ofttimes used codes, etc. By nonremittal, this folder arrive with two files & # 8211;commands.js and index.js. Extra files and pamphlet can be added as required.
• Assets: A folder calldownloadswill be create after the test run, including screenshots, videos, etc.

Writing your Initiative Test Case for Cypress Automation

The cypressdemobooklet contains

1. node_modules folder
2. cypress booklet
3. cypress.json file
4. package.json file
5. package-lock.json file.

To create your tests, navigate tocypress/integrationand create a fresh new brochure (eg:demo).

Inside the demo pamphlet, create the examination file (ex:firsttest.js) using the code below:

//firsttest.js describe ('My First Test ', () = & gt; {it ('Launch Browser and Navigate ', () = & gt; {cy.visit ('https: //www.browserstack.com/ '); cy.title () .should ('eq ', 'Most Reliable App & amp; Cross Browser Testing Platform | BrowserStack ')})})

Running First Automated Test with Cypress

BrowserStack allows you to run Cypress tests on the latest browsers. Get 30+ variation across Windows and macOS, with more to come. You can also run hundred of Cypress exam in parallel without maintaining countless Docker images. It takes a few easy steps to commence running Cypress tests on BrowserStack.

Cypress Tests can be fulfil in two ways:

1. Using Cypress Runner (UI)
2. Using Cypress CLI (Command Line)

1. Execute Cypress Tests Using Cypress Test Runner

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

From your Visual Studio Code Terminal or Command-Line, run the bid st the project booklet level (cypressdemo).

npx cypress exposed

The bidding above opens the Cypress Test Runner. Choose the newly make tryout file.

Click on thefirsttest.jsfile under the demonstration leaflet to execute tests.

Test Result

2. Running Cypress Tests Using Command Line

Syntax:

npx cypress run [-- spec & lt; path_to_spec_file]

Runfirsttest.jsuse the bid below:

npx cypress run -- spec `` ./cypress/integration/demo/firsttest.js ''

The command above executes tests in headless fashion, so you will not see any browser launches or execution of tests, all of which happens in the ground.

Cypress CLI Execution Result

Cypress Command Line Report

How to Run The Test Cases Locally

You can use Cypress commands in your terminal to execute the test cases topically. Cypress volunteer the provision to run test in headed and brainless modality.

Headed Mode

When it ’ s the headed mode, you can do your exam in a visible browser window and see the execution process in real clip.

To run your Cypress tests in headed mode, you can use thecypress open dictationto launch the Cypress Test Runner to select and run different tests in an interactional mode.

npx cypress open

Headless Mode

In headless mode, you do tests in the ground without get to open a visible browser. The headless execution is usually done in Uninterrupted Integration environments. You can use the cypress run bidding to run all tests without open a browser window.

npx cypress run

Best Practices for Cypress Automation

1. Create Independent Tests:Isolate the exam as much as possible. Don ’ t create tests dependent on each early.
2. Authenticate applications programmatically:Authentication or Logging into your application should be handled programmatically (Example: Using API calls), trim testing dependency.
3. data- * attributes:Adding attributes to UI ingredient such asdata-test, data-testid, or data-cyincrease application testability and reduces dependency on selectors making the test stable.
4. Utilize Cypress Architecturefor easy and stable tests.

//Avoid const myBtn = cy.contains ('button ', 'Click Me ') myBtn.click () //Use cy.contains ('button ', 'Click Me ') .as ('myBtn ') cy.get (' @ myBtn ') .click ()

5. Avoid employ theafter and afterEach hooks: There are chances that code inside the after and afterEach hooks may not execute as expected. In that case, Cypress may hold test execution and not execute continue tests.

6.Avoid using cy.wait ():cy.wait () may slow down your test executing. Instead, rely on default wait mechanisms.

cy.intercept (...) .as ('req ') ... cy.wait (' @ req ')

7. Do not start your web server using cy.task () or cy.exec (): Before test execution starts assure your application is up and running.
8. cypress.json is a cypress configuration file. Set the correct baseURL inside the configuration file and/or create multiple configuration files as per the environment. You can also use the environment variable to execute trial as per the needed environment.

Tips for Efficient Cypress Automation Testing

1. Use cypress.json file to configure baseUrl, browser type, etc.

2. Cypress enamor videos and screenshots for tests which can be incapacitate utilisecypress.jsonentries.

`` picture '': mistaken, '' screenshotOnRunFailure '': false

3. Create Shortcut dictation for execute your examination. Add entries topackage.json scripts.

Example:

`` scripts '': {`` test '': `` cypress run -- spec './cypress/integration/demo/firsttest.js ' ''},

4. You can override thedefault timeoutscope as per requirements.

5. In the Cypress Test Runner UI, navigate to Settings, to view all configurations.

Talk to an Expert

How to execute Cypress Test Automation Using BrowserStack

Step 1:Install usingnpm install -g BrowserStack-cypress-cli

Step 2:Configure Browserstack CLI usingnpx browserstack-cypress init

Step 3:The bidding above createsbrowserstack.jsonin your Project Directory. Enter the fields:

• auth& # 8211; specify your username and access key. Learn about different auth options.
• browsers& # 8211; vary the list of browsers and OS if you require to
• run_settings& # 8211; specify thecypress_config_file, parallels, npm_dependencies, and any other options that you require to change

Step 4:Run Your Cypress Tests on BrowserStack employnpx browserstack-cypress run & # 8211; sync

Use BrowserStack ’ s real browsers to ensure that all tests retrovert 100 % precise results, even when executing multiple tests simultaneously. Don ’ t limit your test to the several insufficiency of emulators and simulator; only rely on the real deal to create customer-ready, meticulously optimise web applications.

Why use BrowserStack for Cypress Test Automation

Here ’ s why you should use BrowserStack for Cypress test automation:

• : Cypress scat on limited browser, primarily Chrome-based ones. BrowserStack helps you expand your Cypress tests to many other browsers, such as Safari, Edge, IE, and more.
• Cloud Infrastructure: BrowserStack is a cloud-based platform that doesn ’ t require you to set up or maintain browsers or physical devices locally.
• Parallel Testing: With, you can run multiple Cypress tests concurrently and speed up test execution and eventually the release rhythm.
• Real-device testing: BrowserStack offers you a vast, let you run Cypress tests on 3500+ real twist, browser, and OS combinations, thus allowing you to try under.
• Integrations: BrowserStack offers seamless with several like, Circle CI, Bamboo and more.
• Scalability: By supporting real-device and parallel testing on a cloud-based infrastructure, BrowserStack allow you run century of Cypress examination across different environments.

Utile Resources for Cypress

Understanding Cypress

Use Cases

Tool Comparisons

Conclusion

Understanding Cypress can significantly heighten your automation testing. Thanks to its user-friendly interface and robust features, you can indite, run, and debug tests seamlessly to validate the functioning of your apps.

To further enhance your automation testing on Cypress, you can run it on BrowserStack. The program, with its vast, let you access 3500+ existent device-browser combinations in.

Frequently Asked Questions

1. Why is Test Automation Important

Test automation is important for the following reason:

• Helps implement modern DevOps principles by shoot speed into the development pipeline.
• It reduces human error since machines do not make error if they experience the right input.
• Provides faster results.
• Allows for multiple examination to be run simultaneously through parallel testing.

Related Guides