I have a leaflet map with several markers. A button is clicked which adds four more markers. My cypress test counts the number of img (the markers) tags within an html element before the button click. The button is clicked, and the count is calculated again. Problem is that I am receiving the original count when it should be 4 higher.
- This all works fine in headed mode - with the browser shown. It fails in headless mode.
- When in a browser, no cypress test, I can watch the DOM add the 4 img tags.
- I have used waits and timeouts as you can see, but that doesnt seem to help. Five seconds should be plenty, but I have pushed it out to a minute.
- I have also tried clearing local storage.
Question:Is there something about headless mode that doesnt update the DOM?What am i missing?
versions:
Cypress: 13.4.0
Browser: Electron 114 (headless).
Angular: 14.3
the test code
it.only("Verify Map Unit Icons checkbox works", () => { // Ensure the element exists and has the expected text cy.get('[data-testid="bob"]') .contains("BOB") .should("exist"); // Get initial number of img tag. Should be 9 cy.get(".leaflet-pane.leaflet-marker-pane") .find("img") .should("have.length", 9); // Click the button cy.get('[data-testid="unit-icon-toggle"]').click(); cy.wait(5000); // Get updated number of img tag. Should be 13 cy.get(".leaflet-pane.leaflet-marker-pane") .find("img", { timeout: 5000 }) .should("have.length", 13); }); The error that I am getting
AssertionError: Timed out retrying after 5000ms: Not enough elements found. Found '9', expected '13'.+ expected - actual -9+13