Как вы проверяете равенство внутреннего текста элемента, используя кипарис?

Question

У меня есть 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')
    });
});    

Пожалуйста, игнорируйте ссылку Star War!

Answer 1

Ниже описано, как можно проверить точное или частичное совпадение строки в элементе:

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

Answer 2

Я думаю, что в настоящее время это лучший вариант, потому что он не проверяет содержимое.Я надеялся на более короткий кусок кода, чтобы сделать это.

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 3

Я думаю, вы можете упростить это.

Предполагая, что у вас есть 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-код на Скайуокер, Анакин 1 , он потерпел неудачу, как и следовало ожидать.Cypress использует have.text, чтобы посмотреть, что визуализируется, поэтому он не будет беспокоиться о разметке и просто увидит, каков результат.

Это не сработало для обрезки.вам нужно добавить обратный вызов, чтобы сделать обрезку.

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

Answer 4

Вы можете проверить, содержится ли строка где-то внутри 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');
        });