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

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