What is Cypress Test Suite?

A test suiteis a collection of related test case that are executed together to validate the functionality of an application. Test suit help organize tests logically, whether for nucleus features, smoke testing, or protection chit. In Cypress, trial suites are created using describe blocks to group tests, with each test case defined using an it block. This structure allows for clear, maintainable, and scalable test automation. Cypress besides provides hooks, selective executing, and environment-based configuration to simplify tryout management.

This usher explains how to create, organize, and execute Cypress test suites expeditiously.

What is a Cypress Test Suite?

The method of grouping multiple related tests is called describe. Each describe block belongs to a set of tryout.

We enclose each new set of tests we make for functionality in a ‘ describe ’ block before we start writing them.

describe (`` Test suite '', () = & gt; {... ...});

As we can see, the describe block requires two arguments: a recall function to wrap the actual test and a string to describe the examination suite.

Test Case

Using it cube, a may be created. There may be one or more test cases in a exam suite. A exam suite may include both positive and negative test cause for a functionality. Because of this, a describe may contain one or more it blocks.

describe (`` Test suite '', () = & gt; {beforeEach (() = & gt; {....}); afterEach (() = & gt; {....}) it (`` test case '', () = & gt; {.....});});

Conventions for describe and it block

• A describe cube & # 8217; s description must get in majuscule.
• The describe block & # 8217; s description should be summary.
• Prevent habituate lengthy or & # 8220; should & # 8221; sentences in the description block.
• The functionality name alone may be sufficient.

For instance, the describe block should appear as follows if we are testing the & # 8220; signup & # 8221; functionality:

describe (`` Signup '', () = & gt; {... ...});

The describe cube should seem as postdate if we are testing the & # 8220; login & # 8221; functionality:

// Incorrect describe (`` Verify login functionality '', () = & gt; {... ...}); // Correct describe (`` Login '', () = & gt; {... ...});

• it block descriptions must always be write in lowercase.
• it block & # 8217; s description could be more specific.
• The description might either begin with should or must. However, it & # 8217; s not necessary to begin with these price, just create certain it makes sentience.

Prevent using ambiguous or generic description.

//Incorrect it (`` should verify client '', () = & gt; {.. ...});

Developing the first Test Case in Cypress

Consider thescenario below

1. Open the URL https: //www.browserstack.com/
2. Click & # 8220; SignUp & # 8221; at the top.
3. Enter the username
4. Enter Password.
5. Select the & # 8220; Sign Up & # 8221; button.

Automate the above-mentioned scenario:

/// & lt; reference types= '' cypress '' / & gt; describe ('My First Test Suite ', function () {it ('My First Test Case ', function () {cy.visit (`` https: //www.browserstack.com/index.html '') cy.wait (3000) cy.get (`` # signin2 '') .click () cy.wait (2000) cy.get (`` # sign-username '') .type (`` code2test '') cy.get (`` # sign-password '') .type (`` Password '') cy.get (`` push [onclick='register () '] '') .click ()})})

The next step is to found Cypress Test Runner by typing the undermentioned command on the terminal.

This bid will launch the Cypress Test Runner window.

node_modules\.bin\cypress open

In the Cypress Test Runner box, we can see that our specification file (FirstTest.js) is there. Choosing a browser now come from the top-right list box with three choices (Chrome, Firefox, Edge, Electron)

Let & # 8217; s say we chose Chrome; next, double-click the FirstTest.js file to begin execution.

Run Test Execution through the Command line or Terminal

The bid to run execution from a terminal or without launching Cypress Test Runner are listed below.

Type the command below to action a specific test file through the pole on the default browser.

node_modules\.bin\cypress run -- spec `` cypress/integration/2-advanced-examples/FirstTest.js ''

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

This command will just run the & # 8220; FirstTest.js & # 8221; file, and it will execute in the default browser in headless mode (means no browser is seeable to you).

Use the bidding below to run a entire test using all test files present in the illustration folder.

