如何使用賽普拉斯檢查可能不存在的元素

Question

我正在編寫 Cypress 測試以登錄網站。 有用username和password字段以及Submit按鈕。 大多數登錄都很簡單，但有時會首先出現一個警告對話框，必須將其關閉。

我試過這個：

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

// Check for a possible warning dialog and dismiss it
if (cy.get('.warning')) {
  cy.get('#warn-dialog-submit').click();
}

哪個工作正常，除了如果沒有出現警告則測試失敗：

CypressError：重試超時：預期會找到元素：'.warning'，但從未找到它。

然后我嘗試了這個，但失敗了，因為警告出現的速度不夠快，所以Cypress.$沒有找到任何東西：

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

// Check for a possible warning dialog and dismiss it
if (Cypress.$('.warning').length > 0) {
  cy.get('#warn-dialog-submit').click();
}

檢查元素是否存在的正確方法是什么？ 我需要像cy.get()這樣的東西，如果找不到元素，它不會抱怨。

Answer 1

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

Answer 2

嘗試對 DOM 元素進行條件測試有各種缺點，並且在 Cypress 中也有各種變通方法。 所有這些都在 Cypress 文檔中的Conditional Testing中進行了深入解釋。

由於有多種方法可以完成您正在嘗試執行的操作，我建議您通讀整個文檔並確定最適合您的應用程序和測試需求的方法。

Answer 3

如果在某個超時期間沒有發生，則可以輪詢元素並繼續。

這需要您選擇最長等待時間，具體取決於彈出窗口出現的時間。

該對話框最終將不存在於頁面上，要么它從未到達，要么因為您運行代碼以關閉它。

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


const getDialog = (selector, attempt = 0) => {
  if (attempt === 100) return null          // 10 seconds is up, no appearance

  cy.get('body', {log:false}).then(($body) => {
    const element = $body.find(selector)
    if (!element.length) {
      cy.wait(100, {log:false})             // wait in small chunks
      getDialog(selector, ++attempt)
    }
  })
  return cy.get(selector, {log:false})      // done, exit with the element
}

// Check for a possible warning dialog and dismiss it
getDialog('.warning')
  .then($el => {
    if($el && $el.length) {
      $el.find('#warn-dialog-submit').click()
    }
  })

Answer 4

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

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')})}

Answer 5

我已經用純js完成了。

cy.get('body').then((jqBodyWrapper) => {

               if (jqBodyWrapper[0].querySelector('.pager-last a')) {
                   cy.get('.pager-last a').then(jqWrapper => {
                       // hardcoded due to similarities found on page

                       const splitLink = jqWrapper[0].href.split("2C");
                       AMOUNT_OF_PAGES_TO_BE_RETRIEVED = Number(splitLink[splitLink.length - 1]) + 1;
                   })
               } else {
                   AMOUNT_OF_PAGES_TO_BE_RETRIEVED = 1;
               }
           });

我正在嘗試檢查身體上是否存在元素

cy.get('body').then((jqBodyWrapper) => {

用一個純js的querySelector

if (jqBodyWrapper[0].querySelector('.pager-last a')) {

然后我解雇我的cy.get

cy.get('.pager-last a').then(jqWrapper => {

Answer 6

hasClass()或 for CSS 選擇器has()是 jQuery 中的一個內置方法，用於檢查具有指定類名的元素是否存在。 然后，您可以返回一個布爾值來執行斷言控制。

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

然后，它可以用 TypeScript 文件（index.d.ts）文件制成特殊的 cypress 方法，並且可以是可鏈接的形式。

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

如下例所示：

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

Answer 7

最好的思路是把整個Body都采集起來驗證一下，例如：

cy.get("body").then((body) => {
  if (body.find("CLASS_SELECTOR").length == 0) {
    DO_SOMETHING()
  }
});

當元素不存在時，這不會導致任何問題。 如果你使用

cy.get()，那么它可能會在您嘗試查找元素的測試中失敗

Answer 8

你可以試試這段代碼

cy.window().then(win => {
     let findElement = win.document.querySelector(selector);
     cy.log(findElement)
     if (findElement) {
          // your code
     }
});