web-dev-qa-db-ja.com

サイプレスを使用して要素の内部テキストの等価性をどのように確認しますか？

内部に別のdivがあるdivがあり、そのdivの内部テキストの等価性を確認したい。 invoke（ 'text'）関数を使用してそれを行う方法を考え出しましたが、それが最良の方法かどうか疑問に思っています。だから私の質問は：サイプレスを使用して要素の内部テキストの等価性をどのようにチェックするのですか？

it('the channel name should contain be Anakin Skywaler', () => {
    //This works but can we be more specific with our selector
    cy.get("[data-test-id='Skywalker,Anakin']").should('contain', 'Skywalker,Anakin');
})

it('the channel name should equal Skywalker,Anakin', () => {

    cy.get("[data-test-id='Skywalker,Anakin']").find('.channel-name').invoke('text').then((text) => {
        expect(text.trim()).equal('Skywalker,Anakin')
    });
});

スターウォーリファレンスを無視してください！

cypress
8
Maccurt

これは簡単にできると思います。

次のようなHTMLがあると仮定します。

<div data-test-id="Skywalker,Anakin">
  <div class=".channel-name">Skywalker,Anakin</div>
</div>

次のようにアサートを記述できます。

cy.get('[data-test-id="Skywalker,Anakin"]')
      .should('have.text', 'Skywalker,Anakin');

これは私に合格し、HTMLをSkywalker、Anakin 1に変更すると、予想どおりに失敗しました。サイプレスはhave.textを使用して、レンダリングされたものを見るため、マークアップを気にせず、結果が何であるかを確認します。

これはトリミングには機能しませんでした。トリミングを行うにはコールバックを追加する必要があります。

cy.get('[data-test-id="Skywalker,Anakin"]')
  .should(($div) => {
    expect($div.text().trim()).equal('Skywalker,Anakin');
  });
11
TDDdev

文字列がdiv内のどこかに含まれているかどうかを確認できます。

cy.get("[data-test-id='Skywalker,Anakin']").contains('Skywalker,Anakin');

または、divにonlyが指定されたテキストのみを含むことを確認する必要がある場合は、この追加のアサーションにタグを付けることができます。

cy.get("[data-test-id='Skywalker,Anakin']").contains('Skywalker,Anakin').should((elem) => {
    expect(elem.text()).to.equal('Skywalker,Anakin');
});

説明：

// Get the data
cy.get("[data-test-id='Skywalker,Anakin']")

        // Get the child or children of the previous command that
        // contain the text - this command fails if no child
        // element is found containing the given text
        .contains('Skywalker,Anakin');

// These two lines are explained above
cy.get("[data-test-id='Skywalker,Anakin']")
        .contains('Skywalker,Anakin')

        // Like a .then(), except the contents are retried until
        // all contained assertions are successful or until the
        // command times out
        .should((elem) => {

            // Expect the element's text to exactly equal the
            // string, not just contain it
            expect(elem.text()).to.equal('Skywalker,Anakin');
        });
3
Joshua Wade

私は、これが含まれているかどうかをチェックしないので、現在これが最良のオプションだと思う。これを行うための短いコードを期待していました。

it('the channel name should equal Skywalker,Anakin', () => {

    cy.get("[data-test-id='Skywalker,Anakin']").find('.channel-name').invoke('text').then((text) => {
        expect(text.trim()).equal('Skywalker,Anakin')
    });
});
0
Maccurt

次に、要素内の文字列の完全一致または部分一致を確認する方法を示します。

_//matches exact text of result string
cy.get("[data-test-id='Skywalker,Anakin']").should('have.text', 'Skywalker,Anakin');

//matches partial text of result string
cy.get("[data-test-id='Skywalker,Anakin']")
.text()
.then(value => {
        cy.log("Text value is :", value);
        expect(value).to.include('Anakin');
});
_

text()は、次のように_command.js_ファイルで定義されます。

_Cypress.Commands.add("text", { prevSubject: true }, (subject, options) => {
  return subject.text();
});
_
0
kushal.8