One bug that appears now and then is that some element on the page is overflowing and makes the entire page overflow. I wanted to create a test in Cypress that make sure this doesn't happen. But i had a really hard time finding exactly how to do it.

Finally i realized i could make use of the scrollTo feature in Cypress.

it("should not have side scroll on about", function () {
   cy.viewport("iphone-6");
   cy.visit("/software/spotify/about/");

  cy.scrollTo("topRight");
  cy.window().its("scrollX").should("equal", 0);
});

So what this does is that it set the viewport to an iPhone 6, go to a page on the site, it scroll to the top right corner AND then if scrollX is larger than zero then cypress managed to move the entire page i.e. i have a bug that caused a sidebar scroll on the page.

Of course this bug is usually caused by some bad data but i least i can catch some of the issues this way.