percy doesn't wait until canvas is rendered

[tillias]

Hello folks,

Many thanks for a nice product. I have a canvas where some graph should be rendered. Unfortunately without explicit wait I have nothing captured in my screenshot: https://percy.io/bb9225f6/microservice-catalog/builds/7643835

After adding explicit timeout content is rendered in canvas https://percy.io/bb9225f6/microservice-catalog/builds/7643924:

  it('impact analysis is shown', function () {
    cy.server();
    cy.route('GET', '/api/impact-analysis/microservice/4').as('apiRequest');
    cy.visit('/dashboard/impact-analysis/4');
    cy.wait('@apiRequest');
    cy.wait(500); // hack for canvas rendering, cause it seems rendering itself takes quite a while. community help is needed
    cy.percySnapshot();
  })

Is it possible somehow to get rid of this nasty wait?

Many thanks in advance

[Robdel12]

Hey @tillias, thanks for the issue! This is expected -- Percy doesn't do anything to wait, that would be between you and your test runner (once percySnapshot is called the DOM state is serialized at that moment).

Depending on how your app is built, you could probably replace the timeout with a selector that signals the canvas element has rendered (like if a class or attribute has been added to the DOM).

[tillias]

@Robdel12 many thanks for clarification. I have made some research today and it seems canvas has no additional events, it is just rendered and that was it. If some external library uses canvas to draw something, then callback is needed when draw is finished.

I will ask developers of library I'm using for some event and will have to stick to timeout I guess. Here is example when canvas is rendered, but library hasn't finished drawing yet:

https://percy.io/bb9225f6/microservice-catalog/builds/7651518 -> on the second 'release-path' snapshot there should be two canvas elements available, but in reality only first has time to draw its content

  it('release path is shown', function () {
    cy.server();
    cy.route('GET', '/api/release-path/microservice/1').as('apiRequest');

    cy.visit('/dashboard/release-path/1');

    cy.wait('@apiRequest');
    cy.get('jhi-release-path > .p3 > .vis-network > canvas');
    cy.get('jhi-release-graph > .p3 > .vis-network > canvas');

    cy.percySnapshot('release-path', { widths: [1024] });
  })

Here is how it looks like if I add timeout between cy.get()s
https://percy.io/bb9225f6/microservice-catalog/builds/7652075

    cy.get('jhi-release-path > .p3 > .vis-network > canvas');
    cy.wait(1000); // dirty hack, community help is needed
    cy.get('jhi-release-graph > .p3 > .vis-network > canvas');