mcpField
A
angular-cypress

angular-cypress

github.com/oguzhan18测试与质量7172 次安装30 周前更新
代码仓库

关于 angular-cypress

使用 Cypress 测试 Angular 应用和组件的参考技能，面向开发者提供安装指引，以及端到端测试和组件测试示例。

主要功能

  1. 01Cypress 安装命令
  2. 02端到端测试示例
  3. 03Angular 组件测试示例
  4. 04挂载组件并传入属性

适用场景

  1. 01测试页面导航和交互
  2. 02验证表单输入行为
  3. 03检查组件渲染结果

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-cypress

安装后在 Claude Code 中输入/angular-cypress确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

详细介绍

Angular + Cypress

**版本：**Cypress 13.x（2025） **标签：**Cypress、端到端测试、测试、组件测试

参考资料：Cypress • Cypress Angular

最佳实践

  • 安装 Cypress
npm install -D cypress @cypress/angular cypress-visual-regression
npx cypress open
  • 编写端到端测试
describe('My First Test', () => {
  it('visits the kitchen sink', () => {
    cy.visit('/');
    cy.contains('type').click();
    cy.get('.action-email').type('[email protected]');
    cy.get('.action-email').should('have.value', '[email protected]');
  });
});
  • 编写组件测试
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');
  });
});

评论

支持 Markdown