Getting tough to debug error:

[tnrich]

Here's a screenshot of the error I'm getting with cypress.

There's not much info in the stack trace and searching for _jp.av0adc2("o"); isn't helpful. Can someone offer some pointers for how to get a more understandable error? Thank you!

Thanks!

[jennifer-shehane]

Can you provide your test code? Feel free to remove any sensitive information.

[tnrich]

@jennifer-shehane I would love to be able to give you an easier test case to reproduce this, unfortunately it seems like you'll have to clone my project. Here is the code that is failing:

// import dragMock from 'drag-mock'

describe("tabs", function() {
  beforeEach(() => {
    cy.visit("http://localhost:3344/#/Editor"); //switching this to http://teselagen.github.io/openVectorEditor/#/Editor works even though the code should be the same (except one is running in production mode)
  });
  it("can drag tabs", function() {
    dragBetween(".veTabLinearMap", ".veTabProperties");
    cy.get(`[data-test="ve-draggable-tabs1"] .veTabLinearMap`);
    dragBetween(".veTabPlasmid", ".veTabProperties");
    cy.get("[data-test=ve-draggable-tabs0] .veTabLinearMap");
    cy.get("[data-test=ve-draggable-tabs1]").should('not.exist')
  });
});

function getCenter(el) {
  const b = el.getBoundingClientRect();
  const x = (b.right - b.left) / 2 + b.left;
  const y = (b.bottom - b.top) / 2 + b.top;
  return [x, y];
}
function dragBetween(dragSelector, dropSelector) {
  cy.clock();
  cy.get(dragSelector).then(el => {
    let dragSelectDomEl = el.get(0);
    cy.get(dropSelector).then(el2 => {
      let dropSelectDomEl = el2.get(0);
      const [x, y] = getCenter(dragSelectDomEl);
      const [xCenterDrop, yCenterDrop] = getCenter(dropSelectDomEl);
      cy.get(dragSelector)
        .trigger("mousedown", {
          button: 0,
          clientX: x,
          clientY: y
        })
        .tick(1000);
      // drag events test for button: 0 and also use the clientX and clientY values - the clientX and clientY values will be specific to your system
      cy.get(dragSelector)
        .trigger("mousemove", {
          button: 0,
          clientX: x + 10,
          clientY: y + 10
        }) // We perform a small move event of > 5 pixels this means we don't get dismissed by the sloppy click detection
        .tick(1000); // react-beautiful-dnd has a minimum 150ms timeout before starting a drag operation, so wait at least this long.

      cy.get("html") // now we perform drags on the whole screen, not just the draggable
        .trigger("mousemove", {
          button: 0,
          clientX: xCenterDrop,
          clientY: yCenterDrop
        })
        .tick(1000);
      cy.get("html")
        .trigger("mouseup", { // Causes the drop to be run
          button: 0,
          clientX: xCenterDrop,
          clientY: yCenterDrop
        })
        // .wait(200)
        // Can now test the application's post DROP state
    });
  });
}

unfortunately I can't reproduce this when running at http://teselagen.github.io/openVectorEditor/#/Editor only when running at http://localhost:3344/#/Editor

Here are steps to get my project running locally:

git clone https://github.com/TeselaGen/openVectorEditor
cd openVectorEditor/
yarn      (must have node 8+ )
yarn start
yarn run c    (runs the cypress tests locally)
click "tabs" test

You should see an error like the following:

[tnrich]

Another strange little tidbit.. this test also seems to run just fine when running headlessly via the cypress run command:

[tnrich]

@jennifer-shehane I think the label on this can now be changed from needs info?

[tnrich]

Oh, it appears that it is originating from sockjs-node

Here is an issue I've started over there as well to try to better understand where this error is coming from sockjs/sockjs-node#246

[tnrich]

Hmm I'm getting it again:

TypeError: _jp.ailf1zb is not a function

But only sometimes.

@jennifer-shehane could you give me more info on where those socks-js calls would be coming from in cypress?

Oh... maybe they're not coming from cypress but instead from my webpack hot reloader?

[bahmutov]

Yup it is the hot reloading in webpack

…

Sent from my iPhone

On Jan 18, 2019, at 15:10, Thomas Rich ***@***.***> wrote: Hmm I'm getting it again: TypeError: _jp.ailf1zb is not a function But only sometimes. @jennifer-shehane could you give me more info on where those socks-js calls would be coming from in cypress? Oh... maybe they're not coming from cypress but instead from my webpack hot reloader? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[tnrich]

Okay, I'm filtering those out now by doing:

