Skip to content

bahmutov/cypress-examples

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@bahmutov/cypress-examples cypress-examples

ci status prettier status deployed status scrape renovate-app badge cypress version

Static site with Cypress examples tested right from the Markdown sources

Live site glebbahmutov.com/cypress-examples/

Benefits

  • single source of truth for tests and HTML pages. No more copy / pasting
  • great development experience with live reload and optimized static build thanks to Vuepress and Prettier formatting
  • excellent text and code comment search thanks to Algolia
  • recipes that are not included in the NPM package but deployed to the static pages

Blog posts

The following blog posts explain how I write Cypress demo tests using Markdown in this repository

You can see the cypress.config.js and plugins.js to learn how cypress-markdown-preprocessor is set tup.

Notes

  • use "function" syntax in <script> tags that need to be live, otherwise Markdown escapes => arrows?!
  • if the HTML block includes the <style> section, put it at the start of the block, otherwise it might get lost

Try published specs

You can run the exported spec files.

  • Start a new project or use an existing project, and add this module as a dev dependency
$ npm i -D @bahmutov/cypress-examples
  • Open or run Cypress and point at the folder inside node_modules
$ npx cypress open --project node_modules/\@bahmutov/cypress-examples/

Spec running

Development

There is a difference between running Markdown files and testing fully exported specs against the built site. To do this all in a single command locally run

npm run dev:export

This command builds the static site, exports the Markdown specs into JavaScript specs, starts local server, and when it responds, starts Cypress.

You can also export all Markdown files into JavaScript, run them locally, and run all E2E tests using the JS specs with:

npm run run:exported