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

Question

我有一个包含另一个

的

，我想检查

内部文本的相等性。我已经找到了使用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')
  });
});

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

- Maccurt

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，则会失败，如您所期望的那样。 Cypress使用have.text来查看呈现出来的内容，因此它不会担心任何标记，只会看到结果是什么。

这在修剪方面没有起作用。 您需要添加回调来进行修剪。

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

- TDDdev

---

它对我有效，在我的HTML中，class channel-name是skywalker、anankin div的子孙级，它确实有效。同时，我知道我永远不会以这种方式设置data-test-id，这是我们的一些实际代码，我必须处理我所得到的内容，我更喜欢它是ID属性，值为整数字符串..但这是另一个讨论的话题.. - Maccurt

请参见：https://github.com/cypress-io/cypress/issues/3887 - Florian Falk

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

- Joshua Wade

---

我不喜欢使用contains，我认为在这种情况下应该检查它是否完全符合要求。因此，我喜欢你的第二个选项，但希望它没有包含contains。你有没有不使用contains的选项？感谢你的回答。 - Maccurt

非常感谢您清晰的解释。 - Wirat Leenavonganan

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

- Maccurt

Answer 4

我简直不敢相信我没看到一个神奇的cypress .should 匹配。同时我使用typescript cypress，它提供了很好的查找/智能提示。

• 使用should。但是，这些都是精确的文本匹配，可能有很多空格。

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

• 添加一个新的命令会更好，例如shouldHaveTrimmedText
• 我从https://github.com/cypress-io/cypress/issues/3887#issuecomment-522962482中得到了这个想法
• 但以下是设置使其工作的方法，同时支持 typescript 和类型查找

commands.ts

Cypress.Commands.add(
    'shouldHaveTrimmedText',
    {
        prevSubject: true,
    },
    (subject, equalTo) => {
        if (isNaN(equalTo)) {
            expect(subject.text().trim().replace(/  +/g, ' ')).to.eq(equalTo);
        } else {
            expect(parseInt(subject.text())).to.eq(equalTo);
        }
        return subject;
    },
);

cypress/support/index.d.ts

Cypress.Commands.add(
    'shouldHaveTrimmedText',
    {
        prevSubject: true,
    },
    (subject, equalTo) => {
        if (isNaN(equalTo)) {
            // removes double spaces and ending spaces, does not remove special characters such as tabs or \n
            expect(subject.text().trim().replace(/  +/g, ' ')).to.eq(equalTo);
        } else {
            expect(parseInt(subject.text())).to.eq(equalTo);
        }
        return subject;
    },
);

tsconfig

{
"types": ["cypress","./cypress/support"]
// or "typeRoots": ... but not both
}

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

- lastlink

Answer 5

以下是如何检查元素中字符串的精确或部分匹配方式：

//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();
});

- Kushal Bhalaik

Answer 6

简单的精确匹配

cy.get('[data-test-id=Skywalker,Anakin]')
  .invoke('text')
  .should('equal', 'Skywalker,Anakin')

- Royer Adames