How to Test Angular Apps with Cypress

Use Cypress component testing to check an Angular component’s rendering and interactions in isolation. Use Cypress end-to-end (E2E) testing to exercise a complete user journey through a running application. Component tests run in a real browser with a development server that compiles and serves the test; they do not visit your production or staging app. E2E tests cover integration across the app, but can be disrupted by dependencies and external sites. [Cypress component test configuration] [Cypress E2E guidance]

This guide installs Cypress, configures Angular component testing, mounts a component, checks inputs and outputs, and explains the common configuration and version pitfalls.

1. Choose component testing or E2E testing

Question	Component testing	E2E testing
What is under test?	A component and its UI behavior in isolation.	A user journey through the running application.
What runs it?	Cypress starts a development server to compile and serve the spec and component.	Cypress visits an application served at a configured base URL.
What does it cover well?	Rendering, interactions, inputs, outputs, and component-level states.	Routes and integration across UI, application services, and connected systems.
What does it not prove alone?	That production routing, server behavior, or the whole user journey works.	Every isolated component state is easy to reach or diagnose in a full journey.

Use component tests for fast feedback on local UI behavior and E2E tests for important workflows. Keep both where their coverage answers different risks. Cypress recommends weighing E2E coverage against possible disruption and flakiness, particularly when tests interact with external sites. [Cypress E2E guidance]

2. Install Cypress and open the test runner

Run the install command from the Angular project root. Cypress is a local development dependency. [Cypress installation guide]

# npm
npm install --save-dev cypress

# Then launch the Cypress App
npx cypress open

Other package managers can install the same development dependency:

# Yarn
yarn add --dev cypress

# pnpm
pnpm add --save-dev cypress

# Bun
bun add --dev cypress

On first launch, choose Component Testing to set up Angular component tests. Choose E2E Testing if the immediate goal is to test a whole application flow. Cypress can detect an Angular project and generate a starting configuration. Review the generated files and adapt them if the project uses custom build settings. [Angular component testing overview]

3. Configure Angular component testing

The documented Angular component test configuration uses Angular with Webpack and a component spec pattern such as **/*.cy.ts. The Angular harness requires @angular-devkit/build-angular, including projects that use @angular/build. [Angular component testing overview]

// cypress.config.ts
import { defineConfig } from 'cypress'

export default defineConfig({
  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
    },
    specPattern: '**/*.cy.ts',
  },
})

Treat this as a minimal example, not a replacement for settings generated for your workspace. If Cypress generated a configuration already, preserve other project-specific settings such as support files, component spec patterns, and build options.

Run the component runner with npx cypress open, select Component Testing, and open a spec. For a repeatable headless run, use:

npx cypress run --component

For E2E, configure the e2e section and the app’s base URL according to your project. Start the Angular app with the project’s normal development command, then run the E2E specs. A typical script arrangement is:

# Terminal 1: use the serve target and options for your Angular workspace
npx ng serve

# Terminal 2
npx cypress open

The exact Angular serve command can vary by workspace and project configuration; the E2E runner needs an accessible running app. Component testing instead starts its configured development server for the component spec.

4. Mount a component and test an interaction

Import mount from cypress/angular, then mount the component in a Cypress test. This example assumes the component renders controls with stable data-cy attributes.

// stepper.cy.ts
import { mount } from 'cypress/angular'
import { StepperComponent } from './stepper.component'

describe('StepperComponent', () => {
  it('increments the displayed count', () => {
    mount(StepperComponent)
    cy.get('[data-cy=increment]').click()
    cy.get('[data-cy=counter]').should('have.text', '1')
  })
})

The assertion checks a user-visible result after the click. Prefer stable, purpose-built selectors such as data-cy when that fits the application; avoid tying tests to incidental styling classes that may change during a visual refactor. [Cypress Angular API]

5. Test inputs, outputs, dependencies, and standalone components

Set component inputs

Pass initial component properties through the mount configuration’s componentProperties. This is useful for checking how a component renders a particular input state.

import { mount } from 'cypress/angular'
import { GreetingComponent } from './greeting.component'

describe('GreetingComponent', () => {
  it('renders the provided name', () => {
    mount(GreetingComponent, {
      componentProperties: {
        name: 'Ada',
      },
    })
    cy.get('[data-cy=greeting]').should('have.text', 'Hello, Ada')
  })
})

Use the property name and expected output that match the component’s actual API. Cypress documents componentProperties as the way to provide component properties during mount. [Angular component examples]

Check an output event

Provide an output spy, trigger the relevant UI action, and assert both that the output fired and that it carried the expected value. Cypress’s Angular examples use createOutputSpy.

import { createOutputSpy, mount } from 'cypress/angular'
import { SaveButtonComponent } from './save-button.component'

describe('SaveButtonComponent', () => {
  it('emits when clicked', () => {
    mount(SaveButtonComponent, {
      componentProperties: {
        saved: createOutputSpy('savedSpy'),
      },
    })

    cy.get('[data-cy=save]').click()
    cy.get('@savedSpy').should('have.been.called')
  })
})

To check a payload, have the component emit a known value and assert the spy’s call arguments using the Cypress and Sinon assertion syntax available in your installed Cypress version. Keep the test focused on the public output contract. [Cypress Angular API] [Angular component examples]

Provide dependencies

