Cypress点击未滚动到视图中

Question

有一个内置于Vue / Nuxt中的站点，具有SSR，并且在页脚中具有链接。

进行测试，找到链接，链接可见并且click()说链接不在视图中。

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

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

        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仍未按需要重定向（也没有重新加载页面）。参见下文，测试失败。

而且，滚动到底部似乎成功，但是只有在测试已经失败后，我们才注意到页面滚动。见下文。