cy.visit() Typescript promise chain error - Type 'Chainable<HTMLInputElement>' is missing the following properties

Current behavior:

The following Typescript code produces an error:

const loadInput = (): Promise<HTMLInputElement> => cy.visit('./core/selectors/selectors-test-file.html')
	.then((contentWindow: Window) => {
		let { document } = contentWindow
		const $input = <HTMLInputElement>document.getElementById('textInputID')
		return $input
	})

it("Shouldn't break", async ()=> {
	const $input = await loadInput()
	expect($input.value).to.equal('')
})

The error message I get:

TS2739: Type 'Chainable<HTMLInputElement>' is missing the following properties from type 'Promise<HTMLInputElement>': catch, [Symbol.toStringTag]

Desired behavior:

The loadInput() function should return a promise that later returns the HTML input DOM element.

Versions

• Cypress: 3.8.0
• Node: 12.13.0
• Browser: Chrome 79.0.3945.130
• OS: Windows 10

Work around

I worked around the issue by doing this:

const loadInput = (): Promise<HTMLInputElement> => new Promise((resolve) => {
	cy.visit('./core/selectors/selectors-test-file.html')
		.then((contentWindow: Window) => {
			let { document } = contentWindow
			const $input = <HTMLInputElement>document.getElementById('textInputID')
			resolve($input)
		})
})

But now Cypress is complaining about nesting cy.visit() inside a promise. It’s just a warning though so I can ignore it.

[Dan503]

I like the promise async/await syntax a lot more though.

I switched to using cypress-promise to make my code cleaner. Based on the number of downloads, many other developers feel the same way.

It has the annoying issue of triggering the warning though.

https://github.com/NicholasBoll/cypress-promise/issues/6

Is there a way that the warning can be suppressed if we choose that we would prefer to work with promises?

[FFdhorkin]

I like the promise async/await syntax a lot more though.

I switched to using cypress-promise to make my code cleaner. Based on the number of downloads, many other developers feel the same way.

It has the annoying issue of triggering the warning though.

NicholasBoll/cypress-promise#6

Is there a way that the warning can be suppressed if we choose that we would prefer to work with promises?

Just to chime in here… We’re using Cypress to validate our API - no UI involved, except for Cypress itself (to inspect requests). Our code often times has >= 5 levels of indentation because we have to keep doing nested then blocks to pull out variables we want to use. And a lot of our helper methods are really messy - I’d like to have a getCount() method that just returns an integer rather than Chainable.

cypress-promise would enable that, and make our code MUCH more readable. But it would also create dozens of warnings in our console, and that’s a non-starter. It would be nice to be have some way to suppress that warning. I’m tempted to make a fork of Cypress just to remove that warning… but that seems like a pretty extreme measure.