For components that rely on Angular declarations, imports, or providers, the mount configuration provides the place to supply them where appropriate. The precise setup depends on the component and Angular version:

mount(ReportComponent, {
  imports: [SharedUiModule],
  declarations: [ReportBadgeComponent],
  providers: [
    { provide: ReportService, useValue: reportServiceStub },
  ],
})

Use the dependency setup the component actually needs; this snippet is a shape to adapt, not a declaration of specific app types. Standalone components generally bring their dependencies through their own imports and can often be mounted directly. The documented mount configuration options do not apply to standalone components in the same way as to non-standalone components; follow the project’s test-module setup. [Angular component examples]

Test signals and visible outcomes

For a component that uses Angular signals, set or provide the state through the component’s supported API and assert the rendered result or effect. Keep the approach compatible with the project’s Angular and Cypress versions. Prefer asserting the visible behavior that matters to a user over implementation details. [Angular component examples]

6. Set up E2E testing for an application flow

Choose E2E Testing in the first-run setup to generate the E2E structure. Configure a base URL if your project has a stable local server address, then visit a route and interact as a user would:

// cypress/e2e/checkout.cy.ts

describe('checkout flow', () => {
  it('opens the checkout page', () => {
    cy.visit('/checkout')
    cy.get('[data-cy=checkout-title]').should('be.visible')
  })
})

For reliable E2E coverage, make the app state predictable, use selectors intended for tests, and control dependencies where practical. A test that relies on a third-party site or unstable external service can be disrupted for reasons outside the UI under test. Cypress advises considering disruption and flakiness when choosing E2E coverage. [Cypress E2E guidance]

7. Compatibility and configuration pitfalls

Check Angular support before upgrading

As verified against Cypress’s documentation on October 3, 2026, the Angular component testing overview lists Angular 21 and 22 support. It also says Cypress 16 supports zoneless testing through the main cypress/angular harness without requiring zone.js; zoneless is the default in Angular 21 and 22. Support changes over time, so check the official matrix for your exact Angular and Cypress versions before adopting or upgrading. The migration guide says Angular 18 and 19 have reached end of life for Cypress component testing, and Angular 20’s LTS ends in November 2026. [Angular support matrix] [Cypress migration guide]

Missing build dependency

If the Angular component dev server cannot resolve the framework setup, check that @angular-devkit/build-angular is installed in the workspace. The Cypress Angular harness requires it, including when using @angular/build. [Angular component testing overview]

Styles or Sass imports fail

Cypress can detect project configuration, but replacing detected projectConfig replaces that detected configuration. If custom styles, assets, or Sass include paths are missing, supply the needed settings in the override’s buildOptions. Missing Sass include paths are a documented source of import errors. [Angular component testing overview]

A standalone component ignores mount options

Standalone components manage dependencies through their own imports, so setup intended for non-standalone components may not behave as expected. Mount the standalone component directly when possible, and configure its dependencies using the Angular test setup that matches the component. [Angular component examples]

The component test is being treated as E2E

Component and E2E specs use separate configuration sections and runners. Confirm that the spec is selected from Component Testing and that component.devServer is configured with the Angular framework and supported bundler. Component specs use the dev server to compile and serve the component test. [Component test configuration]

8. Performance, reliability, and cost

Cypress component tests start a development server to compile and serve specs, so keep each test focused on the component state it needs. Mounting a component avoids setting up the complete deployed application for every isolated UI check, but it does not replace integrated route or server coverage. E2E tests cover more of the application path and can encounter more dependencies and sources of disruption. These are scope tradeoffs, not a guaranteed speed comparison. [Component test configuration] [Cypress E2E guidance]

Cypress is installed as a project development dependency. The cited installation and testing guides do not provide a universal runtime benchmark or a cost estimate for a particular project, so base runtime and infrastructure decisions on your own suite and CI environment. For reliability, keep component tests isolated, use predictable data, and reserve E2E tests for user journeys whose integrated behavior matters.

9. Or skip the browser setup

If you need screenshots of an Angular app or its pages for visual review, documentation, or an AI agent workflow, ScreenshotNeo is a website screenshot API and MCP server. It does not run Cypress assertions or replace Angular tests; it captures a page as an image or PDF. The direct API is one GET request:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the ScreenshotNeo API documentation. Cookie banners, newsletter popups, and chat widgets are removed before the shot; each step can be turned off. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents use screenshot tools. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots. Only clean shots are billed, and responses include page-verdict and billing headers. Sign up for 1,000 free screenshots a month, with no card.

10. Frequently asked questions

How do I test Angular apps with Cypress?

Install Cypress in the project, open it with npx cypress open, then set up Component Testing or E2E Testing according to the behavior you want to cover.

How do I mount an Angular component in Cypress?

Import mount from cypress/angular in a component spec and call mount(YourComponent). Add mount configuration for inputs or dependencies when the component requires them.

How do I test component inputs and output events?

Pass initial input values with componentProperties. For an output, supply an output spy such as createOutputSpy, perform the action that emits it, and assert the spy was called with the expected event.

When should I use component testing instead of E2E?

Use component testing for isolated UI states and interactions. Use E2E when the behavior depends on routes and integration across the running application. Most projects benefit from choosing tests by the risk each scope covers.

Does Cypress component testing run against production?

No. Component testing compiles and serves the test with a development server. Use E2E testing against a running application to check integrated app journeys.