How to check for an element that may not exist using Cypress

hasClass()CSS 选择器的 or是has()jQuery 中的内置方法，用于检查具有指定类名的元素是否存在。然后您可以返回一个布尔值来执行断言控制。

shell
Cypress.Commands.add('isExistElement', selector => {
  cy.get('body').then(($el) => {
    if ($el.has(selector)) {
      return true
    } else {
      return false
    }
  })
});

然后，可以用 TypeScript 文件（index.d.ts）将其制作成特殊的 cypress 方法，并且可以采用可链接的形式。

shell
declare namespace Cypress {
    interface Chainable {
        isExistElement(cssSelector: string): Cypress.Chainable<boolean>
    }
}

如下例所示：

shell
shouldSeeCreateTicketTab() {  
  cy.isExistElement(homePageSelector.createTicketTab).should("be.true");
}

使用元素轮询并进行检查，以免测试失败。

在最大等待时间内，要么对话框永远不会到达，要么此代码将其关闭。

shell
cy.get('#login-username').type('username');
cy.get('#login-password').type(`password{enter}`);

const ifElementExists = (selector, attempt = 0) => {
  if (attempt === 100) return null           // no appearance, return null
  if (Cypress.$(selector).length === 0) {
    cy.wait(100, {log:false})                // wait in small chunks
    getDialog(selector, ++attempt)           // try again
  }
  return cy.get(selector, {log:false})       // done, exit with the element
}

ifElementExists('.warning').then($el => {
  if ($el?.length) {
    $el.find('#warn-dialog-submit').click()
  }
})

export function clickIfExist(element) { cy.get('body').then((body) => { if (body.find(element).length > 0) { cy.get(element).click(); } }); }

export const getEl = name => cy.get([data-cy="${name}"])

shell
export const checkIfElementPresent = (visibleEl, text) => {
   cy.document().then((doc) => {
     if(doc.querySelectorAll(`[data-cy=${visibleEl}]`).length){
      getEl(visibleEl).should('have.text', text)

      return ;
   }
getEl(visibleEl).should('not.exist')})}