и

Создайте утверждение. Утверждения автоматически повторяются до тех пор, пока они не пройдут или не истечёт время ожидания.

Псевдоним .should()

Примечание: .and() предполагает, что вы уже знакомы с основными концепциями, такими как утверждения

Синтаксис

.and(chainers)
.and(chainers, value)
.and(chainers, method, value)
.and(callbackFn)

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

Правильное использование

cy.get('.err').should('be.empty').and('be.hidden') // Assert '.err' is empty & hidden
cy.contains('Login').and('be.visible') // Assert el is visible
cy.wrap({ foo: 'bar' })
  .should('have.property', 'foo') // Assert 'foo' property exists
  .and('eq', 'bar') // Assert 'foo' property is 'bar'

Неправильное использование

cy.and('eq', '42') // Should not be chained off 'cy'

Аргументы

chainers (Строка)

Любой допустимый chainers, который поступает из Chai или Chai-jQuery или Sinon-Chai.

value (Строка)

Значение для проверки с помощью chainers.

method (Строка)

Метод, который нужно вызвать для chainers.

callbackFn (Функция)

Передайте функцию, которая может содержать любое количество явных утверждений в ней. Всё, что было передано в функцию, возвращается.

Возвращаемые значения

В большинстве случаев .and() возвращает тот же объект, который был передан ему от предыдущей команды.

cy.get('nav') // yields <nav>
  .should('be.visible') // yields <nav>
  .and('have.class', 'open') // yields <nav>

Однако некоторые chainers изменяют объект. В примере ниже, .and() возвращает строку sans-serif, потому что chainers have.css, 'font-family' изменяет объект.

cy.get('nav') // yields <nav>
  .should('be.visible') // yields <nav>
  .and('have.css', 'font-family') // yields 'sans-serif'
  .and('match', /serif/) // yields 'sans-serif'

Примеры

Chainers

Цепочка утверждений над одним и тем же объектом

cy.get('button').should('have.class', 'active').and('not.be.disabled')

Значение

Цепочка утверждений, когда возвращаемые значения изменяются

<!-- App Code -->
<ul>
  <li>
    <a href="users/123/edit">Edit User</a>
  </li>
</ul>

cy.get('a')
  .should('contain', 'Edit User') // yields <a>
  .and('have.attr', 'href') // yields string value of href
  .and('match', /users/) // yields string value of href
  .and('not.include', '#') // yields string value of href

Метод и значение

Утвердить, что href равен '/users'

cy.get('#header a')
  .should('have.class', 'active')
  .and('have.attr', 'href', '/users')

Функция

Проверить длину, содержание и классы из нескольких `<p>`

Передача функции в .and() позволяет утверждать относительно возвращаемого объекта. Это даёт возможность изменять то, что вы хотите проверить.

Убедитесь, что в вашей функции обратного вызова нет кода, имеющего побочные эффекты.

Функция обратного вызова будет повторяться снова и снова, пока внутри неё не перестанут выбрасываться утверждения.

<div>
  <p class="text-primary">Hello World</p>
  <p class="text-danger">You have an error</p>
  <p class="text-default">Try again later</p>
</div>

cy.get('p')
  .should('not.be.empty')
  .and(($p) => {
    // should have found 3 elements
    expect($p).to.have.length(3)

    // make sure the first contains some text content
    expect($p.first()).to.contain('Hello World')

    // use jquery's map to grab all of their classes
    // jquery's map returns a new jquery object
    const classes = $p.map((i, el) => {
      return Cypress.$(el).attr('class')
    })

    // call classes.get() to make this a plain array
    expect(classes.get()).to.deep.eq([
      'text-primary',
      'text-danger',
      'text-default',
    ])
  })

Использование функции обратного вызова не изменит объект

Примечания

Chai

Сходства с Chai

Если вы работали с Chai раньше, вы увидите, что .and() использует тот же синтаксис флюэнтных утверждений.

Рассмотрим этот явный пример утверждения:

expect({ foo: 'bar' }).to.have.property('foo').and.eq('bar')

.and() воспроизводит это поведение утверждения.

Объекты

Как узнать, какие утверждения изменяют объект, а какие нет?

Chainers, которые поступают из Chai или Chai-jQuery, всегда документируют то, что они возвращают.

Использование функции обратного вызова не изменит возвращаемое значение

Всякий раз, когда вы используете функцию обратного вызова, её возвращаемое значение игнорируется. Cypress всегда заставляет команду возвращать значение с предыдущей команды cy (которое в примере ниже — <button>)

cy.get('button')
  .should('be.active')
  .and(($button) => {
    expect({ foo: 'bar' }).to.deep.eq({ foo: 'bar' })

    return { foo: 'bar' } // return is ignored, .and() yields <button>
  })
  .then(($button) => {
    // do anything we want with <button>
  })

Различия

В чём разница между `.then()` и `.should()`/`.and()`?

Использование .then() позволяет использовать возвращаемый объект в функции обратного вызова и следует использовать, когда вам нужно изменить некоторые значения или выполнить какие-либо действия.

При использовании функции обратного вызова с .should() или .and(), с другой стороны, существует специальная логика повторного выполнения функции обратного вызова, пока внутри неё не перестанут выбрасываться утверждения. Будьте осторожны с побочными эффектами в функции обратного вызова .should() или .and(), которые вы не хотите выполнять несколько раз.

Правила

Требования

.and() требует цепочки с предыдущей командой.

Таймауты

.and() будет продолжать повторять свои указанные утверждения, пока не истечёт время ожидания.

cy.get('input', {timeout: 10000}).should('have.value', '10').and('have.class', 'error')
                         ↲
  // timeout here will be passed down to the '.and()'
  // and it will retry for up to 10 secs

cy.get('input', {timeout: 10000}).should('have.value', 'US').and(($input) => {
                         ↲
  // timeout here will be passed down to the '.and()'
  // unless an assertion throws earlier,
  // ALL of the assertions will retry for up to 10 secs
  expect($input).to.not.be('disabled')
  expect($input).to.not.have.class('error')
})

Журнал команд

Цепочка утверждений над одним и тем же объектом

cy.get('.list')
  .find('input[type="checkbox"]')
  .should('be.checked')
  .and('not.be.disabled')

Вышеперечисленные команды будут отображаться в Журнале команд как:

При нажатии на assert в журнале команд, консоль выведет следующее:

и