mcpField
A
angular-cypress

angular-cypress

github.com/oguzhan18テスト・品質7172 回インストール30 週間前に更新
リポジトリ

angular-cypress について

Cypress を使った Angular アプリとコンポーネントのテストに関するリファレンススキルです。開発者向けにセットアップと E2E・コンポーネントテストの例を示します。

主な機能

  1. 01Cypress のセットアップコマンド
  2. 02E2E テストの例
  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、E2E、テスト、コンポーネントテスト

参考資料： Cypress • Cypress Angular

ベストプラクティス

  • Cypress をインストールします
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('[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 対応