Cypress Commandsにおける`within`コマンドの詳細解説

within コマンドの構文

within(selector, callback)

引数

callback: 対象要素内で行う操作を定義するコールバック関数
selector: 対象となる要素を指定するセレクター

使い方

within コマンドを使用して、対象となる要素を指定します。
コールバック関数内で、その要素内で行いたい操作を Cypress コマンドを用いて記述します。

例

cy.get('#my-modal').within(() => {
  cy.get('input[type="text"]').type('Cypress');
  cy.get('button[type="submit"]').click();
});

この例では、#my-modal 要素内でのみ操作を実行します。要素内では、input[type="text"] 要素に "Cypress" と入力し、button[type="submit"] 要素をクリックします。

within コマンドの利点

不要な要素の影響を受けずにテストできる
特定の領域に焦点を絞ってテストできる
テスト対象のアプリケーションの構造を明確化できる

ネストされたコンポーネント内の要素を操作する
特定のタブ内の要素を操作する
ドロップダウンメニュー内のオプションを選択する
モーダルダイアログ内の要素を操作する

cy.get('form').within(() => {
  cy.get('input[name="username"]').type('johndoe');
  cy.get('input[name="password"]').type('password123');
  cy.get('button[type="submit"]').click();
});

この例では、form 要素内でのみ操作を実行します。要素内では、input[name="username"] 要素に "johndoe" と入力し、input[name="password"] 要素に "password123" と入力し、button[type="submit"] 要素をクリックします。

モーダルダイアログ内の要素を操作する

cy.get('#open-modal-button').click();
cy.get('.modal').within(() => {
  cy.get('input[type="text"]').type('Cypress');
  cy.get('button[type="submit"]').click();
});

この例では、まず #open-modal-button 要素をクリックしてモーダルダイアログを開きます。次に、.modal 要素内でのみ操作を実行します。要素内では、input[type="text"] 要素に "Cypress" と入力し、button[type="submit"] 要素をクリックします。

ドロップダウンメニュー内のオプションを選択する

cy.get('select[name="country"]').within(() => {
  cy.get('option[value="US"]').select();
});

この例では、select[name="country"] 要素内でのみ操作を実行します。要素内では、option[value="US"] オプションを選択し、選択された国を "US" に設定します。

特定のタブ内の要素を操作する

cy.get('.tabs').within(() => {
  cy.get('.tab-link[data-tab="profile"]').click();
  cy.get('input[name="email"]').type('johndoe@example.com');
});

この例では、.tabs 要素内でのみ操作を実行します。要素内では、.tab-link[data-tab="profile"] 要素をクリックして "profile" タブに切り替え、input[name="email"] 要素に "johndoe@example.com" と入力します。

cy.get('.parent-component').within(() => {
  cy.get('.child-component').within(() => {
    cy.get('input[type="text"]').type('Cypress');
  });
});

直接セレクターを使用する

最も単純な代替方法は、直接セレクターを使用して対象要素を指定することです。この方法は、withinコマンドよりも簡潔で読みやすいコードになります。

// withinコマンドを使用する場合
cy.get('#my-modal').within(() => {
  cy.get('input[type="text"]').type('Cypress');
  cy.get('button[type="submit"]').click();
});

// 直接セレクターを使用する場合
cy.get('#my-modal input[type="text"]').type('Cypress');
cy.get('#my-modal button[type="submit"]').click();

findコマンドを使用する

findコマンドは、対象要素内の要素を検索するために使用できます。この方法は、withinコマンドよりも柔軟性があり、より複雑な操作を実行する場合に役立ちます。

cy.get('#my-modal').find('input[type="text"]').type('Cypress');
cy.get('#my-modal').find('button[type="submit"]').click();

カスタムコマンドを作成する

繰り返し使用する操作をカプセル化するために、カスタムコマンドを作成することができます。この方法は、コードをよりモジュール化し、テストをより読みやすくすることができます。

// カスタムコマンドを作成
Cypress.Commands.add('fillAndSubmitForm', (selector) => {
  cy.get(selector).within(() => {
    cy.get('input[type="text"]').type('Cypress');
    cy.get('button[type="submit"]').click();
  });
});

// カスタムコマンドを使用
cy.fillAndSubmitForm('#my-modal');

jQueryを使用する

CypressはjQueryを使用することができます。jQueryを使用して、DOMを操作し、複雑な操作を実行することができます。

cy.get('#my-modal').then(($modal) => {
  $modal.find('input[type="text"]').val('Cypress');
  $modal.find('button[type="submit"]').click();
});

最適な代替方法の選択

どの代替方法が最適かは、状況によって異なります。シンプルな操作の場合は、直接セレクターを使用するのが最善です。より複雑な操作の場合は、findコマンドまたはカスタムコマンドを使用するとよいでしょう。jQueryは、さらに複雑な操作が必要な場合に役立ちます。

代替方法の方が適切な場合があることを常に念頭に置いてください。
withinコマンドを使用しすぎると、テストが読みづらくなる可能性があります。
withinコマンドは、テスト対象のアプリケーションの構造が複雑な場合にのみ使用してください。