or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

angular-testing.mdcli-integration.mdconfiguration.mdcustom-frameworks.mdindex.mdinteractive-testing.mdprogrammatic-execution.mdreact-testing.mdvue-testing.md
tile.json

tessl/npm-cypress

Cypress is a next generation front end testing tool built for the modern web

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/cypress@15.1.x

To install, run

npx @tessl/cli install tessl/npm-cypress@15.1.0

index.mddocs/

Cypress

Cypress is a comprehensive end-to-end testing framework designed specifically for modern web applications, providing developers with fast, reliable, and easy-to-use testing capabilities that run directly in the browser. The framework offers a complete testing solution including real-time reloading, time-travel debugging, automatic waiting, and network traffic control, enabling developers to write, debug, and run tests for anything that runs in a browser.

Package Information

  • Package Name: cypress
  • Package Type: npm
  • Language: JavaScript with TypeScript support
  • Installation: npm install cypress --save-dev

Core Imports

// ES Modules
import cypress from 'cypress';
// or named imports
import { run, open, defineConfig } from 'cypress';
// CommonJS
const cypress = require('cypress');
// or destructured
const { run, open, defineConfig } = require('cypress');

Basic Usage

// Run tests programmatically
const cypress = require('cypress');

// Run tests headlessly
cypress.run({
  spec: 'cypress/e2e/**/*.cy.js',
  browser: 'chrome'
}).then((results) => {
  if (results.status === 'failed') {
    console.error('Test run failed');
    process.exit(results.failures);
  }
  console.log('Tests completed successfully');
});

// Open Cypress GUI
cypress.open({
  testingType: 'e2e'
});

Architecture

Cypress is built around several key components:

  • Core Module API: Programmatic interface for running tests and opening GUI (cypress.run, cypress.open)
  • Configuration System: Type-safe configuration with defineConfig() helper
  • CLI Interface: Command-line tools for test execution and project management
  • Component Testing: Framework-specific mounting utilities for React, Vue, Angular, and Svelte
  • Browser Integration: Direct browser control with real-time debugging capabilities
  • Test Runner: Built-in test execution engine with automatic waiting and retry logic

Capabilities

Programmatic Test Execution

Core programmatic API for running Cypress tests headlessly in CI/CD pipelines and automated workflows.

function run(options?: Partial<CypressRunOptions>): Promise<CypressRunResult | CypressFailedRunResult>;

interface CypressRunOptions {
  browser: string;
  spec: string;
  config: ConfigOptions;
  env: object;
  headed: boolean;
  headless: boolean;
  record: boolean;
  parallel: boolean;
  port: number;
  quiet: boolean;
  reporter: string;
  reporterOptions: any;
}

Programmatic Execution

Interactive Test Development

GUI-based test development and debugging interface for creating and maintaining tests interactively.

function open(options?: Partial<CypressOpenOptions>): Promise<void>;

interface CypressOpenOptions {
  browser: string;
  detached: boolean;
  global: boolean;
  port: number;
  config: ConfigOptions;
  env: object;
  project: string;
  testingType: 'e2e' | 'component';
}

Interactive Testing

Configuration Management

Type-safe configuration system with validation and autocomplete support for IDE integration.

function defineConfig<ComponentDevServerOpts = any>(
  config: ConfigOptions<ComponentDevServerOpts>
): ConfigOptions;

interface ConfigOptions {
  baseUrl?: string;
  defaultCommandTimeout?: number;
  requestTimeout?: number;
  responseTimeout?: number;
  viewportWidth?: number;
  viewportHeight?: number;
  video?: boolean;
  screenshotOnRunFailure?: boolean;
  chromeWebSecurity?: boolean;
  e2e?: E2EOptions;
  component?: ComponentOptions;
}

Configuration

CLI Argument Parsing

Utilities for parsing command-line arguments in the same way Cypress CLI processes them.

interface CypressCliParser {
  parseRunArguments(args: string[]): Promise<Partial<CypressRunOptions>>;
}

// Access via cypress.cli
const cli: CypressCliParser;

