css - 禁用 Cypress 中的所有水平滚动条

Question

有没有一种方法可以将样式应用于 Cypress 中的所有元素？就像人们对星号选择器所做的那样:

* {
  overflow-x: hidden;
}

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

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

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

Answer 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