如何在 Cypress 中获得 JQuery 对象的实例？

在使用 Cypress 进行前端自动化测试时，经常需要使用 JQuery 操作 DOM 元素。但是，在 Cypress 中需要使用 cy.get() 方法来获取元素，而不能直接使用 $() 获取 JQuery 对象的实例。那么，如何在 Cypress 中获得 JQuery 对象的实例呢？

方法一：使用 Cypress.$()

Cypress 中提供了 Cypress.$() 方法，可以获取 JQuery 对象的实例。下面是使用方法：

cy.get('selector').then(($el) => {
  const $jquery = Cypress.$($el);
  // 使用 $jquery 操作元素
})

其中，cy.get() 方法获取到的 $el 是一个 jQuery 对象，并不是 DOM 元素。因此，需要使用 Cypress.$() 将 $el 转换成 JQuery 对象的实例。

方法二：使用 cypress-real-events

另外，也可以使用 cypress-real-events 插件，它可以模拟真实的浏览器事件，并且直接返回 JQuery 对象的实例。下面是使用方法：

安装：

npm install cypress-real-events --save-dev

使用：

import { realClick } from 'cypress-real-events';

cy.get('selector').then($el => {
  realClick($el);
   // 使用 $el 操作元素
});

需要注意的是，使用该插件时需要引入 cy.realEvents() 方法，例如：

import { realClick } from 'cypress-real-events';

cy.get('selector').then(($el) => {
  cy.realEvents($el);
  realClick($el);
  // 使用 $el 操作元素
});

总结

在 Cypress 中获取 JQuery 对象的实例，可以使用 Cypress.$() 或者 cypress-real-events 插件。需要注意的是，在获取到 JQuery 对象后，要使用 jQuery API 操作元素，而不是使用 Cypress API。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fad581f6b2d6eab31a1b73