我无法计算用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
该错误来自应用程序本身,最终应在应用程序源中修复。
但是请在日志中查看此注释
此行为是可配置的,并且你可以选择通过侦听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 || []}