标签: cypress

我希望能够单击一个复选框并测试一个元素不再位于赛普拉斯的DOM中.有人可以建议你怎么做吗？

//This is the Test when the check box is clicked and the element is there
cy.get('[type="checkbox"]').click();
cy.get('.check-box-sub-text').contains('Some text in this div.')

我想做与上述测试相反的事情.所以当我再次点击它时,带有类的div不应该在DOM中.

目标： 我想使用 cypress 的辅助功能选择器单击页面上的特定元素

代码

cy.findAllByRole('rowheader').eq(2).click();

错误

Timed out retrying: cy.click() failed because this element is detached from the DOM.

<th scope="row" data-automation-id="taskItem" aria-invalid="false" tabindex="-1" class="css-5xw9jq">...</th>

Cypress requires elements be attached in the DOM to interact with them.

The previous command that ran was:

  > cy.eq()

This DOM element likely became detached somewhere between the previous and current command.

问题： 我可以在 DOM 中看到该元素仍然存在 - 没有逻辑将该元素与 DOM 分离，并且 eq 方法当然不会这样做。此外，findAllByRow 方法显然正在工作，因为它找到了我想要单击的正确元素。怎么会说五行分离呢？对于这种情况有解决方法吗？

我刚刚开始在我的 React Typescript 项目中使用 Cypress。我有一些简单的测试要运行：

describe('settings page', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000')
  });
  it('starts in a waiting state, with no settings.', () => {
    cy.contains('Waiting for settings...')
  });
  it('shows settings once settings are received', () => {
    const state = cy.window().its('store').invoke('getState')
    console.log(state) // different question: how do I get this to be the state and not a $Chainer?
  });
});

它在 Cypress 中运行得很好。但是我在 Webstorm 中收到 Typescript 错误，说cy没有定义（TS 和 ESlint 错误）和describe说all files must be …

如何检查元素是否存在，以便在元素存在的情况下可以执行某些步骤。否则，如果元素不存在，则可以执行某些不同的步骤。

我尝试了类似下面的方法，但没有奏效：

Cypress.Commands.add('deleteSometheingFunction', () => {
  cy.get('body').then($body => {
    if ($body.find(selectors.ruleCard).length) {
      let count = 0;
      cy.get(selectors.ruleCard)
        .each(() => count++)
        .then(() => {
          while (count-- > 0) {
            cy.get('body')
            // ...
            // ...
          }
        });
    }
  });
  });

我正在寻找一个简单的解决方案，它可以与简单的 javascript if else block 或then()部分合并

类似于 Webdriver 协议的以下实现：

1. driver.findElements(By.yourLocator).size() > 0
2. 检查等待中元素的存在

好心提醒。谢谢

我在之前的项目中曾经使用过 Cypress 9。默认情况下，当运行cypress open或cypress open --browser chrome用于运行所有 React 组件的所有测试时。

然而，我第一次在一个尚未进行 e2e 测试的项目上安装了 Cypress 10。我添加了测试规范，但我没有看到任何选项来完全运行所有测试。

看来我必须一项一项地运行测试，点击每一项。

谁能建议我如何自动运行所有测试？

因此，react-testing-library用于单元/集成测试，并cypress用于 e2e 测试。但是，两者似乎都在做同样的事情：

react-testing-library

• 促进嘲笑
• 像用户一样进行测试
• 从顶级组件开始（不是一个硬性要求，但如果你不这样做，你最终会在子组件测试中得到一堆重复的测试用例）
• 即时反馈，快速

cypress

• 促进嘲笑
• 像用户一样进行测试
• 从顶级组件（页面）开始
• 延迟反馈，速度慢，但提供了额外的工具（视频证明、逐步测试等）

除了反馈周期外，它们似乎几乎相同。有人可以澄清有什么区别吗？为什么要同时使用两者？

在 Cypress 中，我想根据其文本内容从一组按钮中选择一个按钮。我该怎么做？这是我的方法：

export const getCustomerButton = () => getNavigationSidenav()
  .find('mat-expansion-panel-header')
  .each(($el, index, $list) => {
    const text = $el.find('.mat-content > mat-panel-title').text();
    if (text === 'Customer') {
      return $el;
    }
    return null;
  });

我现在的问题是我必须从元素数组中过滤掉空值。有没有更简单的方法？

我开始学习赛普拉斯了.我有一个4行表(有一类数据表).我可以通过这种方式验证行数:

cy.get('.datatable').find('tr').each(function(row, i){
        expect(i).to.be.lessThan(4)
})

这是好的,但似乎尴尬,因为我只是想算的长度和并不真正需要访问的东西在排,我想这是更快地做一件事比做4两件事.

如果我记录选择(不知道还有什么叫它):

cy.log(cy.get('.datatable').find('tr'))

它出来了[object Object],我不太确定如何解构它,这告诉我,我正在考虑这一切都是错的.

如果我尝试:

expect(cy.get('.datatable').find('tr')).to.have.lengthOf(4)

我明白了 AssertionError: expected { Object (chainerId, firstCall) } to have a property 'length'

如果我尝试:

    expect(Cypress.$('.datatable > tr')).to.have.lengthOf(4)

我得到AssertionError: expected { Object (length, prevObject, ...) } to have a length of 4 but got 0的至少它有一个长度在这里？

如果我记录那种选择方法,我会得到Object{4}.我不知道从哪里开始.这似乎是一个非常普遍的事情要处理.

是否可以cy.intercept在同一个测试中多次拦截同一个 API 调用？我尝试了以下方法：

cy.intercept({ pathname: "/url", method: "POST" }).as("call1")
// ... some logic
cy.wait("@call1")

// ... some logic

cy.intercept({ pathname: "/url", method: "POST" }).as("call2")
// ... some logic
cy.wait("@call2")

我预计cy.wait("@call2")会等待第二次调用 API。但是，第二个cy.wait将立即继续，因为第一个 API 调用与第二个相同。

我有一个测试用例,其中我有一个链接在新选项卡中打开,并且由于cypress不支持多选项卡,我想获得该链接的href属性然后在同一个选项卡中打开它,我试图这样做,但由于某种原因,它不起作用.

it('Advertise link should refer to Contact page', () => {
    var link = document.querySelector("div.footer-nav > ul > li:nth-child(2) > a").href;
     cy.visit(link);
     cy.title().should('include', 'Text');
});