如何使用cypress检查元素内部文本的相等性？

Question

我有一个div，其中有另一个div，我想检查div内部文本的相等性。我已经想出如何使用invoke（'text'）函数来做到这一点，但是我想知道这是否是最好的方法。所以我的问题是：如何使用cypress检查元素的内部文本是否相等？

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')
    });
});    

请忽略《星球大战参考》！

Answer 1

我认为您可以简化此过程。

假设您有如下所示的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');
  });

Answer 2

您可以检查字符串是否包含在 div 内的某处：

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

或者，如果您需要确保 div只包含指定的文本而不包含其他任何内容，您可以在这个额外的断言上添加标签：

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');
        });

Answer 3

我认为目前这是最好的选择，因为它不检查包含。我希望用更短的代码来做到这一点。

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')
    });
});