Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError: remoteJQuery is not a function #1502

Open
James-E-Adams opened this issue Mar 27, 2018 · 18 comments
Open

TypeError: remoteJQuery is not a function #1502

James-E-Adams opened this issue Mar 27, 2018 · 18 comments
Labels
pkg/driver This is due to an issue in the packages/driver directory prevent-stale mark an issue so it is ignored by stale[bot] stage: ready for work The issue is reproducible and in scope type: bug

Comments

@James-E-Adams
Copy link

James-E-Adams commented Mar 27, 2018

Current behavior:

cy.get(selector) works fine.
cy.get(selector).then((elem) => {}) with any callback results in TypeError: remoteJQuery, with no extra information

Desired behavior:

cy.get(selector).then((elem) => {}) should give me access to the element.

Test code:

  it('example', () => {
    cy.get('#cy-div')
    .then(elem => {
      elem;
     })
  })

I've tried cy v2.0.4 and v2.1

on Mac OS 10.13.3 using chrome.

screen shot 2018-03-27 at 3 46 33 pm

@jennifer-shehane
Copy link
Member

I am unable to reproduce this issue with what you have provided. My working example:

  it('example', () => {
    cy.visit('https://example.cypress.io/commands/actions')
    cy.get('.action-email')
      .then(elem => {
        elem;
      })
  })

screen shot 2018-03-27 at 9 15 36 am

It looks as if you are targeting a canvas? Could you provide more detail about the #cy-div-draw-on element you're targeting and the behavior you're attempting to test? Or provide a reproducible repository with the issue?

@jennifer-shehane jennifer-shehane added the stage: needs information Not enough info to reproduce the issue label Mar 27, 2018
@James-E-Adams
Copy link
Author

I think I have some weird errors specific to my computer. I'm having no issues running the same tests on other computers. I may have to open a new issue and close this, but the most troubling problem of late is I cannot run more than one test, as it fails like this on the second test in a suite:

screen shot 2018-04-11 at 12 47 56 pm

My beforeEach looks like:

  beforeEach(() => {
    cy.authenticatedVisit(url)
  })

and the above command is defined in support/commands as

Cypress.Commands.add('authenticatedVisit', url => {
  cy.visit(url, {
    onBeforeLoad() {
      window.localStorage.setItem('authRefreshToken', authRefreshToken) 
      window.localStorage.setItem('authAccessToken', null) //it needs this field to have an entry
    },
  })
})

authRefreshToken is just a string. Has anyone else experienced something similar?

@jennifer-shehane jennifer-shehane added stage: needs investigating Someone from Cypress needs to look at this and removed stage: needs information Not enough info to reproduce the issue labels Apr 11, 2018
@hymair
Copy link

hymair commented Aug 23, 2018

Having the same issue.

cy.get('.some-buttons')
  .then(buttons => {
    buttons
  })

image

Edit: I am trying to select a random element from what is returned by cy.get. How can I do it?

@vinhlh
Copy link

vinhlh commented Sep 19, 2018

Actually, I have this issue when my site has a kind of fake jQuery 💃

@James-E-Adams
Copy link
Author

This is resolved with one of the recent updates to Cypress. I can't say which version/why it's fixed, but glad that it is the case. 🎉

@jennifer-shehane jennifer-shehane removed the stage: needs investigating Someone from Cypress needs to look at this label Dec 4, 2018
@marioparris-qless
Copy link

marioparris-qless commented Aug 15, 2019

I'm also experiencing this issue (v3.4.0 and v3.4.1). The app -- a very old legacy app -- under test isn't using JQuery but it does define an object window.$ = { ... }. Because window.$ is not a function, I get this error, remoteJQuery is not a function, reported.

It seems to stem from here

Reproducible repo.

  • cypress/integration/remoteJquery.spec.js will faill because window.$ is an object, not a function, in index.html.
  • cypress/integration/jquery.spec.js and cypress/integration/function.spec.js pass because window.$ is a function.

I'm not sure what I should I do here. Hopefully there's a configuration I can change?

@XPuigA
Copy link

XPuigA commented Oct 2, 2019

@marioparris-qless did you manage to solve it? I'm having the same issue.

The webpage does not use jQuery, doing a console.log of window('jQuery') and window('$') shows undefined. Although I've looked in every dependency JS file from the page and have not found it being set anywhere.

Here is the debugging I've done, in case it helps somebody to see the issue:

preCall

Here we can see that state('window').$ is {}, but when printed before, it showed undefined.
jquerycall

condition

remoteJqueryNotSameAsGlobal

callFunctionOnObject

error

EDIT:
adding the following code solves the error, BUT, if the following pages use jQuery, they will break:

cy.on('window:before:load', (win) => {
    if (win.jQuery === undefined && (win.$ === undefined || win.$ === {})) {
        Object.defineProperty(win, '$', {
            configurable: false,
            get: () => Cypress.cy.$$,
            set: () => {}
        });
    }
});

@marioparris-qless
Copy link

marioparris-qless commented Oct 2, 2019

@XPuigA No, I haven't been able to. You've gotten way further than I have!

