DEV Community

Dennis Zhang
Dennis Zhang

Posted on

cypress异步查找元素等待找到立马下一步操作,取消等待

cypres原生

// .should()
cy.get('selector', { timeout: 30000 }) // 设置最大等待时间为30秒
  .should('be.visible') // 元素一旦可见立即继续
  .click(); // 继续执行点击操作

// .then()
cy.get('selector', { timeout: 30000 }).then(($el) => {
  cy.wrap($el).click(); // 一旦找到元素立即点击
});

Enter fullscreen mode Exit fullscreen mode

cypress-wait-until 插件

Cypress 插件,用于实现更复杂的等待逻辑。它允许你定义一个函数来检查某个条件是否满足,并在条件满足时立即执行下一步操作,而不是一直等待到超时时间结束

 // 安装
npm install -D cypress-wait-until
// or
yarn add -D cypress-wait-until

// 在 cypress/support/index.js 文件中引入 
import 'cypress-wait-until';
Enter fullscreen mode Exit fullscreen mode

等待元素可见

cy.waitUntil(fn:()=>boolean,options)

describe('My Test Suite', () => {
  it('should wait for the element to be visible and then click it', () => {
    cy.visit('https://example.com');

    // 使用 waitUntil 等待元素可见
    cy.waitUntil(() => cy.get('selector').should('be.visible'), {
      errorMsg: 'Element did not become visible', // 可选:自定义错误信息
      timeout: 30000, // 可选:设置最大等待时间为30秒
      interval: 500 // 可选:设置检查间隔时间为500毫秒
    });

    // 元素可见后立即点击
    cy.get('selector').click();
  });
});

// 使用 waitUntil 等待元素存在
() => cy.get('selector').then($el => $el.length > 0)

// 使用 waitUntil 等待元素包含特定文本
() => cy.get('selector').then($el => $el.text().includes('expected text'))

Enter fullscreen mode Exit fullscreen mode

Top comments (0)