web-dev-qa-db-ja.com

サイプレステスト：.contains（）はshould（ 'contain'）と同等ですか？

これは：cy.get('[name=planSelect]').contains(dummyPlan)

これと同等：cy.get('[name=planSelect]').should('contain', dummyPlan)

もしそうなら、どちらが好ましいですか？ 1つ目は暗黙のアサーションですが、私の考えでは短くてクリーンです。

フォローアップの質問：e2eテスト用の要素を選択するための最良の方法を探し回った後、 Cypress docs が推奨することがわかりましたdata-cy属性を使用します。マークアップにname属性を追加するよりも、これが優れている理由はありますか？ nameはフォームフィールドにのみ使用する必要がありますか？

e2e-testingcypress
6
redOctober13

_name=planSelect_の要素にdummyPlanが含まれていない場合、つまり、この時点でテストが失敗した場合、ヒノキテストの結果は同じになります。

それらの違いは、最初の形式では、 contains（） を使用して、実際に要素を選択しようとしていることです。cy.get（...）。contains（）の結果はこの予想されるDOM要素を生成し、次のようなメソッドのさらなる連鎖を可能にします。

_cy.get('[name=planSelect]').contains(dummyPlan).click();
_

2番目の形式では、 Chai chainer containを使用して、dummyPlanが他の要素内に存在することを確認するための明示的なアサーションを作成しています。

これは微妙な違いであり、結果は同じですが、containsの後に他のメソッドをチェーンする場合にのみ、cy.get('[name=planSelect]').contains(dummyPlan)を使用し、明示的に使用する場合は2番目の形式を使用することをお勧めします。この要素が存在することを表明します。論理的に言えば、1つ目は一般的なテストの失敗（サイプレスが存在しない要素を見つけようとした）を表し、2つ目は明示的なアサーションの失敗を表します（要素にはdummyPlanが含まれている必要がありますが、含まれていません）。

2番目の質問については、nameは有効なHTML属性であり、テストに使用すると、属性が元の関数で使用されている場合（入力フィールドに名前を付けるため）、または属性が存在する場合に混乱が生じる可能性があります。テスト目的で。ドキュメントが示唆するように_cy-name_を使用することをお勧めします。これにより、このあいまいさを回避し、この属性_cy-name_がテスト目的でのみ存在することを明確にすることができます。

さらに、状況によっては、コードを本番環境に送信する前に、コードからすべての_cy-name_を削除することを決定する場合があります（ビルドプロセス中に、 string-replace-loader などのWebpackプラグインを使用します）。コードに入力があった場合、必要な入力nameも削除するため、nameだけを使用した場合は同じことを行うことができません。

10
Guilherme Lemmi

回答

  • .contains(selector, content)は最良のセレクターです。要素の選択を再試行します[〜＃〜]および[〜＃〜]はテキストの照合を許可します（<tag>.class#id[attributes]だけでなく）

  • .should()は単なるアサーションであり、アサーションのみが再試行されます（要素の選択ではありません）

.should('exist')は、独自に指定しない限り暗黙的に示されます。これが、.should('not.exist')を許可した方法です。

正接

ブラウザはXPath1.0をサポートしています。これは、DOMツリートラバーサルに基づいて複雑なクエリを作成するための非常にクールですがあいまいな方法です。 含む 述語関数があります：

//*[         contains(normalize-space(.), 'The quick brown fox jumped over the lazy dog.') ]
   [not(.//*[contains(normalize-space(.), 'The quick brown fox jumped over the lazy dog.') ])]

これは、ドキュメントのルートから、テキストを含み、テキストを含む子孫ノードを含まないノードを検索します。コンソールでテストできます。

$x("//*[contains(normalize-space(.), 'The quick brown fox jumped over the lazy dog.')][not(.//*[contains(normalize-space(.), 'The quick brown fox jumped over the lazy dog.') ])]")
2
neaumusic