beforeEach(function() {
  cy.server({
    whitelist: xhr => {
      if (xhr.url.indexOf('sockjs-node/') > -1) return true
      //return the default cypress whitelist filer
      return xhr.method === 'GET' && /\.(jsx?|html|css)(\?.*)?$/.test(xhr.url)
    }
  })
})

@bahmutov does that mean we won't hit that error anymore, or that we just won't see the sockjs requests?

[bahmutov]

I believe this only hides them https://docs.cypress.io/api/commands/server.html#Arguments

…

On Fri, Jan 18, 2019 at 3:14 PM Thomas Rich ***@***.***> wrote: Okay, I'm filtering those out now by doing: beforeEach(function() { cy.server({ whitelist: xhr => { if (xhr.url.indexOf('sockjs-node/') > -1) return true //return the default cypress whitelist filer return xhr.method === 'GET' && /\.(jsx?|html|css)(\?.*)?$/.test(xhr.url) } }) }) @bahmutov <https://github.com/bahmutov> does that mean we won't hit that error anymore, or that we just won't see the sockjs requests? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2823 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACHAppLZWtQ4vgOIAssm7EOS9DzMEfolks5vEisagaJpZM4Yuey9> .

-- Dr. Gleb Bahmutov, PhD Schedule video chat / phone call / meeting with me via https://calendly.com/bahmutov [email protected] @bahmutov <https://twitter.com/@bahmutov> https://glebbahmutov.com/ https://glebbahmutov.com/blog https://github.com/bahmutov

[tnrich]

Yeah, it looked like that was the case. I wonder what is going wrong in these sometimes failing cases..

[Chris2011]

I have a similar problem that the tests hangs, when I have this in my test: cy.task('log', cy.get('input[e2e-id="password-field"]'));. On the console, I only see the describe string. When I call the tests with --headed I see this:

It hangs on the XHR request. This is my test code:

it('password field should hide password in general.', () => {
        cy.visit('/');
        cy.get('input[e2e-id="password-field"]').should('exist');
        cy.get('input[e2e-id="password-field"]').should('be.visible');
        cy.task('log', cy.get('input[e2e-id="password-field"]'));
        cy.get('input[e2e-id="password-field"]').should(
            'have.type',
            'password',
        );
    });

and this is the code inside my index.js file in the plugins folder:

// HINT: Needed for Cypress to print into the node console.
    on('task', {
        log(message) {
            console.log(message);
            return null;
        },
    });

The code from @tnrich only hides it, but I don't know how to fix the root cause.

[jennifer-shehane]

@Chris2011 There is not an assertion chain have.type. You can see all supported assertion chains here: https://on.cypress.io/assertions

I think you want

cy.get('input[e2e-id="password-field"]').should(
            'have.attr',
            'type',
            'password'
        );

Did you open the devtools to see if there is an error logged in there?

[jennifer-shehane]

@tnrich Was your issue resolved? Can this be closed?

[tnrich]

Yep please close

…

On Thu, Mar 28, 2019, 11:12 PM Jennifer Shehane ***@***.***> wrote: @tnrich <https://github.com/tnrich> Was your issue resolved? Can this be closed? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2823 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACmqcbQsMRfZpstrn5MCwfrgIfT_A1xZks5vba69gaJpZM4Yuey9> .

[Chris2011]

@jennifer-shehane thx, I handled it by myself with the have.type from this url: https://docs.cypress.io/guides/references/best-practices.html and searched for have. and found the attr thing. In general, I don't use the GUI, I'm running the Headless electron. I only wanted to check whats happening, that my tests hangs and tried the GUI and saw the xhr request.

[paulfalgout]

I ran into this issue all of the sudden.. Tests passed yesterday. Today rerunning CI on the same branch and they fail consistently with the webpack-dev-server error. While I don't know why it's happening I have a solution for anyone stumbling upon this. The solution above to swallow the xhr requests doesn't work if the error happens outside of the test run (like in beforeEach or afterEach) but there should really be a reason to be running hmr for tests which is what is causing the issue. The easiest way to fix this if you can is to use --inline false with the server https://webpack.js.org/configuration/dev-server/#devserverinline

[jbinto]

We saw this on one of our apps in a CI run this morning. Never seen it before and re-running it made it go away. If we see it recur, I'll update this thread with how we fixed it.

[jennifer-shehane]

If you're experiencing a bug similar to this in Cypress, please open a new issue with a fully reproducible example that we can run. There may be a specific edge case with the issue that we need more detail to fix.