Sometimes you need to debug a test failing on CI, and neither the screenshots nor videos are enough. Hmm, why does this test fail?!!
How about saving the full HTML page, including the resources? You can do it automatically using my cyclope plugin.
// in cypress/support/index.js file
// https://github.com/bahmutov/cyclope
import { savePageIfTestFailed } from 'cyclope'
afterEach(savePageIfTestFailed)
It is just like the DOM snapshot in Cypress time-traveling debugger (in fact, it uses the same code to grab the DOM as Cypress does to create those snapshots). Store the saved “cypress/failed” folder on CI server and then open it to inspect the page at the moment of failure. Here is a screenshot of the CircleCI run with the full page saved. You can see all stored files on the “Artifacts” tab:
Click on the “cypress/failed/spec.js/…name of the test/index.html” file to open it. There is no JavaScript (it is stripped out automatically when grabbing the DOM snapshot), but you can inspect the static page and see why the test failed to find one element and instead found three in this case.
Ohhh, the test assumed there will be one TODO element, but there were three - two elements were just invisible. Now that we know the problem, we can fix it - find the solution in my blog post “Save The Page On Test Failure“.
Bonus: if you want to observe the entire browser during the test execution and be able to step through the execution afterwards, check out replay.io