node_modules\.bin\cypress run

For carrying out sure tryout on the lead browser (Browser is visible to screen). Hit the command below.

node_modules\.bin\cypress run -- headed -- spec `` cypress/integration/2-advanced-examples/FirstTest.js ''

Running on respective browsers in conformity with necessity. Click the command below.

node_modules\.bin\cypress run -- browser chrome -- headed -- spec `` cypress/integration/2-advanced-examples/FirstTest.js ''

What is a Cypress Test Runner?

The is a key component of the Cypress tool and is necessary for the successful executing of tests. It aid in afford the exam case execution its initial thrust. All commands are tail and shown in Cypress Runner while tryout cases are executed in Cypress.

This allows for quiz in various scenario.

Or use this command:

node_modules\.bin\cypress open

The stage of ocular input and engagement is a major welfare and the independent justification for my recommendation for beginner.

Another testing framework & # 8217; s drawback is that:

• Writing tests seems different from writing front-end code as normal.
• While you & # 8217; re used to checking the browser for feedback, all of the output is in the terminal.
• Debugging imply a really distinct process.

Test Structure

Adapted from Mocha, the test interface volunteer the describe (), context (), it (), and specify (). Choose whatever terminology lawsuit you the most as context () is identical to describe () and specify () is very to it ().

// -- Start: Our Application Code -- function add (a, b) {render a + b} function subtract (a, b) {return a - b} function divide (a, b) {return a / b} function multiply (a, b) {return a * b} // -- End: Our Application Code -- // -- Start: Our Cypress Tests -- describe ('Unit test our math functions ', () = & gt; {context ('math ', () = & gt; {it ('can add numbers ', () = & gt; {look (add (1, 2)) .to.eq (3)}) it ('can subtract numbers ', () = & gt; {expect (subtract (5, 12)) .to.eq (-7)}) specify ('can watershed numbers ', () = & gt; {expect (divide (27, 9)) .to.eq (3)}) specify ('can multiply numbers ', () = & gt; {expect (multiply (5, 4)) .to.eq (20)})})}) // -- End: Our Cypress Tests --

Hooks

Moreover, provides hooks (borrowed from Mocha) .These are utilitarian for creating pre-test conditions that should be executed before a group of tests or before each trial individually.

Additionally, they are useful for cleaning up conditions after a serial of tests or each test.

