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 方法 - text）时，我们需要使用 then 方法实现 Promise。

jQuery 中的 Promise 实现

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

// 测试套件
describe('Tutorialspoint', function () {
    // it 函数用于识别测试
    it('Scenario 1', function (){
        // 测试步骤用于启动 URL
        cy.visit("https://accounts.google.com")
        // 使用 then() 实现 Promise
        cy.get('h1#headingText').find('span').then(function(e){
            //方法 text 获取文本内容
            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')，其中 #txt 是定位器。

jQuery 方法的实现

下面给出了使用 jQuery 在 Cypress 中识别和执行测试的命令 −

// 测试套件
describe('Tutorialspoint', function () {
    // it 函数用于识别测试
    it('Scenario 1', function (){
        // 测试步骤用于启动 URL
        cy.visit("https://accounts.google.com")
        // 使用 Cypress.$ 访问 Web 元素
        cy.request('/').get('h1#headingText').then(function(e){
            Cypress.$(e).find('span')
            const t = e.text()
            cy.log(t)
        })
    })
})

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

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