36

我正在编写赛普拉斯测试以登录网站。有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: Timed out retrying: Expected to find element: '.warning', but never found it.

然后我尝试了这个，它失败了，因为警告出现的速度不够快，所以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()不会抱怨。

4

6 回答 6

22 
export function clickIfExist(element) {
    cy.get('body').then((body) => {
        if (body.find(element).length > 0) {
            cy.get(element).click();
        }
    });
}
于 2020-01-06T08:12:35.377 回答
6

尝试对 DOM 元素进行条件测试以及 Cypress 中的各种变通方法存在各种缺点。所有这些都在条件测试中的赛普拉斯文档中进行了深入解释。

由于有多种方法可以做您想做的事情，我建议您通读整个文档并确定最适合您的应用程序和测试需求的方法。

于 2017-12-13T14:51:45.997 回答
1 
 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')})}
于 2020-10-26T08:03:11.477 回答
0

我已经用纯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 => {
于 2020-03-20T12:00:05.990 回答
0

hasClass()CSS 选择器的orhas()是 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");
  }
于 2020-05-23T11:57:05.210 回答
0

最好的办法是收集整个 Body 并进行验证，例如：

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

当元素没有找到时，这不会引起任何问题。如果你使用

cy.get()，那么它可能会在你试图找到元素时失败

于 2022-01-07T07:01:43.923 回答