Cypress - jQuery

Cypress 可以对 jQuery 对象及其方法及其内部命令进行操作。Cypress 使用 get 方法来标识 Web 元素，而 JQuery 使用 $() 方法来实现相同的目的。

在 Cypress 中，识别 Web 元素的命令如下 -

cy.get('h1#heading')

而在 jQuery 的情况下，用于识别 Web 元素的命令如下 -

$('h1#heading')

Cypress 基于具有异步性质的 JavaScript。然而，Cypress 命令通过内部解析 Promise 来同步运行，这对最终用户是隐藏的。

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

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

jQuery 中的 Promise 实现

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

// test suite
describe('Tutorialspoint', function () {
// it function to identify test
   it('Scenario 1', function (){
      // test step to launch a URL
      cy.visit("https://accounts.google.com")
      // 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 中的任何 Web 元素都不匹配，则返回一个空集合。

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

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

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

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

该方法产生一个 Promise。此外，仅当 Web 元素与定位器匹配时，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://accounts.google.com")
      // 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() 查找所需的 Web 元素，我们可以验证我们的测试，如下所示如下所示 -

日志消息 Sign –in 是从 Cypress 中的 cy.log 命令获取的。