cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
47.03k stars 3.19k forks source link

Property 'request' does not exist on type 'HTMLElement'. during request aliasing #24823

Open CSchulz opened 1 year ago

CSchulz commented 1 year ago

Current behavior

cy.get with an alias for requests returns a JQuery instead of a http response interface.

There was also no notice in the change log about a behavior change.

Desired behavior

cy.get should return Cypress.Response type to enable response status checks and similar like in the code example.

Test code to reproduce

cy.request('https://jsonplaceholder.cypress.io/comments').as('comments')

cy.get('@comments').should((response) => {
  if (response.status === 200) {
    expect(response).to.have.property('duration')
  } else {
    // whatever you want to check here
  }
})

https://docs.cypress.io/guides/core-concepts/variables-and-aliases#Requests

Cypress Version

11.2.0

Node version

16.15.0

Operating System

Windows 10

Debug Logs

No response

Other

No response

CSchulz commented 1 year ago

After some research by my collegue it should be Cypress.WaitXHR instead of HTMLElement.

emilyrohrbough commented 1 year ago

@CSchulz thank you for reporting this Typescript issue. It looks like we have programmed our types for get(alias) to return a JQuery element [here](). TypeScript is not my strongest, but it looks like we should be stricter on our alias matches and then support just about anything since any yielded value could be aliases - jquery element, response, string, object.

Is this something you would be interested in contributing?

For the time being, you could override this type locally to get around this error.

// load the global Cypress types
/// <reference types="cypress" />

declare namespace Cypress {
  type AliasSelector = `@${string}`
  interface Chainable {
    /**
     * Custom command to select DOM element by data-cy attribute.
     * @example cy.dataCy('greeting')
     */
    get(alias: AliasSelector): Chainable<any>
  }
}

it('issue 24823', () => {
  cy.request('https://jsonplaceholder.cypress.io/comments').as('comments')

  cy.get('@comments')
  .should((response: Cypress.Response<any>) => {
    if (response.status === 200) {
      expect(response).to.have.property('duration')
    } else {
      // whatever you want to check here
    }
  })
})
fubha commented 10 months ago

Hi @emilyrohrbough, I am experiencing the same issue. The workaround you mentioned above does't seem to be working at my end. Is there any update on this? Thanks!