Cypress 简明教程

Cypress - jQuery

Cypress 不仅可以使用 get 方法来识别 Web 元素，还可以使用 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 方法 - text）时，我们需要使用 then 方法实现 Promise。

Promise Implementation in jQuery

以下是 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.

Implementation of jQuery methods

以下是使用 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 元素，我们可以验证测试，如下所示——

implementation of jquery methods

日志消息——登录——是从 Cypress 中的 cy.log 命令获得的。