CODEWITHSUNDEEP
scrollcypresswidthsimulationviewport
manymanymore
manymanymore

Reputation: 3107

Scroll one page to the right in Cypress

How could I scroll one page to the right in Cypress?

E.g. I have a horizontally scrollable area. The area contains elements a, b and if I scroll to the right a and b get destroyed, while c and d get added.

My attempt is to find out the width of the scrollable view and then scroll that amount to the right. But the width does not get retrieved before the scrollTo gets called.

Here is what I am trying to do:

const width = cy.getCy("scroll-viewport").invoke("width");
cy.getCy("scroll-viewport").scrollTo(width, 0);

Upvotes: 1

Views: 2815

Answers (1)

Fody
Fody

Reputation: 31904

Your code sample has some mystery about it, for example what is cy.getCy().

I can show you how to do it with standard code, and you can adapt from there.

Assuming scroll-viewport is a selector for the scroll container (the owner of the scroll bar)

cy.get("scroll-viewport").then($scrollContainer => {
  const width = $scrollContainer[0].offsetWidth;
  $scrollContainer[0].scrollTo(width, 0);
})

Note $scrollContainer[0].scrollWidth gives you the total width after scrolling, in case you need that.

Upvotes: 2

Related Questions