Cypress test runner not rendering Blockly categories - cypress

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.

Answer 1

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