Почему Cypress.io использует селектор типа утверждения строки, каковы альтернативы?

Question

Мне нужен инструмент тестирования e2e, среди тех, что я пробовал, я думаю, что Cypress.io кажется лучшим.

Чего я не понимаю, так это почему они используют строковые селекторы в предложении should (), как это(Мне нужно, чтобы у наших тестировщиков было как можно более легкое время, и я не думаю, что подверженные ошибкам строки - это путь):

cy.get('.trigger-input-range')
  .invoke('val', 25)
  .trigger('change')
  .get('input[type=range]').siblings('p')
  .should('have.text', '25')

Мне удалось успешно использовать что-то вроде этого:

cy.get('.trigger-input-range')
  .invoke('val', 25)
  .trigger('change')
  .get('input[type=range]').siblings('p')
  .should((e) => {
    expect(e).to.have.text('25')
  });

это, по крайней мере, дает мне некоторую безопасность с IDE, предлагающим некоторые опции, такие как "have.text", "have.value" (я планирую использовать Typescript для этих тестов, поэтому любые предложения, которые могут помочь,Добро пожаловать. Есть ли у этого побочный эффект? Если нет, я не понимаю их с помощью этих селекторов строк.

Есть ли другой вариант? Могу ли я как-то изменить Cypress, чтобы иметь что-то вроде этого?

cy.get('.trigger-input-range')
  .invoke('val', 25)
  .trigger('change')
  .get('input[type=range]').siblings('p')
  .shouldHaveText('25')
  .shouldHaveValue('25');

Answer 1

.should('have.text', '25');

аналогично этому:

.should(elem => {
    expect(elem).to.have.text('25');
});

Это просто два способа сделать одно и то же.Более короткий - это встроенный способ использования утверждения Чая из более длинного, но он даст тот же результат.

Если вам нужна такая команда, как .shouldHaveText('25'), вам следуетполучить его, создав собственную команду :

Cypress.Commands.add('shouldHaveText', {
  prevSubject: true
}, (subject, expectedText) => {
    // Wrap the subject and use .should() to take advantage of automatic retries
    cy.wrap(subject).should((elem) => {
        expect(elem).to.have.text(expectedText);
    });
});

Использование:

cy.get('.someClass').shouldHaveText('25');