Bright Security’s Enterprise Grade Dev-Centric DAST Integrates with

Microsoft Defender for Cloud →
Product
Product overview

See how dev-centric DAST for the enterprise secures your business.

Web attacks

Continuous security testing for web applications at high-scale.

API attacks

Safeguard your APIs no matter how often you deploy.

Business logic attacks

Future-proof your security testing with green-flow exploitation testing.

LLM attacks

Next-gen security testing for LLM & Gen AI powered applications and add-ons.

Interfaces & extensions

Security testing throughout the SDLC - in your team’s native stack.

Integrations

Connecting your security stack & resolution processes seamlessly.

Docs

Getting started with Bright and implementing it in your enterprise stack.

Book a demo

We’ll show you how Bright’s DAST can secure your security posture.

Resources
Blog

Check out or insights & deep dives into the world of security testing.

Webinars & events

Upcoming & on-demand events and webinars from security experts.

Docs

Getting started with Bright and implementing it in your enterprise stack.

Case studies

Dive into DAST success stories from Bright customers.

Research

Download whitepapers & research on hot topics in the security field.

Company
About us

Who we are, where we came from, and our Bright vision for the future.

News

Bright news hot off the press.

Webinars & events

Upcoming & on-demand events and webinars from security experts.

We're hiring

Want to join the Bright team? See our open possitions.

Bug bounty

Found a security issue or vulnerability we should hear about? Let us know!

Contact us

Need some help getting started? Looking to collaborate? Talk to us.

Resources > Blog >
Cypress Testing: The Basics and a Quick Tutorial

Cypress Testing: The Basics and a Quick Tutorial

Oliver Moradov

What Is Cypress?

Cypress is an open source end-to-end testing framework that can help you unify web application testing. It works for all programming languages, platforms, and browsers. You can use Cypress for unit and integration testing. All tests are written in JavaScript and run in real browsers. 

Cypress provides an integrated development environment (IDE) that you can load in your browser. The framework employs an event-based architecture that connects with Google Chrome’s lifecycle events. It enables Chrome to wait for Ajax requests to complete without using a timeout or polling mechanism, leading to faster and more reliable tests.

Related content: Read our guide to mocha testing.

Key features of Cypress include:

  • Time travel
  • Live code reloading
  • Current and previous state diff-ing
  • Running tests in a browser or headless 
  • Screenshots and video recordings
  • Asynchronous testing
  • In-browser debugging

Cypress provides a CLI that you can use to test websites on various devices and browsers. The framework lets you use familiar debugging tools with Chrome and also install additional tools such as Redux Dev Tools and React Dev Tools. The goal is to enable you to run tests using the same stack you use for development. 

This is part of our series of articles about unit testing frameworks.

In this article:

Cypress Framework Architecture

Standard testing frameworks (e.g., Selenium) usually run outside the web browser to execute commands remotely across the network. The Cypress testing framework does the opposite—it runs in the same loop as the tested application.

A Node server process supports Cypress with constant communication and synchronization. The Node process and Cypress execute tasks for each other. Accessing the front and back end allows you to respond quickly to an application’s events. You can simultaneously perform high-privilege tasks outside the browser.

Cypress works at the network layer, reading and modifying web traffic as it flows. Therefore, Cypress can modify all incoming and outgoing browser traffic and change any code that might disrupt its capabilities, such as automating the browser. 

Cypress maintains control over the entire test automation process. It has a unique ability to understand events both within and outside the browser. Cypress can thus deliver consistent results—more so than other testing tools.

You install Cypress locally on a physical machine, allowing it to access the operating system to automate tasks. This setup enables Cypress to perform tasks like recording video content, taking snapshots, and executing network and file system operations. 

Cypress works within an application, providing native access to all components, including application instances, functions, timers, windows, documents, DOM elements, and service workers. You can access everything in a Cypress test. Cypress does not serialize objects or use an over-the-wire protocol to limit access. The test code has the same access as the application code. 

Related content: Read our guide to junit testing.

Cypress Testing Types

Choosing the type of test is one of the first considerations when building a testing suite. Cypress supports component and end-to-end tests. Each testing type has specific considerations and benefits depending on the test’s objectives. Usually, the application testing suite will contain both test types. 

End-to-End Tests

