cypress-documentation

cypress-documentation copied to clipboard

Subject

Examples

Description

All the examples on the Cypress documentation have the types omitted here for simplicity. But they almost never work when using on a real Typescript project with strict types.

And trying to get the correct types is not really easy because they are usually types of a type of another type, and they break when it has overloads.

For example, the code given for Custom Queries gives this code:

Cypress.Commands.addQuery('focused2', function focused2(options = {}) {
  const log = options.log !== false && Cypress.log({ timeout: options.timeout })

  this.set('timeout', options.timeout)

  return () => {
    let $el = cy.getFocused()

    log &&
      cy.state('current') === this &&
      log.set({
        $el,
        consoleProps: () => {
          return {
            Yielded: $el?.length ? $el[0] : '--nothing--',
            Elements: $el != null ? $el.length : 0,
          }
        },
      })

    if (!$el) {
      $el = cy.$$(null)
      $el.selector = 'focused'
    }

    return $el
  }
})

But trying to use it will cause a typescript error on the timeout usage:

even when using the exact code that the original function

I think, it would be easier to get started if the types are defined from start.