before (() = & gt; {// root-level lure // runs once before all examination}) beforeEach (() = & gt; {// root-level hook // runs before every test block}) afterEach (() = & gt; {// tally after each exam cube}) after (() = & gt; {// scarper once all tryout are perform}) describe ('Hooks ', () = & gt; {before (() = & gt; {// go erst before all tests in the block}) beforeEach (() = & gt; {// runs before each tryout in the cube}) afterEach (() = & gt; {// runs after each test in the block}) after (() = & gt; {// tally formerly after all test in the cube})})

Excluding and Including Tests

Using the .only and .skip functions is the elementary approach to skip or filter a test. They may be used to compound several tests into a single specification, allowing you to accomplish only the tests you demand.

Only tests 1 and 3 will be executed by this codification.

it.only ('test # 1 ', () = & gt; {// ...}) it ('test # 2 ', () = & gt; {// ...}) it.only ('test # 3 ', () = & gt; {// ...})

This test will just execute Test 1.

it ('test # 1 ', () = & gt; {// ...}) it.skip ('test # 2 ', () = & gt; {// ...}) it. skip ('test # 2 ', () = & gt; {// ...})

These work absolutely whether you use GUI or CI. By the way, to prevent accidentally leaving .only in your test, make sure you build up a pre-commit come-on that will stop this, or only installthis excellent plugin.

These terms can be used in your describe cube as well. In such instances, try will act as follows:

describe.only ('suite # 1 ', () = & gt; {it ('test # 1 ', () = & gt; {// this test will run});}) describe ('suite # 2 ', () = & gt; {it ('test # 2 ', () = & gt; {// this examination will not run})})

Different agency to create Cypress Test Suites

1. Run Multiple tests using Cypress command line & # 8217; s & # 8211; spec options

Consider that we have 3 test files for Cypress. Now, if you wanted to put all of these Cypress test files together and run them as a Test Suite, you can do so by using the & # 8211; spec option in the command line, as seen in the code below.

npx cypress run -- spec `` cypress/integration/one.spec.js, cypress/integration/two.spec.js, cypress/integration/three.spec.js ''

Or, create a simple pacakge.json file shortcut.

In package.json:

`` cy: run: fume '': '' cypress rn -- spec=cypress/integration/one.sepc.ts, cypress/integration/two.spec.ts '',

The issue with this strategy is that it becomes complicated when we care to receive several test suites.

2. Create a Test Suite by grouping the Cypress Tests in a folder

The 2d approach is to make subdirectory inside the desegregation folder, as seen in the following example:

CypressTypescript -cypress -- integration -- -home -- -profile -- -search

When you & # 8217; re finished, use the & # 8211; spec option below to simply run the Cypress tests inside your folder:

npx cypress run -- spec `` cypress/integration/home/ * .spec.js '' Or npx cypress run -- spec `` cypress/integration/home/ * ''

3. Creating Cypress test entourage using support/index.js & amp; environment variables

By setting value for environment variables, we may execute Cypress tests in a group or exam suite dynamically using this coming, which configure the Cypress support/index.js file and surroundings variable.

Therefore, use Environment Variables, you may use this option to dynamically select and run a set of tests in Cypress.

Here is how to go about it:

Access the cypress folder from your task root folder & gt; open the support folder & gt; open the index.js file.

Put the next code in support/index.js:

beforeEach (function () {let testSuite = Cypress.env ('SUITE '); if (! testSuite) {return;} const testName = Cypress.mocha.getRunner () .test.fullTitle (); testSuite = `` & lt; '' +testSuite+ '' & gt; '' if (! testName.includes (testSuite)) {this.skip ();}})

Let & # 8217; s now seem at how we may provide the rightfield value in the specification.

Change the values in the describe/it function as necessary to pair the suite name:

one.spec.ts //one.spec.ts describe ('First Test & lt; home & gt; ', () = & gt; {//home is suite gens it ('Test 1 ', () = & gt; {//some code})}) two.spec.ts //two.spec.ts describe ('Second Test & lt; home & gt; & lt; smoke & gt; ', () = & gt; {//two suites home and fume it ('Test 2 ', () = & gt; {//some code})}) three.spec.ts //three.spec.ts describe ('Third Test & lt; smoke & gt; ', () = & gt; {//smoke is suite name it ('Test 3 ', () = & gt; {//some codification})})

Look at the example from above. The suite name is specified in & lt; & gt; at the end of the describe () statement. Therefore, beforeAll () in support/index.js verifies the value of the SUITE varying before executing.

For example, if we afford & # 8220; home & # 8221; as the value of SUITE, It ascertain to make certain that & lt; home & gt; exists in the describe map value, or that it does not exist.

Either it will execute the test, or it won & # 8217; t.

You must provide the retinue name in the command line while running tests:

npx cypress run -- env SUITE=smoke

Because smoke is specified in the line above, only two.spec.js and three.spec.js are executed. Since there is no & lt; smoke & gt; at the end of the first.spec.ts, it will be skipped.

Closing Notes

• Users may view the step-by-step tryout command execution and its upshot simultaneously when Cypress action the tests in an interactive way.
• With Cypress, it is fantastically simple and speedy to construct up tests and execute them. Compared to other frameworks, it takes less clip to start creating tests.
• Any CI tool may be mix, and headless execution with command-line option is potential.
• It automatically takes screenshots of a failed test while it is being run. That means it is especially useful when troubleshooting and debugging issues.

For running, scaling, and debugging your tests, provides the necessary substructure for different.

And too, you get the undermentioned capabilities

Related Guides