Warm tip: This article is reproduced from serverfault.com, please click

javascript-不使用Cypress计数React站点中的DOM元素吗?

(javascript - Not counting DOM elements in React site with Cypress?)

发布于 2020-11-29 20:30:40

我无法计算用React编写的网站上DOM元素的数量。

/// <reference types="cypress" />

context('Checking all components', () => {
    beforeEach(() => {
        cy.visit('https://news-israel.com');
    });

    it('Checking posts', () => {
        cy.get('.posts-wrapper').find('a').should('exist');
        cy.get('.posts-wrapper').find('a').its('length').should('be.gte', 100);
    });
});

在这种情况下,它找不到“ a”标签,因为React异步地和动态地渲染它们。找到“后包装器”类,后跟一个异常:

以下错误源自你的应用程序代码,而不是赛普拉斯。无法读取未定义的属性“ substr”当赛普拉斯检测到源自应用程序的未捕获错误时,它将自动通过当前测试。

在这种情况下,如何正确计算元素的数量,以便你可以“等待元素”?

我正在测试的网站正在生产中-https://news-israel.com

Questioner
SkyStar
Viewed
11
Hiram K. Hackenbacker 2020-11-30 06:33:42

该错误来自应用程序本身,最终应在应用程序源中修复。

但是请在日志中查看此注释

此行为是可配置的,并且你可以选择通过侦听uncaught:exception事件将其关闭。

这链接到可用于调试的事件处理程序。将其添加到测试的顶部,以抑制发生错误时测试失败。

Cypress.on('uncaught:exception', (err, runnable) => {
  // returning false here prevents Cypress from
  // failing the test
  return false
})

现在测试可以正常工作,但你posts-wrapper不能使用正确的类post-wrapper


如果你能够修复源,则错误来自react-typed库,该库BreakingNews.js在第75行中使用

<Typed
  strings={posts}
  typeSpeed={15}
  backSpeed={10}
  backDelay={5000}
  loop
/>

posts变量最初是未定义的,因此你需要一个后备值,例如 strings={posts || []}