Cypress - jQuery

Cypress 可以作用于 jQuery 对象及其方法以及其内部命令。虽然 Cypress 使用 get 方法来识别网页元素，但 jQuery 使用 $() 方法来达到相同目的。

在 Cypress 中，识别网页元素的命令如下：

cy.get('h1#heading')

而在 jQuery 中，识别网页元素的命令如下：

$('h1#heading')

Cypress 基于 JavaScript，其本质是异步的。但是，Cypress 命令通过内部解析 Promise 来表现得像同步一样，对最终用户隐藏了这一过程。

然而，当 Cypress 作用于 jQuery 对象及其方法时，必须专门实现 Promise 逻辑，以使流程同步（借助 then 方法）。

例如，当我们想要提取网页元素的文本内容（使用 jQuery 方法 - text）时，我们需要使用 then 方法实现 Promise。

jQuery 中的 Promise 实现

以下是 jQuery 中 Cypress Promise 实现的命令：

// test suite
describe('Tutorialspoint', function () {
// it function to identify test
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://127.0.0.1")
      // Promise implementation with then()
      cy.get('h1#headingText').find('span').then(function(e){
         //method text to obtain text content
         const t = e.text()
         expect(t).to.contains('Sign')
      })
   })
})

在 jQuery 中，如果提供的定位器与 DOM 中的任何网页元素都不匹配，则会返回一个空集合。

为了避免异常，建议验证 $() 生成的 jQuery 集合的长度。相应的命令如下：

const e = $('#txt')
if (e.length > 0){
   //proceed
}

但是，如果 DOM 中没有匹配的网页元素，Cypress 会自动进入重试模式，直到元素可用或超时，如下所示：

cy.get('#txt')
   .then((e) => { //proceed working on element })

该方法生成一个 Promise。此外，只有当网页元素与定位器匹配时，Promise 才会处于已解析状态。如果 Promise 处于拒绝状态，则 then 块中的逻辑永远不会执行。

我们可以使用以下表达式访问 Cypress 中的 jQuery 方法：

Cypress.$( '#txt'), where #txt is the locator.

jQuery 方法的实现

下面是使用 jQuery 在 Cypress 中识别和执行测试的命令：

// test suite
describe('Tutorialspoint', function () {
// it function to identify test
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://127.0.0.1")
      // access web element with Cypress.$
      cy.request('/').get('h1#headingText').then(function(e){
         Cypress.$(e).find('span')
         const t = e.text()
         cy.log(t)
      })
   })
})

当执行上述测试时，如果我们打开控制台（按 F12），并使用表达式 Cypress.$('h1#headingText').text() 查找所需的网页元素，我们可以验证我们的测试，如下所示：

日志消息“Sign –in”来自 Cypress 中的 cy.log 命令。