cypress icon indicating copy to clipboard operation
cypress copied to clipboard

Error when using `scrollBehavior:false` at config with TypeScript

Open schirrel opened this issue 1 year ago • 3 comments

Current behavior

When trying to adding scrollBehavior to a cypress.config.ts file i got this error:

Types of property 'scrollBehavior' are incompatible.
 Type 'boolean' is not assignable to type 'scrollBehaviorOptions | undefined'.ts(2345)

The definitions is type scrollBehaviorOptions = false | 'center' | 'top' | 'bottom' | 'nearest' but it does not accept false. Screenshot 2023-12-28 at 12 26 47

Desired behavior

Possible to set scrollBehavior: false using typescript configuration

Test code to reproduce

Edit: better reproduct https://github.com/schirrel/cypress-typescript-webpack-error/tree/minimal

~https://github.com/schirrel/cypress-typescript-webpack-error/tree/main~

Cypress Version

13.6.1

Node version

18.15.0

Operating System

MacOS 14.1.1

Debug Logs

No response

Other

No response

schirrel avatar Dec 28 '23 16:12 schirrel

I was trying to investigate it, and it is strange that on playground it does not throw error 👀

Using Cypress Typescript version no error at ts playground https://www.typescriptlang.org/play?ts=4.7.4#code/FAFwngDgpgBAzgYwE4HsA2aBCUAWBDANwEsUkB5CEEgOzhgF4YAzPNOWAHxgHIEpqQUJNxhduIFBBFiARihASAttJ7UoeJFDghuwYEQFCWfGJKopaMAN7AYdmNTyKoALnggkBgOa37iVBgwbv7oWLiEJOSUNHDAAL56CBbaMEnUTEReDDAAFGZuZjEAlEEwBChEACZ29AB81r52aXDoUAB0aCheeZRF8YkWGd1Wjs5u3HgIMtwANPDIoW4sbLBxfUA

Using https://github.com/schirrel/cypress-typescript-webpack-error/tree/main typescript version no error at ts playground https://www.typescriptlang.org/play?ts=5.3.3#code/FAFwngDgpgBAzgYwE4HsA2aBCUAWBDANwEsUkB5CEEgOzhgF4YAzPNOWAHxgHIEpqQUJNxhduIFBBFiARihASAttJ7UoeJFDghuwYEQFCWfGJKopaMAN7AYdmNTyKoALnggkBgOa37iVBgwbv7oWLiEJOSUNHDAAL56CBbaMEnUTEReDDAAFGZuZjEAlEEwBChEACZ29AB81r52aXDoUAB0aCheeZRF8YkWGd1Wjs5u3HgIMtwANPDIoW4sbLBxfUA

Also o realize that if i type the scrollBehavior as scrollBehavior: false as Cypress.scrollBehaviorOptions, it works. Could it be a strange/not know ts behavior that would be better to add a caveat to the Cypress doc instead of trying to understand this strange typing? What you thinkg @jennifer-shehane?

schirrel avatar Dec 29 '23 15:12 schirrel

@schirrel Yah, I thought it was strange too - it seems like it should be working. If there's a way around it, it's always ok to put the workaround here at least.

jennifer-shehane avatar Dec 29 '23 17:12 jennifer-shehane

@jennifer-shehane thank for looking at it 🙏🏻

yeah, i was starting to think was something on my machine. But created a branch with a minima reproduction, without a lot of files/dependencies https://github.com/schirrel/cypress-typescript-webpack-error/tree/minimal and with the tsconfig from the cypress doc, also opened with stackblitz https://stackblitz.com/~/github.com/schirrel/cypress-typescript-webpack-error

Screenshot 2023-12-29 at 16 55 57

As i found that using it as scrollBehavior: false as Cypress.scrollBehaviorOptions is a workaround, can i add it to https://docs.cypress.io/guides/tooling/typescript-support# or there's other better place to add?

schirrel avatar Dec 29 '23 20:12 schirrel

FWIW I'm noticing that setting scrollBehavior to false (or any other value) has zero effect. Element is always scrolled up to the top anyway. Whether I configure it globally, per suite or per action. Cypress 12.17.3 (I didn't see anything about scrollBehavior in the 13.x release notes). Will post minimal example soon. In the mean time, does anyone recognize this?

david-err avatar Feb 05 '24 17:02 david-err