DEV Community

Dennis Zhang
Dennis Zhang

Posted on • Updated on

cypress的常用事件

元素事件

cy.get('select').select('Option 1');
cy.get('input').type('Hello, World!');
cy.get('input').clear();
// 输入值后按 Enter 键
cy.get('input').type('Hello, World!{enter}');
cy.get('input[type="checkbox"]').check();
cy.get('input[type="checkbox"]').uncheck();
// 单选按钮
cy.get('input[type="radio"]').check('radioValue');
// 触发自定义事件
cy.get('input').trigger('mouseover');
//  .contains() 方法查找包含特定文本的元素
cy.contains('Submit').click();
Enter fullscreen mode Exit fullscreen mode

iframe 内部元素

 // 安装插件
npm install -D cypress-iframe
// 在 cypress/support/commands.js 中引入插件
import 'cypress-iframe';
// 访问 iframe 内的元素:
// 加载 iframe 内容
cy.frameLoaded('iframeSelector');

// 访问 iframe 内的元素并进行操作,注意要用find,不能使用get
cy.iframe('iframeSelector').find('elementSelector').click();

Enter fullscreen mode Exit fullscreen mode

等待

cy.wait(5000); // 等待5秒
 //.should() 等待元素出现
cy.get('elementSelector').should('be.visible').click();
// 等待消失
cy.get('loadingIndicator').should('not.exist');

//等待网络请求完成
// 监控网络请求
cy.intercept('GET', '/api/data').as('getData');

// 执行某个操作触发网络请求
cy.get('triggerButton').click();

// 等待请求完成
cy.wait('@getData');

// 获取元素
cy.get('elementSelector').click();

// 使用 .then() 方法链
cy.get('elementSelector')
  .should('be.visible')
  .then(() => {
    // 页面加载完成,可以执行进一步操作
    cy.get('anotherElement').click();
  });


Enter fullscreen mode Exit fullscreen mode

Top comments (0)