javascript - Cypress click 没有滚动到 View 中

Question

有一个用 Vue/Nuxt 构建的站点，并且有 SSR，并且在页脚中有链接。

测试链接是否找到，链接可见且click()说该链接不在 View 中。

单击失败后，链接将滚动到 View 。

什么会导致 View 无法滚动到 View 中？

        it('About us page', () => {
            cy.visit('https://test.fooddocs.ee');
            cy.url().should('include', 'https://test.fooddocs.ee');
            cy.get('footer.page-footer').within(() => {
                cy.get('a')
                    .contains('About us')
                    .should('be.visible')
                    .should('have.attr', 'href', '/about')
                    .click();
            });
            cy.url().should('include', siteUrl + '/about');
            cy.get('main h1').should('contain', 'Our team');
        });

Answer 1

屏幕截图中的错误消息“此元素的中心被隐藏”表明 cypress 能够找到该元素但未能执行“单击”。 {force:true} 或 .scrollTo('bottom') 实际上可能不会做得更好。测试的一种替代方法是通过访问底层 url 来模拟点击。如果打算通过“点击”来测试它，则需要更多调查为什么元素的中心不在视野中。请阅读以下内容。

.should('have.attr', 'href', '/about')
            //.click();
            .invoke('attr','href')
                .then((url)=>{
                    cy.visit(siteUrl + url);
                });

我认为 {force:true} 似乎有效，但实际上并没有完成任务，因此 url 仍然没有按照需要重定向(也没有重新加载页面)。见下文，测试失败。



此外，滚动到底部似乎成功，但我们只在测试失败后才注意到页面滚动。见下文。