如何在Cypress+TypeScript中按元素可见性执行不同流程？

要实现根据.app-text元素的可见性执行不同流程，你可以通过以下几种实用方式实现：

方法一：同步DOM查询（适合DOM已稳定的场景） #

直接用Cypress.$（jQuery别名）同步检查元素可见性，无需等待：

// 确保在页面加载完成后执行（比如cy.visit()回调内）
cy.then(() => {
  const $appText = Cypress.$('.app-text');
  if ($appText.is(':visible')) {
    // 元素可见时的流程
    cy.log('执行可见分支逻辑');
    cy.get('.app-text').should('be.visible').invoke('text').then(text => {
      expect(text).to.contain('预期内容');
    });
    $appText.click(); // 直接操作已获取的元素，避免重复查询
  } else {
    // 元素不可见时的流程
    cy.log('执行不可见分支逻辑');
    cy.get('.fallback-button').click();
    cy.get('.alternative-content').should('exist');
  }
});

方法二：异步等待+分支判断（适合元素可能延迟加载的场景） #

如果元素是异步渲染的，用cy.get()配合超时设置，在回调里判断可见性：

// 设置超时时间，避免无限等待（示例设为1000ms）
cy.get('.app-text', { timeout: 1000 })
  .then(($el) => {
    if ($el.is(':visible')) {
      // 可见分支
      cy.log('元素可见，执行流程A');
      $el.click();
    }
  })
  .catch(() => {
    // 元素未找到或不可见时进入此分支
    cy.log('元素不可见，执行流程B');
    cy.get('.empty-state').should('be.visible');
  });

方法三：原生DOM API精确检查（适合复杂可见性判断） #

用原生DOM API判断元素可见性，支持更精细的规则：

cy.document().then(doc => {
  const element = doc.querySelector('.app-text');
  // 同时检查元素存在、非隐藏、非脱离文档流
  if (element && window.getComputedStyle(element).visibility !== 'hidden' && element.offsetParent !== null) {
    // 元素可见
    cy.wrap(element).click();
    cy.log('执行可见分支');
  } else {
    // 元素不可见或不存在
    cy.log('执行不可见分支');
    cy.get('.no-data-tip').should('be.visible');
  }
});

注意事项 #

• 同步查询（方法一）不会等待元素加载，必须确保执行时机在DOM稳定之后。
• 异步方法的超时时间可根据页面实际加载速度调整。
• TypeScript会自动推断$el类型为JQuery<HTMLElement>，无需额外声明。

内容的提问来源于stack exchange，提问作者sandy qa