CODEWITHSUNDEEP
automationautomated-testscypress
Dominik Skála
Dominik Skála

Reputation: 831

Cypress - hidden button because of scrollbar

I have a problem. If I click on one button then it shows a little window where I need to click on another button. But it is hidden because that window is too small and needs to move with scrollbar. How should I click or move with that scrollbar and then click on the button?

enter image description here

If I try playground on that it takes full window.

enter image description here

Thank you for your answers.

Upvotes: 0

Views: 1432

Answers (2)

Cleriston
Cleriston

Reputation: 770

This is a very natural way of thinking whilst getting your element. However, imagine you are manually testing the screen above, you will have scroll in order to see and take action to the hidden element. Why should cypress be different?

It is important to transcript to your test, exactly the same actions you would do if manually executing the test. As a result, you should have a scrollIntoView action.

Upvotes: 0

Mr. J.
Mr. J.

Reputation: 3721

Is that modal related to the width of the screen? If it is you can solve it by adding a new configuration for the viewport to cypress.json:

{
  "viewportWidth": 1920,
  "viewportHeight": 1280
}

And then of course to a width that is enough to solve your problem.

If that doesn't work, I believe this page can help you: https://docs.cypress.io/api/commands/scrollto.html#Scopes . The result will be something like this:

cy.get('modal_name')
  .scrollTo('right')

Besides that I expected a cy.get() to still get the button you were looking for.

Upvotes: 1

Related Questions