How to Perform E2E Testing Using Cypress CLI and Test Runner

Testing Pyramid Layers in Cypress

Cypress team introduced component testing with Cypress 10 that allows developers to test individual components quickly, regardless of their complexity. Component tests differ from E2E tests in that instead of visiting a URL to pull up an entire app; a component can be “mounted” and tested on its own.

In the context of Cypress, here’s how the testing pyramid can be applied:

Unit Tests

These tests focus on testing individual components or functions in isolation. In Cypress, you can use frameworks like Mocha or Jest to write unit tests for your JavaScript functions.

These tests are typically executed quickly and frequently, ensuring that each component of your application works as expected.

Component Tests

These tests verify the behavior of individual components or UI elements in your application. In Cypress, you can write component tests that interact with specific UI elements and verify their functionality.

These tests ensure that each component functions correctly within the application’s context.

Integration Tests

Integration tests focus on testing the interactions between different components or modules in your application. In Cypress, you can write integration tests that simulate user interactions and verify the integration of various components.

These tests ensure that the different parts of your application work together seamlessly.

End-to-End (E2E) Tests

These tests span the entirety of the application’s process, validating its behavior holistically. Within Cypress, E2E tests can be authored to replicate user actions, engage with the UI, and authenticate anticipated results.

Although these tests often demand more time for execution, they deliver a sense of assurance in the comprehensive functionality of your application.

To know more about component testing, let’s see the difference between end-to-end testing and component testing

Differences Between End-to-End Testing and Component Testing

End-to-end testing and component testing are two different levels of testing in the Software Development Life Cycle. Here are the key differences between them:

Here is an example of Cypress E2E test scenario:

Test Scenario

• Visit the site
• Search with valid data and verify the search data should be displayed.
• Search with invalid data and verify the message.

Implementation

In the following scenario, we will navigate to the website and perform searches using both valid and invalid data.

describe('Search  with valid and Invalid data' , () => {
 beforeEach(() => {
 cy.visit('https://ecommerce-playground.lambdatest.io/index.php?route=account/login')
 })
 it('Searches for the valid text  "Apple" and  verify the results', () => {
  // Enter the search data and submit the form
   cy.get('[name="search"]').eq(0).type('Apple')
   cy.get('.type-text').click()
   // Verify the search results
   cy.url().should('include', 'search=Apple')
   cy.contains('Search - Apple').should('be.visible')
   cy.get('.product-layout').should('have.length.gt', 0)
 })
 it('Displays message with no search results for invalid search term', () => {
   // Enter search term and verify returns no results and submit form
   cy.get('[name="search"]').eq(0).type('xyz')
   cy.get('.type-text').click()
   // Verify message for no search results
   cy.contains('There is no product that matches the search criteria.').should('be.visible')
 })
})

Let’s execute the test cases in Searchwith_validAndinvalid_data.cy.js.

Execution

Running Test Cases in Cypress

When it comes to running Cypress test cases, there are different approaches you can take depending on your specific requirements and testing environment.

Here we will be discussing how you can run Cypress test cases using:

• Cypress CLI
• Cypress Test Runner

The Cypress CLI provides a straightforward way to run Cypress automation from the command line. You can use the cypress run command to run your tests in headless mode or cypress open to run them in interactive mode. The Cypress CLI also offers various options and flags to customize the test run, such as specifying specific test files, setting environment variables, and generating test reports.

Now let’s take some examples to execute the test cases in Cypress CLI.

Test Scenario

• Visit the Site https://ecommerce-playground.lambdatest.io/index.php?route=account/login
• Login into the site valid credential.
• Do subscribe to the newsletter.
• Verify newsletter is successfully subscribed.

Implementation

Let’s create a new folder under the e2e folder named “demoCypressCLIRunner” to perform Cypress UI testing.

Create the first test spec to check the login feature for the site with the name subscriptionScenario..cy.js under the folder ‘demoCypressCLIRunner’.

For demo purposes, we are using the TestMu AI eCommerce Playground site.

Use Case

Login into the application and update the newsletter subscription.

describe('Login and Subscribe', () => {
 it('Logs in and subscribes to newsletter', () => {
   // Visit the web site
   cy.visit('https://ecommerce-playground.lambdatest.io/index.php?route=account/login')


// Click on login button
 cy.get('[value="Login"]').click()
// Enter the valid email and password
cy.get('#input-email').type('[email protected]')
cy.get('#input-password').type('Lambda123')


// Click on login button
cy.get('[value="Login"]').click()


// Verify user logged in successfully
cy.url().should('include', 'index.php?route=account/account')
cy.contains('My Account').should('be.visible')


// Subscribe the newsletter
 cy.contains('Newsletter').click()
 cy.get('#input-newsletter-yes').click({force:true})
 cy.get('[value="Continue"]').click()


 // Verify the subscription success message
   cy.get('.alert-success').should('contain', 'Success: Your newsletter subscription has been successfully updated!')
 })
})