This technique fully tests applications from the back end to the web browser, covering third-party integrations. An end-to-end test aims to check how an application works as a whole. Cypress executes end-to-end testing using the same means users interact with an application, ensuring the test reflects the user experience. 

Developers, test engineers, and other team members can write these tests in Cypress using an API to simulate a real user’s behavior. End-to-end testing requires more complicated setup and maintenance than component testing.

Component Tests

Some development frameworks allow teams to break applications into components that team members write and test individually. Components are logical units ranging from small buttons to complex forms. They are easy to test because they are mountable, enabling testers to work with them separately from the rest of the application.

A component test focuses on a specific component’s functionality. Usually, developers write component tests when they build components—the test code resides with the component’s code. However, component testing does not accurately represent a component’s real-world performance—it doesn’t cover how the component interacts with other components or how the application functions overall. 

Quick Tutorial: Cypress Unit Testing Example

Here is a guide for creating Cypress component tests for React applications. Several frameworks are available to build React projects automatically (i.e., Vite, Create React App)—the following example uses Vite.

Use the following steps to create a project with Vite:

1. Use the scaffold command to create a project with the React template.

2. In the directory, run the npm install command.

3. Specify Cypress and launch the project.

Configure the Component Test

When Cypress runs for the first time for a given project, it prompts the user to set up end-to-end or component testing. Select the component testing option and continue through the wizard. The Cypress launchpad detects the framework and generates the required configuration information.

Image Source: Cypress

Once you’ve set up component testing, select and launch the preferred browser to open Cypress. 

Create a Component

Next, you’ll need components to test—you can start with a simple component with few dependencies. For an example of a simple React component, use a button without dependencies. Import the component from React.

Mount the Components

Most tests use a similar format regardless of the framework. To test a component, arrange the test by mounting your chosen component. You can import a mount function for every supported framework from the Cypress package: 

import { mount } from 'cypress/react'

Mount the imported component: 

import { mount } from 'cypress/react'
import Button from './Button'

describe('<Button>', () => {
  it('mounts', () => {
    mount(<Button />)
  })
})

You can add the mount function as a custom command to make it easier to use for all the component tests (the launchpad wizard normally configures this automatically). 

The component support file might look like this:

// cypress/support/component.js
import { mount } from 'cypress/react'

Cypress.Commands.add('mount', mount)

Next, remove the mount import to update the button component—use the cy.mount command. Create a project spec (Button.spec.jsx) and apply this script: 

import Button from './Button'

describe('<Button>', () => {
  it('mounts', () => {
    cy.mount(<Button />) /
  })
})

The test should now work. Open Cypress in your chosen browser and select Button.cy.jsx from your spec list. You should see the mounted button component in the test environment. If the test works in Cypress, it should also work in the real world because the test uses a real web browser. 

Security Unit Testing with Bright Security

Bright is a developer-first Dynamic Application Security Testing (DAST) scanner, the first of its kind to integrate into unit testing, revolutionizing the ability to shift security testing even further left. You can now start to test every component / function at the speed of unit tests, baking security testing across development and CI/CD pipelines to minimize security and technical debt, by scanning early and often, spearheaded by developers. With NO false positives, start trusting your scanner when testing your applications and APIs (REST, GraphQL), built for modern technologies and architectures. 

Resources

Domain Hijacking: How It Works and 6 Ways to Prevent It

What Is Domain Hijacking?  Domain hijacking refers to the unauthorized acquisition of a domain name by a third party, effectively taking control away from the rightful owner. This form of cyber attack can lead to significant disruptions, including loss of website functionality, email services, and potentially damaging the brand’s reputation.  Domain hijackers often exploit security

Mastering Vulnerability Management: A Comprehensive Guide

Modern day organizations face a constant barrage of cyber threats, making it imperative to implement robust vulnerability management processes. Vulnerability management is a systematic approach to identifying, evaluating, treating, and reporting on security vulnerabilities in systems and their associated software. In this blog post, we’ll delve into the four crucial steps of vulnerability management process

Vulnerability Scanners: 4 Key Features, Types, and How to Choose

A vulnerability scanner is a specialized software tool designed to assess the security of computers, networks, or applications by automatically detecting and analyzing weaknesses. These scanners proactively search for security vulnerabilities, such as unpatched software, misconfigurations, and other security gaps that could be exploited by attackers. Some scanners can simulate the actions of an attacker to help identify exploitable vulnerabilities.

Get our newsletter