bahmutov/cypress-examples

Stars
105
Rank 328,196 (Top 7 %)
Language
JavaScript
Created over 4 years ago
Updated 7 months ago

bahmutov/cypress-examples

bahmutov

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Static site with Cypress examples tested right from the Markdown sources

@bahmutov/cypress-examples

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
- Cypress runs tests using Markdown source files via cypress-markdown-preprocessor and cypress-fiddle
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
- Scrape Static Site with Algolia blog post
- scrape happens after deploying the docs to GitHub Pages in .github/workflows/deployed.yml workflow
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/

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

code-snippets

Chrome DevTools code snippets

start-server-and-test

Starts server, waits for URL, then runs test command; when the tests end, shuts down server

npm-install

GitHub Action for install npm dependencies with caching without any configuration

next-update

Tests if module's dependencies can be updated to latest version

bottle-service

Instant web applications restored from ServiceWorker cache

javascript-journey

Source code for blog post Journey from procedural to reactive JavaScript with stops

babel-service

On demand targeted transpiling inside the browser's ServiceWorker

cy-api

Cypress custom command "cy.api" for end-to-end API testing

dont-break

Checks if the current version of your package would break dependent projects

cypress-and-jest

Cypress and Jest both with code coverage running unit tests

express-service

Package ExpressJS server to run inside a ServiceWorker

cypress-failed-log

Saves the Cypress test command log as a JSON file if a test fails

snap-shot

Jest-like snapshot feature for the rest of us, works magically by finding the right caller function

pre-git

Automatically install pre-commit / pre-push hooks in your git repo

cypress-svelte-unit-test

Unit testing Svelte components in Cypress E2E test runner

cypress-angular-unit-test

Trying to load and bootstrap Angular component dynamically inside Cypress

cypress-dark

Dark and Halloween color themes for Cypress.io test runner

snap-shot-it

Smarter snapshot utility for Mocha and BDD test runners + data-driven testing!

draw-cycle

Simple Cycle.js application visualized: streams, events, DOM

now-pipeline

Simple CI pipeline with goal to deploy new version at Zeit Now cloud if tests pass

console.table

Adds console.table method that prints an array of objects as a table in console

npm-quick-run

Quickly run NPM script by prefix without typing the full name

next-and-cypress-example

Next.js example instrumented for code coverage from Cypress tests

cypress-skip-and-only-ui

Client-side buttons to run a single test or skip it for Cypress test runner

cache-require-paths

Caches resolved paths in module require to avoid Node hunting for right module. Speeds up app load.

npm-module-checklist

Steps to check when starting, working and publishing a module to NPM

really-need

Node require wrapper with options for cache busting, pre- and post-processing

add-typescript-to-cypress

Quickly adds TypeScript spec support to Cypress

cypress-select-tests

User space solution for picking Cypress tests to run

test-todomvc-using-app-actions

Example Cypress tests going from page objects to app actions

cypress-movie

Generate movies from your Cypress end-to-end tests

eslint-rules

My custom eslint rules in addition to the ones provided at http://eslint.org/

console-log-div

Clones console.log calls to a created div in the page. Great for demos and experiments.

rambo

Automatic Ramda solution bot

git-branches

Bash shell to show current branches and their descriptions using only default Git features

cypress-recurse

A way to re-run Cypress commands until a predicate function returns true

game-of-github

Play Game of Life in your GitHub contributions

have-it

The fastest NPM install does nothing because you already have it

node-rx-cycle

Example using RxJS and Cycle.js on the server to handle requests (NOT server-side rendering)

lazy-ass

Lazy node assertions without performance penalty

talks

Public presentations

node-hook

Run source transform function on node require call

as-a

Runs a given command with additional environment settings for simple local development

ban-sensitive-files

Checks filenames to be committed against a library of filename rules to prevent sensitive files in Git

cypress-split

Split Cypress specs across parallel CI machines for speed

