Question

我正在编写赛普拉斯测试以登录网站。有用户名和密码字段以及提交按钮。大多数登录都很简单，但有时会出现一个警告对话框，必须先将其解除。

我试过了：

    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: Timed out retrying: Expected to find element: '.warning', but never found it.

然后我尝试了这个，因为警告没有足够快出现，所以赛普拉斯。$没有找到任何东西：

    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元素进行条件测试以及赛普拉斯的各种变通方法有各种缺点。所有这些都在Conditional Testing的赛普拉斯文档中进行了深入解释。

由于有多种方法可以完成您的工作，我建议您仔细阅读整个文档，并确定哪种方法最适合您的应用程序和测试需求。

Answer 3

我已经用纯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 4

hasClass()或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 5

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

如何使用赛普拉斯

5 个答案: