关于Cypress.Promise、cy.wrap与异步处理的困惑求助

先看你提供的代码：

test.js

it('',function(){
        cy.visit("https://www.simplyrecipes.com/")
        new SRHomePage().getHeroComponentTitle2().then(title => {
           cy.log(title);
        });
    });

SRHomePage.js

export class SRHomePage{
    getHeroComponentTitle2(){
        let title = '';
         cy.get('.showcase__hero .card__title').then($title => {
            title  = $title.text().trim()
        });

        return new Cypress.Promise(resolve => {
            cy.wrap('').then(() => resolve(title))})
    }
}

为什么直接resolve(title)会失败？ #

Cypress所有cy.开头的命令都是异步且加入命令队列的，不会立即执行。当你直接写：

return new Cypress.Promise(resolve => resolve(title))

这个Promise会在函数执行到这里时立刻resolve，而此时cy.get('.showcase__hero .card__title')还在命令队列里等待执行，title还是初始的空字符串。所以test.js里的.then(title => cy.log(title))会先拿到空值并打印，之后队列里的cy.get才会执行去获取标题，这就导致了「访问页面→打印→获取元素」的错误顺序。

为什么加了cy.wrap就能成功？ #

cy.wrap('')也是一个Cypress命令，会被加入到命令队列中，并且排在之前的cy.get命令之后。Cypress的命令队列是顺序执行的：

1. 先执行cy.visit加载页面
2. 执行cy.get获取元素并把标题赋值给title
3. 执行cy.wrap('')的回调函数，此时title已经有了正确的值，再调用resolve(title)
4. 最后test.js里的.then拿到正确标题并打印

这就形成了「访问页面→获取元素→执行cy.wrap→打印标题」的正确顺序，本质是利用Cypress命令队列的顺序性，确保resolve动作在cy.get执行完成之后才触发。

更简洁的写法提示 #

其实不需要手动创建Cypress.Promise，直接返回cy.get的链式调用即可，更符合Cypress的异步风格：

export class SRHomePage{
    getHeroComponentTitle2(){
        return cy.get('.showcase__hero .card__title')
            .then($title => $title.text().trim())
    }
}

这样test.js里的.then会自动等待cy.get执行完成，直接拿到处理后的标题，逻辑更清晰。

内容的提问来源于stack exchange，提问作者vân vũ thị quỳnh