Cypress はエンドツーエンドのテストのための強力なツールであり、Web アプリケーションと対話するための堅牢な組み込みコマンドのセットを提供します。ただし、すべてのプロジェクトには固有のニーズがあり、デフォルトのコマンド セットでは完全にはカバーできない場合があります。ここでカスタム コマンドが登場します。カスタム コマンドを使用すると、Cypress の機能を拡張でき、テストがより読みやすく、保守しやすくなります。この投稿では、Cypress でカスタム コマンドを作成および使用して、テスト自動化フレームワークを強化する方法を説明します。
カスタム コマンドにはいくつかの利点があります:
カスタム コマンドの作成に入る前に、Cypress をまだセットアップしていない場合はセットアップしましょう。
npm install cypress --save-dev
インストール後、Cypress を開きます:
npx cypress open
Cypress カスタム コマンドは、cypress/support/commands.js ファイルで定義されています。いくつかの例を見て、カスタム コマンドを作成して使用する方法を見てみましょう。
例 1: ログインコマンド
頻繁に操作する必要があるログイン フォームがあるとします。ログインプロセスを処理するカスタムコマンドを作成できます:
// cypress/support/commands.js Cypress.Commands.add('login', (email, password) => { cy.visit('/login'); cy.get('input[name=email]').type(email); cy.get('input[name=password]').type(password); cy.get('button[type=submit]').click(); });
これで、テストでログイン コマンドを使用できるようになります。
// cypress/integration/login.spec.js describe('Login Tests', () => { it('Should login with valid credentials', () => { cy.login('test@example.com', 'password123'); cy.url().should('include', '/dashboard'); }); });
例 2: アサーションを含むカスタム コマンド
カスタム アサーションをコマンドに追加することもできます。要素が表示されているかどうか、特定のテキストが含まれているかどうかを確認するコマンドを作成してみましょう:
// cypress/support/commands.js Cypress.Commands.add('shouldBeVisibleWithText', (selector, text) => { cy.get(selector).should('be.visible').and('contain.text', text); });
テストでの使用:
// cypress/integration/visibility.spec.js describe('Visibility Tests', () => { it('Should display welcome message', () => { cy.visit('/home'); cy.shouldBeVisibleWithText('.welcome-message', 'Welcome to the Dashboard'); }); });
Cypress のカスタム コマンドは、フレームワークの機能を拡張する強力な方法を提供し、テストをより再利用しやすく、保守しやすく、読みやすくします。一般的なアクションをカプセル化し、カスタム アサーションを追加することで、テスト自動化プロセスを合理化し、アプリケーションが完璧に動作することを保証するという最も重要なことに集中できます。
今すぐ Cypress プロジェクトにカスタム コマンドの実装を開始し、テスト ワークフローにカスタム コマンドがもたらす違いを確認してください。テストを楽しんでください!
以上がカスタム コマンドを使用して Cypress テストを強化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。