Как проверить равенство внутреннего текста элемента с помощью cypress?

Question

Как проверить равенство внутреннего текста элемента с помощью cypress?

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

    });

});

Пожалуйста, игнорируйте ссылку на звездную войну!

1437 3

Без рубрики

3 ответов:

Comments

Ничего не найдено.

TDDdev · Accepted Answer · 2018-09-21 18:11:52

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

Предполагая, что у вас есть HTML, который выглядит следующим образом:
<div data-test-id="Skywalker,Anakin">
  <div class=".channel-name">Skywalker,Anakin</div>
</div>
Вы можете написать свой assert следующим образом:
cy.get('[data-test-id="Skywalker,Anakin"]')
      .should('have.text', 'Skywalker,Anakin');
Это прошло для меня, и если я изменил HTML на Skywalker,Anakin 1 это не удалось, как вы ожидали. Кипарис используется уже.текст, чтобы посмотреть на то, что выводится, так что он не будет беспокоиться о какой-либо разметке и просто посмотреть, каков результат.

Это не сработало для обрезки. вам нужно будет добавить обратный вызов, чтобы сделать зачистка.
cy.get('[data-test-id="Skywalker,Anakin"]')
  .should(($div) => {
    expect($div.text().trim()).equal('Skywalker,Anakin');
  });

Joshua Wade · Accepted Answer · 2018-09-20 22:03:17

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

Maccurt · Accepted Answer · 2018-09-21 15:54:14

Я думаю, что в настоящее время это лучший вариант, потому что он не проверяет содержит. Я надеялся на более короткий фрагмент кода, чтобы сделать это.
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')
    });
});