E2E testing LiveView with Cypress

Phoenix Forum Questions / Help
, ,
1

Hi folks,

There is a lot of high-quality material for e2e testing with Cypress for the “classical” web apps, but not much about using Cypress with LiveView.

One of the problems we are facing right now is waiting for the page to be loaded after live navigation events, and it’s getting unwieldy.
First, we set windows.viewReady after LiveView finished loading.

For regular views with a typical lifecycle


window.addEventListener('phx:page-loading-stop', (info) => {
  window.viewReady = true;
});

and for views rendered with live_render


let liveSocket = new LiveSocket('/live', Socket, {
  hooks: {
    SignalPageLoaded: {
       mounted() {
        window.viewReady = true;
      },
    }
   },
});

Then we need to drop “wait” statements in every step happening after the live navigation event:

cy.window()
  .its('viewReady')
  .then(() => {
    cy.get...
  });

Without that, we are getting quirky failures about nodes not being a part of the DOM tree anymore.

I wonder how other people out there solved that problem and if there is something that can completely eliminate that problem/workaround?

Btw, if you have LiveView E2E testing recipes that you are proud of - please feel free to share :blush:

1 Like
2

I am using just 1 line to wait for the connection:

cy.get("body > [data-phx-main].phx-connected").should("exist");
4 Likes
3

Nice one!