赛普拉斯点击没有滚动到视图中答案

【问题标题】：Cypress click is not scrolling into view赛普拉斯点击没有滚动到视图中
【发布时间】：2020-01-16 13:01:20
【问题描述】：

在 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');
        });

【问题讨论】：

这个错误意味着该元素在 DOM 中，但目前正被其他东西覆盖。
您可以尝试cy.scrollTo 滚动到页脚，也可以尝试.click({force: true}) docs.cypress.io/api/commands/scrollto.html#Syntax

标签： javascript vue.js nuxt.js cypress

【解决方案1】：

Click 方法是对应用程序用户行为的一种模仿。我的建议是尝试使用trigger(click)，这有点不同——我相信在这种情况下trigger(click) 指的是由DOM 元素 处理的Element Click。 - https://docs.cypress.io/api/commands/trigger.html#Syntax
我能想到的另一种解决方案可能是一种解决方法，但最终会有所帮助 - 尝试在 click() 上设置另一个位置而不是 center，因为赛普拉斯默认设置位置始终单击您要与之交互的元素。例如click(left) - 检查赛普拉斯文档 - https://docs.cypress.io/api/commands/click.html#Arguments

【讨论】：

【解决方案2】：

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

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

我认为 {force:true} 似乎可以工作，但实际上并没有完成任务，因此 URL 仍然没有根据需要重定向（也没有重新加载页面）。见下文，测试失败。

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

【讨论】：