angular-cypress

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Angular + Cypress

Version: Cypress 13.x (2025) Tags: Cypress, E2E, Testing, Component Tests

References: Cypress • Cypress Angular

版本： Cypress 13.x (2025) 标签： Cypress, E2E, 测试, 组件测试

参考资料： Cypress • Cypress Angular

Best Practices

最佳实践

Install Cypress

bash

npm install -D cypress @cypress/angular cypress-visual-regression
npx cypress open

Write E2E test

describe('My First Test', () => {
  it('visits the kitchen sink', () => {
    cy.visit('/');
    cy.contains('type').click();
    cy.get('.action-email').type('fake@email.com');
    cy.get('.action-email').should('have.value', 'fake@email.com');
  });
});

Write component test

import { mount } from 'cypress/angular';
import { ButtonComponent } from './button.component';

describe('ButtonComponent', () => {
  it('renders button with text', () => {
    mount(ButtonComponent, { 
      componentProperties: { 
        label: 'Click me' 
      } 
    });
    cy.get('button').should('contain.text', 'Click me');
  });
});

安装Cypress

bash

npm install -D cypress @cypress/angular cypress-visual-regression
npx cypress open

编写E2E测试用例

describe('My First Test', () => {
  it('visits the kitchen sink', () => {
    cy.visit('/');
    cy.contains('type').click();
    cy.get('.action-email').type('fake@email.com');
    cy.get('.action-email').should('have.value', 'fake@email.com');
  });
});

编写组件测试用例

import { mount } from 'cypress/angular';
import { ButtonComponent } from './button.component';

describe('ButtonComponent', () => {
  it('renders button with text', () => {
    mount(ButtonComponent, { 
      componentProperties: { 
        label: 'Click me' 
      } 
    });
    cy.get('button').should('contain.text', 'Click me');
  });
});