CLI Integration

React Component Testing

Mount and test React components in isolation with full Cypress testing capabilities.

// From cypress/react
function mount(
  jsx: React.JSX.Element,
  options?: MountOptions
): Cypress.Chainable<MountReturn>;

interface MountOptions {
  log?: boolean;
  strict?: boolean;
}

interface MountReturn {
  component: React.ReactNode;
  rerender: (component: React.ReactNode) => Cypress.Chainable<MountReturn>;
}

React Component Testing

Vue Component Testing

Mount and test Vue components with Vue Test Utils integration and Cypress commands.

// From cypress/vue
function mount<T>(
  component: T,
  options?: VueMountOptions<T>
): Cypress.Chainable<VueMountReturn<T>>;

interface VueMountReturn<T> {
  wrapper: VueWrapper<ComponentPublicInstance>;
  component: ComponentPublicInstance;
}

// Re-exported Vue Test Utils (excluding mount/shallowMount)
const VueTestUtils: VueTestUtilsExports;

Vue Component Testing

Angular Component Testing

Mount and test Angular components with TestBed integration and Cypress testing commands.

// From cypress/angular
function mount<T>(
  component: Type<T>,
  options?: AngularMountOptions<T>
): Cypress.Chainable<AngularMountReturn<T>>;

interface AngularMountReturn<T> {
  fixture: ComponentFixture<T>;
  component: T;
}

Angular Component Testing

Svelte Component Testing

Mount and test Svelte components with Svelte-specific testing capabilities.

// From cypress/svelte  
function mount(
  component: SvelteComponent,
  options?: SvelteMountOptions
): Cypress.Chainable<SvelteMountReturn>;

Note: Svelte component testing follows similar patterns to other framework integrations. Refer to React, Vue, and Angular examples for general component testing concepts.

Component Framework Definition

System for defining custom component testing frameworks beyond the built-in React, Vue, and Angular support.

function defineComponentFramework(
  config: ThirdPartyComponentFrameworkDefinition
): ThirdPartyComponentFrameworkDefinition;

interface ThirdPartyComponentFrameworkDefinition {
  type: string;
  name: string;
  supportedBundlers: string[];
  detectors: FrameworkDetector[];
  dependencies: (installer: DependencyInstaller) => PackageManagerType[];
}

Custom Component Frameworks

Types

// Test run results
interface CypressRunResult {
  browserName: string;
  browserVersion: string;
  cypressVersion: string;
  startedTestsAt: string;
  endedTestsAt: string;
  totalDuration: number;
  totalTests: number;
  totalPassed: number;
  totalFailed: number;
  totalPending: number;
  totalSkipped: number;
  runs: RunResult[];
  runUrl?: string;
}

interface CypressFailedRunResult {
  status: 'failed';
  failures: number;
  message: string;
}

// Individual spec results
interface RunResult {
  spec: SpecResult;
  stats: TestStats;
  tests: TestResult[];
  screenshots: ScreenshotInformation[];
  video: string | null;
  error: string | null;
}

interface TestResult {
  title: string[];
  state: string;
  duration: number;
  displayError: string | null;
  attempts: AttemptResult[];
}

// Configuration types
interface ConfigOptions {
  baseUrl?: string;
  defaultCommandTimeout?: number;
  requestTimeout?: number;
  responseTimeout?: number;
  viewportWidth?: number;
  viewportHeight?: number;
  video?: boolean;
  screenshotOnRunFailure?: boolean;
  chromeWebSecurity?: boolean;
  e2e?: E2EOptions;
  component?: ComponentOptions;
}

interface E2EOptions {
  baseUrl?: string;
  specPattern?: string;
  excludeSpecPattern?: string;
  supportFile?: string;
  fixturesFolder?: string;
  setupNodeEvents?: (on: PluginEvents, config: PluginConfigOptions) => void;
}

interface ComponentOptions {
  specPattern?: string;
  excludeSpecPattern?: string;
  supportFile?: string;
  indexHtmlFile?: string;
  devServer: DevServerOptions;
}