Edit: I've been able to work around it by not defining $ -- renaming the fake "JQuery-like" object from $ to something else -- but I'd prefer to not have to do that.

@XPuigA
Copy link

XPuigA commented Oct 3, 2019

@marioparris-qless I think I fixed it with the following code:

cy.on('window:before:load', (win) => {
    if (win.jQuery === undefined && (win.$ === undefined || win.$ === {})) {
        win.$ = Cypress.cy.$$;
    }
});

For anyone else having the same problem, what the code does is, before loading every page in the spec, check if the Window object has the jQuery or $ properties, and if not, assign the jQuery that comes with Cypress to Window.$.
As script tags are loaded after this, if the page uses a jQuery library, that one will override the one we set, so the page will still work and we can use jQuery from Cypress.

@rubenreyes2000
Copy link

I am experiencing the same issue with a site that uses jQuery and jQuery.noConflict() https://api.jquery.com/jQuery.noConflict/

@marioparris-qless
Copy link

@marioparris-qless I think I fixed it with the following code:

cy.on('window:before:load', (win) => {
    if (win.jQuery === undefined && (win.$ === undefined || win.$ === {})) {
        win.$ = Cypress.cy.$$;
    }
});

For anyone else having the same problem, what the code does is, before loading every page in the spec, check if the Window object has the jQuery or $ properties, and if not, assign the jQuery that comes with Cypress to Window.$.
As script tags are loaded after this, if the page uses a jQuery library, that one will override the one we set, so the page will still work and we can use jQuery from Cypress.

Nice!

@kashyaprahul94
Copy link

kashyaprahul94 commented May 5, 2021

We were in the similar situation, where our website made use of window.$ as something than jQuery.

To give you a surprise, this is what we have:

window.$ = document.querySelector.bind(document)

It really made us worried initially that we would have to change all the occurrences of $(...) to something else in order to make the Cypress work, but luckily, after gloating inside the cypress source code, we found something that could work for us & guess what, it did.

Cypress.on("window:before:load", () => {
  /**
   * Thankfully, Cypress searches for "jQuery" property on the state
   *  variable (cy), if that's present, it takes the precedence
   *  over window.$
   *  https://github.com/cypress-io/cypress/blob/7.0-release/packages/driver/src/cy/jquery.js#L12
   */
  Cypress.cy.state("jQuery", Cypress.$);
});

We hope that this could help others too :)

@jennifer-shehane
Copy link
Member

I can recreate this issue with the code below:

index.html

<html>
<body>
  <h1>Hello world</h1>
  <script>
    window.$ = 'foo'
  </script>
</body>
</html>

spec.js

it('remote jQuery is not a function', () => {
  cy.visit('index.html')
  cy.get('h1').then(() => {})
})

Screen Shot 2021-05-05 at 9 17 37 AM

@awha86
Copy link

awha86 commented Jan 6, 2023

We were in the similar situation, where our website made use of window.$ as something than jQuery.

To give you a surprise, this is what we have:

window.$ = document.querySelector.bind(document)

It really made us worried initially that we would have to change all the occurrences of $(...) to something else in order to make the Cypress work, but luckily, after gloating inside the cypress source code, we found something that could work for us & guess what, it did.

Cypress.on("window:before:load", () => {
  /**
   * Thankfully, Cypress searches for "jQuery" property on the state
   *  variable (cy), if that's present, it takes the precedence
   *  over window.$
   *  https://github.com/cypress-io/cypress/blob/7.0-release/packages/driver/src/cy/jquery.js#L12
   */
  Cypress.cy.state("jQuery", Cypress.$);
});

We hope that this could help others too :)

With Cypress 12.0.0 the need for this workaround is no longer needed for us. Thank you for the solution @kashyaprahul94.

I wonder if this issue is no longer there, since Cypress 12.0.0, for anyone else?

@cypress-app-bot
Copy link
Collaborator

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

@cypress-app-bot cypress-app-bot added the stale no activity on this issue for a long period label Jul 6, 2023
@cypress-app-bot
Copy link
Collaborator

This issue has been closed due to inactivity.

@cypress-app-bot cypress-app-bot closed this as not planned Won't fix, can't repro, duplicate, stale Jul 21, 2023
@cypress-app-bot cypress-app-bot removed the stale no activity on this issue for a long period label Oct 19, 2023
@cypress-app-bot
Copy link
Collaborator

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

@cypress-app-bot cypress-app-bot added the stale no activity on this issue for a long period label Apr 16, 2024
@jennifer-shehane
Copy link
Member

This is still an issue in 13.8.0

Screenshot 2024-04-23 at 10 14 57 AM

@jennifer-shehane jennifer-shehane added prevent-stale mark an issue so it is ignored by stale[bot] and removed stale no activity on this issue for a long period labels Apr 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pkg/driver This is due to an issue in the packages/driver directory prevent-stale mark an issue so it is ignored by stale[bot] stage: ready for work The issue is reproducible and in scope type: bug
Projects
None yet
Development

No branches or pull requests

10 participants