禁用赛普拉斯中的所有水平滚动条答案

【问题标题】：Disable all horizontal scrollbars in Cypress禁用赛普拉斯中的所有水平滚动条
【发布时间】：2020-10-02 12:57:11
【问题描述】：

有没有办法将样式应用于赛普拉斯中的所有元素？就像使用星形选择器一样：

* {
  overflow-x: hidden;
}

我需要它用于视觉回归快照，因为出现了滚动条，并且无法在 Cypress 中找到简单而优雅的东西。目前正在做这样的事情：

cy.get('[data-cy="some-tag"]').invoke('css', 'overflow-x', 'hidden');

但这当然不是很好，因为每个具有滚动条的元素都必须定位和设置。

【问题讨论】：

标签： css cypress

【解决方案1】：

您可以使用 onBeforeScreenshot 和 onAfterScreenshot 回调在截取任何屏幕截图之前更改 DOM。这将隐藏调用屏幕截图命令的元素上的滚动条，然后将其恢复：

Cypress.Screenshot.defaults({
    onBeforeScreenshot($el) {
        $el.css('overflow', 'hidden');
    },

    onAfterScreenshot($el, props) {
        $el.css('overflow', 'auto');
    },
});

您可以将此函数放在 support/index.js 文件中，因为它在任何测试文件之前加载。

注意：如果您只是调用cy.screenshot()，那么$el 将是document，您可以使用.find(<selector>) 命令获取页面中的任何子元素。

与cypress-visual-regression 插件配合使用非常好。

参考：https://docs.cypress.io/api/cypress-api/screenshot-api#Change-the-DOM-using-onBeforeScreenshot-and-onAfterScreenshot

【讨论】：