All Screen Turns White when a button on the DOM is clicked.

[asadcr]

Is this a Feature or Bug?

cli + headless chrome: broken
app + real chrome: broken
user interacting with the browser: working

Current behavior:

All Screen Turns White when a button on the DOM is clicked.

Desired behavior:

it shouldn't turn white, Instead the display should be normal.

How to reproduce:

To reproduce this, the following test can be used. it should reproduce the issue.

Test code:

describe('Dashboard', function() {
    it('.should() load the page and login', function() {
        cy.visit('http://watermission-dashboard-dev.mybluemix.net');
        cy.get("#login-input").type('aali');
        cy.get("#password-input").type('watermission~11');
        cy.get(".login-button").click();
    });
    it('.should() page load fully', function() {
        cy.get("#spinner").should('be.visible');
        cy.get("#spinner", { timeout: 30000 }).should('not.be.visible');
    });
    it('.should() click the button', function() {
        cy.get("div.filter-panel",{timeout : 10000}).find("button.update-button").click();
    });
});

Additional Info (images, stack traces, etc)

This is the issue snapshot.

• Operating System: Windows 10 Pro
• Cypress Version: 1.1.4
• Browser Version: Chrome 62 / Canary 65
• ReactJS 15.6.2

[jennifer-shehane]

Thanks so much for the detailed issue. I am able to reproduce this exactly as you posted. 👍

Very quickly looking at it, I don't see an obvious reason that this is happening. So, definitely needs more investigation.

[jennifer-shehane]

@asadcr I am seeing a few new url changes (HashChange events) after the click, I'm wondering what is triggering those and if that is the expected behavior, you can see them in the Command Log:

The page loads:

http://watermission-dashboard-dev.mybluemix.net/#?country=Cambodia%2CHaiti%2CHonduras%2CIndonesia%2CKenya%2CLiberia%2CMalawi%2CMexico%2CPeru%2CPhilippines%2CSomalia%2CTanzania%2CUganda%2CUnited%20States

Then

http://watermission-dashboard-dev.mybluemix.net/#/?country=Cambodia%2CHaiti%2CHonduras%2CIndonesia%2CKenya%2CLiberia%2CMalawi%2CMexico%2CPeru%2CPhilippines%2CSomalia%2CTanzania%2CUganda%2CUnited%20States

Then

http://watermission-dashboard-dev.mybluemix.net/#/?country=Cambodia%2CHaiti%2CHonduras%2CIndonesia%2CKenya%2CLiberia%2CMalawi%2CMexico%2CPeru%2CPhilippines%2CSomalia%2CTanzania%2CUganda%2CUnited%20States&_k=zrjzrr

[asadcr]

@jennifer-shehane the URL changes is part of the functionality which helps us to get to the state of the application through the Hash Change.
Also i was able to debug and investigate the source of the issue. It seems By Clicking the button, the state of the application changes. Since its React so the child components gets updated, That's when the screen goes white.
I have also tried to load directly the saved state from the URL and it was rendered fine. So definitely some sort of state change issue.

[NicholasBoll]

I was able to reproduce using the Cypress app. It gives a before/after of clicking the button with a DOM snapshot. It looks like the React application is targeting <div class="container-fluid" id="content">. The snapshot before the button click shows the full React application. After the click that div contains an empty React root: <div data-reactroot=""></div>. It looks like the application unmounts and doesn't doesn't update.

I've isolated the performance metrics of a live browser and inside Cypress:

Browser:

Cypress:

Both are of the same click event. The Cypress one is much smaller and incomplete. The selected box is where each diverge. In Cypress, all children call unmountComponent all the way down. In the browser, the reconciler calls receiveComponent. This is consistent with what I see in the HTML. I'm not sure why the React reconciler sees the state change and unmounts the component completely without debugging the application.

The React dev tools would be helpful. I tried looking at them from within Cypress, but I just get the Cypress app (it is written using React as well).

[NicholasBoll]

Your code doesn't come with source maps, so I prettified the JS output. The split is here:

            updateChildren: function(A, t, e, g, r, u, B, C, a) {
                if (t || A) {
                    var s, c;
                    for (s in t)
                        if (t.hasOwnProperty(s)) {
                            c = A && A[s];
                            var Q = c && c._currentElement
                              , E = t[s];
                            if (null != c && o(Q, E))
                                n.receiveComponent(c, E, r, C),
                                t[s] = c;
                            else {
                                c && (g[s] = n.getHostNode(c),
                                n.unmountComponent(c, !1));
                                var M = i(E, !0);
                                t[s] = M;
                                var l = n.mountComponent(M, r, u, B, C, a);
                                e.push(l)
                            }
                        }
                    for (s in A)
                        !A.hasOwnProperty(s) || t && t.hasOwnProperty(s) || (c = A[s],
                        g[s] = n.getHostNode(c),
                        n.unmountComponent(c, !1))
                }
            },

Right in the middle if (null != c && o(Q, E)) is true in the browser and then calls receiveComponent. In Cypress it is false and calls unmountComponent

[brian-mann]

This is what we do in our own applications which enables us to use the React dev tools to bind to the application under test (instead of the outer Cypress application)

https://github.com/cypress-io/cypress/blob/develop/packages/desktop-gui/src/index.hbs#L23

When you say: "your code doesn't come with source maps" what do you mean? That code you posted is coming from your app, not Cypress. We don't minify or obfuscate our JS specifically for this purpose.

[NicholasBoll]

Sorry, I was talking about @asadcr app. I couldn't find anything that jumped out.

[brian-mann]

so I guess we need to put a debugger and figure out what c, o , Q, and E are and why they're different running underneath Cypress.

[bahmutov]

Wow, looks like a system of equations with 4 unknown variables c, o, Q and E 😆

[asadcr]

@NicholasBoll , @brian-mann I have enabled source maps in this environment, You should be able to debug easier now. Thank you for the Help

[NicholasBoll]

@asadcr If I manually comment out cy.get("div.filter-panel",{timeout : 10000}).find("button.update-button").click(); and wait for Cypress to get that point and stop and then manually click the button it seems to work just fine. So it isn't an issue of the app being inside Cypress.

So that narrows down the issue to Cypress simulating the button click. Digging through the stack traces didn't reveal anything interesting. I'm not sure how to get the React dev tools hooked up to the app in an iframe - I installed the React extension in the Cypress-controlled Chrome browser but I just got Cypress's React app.

The only thing I noticed that might fix the issue is the button in question (in panel-container.js, line 323) doesn't have a type attribute which means it will default to a submit button. I used a cy.pause() before the click command and manually added type="button" and resumed and it still happened. I tried .trigger('click') instead of .click() and it still happened.

I have a React app under Cypress tests for over a year without an issue, so there must be some weird interaction with the Watermission app and Cypress event simulation. I wasn't able to figure it out. @brian-mann might be able to give tips on getting into React dev tools in the app while running the Cypress desktop app.

[jennifer-shehane]

Unfortunately we have to close this issue due to inactivity. Please comment if there is new information to provide concerning the original issue and we can reopen.

[srishti-mull]

Is there a fix to this issue?
I am facing a similar issue on click of a button where the cypress window turns completely empty on click of a button. Although there are no URL changes on click of this button.

[jennifer-shehane]

@srishti-mull 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.