There is a huge problem with documentation examples - they might be wrong. Since they are copied from tests, or written by hand without running them, there is no guarantee that they are correct with respect to the latest Cypress version.
We could write a real end-to-end test for each example and keep it in sync, but this requires a lot of work to stay up-to-date. What if we instead executed the examples directly from the documentation pages? After all, each example has the HTML to mount and test code to run, so it contains all the parts of a real test as code blocks.
This is what @cypress/fiddle does (now you should use my fork at @bahmutov/cypress-fiddle). It contains a test file preprocessor bahmutov/cypress-markdown-preprocessor that understand the Markdown file format, finds all specially marked example blocks and creates a Cypress test out of them. For example, see bahmutov/vuepress-cypress-test-example. In that repo, the README.md file contains the following block
Notice the special HTML comments
<!-- fiddle DOM test --> and
cy.last example in the documentation becomes a fiddle like this:
And it runs as a test in Cypress
Update 1: cypress-examples
I have used bahmutov/cypress-markdown-preprocessor and @bahmutov/cypress-fiddle to implement my cypress-examples website in the repo bahmutov/cypress-examples. It now has more than 500 small examples and medium-size recipes, all tested. This is how I can record so many Cypress examples on my YouTube Channel with Cypress Tips & Tricks. Here is a typical way I answer a Cypress-related question by coding up a new example in Markdown: