Test horizontal scroll overflow on mobile devices with Cypress

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.