Custom Commands

We have a number of custom commands or functions that help the testing. Then include simulating ov visiting certain URLs, setting specific viewports, logging in or adding products to the basket. However, when running visual tests in Cypress, certain elements — such as images that load asynchronously or animated carousels — can cause false negatives due to slight variations in rendering time. To prevent these inconsistencies from affecting test results, we use custom Cypress commands to hide such elements before capturing snapshots.

Custom Command: hideElement
This function allows us to hide any specified element during Cypress tests, ensuring stable and reliable visual comparisons.

Cypress.Commands.add('hideElement', (element) => {
  cy.get('body').then(($body) => {
    if ($body.find(element).length > 0) {
      cy.get(element, { timeout: 10000 })
        .should('exist')
        .invoke('hide');
    } else {
      cy.log(`${element} not found, skipping...`);
    }
  });
});

This can later be used to hide a carousel:

Cypress.Commands.add('hideHistoryCarousel', () => {
  cy.hideElement('[data-cs-history-carousel-parent]');
});

or a chatbox:

Cypress.Commands.add('hideChatbox', () => {
  cy.hideElement('#crisp-chatbox');
})

Custom Command: hideImages

Cypress.Commands.add('hideImages', () => {
  cy.document().then((doc) => {
    const style = doc.createElement('style');
    style.innerHTML = 'img { visibility: hidden !important; }';
    doc.head.appendChild(style);
  });
});

This command allows to globally hide all the images on the specific page.