JQuery 与 Cypress 的区别

Cypress 可以处理 JQuery 对象并调用其方法。因此，Cypress 可以执行Cypress 和非 Cypress 命令。Cypress 本质上是异步的。它通过解析每个 Cypress 命令的 Promise 来处理。整个过程由 Cypress 内部处理，并对最终用户进行包装和隐藏。

然而，在处理 JQuery 方法时，Cypress 无法在内部解析 Promise，我们需要借助代码中的 then() 方法手动解析它们。

让我们以 text() 方法为例，它是一个非 Cypress 命令，基于 JQuery。

示例

处理 JQuery Promise 的代码实现。

// 测试套件
describe('Tutorialspoint Test', function () {
   // 测试用例
   it('Test Case1', function (){
      // 测试步骤，启动URL
      cy.visit("https://www.tutorialspoint.com/index.htm");
      // 在编辑框中输入 test
      // 断言以验证子元素的数量
      cy.get('#gs_50d > tbody > tr > td'). should('have.length',2);
      // 使用 get 和 find 方法定位元素
      cy.get('#gs_50d > tbody > tr > td'). find('input')
      //在编辑框中输入 test
      .type('Cypress');
      //使用每个命令迭代列表项
      cy.get('.mui-tabs__bar.mui-tabs__bar_1.mui-tabs__bar--justified')
      .find('li').each(($el, index, $list) => {
          // 使用 text() 方法提取文本
         const txt = $el.find('a').text();
         if ( txt.includes('Deve')){
            $el.click();
         }
      })
      //使用 then() 处理非 Cypress 内置函数的 Promise
      cy.get('mui-container > h4').then(function(heading){
          cy.log(heading.text());
      })
   });
});

运行上述代码块后，Cypress Test runner 会给出以下输出。 请注意，使用 text() 方法打印的日志是通过 then() 处理的。