How to Run Test Cases in CLI?

There are different ways to run the Cypress test cases in CLI.

Command 1:

Run all Cypress tests using Cypress CLI in the Electron default headless browser.

Output

All the tests are in headless mode in the default browser Electron. The Cypress command ran successfully, and our tests got executed.

Now, let’s understand some important aspects of this execution marked by the numbered tickets:

• Command used to run all the test files present under the “e2e” folder.
• Test cases started with Cypress, Browser, and Node versions with the number of test .spec files.
• Test cases are executed one by one in the 3rd sticker. It shows that the first .spec file is passed.
• Recording of all the test cases is saved under the ‘videos’ folder, which greatly helps during debugging.
• Final test cases execution result report with parameters like Tests, Passing Test, Failing Test, Pending, and Skipped Tests.

Command 2:

Run the particular test in headless mode in the default browser Electron.

To run specific spec files from the list of test cases under the e2e folder, we can mention the path using “–spec” along with the “cypress run” command.

Output

In the output, we can see the test case execution report of a particular .spec.

Command 3:

Run all the tests in Cypress CLI to run tests in Chrome (Headless Mode).

Output

In the output, we can see the test case execution report of all test cases in the Chrome browser.

Command 4:

Run a particular test case in Cypress CLI to run tests in (Headless Mode).

Output

In the output, we can see the test case execution report of a particular .spec in the Chrome browser.

Let’s take one more scenario.

Test Scenario

• Visit the site
• Search with valid data and verify the search data should be displayed.
• Search with invalid data and verify the message.

Implementation

Create the second test case with the name “Searchwith_validAndinvalid_data.cy.js” under the TestMu AI folder.

In the below test case, we are covering the search with valid and invalid data and verifying the search result.

Use Case

Open the site and search with valid and invalid data.

describe('Search  with valid and Invalid data' , () => {
 beforeEach(() => {
 cy.visit('https://ecommerce-playground.lambdatest.io/index.php?route=account/login')
 })
 it('Searches for the valid text  "Apple" and  verify the results', () => {
  // Enter the search data and submit the form
   cy.get('[name="search"]').eq(0).type('Apple')
   cy.get('.type-text').click()
   // Verify the search results
   cy.url().should('include', 'search=Apple')
   cy.contains('Search - Apple').should('be.visible')
   cy.get('.product-layout').should('have.length.gt', 0)
 })
 it('Displays message with no search results for invalid search term', () => {
   // Enter search term and verify returns no results and submit form
   cy.get('[name="search"]').eq(0).type('xyz')
   cy.get('.type-text').click()
   // Verify message for no search results
   cy.contains('There is no product that matches the search criteria.').should('be.visible')
 })
})

Command 1:

Run all the tests in Cypress CLI in default browser Electron (Headless Mode).

yarn cypress run

Output

Command 2:

Run a particular test in Cypress CLI to run tests in Chrome (Headless Mode).

yarn cypress run --spec cypress/e2e/demoCypressCLIRunner/Searchwith_validAndinvalid_data.cy.js
Chrome

Output

Command 3:

Run all test cases in Cypress CLI to run tests in Chrome (Headless Mode).

yarn cypress run --headless --browser chrome

Output

Command 4:

Run particular test in headless mode in Chrome browser.

yarn cypress run --spec cypress/e2e/demoCypressCLIRunner/Searchwith_validAndinvalid_data.cy.js
Chrome

Output

How to Run Test Cases in Cypress Test Runner?

Cypress Test Runner provides a user interface (UI) that allows you to interact with and run your Cypress tests. After executing the appropriate command to start the Test Runner, the UI will be launched. From there, you have several options for running your tests.

By default, Cypress will launch the Test Runner UI with its default browser, which is typically Electron. However, you can switch to a different browser by selecting it from the available options in the browser drop-down menu.

To run a single test, just enter the particular .spec name and execute the test case.

Another way to run a single test is to click on a specific test case, and it will start executing.

If you want to run the test case, run the command ‘yarn cypress open’, which will open the Cypress Test Runner from where you can execute the test cases.

Execution

Let’s execute both test cases Searchwith_validAndinvalid_data.cy.js and subscriptionScenario.cy.js in non headless mode using UI by passing –ui in command.

You can also leverage the potential of Cypress E2E testing on the cloud and run Cypress test cases over real browsers and OS combinations. AI-powered test orchestration and execution platforms like TestMu AI offer a scalable Cypress cloud to perform automation testing across 40+ real desktop browsers.

To get started, check out the documentation: Getting Started With Cypress Testing.

Ready to elevate your Cypress automation skills? Join our specialized Cypress 101 certification program tailored for developers and testers seeking to expand their proficiency in Cypress test automation. Gain advanced insights, hone your abilities, and unlock a world of opportunities on your journey in test automation.

Note: Now you can perform online cross browser testing on macOS Browsers online to make sure your websites and web apps are compatible with all versions.