js-complexity-viz

JavaScript source code complexity tool

changed-log

Returns all commit messages between 2 versions of an NPM module

cypress-network-idle

A little Cypress.io plugin for waiting for network to be idle before continuing with the test

rollem

Roll up multiple ES6 bundles at once

cypress-watch-and-reload

Reloads Cypress when one of the watched files changes

cypress-data-session

Cypress command for flexible test data setup

cypress-esbuild-preprocessor

Bundle Cypress specs using esbuild

functional-pipeline

Quickly chain method calls, property access and functions into a pipeline

cypress-if

Easy conditional if-else logic for your Cypress tests when there is no other way

demo-docker-cypress-included

Demo running the complete Docker image `cypress/included`

vue-vuex-todomvc

Example TodoMVC Vue.js app with Vuex store and server backend via REST

manpm

Shows the relevant part of NPM module's README file right in your terminal

mocked-env

Easy way to mock process.env during BDD testing

compiled

Compiles the ES* bundle to your NodeJS version on install

ng-simple-webrtc

AngularJS wrapper for SimpleWebRTC client from https://simplewebrtc.com/

cypress-playwright

Run Cypress tests using Playwright and Playwright tests using Cypress

next-updater

Dependable and safe automatic dependency updater for Nodejs packages

rocha

Runs Mocha unit tests but randomizes their order

node-mock-examples

Examples of tests that mock Node system APIs: fs, http, child_process, timers

generator-node-bahmutov

My personal Node project boilerplate generator

center-code

Shows the file's source centered in the terminal

bdd-stdin

Utility for easily feeding mock responses to unit tests that require command line input from the user

instant-vdom-todo

Prehydrated, self-rewriting TodoMVC using Virtual-Dom and bottle-service

hydrate-app

Quick app pre-loading using saved HTML snapshot

cypress-workshop-basics

Basics of end-to-end testing with Cypress.io test runner

iframe-api

Bidirectional method calls API between external and iframed code.

cly

A prototype of Cypress CLI for quicker project scaffolding

cy-spok

Playing with spok inside Cypress

cypress-extends

Cypress plugin that adds "extends" support to the configuration file

schema-shot

Framework-agnostic snapshot testing using "schema by example" for highly dynamic data

spots

Partial function argument binding with placeholders

change-by-example

Finds a function that transforms a given object into another given object.

condition-circle

Checks CircleCI environment before publishing successful build using semantic-release

cypress-repeat

Run Cypress multiple times in a row

grunty

Run any grunt plugin as NPM script without Gruntfile.js

cypress-gh-action-example

Example running Cypress tests inside GitHub Action

all-nvm

Run any NPM command (including install) in all versions of Node managed by NVM

ci-publish

Poor man's semantic release utility. Let the CI do the `npm publish` step after the build passes

find-cypress-specs

Find Cypress spec files using the config settings

prettier-config-example

Example project with different per-folder prettier config and VSCode formatting on save

next-ver

Tells you the next semantic version for your local package

xplain

JavaScript API documentation generator that uses unit tests as examples, see example API doc at

todo-graphql-example

Example Todo app on top of json-graphql-server

local-cypress

Use Cypress without global objects

d3-helpers

Little utility D3 functions

comment-value

Instruments a Node program and updates its comments with computed expression values

cypress-hyperapp-unit-test

Unit test Hyperapp components using Cypress

google-cloud-build-example

Example running Cypress end-to-end tests on Google Cloud Build

heroin

Strong and addictive dependency injection for JavaScript

ggit

Local git command wrappers

wiseli

See the repo's example while installing it with NPM

cypress-timings

A Cypress plugin for reporting individual command timings

term-to-html

Stream terminal output with ansi codes into nicely formatted HTML

cypress-angularjs-unit-test

Unit test Angularjs code using Cypress.io test runner

cypress-get-it

Get elements by data attribute by creating a Cy command on the fly