Блог

Есть ли способ применить стиль ко всем элементам в Cypress? Как можно было бы сделать с селектором звездочек:

 * {
  overflow-x: hidden;
}
  

Мне это нужно для снимков визуальной регрессии из-за появления полос прокрутки, и я не смог найти что-то простое и элегантное в Cypress. В настоящее время делаю что-то вроде этого:

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

Но, конечно, это не очень хорошо, потому что каждый элемент, у которого есть полосы прокрутки, должен быть нацелен и установлен.

Вы можете изменить DOM непосредственно перед тем, как будет сделан снимок экрана, используя обратные вызовы onBeforeScreenshot и onAfterScreenshot. Это скроет полосу прокрутки на элементе, для которого была вызвана команда скриншота, и восстановит ее впоследствии:

 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