Как определить пользовательский оператор утверждения в кипарисе?

Question

В тесте на кипарис мне часто нужно проверять, равен ли текст в элементе DOM некоторому ожидаемому тесту.Но поскольку вокруг текста могут быть некоторые пробелы, я не могу просто написать:

cy.get('.cell')
  .should('have.text', 'Hello')

Вместо этого я должен написать:

cy.get('.cell')
  .then($cell => $cell.text().trim())
  .should('eq', 'Hello')

Я хочу определить пользовательское утверждениеоператор типа have.text.trimmed, позвольте мне использовать его так:

cy.get('.cell')
  .should('have.text.trimmed', 'Hello');

Но я не могу найти никакого документа на официальном сайте об этом, кто-нибудь поделится со мной каким-нибудь примером?

Answer 1

Наконец-то я нашел способ сделать это. Хотя кипарис не предоставляет такую ​​функцию, но так как кипарис использует чай, мы можем просто определить методы чай.

Примечание: невозможно определить have.text.trimmed, так как метод подтверждения text является методом chai, а не цепным методом, нет способа предоставить trimmed после него.

Но есть еще два варианта:

1. определите метод chai textTrimmed, разрешите нам использовать .should('have.textTrimmed', 'sometext'), что является предпочтительным, поскольку мы можем определить пользовательское сообщение подтверждения и без хитрого взлома экземпляров JQuery.

2. определите цепочечный метод Чая trimmed, разрешите использовать .should('have.trimmed.text', 'sometext'), который, кажется, работает, но утверждение определяется методом Чаи text, что может привести к путанице. Не рекомендуется.

have.textTrimmed

Это машинопись:

chai.Assertion.addMethod('textTrimmed', function (expectedString: string) {
  const $element = this._obj;

  new chai.Assertion($element).to.be.exist;

  const actual = $element.text().trim();
  const expected = expectedString.trim();
  this.assert(
    actual === expected
    , 'expected #{this} to have text #{exp} after trimmed, but the text was #{act} after trimmed'
    , 'expected #{this} not to have text #{exp} after trimmed'
    , expected
    , actual
  );
});

Введите код в cypress/support/index.js, чтобы убедиться, что он запущен перед тестами.

Вы можете посмотреть полную демонстрацию здесь: https://github.com/freewind-demos/typescript-cypress-add-custom-assertion-method-textTrimmed-demo/blob/master/cypress/support/textTrimmed.ts

have.trimmed.text

chai.use((chai, utils) => {

  chai.Assertion.addChainableMethod("trimmed", () => {
  }, function () {
    const obj = utils.flag(this, 'object')

    const oldText = obj.text.bind(obj);
    obj.text = () => {
      return oldText().trim()
    }
  });
})

Как я уже сказал, это не рекомендуется, так как хитрый взлом и неясное сообщение о подтверждении.

Вы также можете увидеть полную демонстрацию здесь: https://github.com/freewind-demos/typescript-cypress-custom-operator-have-trimmed-text-demo/blob/master/cypress/support/index.ts

Answer 2

В настоящее время это невозможно из коробки для кипариса. Запрос функции https://github.com/cypress-io/cypress/issues/630

Но вы можете обойти это, добавив пользовательские команды в support / commands.js и используйте эти команды в своем тестовом сценарии. То, что вы в итоге получите в command.js:

Cypress.Commands.add('haveText', function (text) {
  cy.get('.cell')
  .then($cell => $cell.text().trim())
  .should('eq', text)
})

В тестовом сценарии вы получите:

cy.haveText('Hello')

Вместо использования trim() в command.js вы также можете использовать contains(), это делает частичное совпадение, поэтому пробелы не являются проблемой (обратите внимание, что «яблочный пирог» также соответствует требованиям, если вы ищете «яблоко» , если это не проблема, вы можете использовать contains(). Commands.js будет выглядеть так:

Cypress.Commands.add('haveText', function (text) {
  cy.get('.cell')
  .should('contains', text)
})

Но что, вероятно, больше соответствует вашим требованиям, так это использование contains() в сочетании с регулярным выражением. Вам не нужны никакие скрипты в command.js, но только в тестовом скрипте вы можете использовать это:

cy.contains(/^\s*Hello\s*$/))

\s* должен соответствовать любому символу пробела ноль или более раз. ^ - начать сопоставление в начале текста $ - конец совпадения в конце текста.

Регулярное выражение не может использоваться в пределах should() достаточно печально