Cypress: Cypress 3.0.0 doesn't always trigger onclick when calling .check() on radio buttons

Created on 1 Jun 2018 · 8Comments · Source: cypress-io/cypress

Is this a Feature or Bug?

Bug

Current behavior:

Calling .check() on a radio button will visually check it but the onclick code doesn't run. This was not the case with 2.1.0

Desired behavior:

Calling .check() on a radio button should trigger the onclick handler.

Steps to reproduce:

I'm not 100% sure what the cause is. I created a simple HTML file to test this on and it worked as expected, so maybe Cypress 3.0 handles a more complicated DOM differently. I can't post the actual HTML I'm testing on since it is a company product.

Versions

Cypress 3.0.0, Windows

bug

Source

bkjohnson

Most helpful comment

I have something that shows the problem. I'm trying to test a site and the inputs have an onclick that is generated in the form onclick="javascript:setTimeout('postbackCall(\'id\')',0)". It looks like Cypress 3.0.0 is having trouble with the code parameter in setTimeout.

Here is an example that shows the issue:

//javascript.js

function postbackCall(foo) {
  console.log(foo)
}

<!--test.html-->
<body>
  <script src="javascript.js"></script>
  <input type="radio" id="click1" onclick="javascript:console.log('foo')">Click me</input>
  <input type="radio" id="click2" onclick="javascript:setTimeout('postbackCall(\'bar\')', 0)">No log</input>
</body>

//spec.js 

context('Testing', () => {
  it('Checks a radio button', () => {
    cy.visit('test.html')
    cy.get('#click1').check()
    cy.get('#click2').check()
  })
})

In Cypress 2.1.0 the console log will show foo as well as bar, but in 3.0.0 foo is displayed and then Cypress errors out on the call to the second .check(), saying fn.apply is not a function. I can stop the error from ending the test by catching the uncaught exception, but this still prevents the postback from happening which is necessary for the app to function.

bkjohnson on 3 Jun 2018

👍2

All 8 comments

We'll need a reproducible example in order to look into this. Can you also verify that it is definitely working with you do npm install --save-dev [email protected]?

I'm can not think of any code that would have affected the .check() command in 3.0.0, so this would certainly be unusual.

jennifer-shehane on 1 Jun 2018

I'll try to get something reproducible that I can post.

bkjohnson on 2 Jun 2018

Here is an example that shows the issue:

//javascript.js

function postbackCall(foo) {
  console.log(foo)
}

<!--test.html-->
<body>
  <script src="javascript.js"></script>
  <input type="radio" id="click1" onclick="javascript:console.log('foo')">Click me</input>
  <input type="radio" id="click2" onclick="javascript:setTimeout('postbackCall(\'bar\')', 0)">No log</input>
</body>

//spec.js 

context('Testing', () => {
  it('Checks a radio button', () => {
    cy.visit('test.html')
    cy.get('#click1').check()
    cy.get('#click2').check()
  })
})

bkjohnson on 3 Jun 2018

👍2

I am also experiencing this scenario:

Command:   assert
cypress_runner.js:139500 Actual:    fn.apply is not a function

This error originated from your application code, not from Cypress.

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the 'uncaught:exception' event.

https://on.cypress.io/uncaught-exception-from-application
cypress_runner.js:139500 Message:   expected fn.apply is not a function\n\nThis error originated from your application code, not from Cypress.\n\nWhen Cypress detects uncaught errors originating from your application it will automatically fail the current test.\n\nThis behavior is configurable, and you can choose to turn this off by listening to the 'uncaught:exception' event.\n\nhttps://on.cypress.io/uncaught-exception-from-application

Originating from a function with a text param in an onclick javascript button event.

bsmithEG on 6 Jun 2018

This is a bug in our code, I have fixed it locally.

It's a regression in 3.0 related to forcing your page to pause while we take a screenshot.

brian-mann on 18 Jun 2018

👍1

Released in 3.0.2.

brian-mann on 29 Jun 2018

I am still experiencing a similar issue in 3.1.0. Unfortunately I don't have an isolated reproduction case (yet), but I can say this is preventing me from upgrading from 2.1.0, which doesn't exhibit this behavior.

This manifests only intermittently. I ran the same test 20 times, and it passed 18/20 times. Then I did another run of 20, and it failed 18/20 times.

My usage is pretty simple: cy.get('#id').click(). I see the red checkmark when highlights are enabled:

But in the subsequent steps, the radio isn't selected, which suggests the react form library I'm using didn't get called, which suggests onClick didn't get called.

jbinto on 6 Sep 2018

👍1

@jbinto yah the issues described above definitely don't have anything to do with the checkbox not checking - so we'll need a reproducible example to figure this out.

brian-mann on 6 Sep 2018

👍1

Was this page helpful?

0 / 5 - 0 ratings