Cypress test runner not rendering Blockly categories

Question

I have a React web app which uses Blockly that I'm currently trying to write automated tests for using the Cypress framework.

Cypress works pretty well for the basic process of signing on, but starts behaving inconsistently once Blockly is supposed to load.

About half the time, the entire Blockly portion of the app doesn't show up at all in the Cypress viewport. Sometimes this shows up, sometimes it doesn't, and I'm unsure what causes it or how to really reproduce it, it seems to be random.

Here is how it looks when it loads properly

Here is how it looks when it doesn't load properly

At first, I thought that the reason it didn't work is because the resources for Blockly hadn't loaded, and Cypress was trying to access resources that didn't exist.

To work around this, I added a delay, using cy.wait(). I tried anywhere from 1s-10s, but the delay doesn't seem to affect anything, no matter how long the delay is, it doesn't seem to impact if the Blockly portion of the app loads properly or not.

Here is the code for the portion of the Cypress test file used:

  it('Sign in with created profile', () => {
    cy.visit('localhost:3000/');

    cy.get('input[name="email"]')
      .type('test123@test.com').should('have.value', 'test123@test.com');

    cy.get('input[name="password"]')
      .type('testtest').should('have.value', 'testtest');
    cy.get('button[type="submit"]').click();
  });

  it('Open created project', () => {
    cy.get('div[class="project-container"]').contains('test project').click();
  });

  it('Drop 1+1 block into grid', () => { //2s delay
    cy.wait(2000).then((prom) => {
      cy.get('div[class="blocklyTreeRow"]').contains('Math').click({ force: true });
    });
  });

It works perfectly, until just after the 'Open created project' part of the test is run, then it's a hit or miss if the Blockly part of the app shows up. Refer to the images above for possible scenarios that happen.

score 0 · Answer 1 · answered Sep 05 '19 at 16:56

Please check you are not trying to automate iframe because cypress do not support iframe

Iframe opened Question :

https://github.com/cypress-io/cypress/issues/136

Else :

Try to use Aliased.

// Wait for the route aliased as 'getAccount' to respond
// without changing or stubbing its response
cy.server()
cy.route('/accounts/*').as('getAccount')
cy.visit('/accounts/123')
cy.wait('@getAccount').then((xhr) => {
  // we can now access the low level xhr
  // that contains the request body,
  // response body, status, etc
})

More documentation available here : https://docs.cypress.io/api/commands/wait.html#Alias

I looked into this, and found that there isn't an iframe used, just divs. I should also clarify that when I said I waited 2s, I wasn't waiting for an API or HTTP request, I was waiting for my computer to load the editor (which I thought was the bottleneck), which isn't the case here, so XHRs don't need to be used. — MysticalMagic, Sep 05 '19 at 18:49

Cypress test runner not rendering Blockly categories

1 Answers1