вызов

Вызовите функцию на ранее сгенерированном объекте.

Если вы хотите получить свойство, которое не является функцией на ранее сгенерированном объекте, используйте .its().

Синтаксис

.invoke(functionName)
.invoke(options, functionName)
.invoke(functionName, args...)
.invoke(options, functionName, args...)

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

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

cy.wrap({ animate: fn }).invoke('animate') // Invoke the 'animate' function
cy.get('.modal').invoke('show') // Invoke the jQuery 'show' function

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

cy.invoke('convert') // Errors, cannot be chained off 'cy'
cy.wrap({ name: 'Jane' }).invoke('name') // Errors, 'name' is not a function

Аргументы

functionName (Строка, Число)

Имя вызываемой функции.

options (Объект)

Передайте объект параметров, чтобы изменить стандартное поведение .invoke().

args...

Дополнительные аргументы, которые будут переданы вызову функции. Количество аргументов не ограничено.

Примеры

Функция

Проверка возвращаемого значения функции

const fn = () => {
  return 'bar'
}

cy.wrap({ foo: fn }).invoke('foo').should('eq', 'bar') // true

Использование .invoke() для проверки содержимого HTML

Посмотрите наш пример рецепта, где мы используем cy.invoke('text') для тестирования содержимого HTML в разделе «Настройка вашего приложения»

Свойства, являющиеся функциями, вызываются

В примере ниже мы используем .invoke() для принудительного отображения скрытого div, чтобы мы могли взаимодействовать с его дочерними элементами.

cy.get('div.container')
  .should('be.hidden') // element is hidden
  .invoke('show') // call jquery method 'show' on the '.container'
  .should('be.visible') // element is visible now
  .find('input') // drill down into a child "input" element
  .type('Cypress is great') // and type text

Использование .invoke('show') и .invoke('trigger')

Посмотрите наш пример рецепта, где мы используем cy.invoke('show') и cy.invoke('trigger') для нажатия на элемент, который виден только при наведении курсора

Функция с аргументами

Передача конкретных аргументов в функцию

const fn = (a, b, c) => {
  return a + b + c
}

cy.wrap({ sum: fn })
  .invoke('sum', 2, 4, 6)
  .should('be.gt', 10) // true
  .and('be.lt', 20) // true

Использование cy.invoke('removeAttr', 'target') для обхода открытия новой вкладки

Посмотрите наш пример рецепта, где мы используем cy.invoke('removeAttr', 'target') для проверки нажатия на ссылку без открытия новой вкладки

Аргументы автоматически передаются функции

cy.get('img').invoke('attr', 'src').should('include', 'myLogo')

Массивы

В приведенных выше примерах объектом был объект, но cy.invoke также работает с массивами и позволяет использовать числовой индекс для выбора функции для выполнения.

const reverse = (s) => Cypress._.reverse(s)
const double = (n) => n * n

// picks function with index 1 and calls it with argument 4
cy.wrap([reverse, double]).invoke(1, 4).should('eq', 16)

Вызов асинхронной функции

В этом примере у нас есть небольшое текстовое поле ввода, и мы вызываем асинхронное действие, которое отключит это поле ввода. .invoke() затем будет ждать, пока обещание не разрешится, и только тогда продолжит выполнение, чтобы проверить, действительно ли оно отключено.

Наше поле ввода

<input type="text" name="text" data-cy="my-text-input" />

Тест Cypress с cy.invoke() ожидает выполнения обещания:

function disableElementAsync(element) {
  return new Promise((resolve) => {
    setTimeout(() => {
      element.disabled = true
      resolve()
    }, 3000)
  })
}

cy.get('[data-cy=my-text-input]').then((textElements) => {
  cy.wrap({ disableElementAsync }).invoke(
    'disableElementAsync',
    textElements[0]
  )
})

// log message appears after 3 seconds
cy.log('after invoke')

// assert UI
cy.get('[data-cy=my-text-input]').should('be.disabled')

Для полного примера использования invoke для ожидания асинхронных действий хранилища Vuex посетите рецепт: Vue + Vuex + REST

Метод jQuery

Если родительская команда возвращает элемент jQuery, мы можем вызвать метод jQuery, такой как attr, text, или val. Чтобы подтвердить, например, атрибут id элемента:

<div id="code-snippet">The code example</div>

cy.contains('The code example')
  .invoke('attr', 'id')
  .should('equal', 'code-snippet')

Подсказка: Cypress имеет встроенное утверждение Chai-jQuery для подтверждения атрибута. Приведенный выше пример можно записать просто как:

cy.contains('The code example').should('have.attr', 'id', 'code-snippet')

Примечания

Плагины сторонних разработчиков

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

Если вы используете jQuery, то элементы, обернутые jQuery, будут автоматически иметь доступные для вызова плагины сторонних разработчиков.

cy.get('input')
  .invoke('getKendoDropDownList')
  .then((dropDownList) => {
    // yields the return of $input.getKendoDropDownList()
    return dropDownList.select('apples')
  })

Мы можем переписать предыдущий пример более лаконично и добавить утверждение.

cy.get('input')
  .invoke('getKendoDropDownList')
  .invoke('select', 'apples')
  .invoke('val')
  .should('match', /apples/)

Повторные попытки

.invoke() автоматически повторно пытается вызвать указанный метод, пока возвращаемое значение не удовлетворит присоединенные утверждения. Приведенный ниже пример проходит после 1 секунды.

let message = 'hello'
const english = {
  greeting() {
    return message
  },
}

setTimeout(() => {
  message = 'bye'
}, 1000)

// initially the english.greeting() returns "hello" failing the assertion.
// .invoke('greeting') tries again and again until after 1 second
// the returned message becomes "bye" and the assertion passes
cy.wrap(english).invoke('greeting').should('equal', 'bye')

Правила

Требования

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

Утверждения

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

Истечение времени

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

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

Вызов метода jQuery show для элемента

cy.get('.connectors-div')
  .should('be.hidden')
  .invoke('show')
  .should('be.visible')

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

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

История

См. также

• .its()
• .then()
• cy.wrap()