├── .circleci └── config.yml ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .node-version ├── .npmrc ├── .vscode └── settings.json ├── Development.md ├── README.md ├── examples ├── blogs__a11y │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ ├── failing-spec.cy.js │ │ │ └── passing-spec.cy.js │ │ └── support │ │ │ └── e2e.js │ ├── images │ │ └── failing.png │ ├── index-bad.html │ ├── index.html │ └── package.json ├── blogs__application-actions │ ├── .env │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ ├── spec.cy.js │ │ │ └── utils.cy.js │ │ ├── fixtures │ │ │ └── 3-todos.json │ │ └── support │ │ │ ├── commands.js │ │ │ ├── e2e.js │ │ │ └── index.d.ts │ ├── index.html │ ├── js │ │ ├── app.jsx │ │ ├── footer.jsx │ │ ├── todoItem.jsx │ │ ├── todoModel.js │ │ └── utils.js │ ├── package.json │ └── vendor │ │ ├── css │ │ ├── base.css │ │ └── index.css │ │ └── js │ │ ├── JSXTransformer.js │ │ ├── base.js │ │ ├── director.js │ │ └── react-with-addons.js ├── blogs__assertion-counting │ ├── README.md │ ├── app.js │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ ├── errors.cy.js │ │ │ └── spec.cy.js │ │ └── support │ │ │ └── e2e.js │ ├── images │ │ ├── confirm.gif │ │ ├── fail-test-on-unhandled-promise-rejection.gif │ │ ├── plan.gif │ │ └── without-delay.png │ ├── index.html │ └── package.json ├── blogs__class-decorator │ ├── .babelrc │ ├── .eslintrc.json │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ └── app-decorator.png │ ├── package-lock.json │ ├── package.json │ └── src │ │ ├── actions │ │ ├── index.cy-spec.js │ │ ├── index.js │ │ └── index.spec.js │ │ ├── components │ │ ├── App.jsx │ │ ├── Footer.jsx │ │ ├── Header.jsx │ │ ├── Link.jsx │ │ ├── MainSection.jsx │ │ ├── TodoItem.jsx │ │ ├── TodoList.jsx │ │ └── TodoTextInput.jsx │ │ ├── constants │ │ ├── ActionTypes.js │ │ └── TodoFilters.js │ │ ├── containers │ │ ├── FilterLink.js │ │ ├── Header.js │ │ ├── MainSection.js │ │ └── VisibleTodoList.js │ │ ├── decorators │ │ └── index.js │ │ ├── index.html │ │ ├── index.jsx │ │ ├── reducers │ │ ├── index.js │ │ ├── todos.js │ │ ├── todos.spec.js │ │ └── visibilityFilter.js │ │ ├── selectors │ │ └── index.js │ │ └── store.jsx ├── blogs__codepen-demo │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── img │ │ └── all-tests.png │ └── package.json ├── blogs__dayjs │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ ├── spec.cy.js │ │ │ └── spec2.cy.js │ │ └── support │ │ │ └── e2e.js │ ├── index.html │ └── package.json ├── blogs__e2e-api-testing │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── example_spec.cy.js │ ├── db.json │ ├── img │ │ └── demo.png │ └── package.json ├── blogs__e2e-snapshots │ ├── README.md │ ├── app.js │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ ├── api-spec.cy.js │ │ │ ├── store-spec.cy.js │ │ │ ├── ui-spec.cy.js │ │ │ └── unit-spec.cy.js │ │ ├── fixtures │ │ │ └── example.json │ │ └── support │ │ │ ├── commands.js │ │ │ ├── e2e.js │ │ │ └── utils.js │ ├── index.html │ ├── package.json │ ├── reset-db.js │ └── snapshots.js ├── blogs__element-coverage │ ├── .env │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ └── spec.cy.js │ │ ├── fixtures │ │ │ └── example.json │ │ └── support │ │ │ ├── commands.js │ │ │ └── e2e.js │ ├── img │ │ └── elements.png │ ├── package.json │ ├── public │ │ └── index.html │ └── src │ │ ├── actions │ │ ├── index.js │ │ └── index.spec.js │ │ ├── components │ │ ├── App.js │ │ ├── App.spec.js │ │ ├── Footer.js │ │ ├── Footer.spec.js │ │ ├── Header.js │ │ ├── Header.spec.js │ │ ├── Link.js │ │ ├── Link.spec.js │ │ ├── MainSection.js │ │ ├── MainSection.spec.js │ │ ├── TodoItem.js │ │ ├── TodoItem.spec.js │ │ ├── TodoList.js │ │ ├── TodoList.spec.js │ │ ├── TodoTextInput.js │ │ └── TodoTextInput.spec.js │ │ ├── constants │ │ ├── ActionTypes.js │ │ └── TodoFilters.js │ │ ├── containers │ │ ├── FilterLink.js │ │ ├── Header.js │ │ ├── MainSection.js │ │ └── VisibleTodoList.js │ │ ├── index.js │ │ ├── reducers │ │ ├── index.js │ │ ├── todos.js │ │ ├── todos.spec.js │ │ └── visibilityFilter.js │ │ └── selectors │ │ └── index.js ├── blogs__form-submit │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── html │ │ └── index.html │ └── package.json ├── blogs__iframes │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ ├── button-spec.cy.js │ │ │ ├── custom-command-spec.cy.js │ │ │ ├── first-spec.cy.js │ │ │ ├── plugin-spec.cy.js │ │ │ ├── single-its-spec.cy.js │ │ │ ├── spy-on-fetch-spec.cy.js │ │ │ └── xhr-spec.cy.js │ │ └── support │ │ │ └── e2e.js │ ├── index.html │ └── package.json ├── blogs__notification │ ├── README.md │ ├── app.js │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ ├── cannot-use-spy.png │ │ ├── enable-cypress-notifications.png │ │ ├── enabled.png │ │ ├── spying-via-workaround.png │ │ └── tests.png │ ├── index.html │ └── package.json ├── blogs__testing-redux-store │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ ├── __snapshots__ │ │ │ │ └── spec.js.snap │ │ │ └── spec.cy.js │ │ ├── fixtures │ │ │ └── 3-todos.json │ │ └── support │ │ │ ├── commands.js │ │ │ └── e2e.js │ ├── package.json │ ├── public │ │ └── index.html │ └── src │ │ ├── actions │ │ ├── index.js │ │ └── index.spec.js │ │ ├── components │ │ ├── App.js │ │ ├── App.spec.js │ │ ├── Footer.js │ │ ├── Footer.spec.js │ │ ├── Header.js │ │ ├── Header.spec.js │ │ ├── Link.js │ │ ├── Link.spec.js │ │ ├── MainSection.js │ │ ├── MainSection.spec.js │ │ ├── TodoItem.js │ │ ├── TodoItem.spec.js │ │ ├── TodoList.js │ │ ├── TodoList.spec.js │ │ ├── TodoTextInput.js │ │ └── TodoTextInput.spec.js │ │ ├── constants │ │ ├── ActionTypes.js │ │ └── TodoFilters.js │ │ ├── containers │ │ ├── FilterLink.js │ │ ├── Header.js │ │ ├── MainSection.js │ │ └── VisibleTodoList.js │ │ ├── index.js │ │ ├── reducers │ │ ├── index.js │ │ ├── todos.js │ │ ├── todos.spec.js │ │ └── visibilityFilter.js │ │ └── selectors │ │ └── index.js ├── blogs__use-react-devtools │ ├── .env │ ├── 4.28.0_0 │ │ ├── _metadata │ │ │ ├── computed_hashes.json │ │ │ └── verified_contents.json │ │ ├── build │ │ │ ├── 52.chunk.js │ │ │ ├── backendManager.js │ │ │ ├── background.js │ │ │ ├── importFile.worker.worker.js │ │ │ ├── installHook.js │ │ │ ├── main.js │ │ │ ├── panel.js │ │ │ ├── parseHookNames.chunk.js │ │ │ ├── parseSourceAndMetadata.worker.worker.js │ │ │ ├── prepareInjection.js │ │ │ ├── proxy.js │ │ │ ├── react_devtools_backend_compact.js │ │ │ ├── react_devtools_backend_compact.js.map │ │ │ └── renderer.js │ │ ├── icons │ │ │ ├── 128-deadcode.png │ │ │ ├── 128-development.png │ │ │ ├── 128-disabled.png │ │ │ ├── 128-outdated.png │ │ │ ├── 128-production.png │ │ │ ├── 128-restricted.png │ │ │ ├── 128-unminified.png │ │ │ ├── 16-deadcode.png │ │ │ ├── 16-development.png │ │ │ ├── 16-disabled.png │ │ │ ├── 16-outdated.png │ │ │ ├── 16-production.png │ │ │ ├── 16-restricted.png │ │ │ ├── 16-unminified.png │ │ │ ├── 32-deadcode.png │ │ │ ├── 32-development.png │ │ │ ├── 32-disabled.png │ │ │ ├── 32-outdated.png │ │ │ ├── 32-production.png │ │ │ ├── 32-restricted.png │ │ │ ├── 32-unminified.png │ │ │ ├── 48-deadcode.png │ │ │ ├── 48-development.png │ │ │ ├── 48-disabled.png │ │ │ ├── 48-outdated.png │ │ │ ├── 48-production.png │ │ │ ├── 48-restricted.png │ │ │ ├── 48-unminified.png │ │ │ ├── deadcode.svg │ │ │ ├── development.svg │ │ │ ├── disabled.svg │ │ │ ├── outdated.svg │ │ │ ├── production.svg │ │ │ └── restricted.svg │ │ ├── main.html │ │ ├── manifest.fingerprint │ │ ├── manifest.json │ │ ├── panel.html │ │ └── popups │ │ │ ├── deadcode.html │ │ │ ├── development.html │ │ │ ├── disabled.html │ │ │ ├── outdated.html │ │ │ ├── production.html │ │ │ ├── restricted.html │ │ │ ├── shared.css │ │ │ ├── shared.js │ │ │ └── unminified.html │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ └── spec.cy.js │ │ ├── fixtures │ │ │ └── example.json │ │ └── support │ │ │ └── e2e.js │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── index.css │ │ └── index.js ├── blogs__vue-vuex-rest │ ├── README.md │ ├── app.js │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ ├── api-spec.cy.js │ │ │ ├── speed-spec.cy.js │ │ │ ├── store-spec.cy.js │ │ │ └── ui-spec.cy.js │ │ ├── fixtures │ │ │ ├── example.json │ │ │ └── todos.json │ │ └── support │ │ │ └── utils.js │ ├── img │ │ ├── speed-spec.png │ │ └── vue-vuex-rest.png │ ├── index.html │ ├── package.json │ └── reset-db.js ├── extending-cypress__chai-assertions │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ └── extending-chai-assertion-plugins-spec.cy.js │ │ └── support │ │ │ ├── e2e.js │ │ │ └── index.d.ts │ ├── images │ │ └── custom-assertion-intellisense.png │ └── package.json ├── file-upload-react │ ├── cypress.config.js │ └── cypress │ │ ├── e2e │ │ ├── csv-file-spec.cy.js │ │ ├── spec.cy.js │ │ ├── upload-plugin-spec.cy.js │ │ └── upload-via-app-spec.cy.js │ │ └── support │ │ └── e2e.js ├── fundamentals__add-custom-command-ts │ ├── README.md │ ├── cypress.config.ts │ ├── cypress │ │ ├── e2e │ │ │ ├── async-command.cy.ts │ │ │ └── spec.ts │ │ └── support │ │ │ ├── e2e.ts │ │ │ └── index.d.ts │ ├── images │ │ └── data-cy.png │ ├── index.html │ ├── package.json │ └── tsconfig.json ├── fundamentals__add-custom-command │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ ├── async-command.cy.js │ │ │ └── spec.cy.js │ │ └── support │ │ │ ├── e2e.js │ │ │ └── index.d.ts │ ├── images │ │ ├── async-add.png │ │ ├── custom-command-found.png │ │ ├── custom-command-not-found.png │ │ └── wait-until.png │ ├── index.html │ └── package.json ├── fundamentals__chrome-remote-debugging │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ └── example.png │ ├── index.html │ └── package.json ├── fundamentals__custom-browsers │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ └── spec.cy.js │ │ └── plugins │ │ │ ├── brave.js │ │ │ └── tasks.js │ ├── images │ │ ├── brave.png │ │ └── only-chrome.png │ └── package.json ├── fundamentals__cy-events │ ├── README.md │ ├── app.js │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ ├── cy-on-spec.cy.js │ │ │ └── cypress-on-spec.cy.js │ ├── index.html │ └── package.json ├── fundamentals__dynamic-tests-from-api │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── users-spec.cy.js │ ├── images │ │ └── users.png │ ├── index.html │ └── package.json ├── fundamentals__dynamic-tests-from-csv │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ └── csv-spec.cy.js │ │ └── plugins │ │ │ └── users.csv │ ├── images │ │ └── csv.png │ ├── index.html │ └── package.json ├── fundamentals__dynamic-tests │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ ├── fixture-spec.cy.js │ │ │ ├── list-spec.cy.js │ │ │ ├── request-spec.cy.js │ │ │ ├── subdomains-spec.cy.js │ │ │ ├── task-spec.cy.js │ │ │ ├── user-spec.cy.js │ │ │ └── viewports-spec.cy.js │ │ ├── fixtures │ │ │ └── colors.json │ │ └── support │ │ │ └── e2e.js │ ├── images │ │ └── users.png │ └── package.json ├── fundamentals__errors │ ├── README.md │ ├── app.js │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ ├── app-error.cy.js │ │ │ ├── test-fails.cy.js │ │ │ ├── unhandled-promise-in-test.cy.js │ │ │ ├── unhandled-promise.cy.js │ │ │ └── unhandled-promise2.cy.js │ ├── images │ │ ├── app-error.gif │ │ └── test-error.gif │ ├── index.html │ └── package.json ├── fundamentals__fixtures │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ ├── list-spec.cy.js │ │ │ ├── load-fixtures-spec.cy.js │ │ │ ├── multiple-fixtures-spec.cy.js │ │ │ ├── require-fixtures-spec.cy.js │ │ │ ├── sanity-js-spec.cy.js │ │ │ └── single-fixture-spec.cy.js │ │ ├── fixtures │ │ │ ├── city.json │ │ │ ├── country.json │ │ │ ├── names.js │ │ │ └── users.json │ │ └── support │ │ │ └── e2e.js │ └── package.json ├── fundamentals__module-api-wrap │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── package.json │ └── run-me.js ├── fundamentals__module-api │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ ├── first-spec.cy.js │ │ │ ├── second-spec.cy.js │ │ │ └── third-spec.cy.js │ │ └── support │ │ │ ├── commands.js │ │ │ ├── e2e.js │ │ │ └── utils │ │ │ ├── append_key.js │ │ │ └── get_selector.js │ ├── e2e-tests.js │ └── package.json ├── fundamentals__node-modules │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ └── es2015-commonjs-modules-spec.cy.js │ │ └── support │ │ │ ├── e2e.js │ │ │ └── utils │ │ │ ├── append_key.js │ │ │ └── get_selector.js │ └── package.json ├── fundamentals__timeout │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ ├── all-tests-spec.cy.js │ │ │ ├── spec.cy.js │ │ │ └── timeout.cy.js │ ├── images │ │ └── test-is-too-long.png │ └── package.json ├── fundamentals__typescript │ ├── README.Md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ └── tests.spec.cy.ts │ │ ├── fixtures │ │ │ └── test.html │ │ ├── support │ │ │ ├── commands.ts │ │ │ └── e2e.js │ │ └── types.d.ts │ ├── package.json │ └── tsconfig.json ├── fundamentals__window-size │ ├── 200px.png │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ └── page.png │ ├── index.html │ └── package.json ├── logging-in__basic-auth │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ └── login.png │ ├── package.json │ ├── public │ │ ├── app.css │ │ ├── app.js │ │ └── index.html │ └── server.js ├── logging-in__csrf-tokens │ ├── README.md │ ├── csrf.hbs │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── logging-in-csrf-tokens-spec.cy.js │ ├── dashboard.hbs │ ├── images │ │ ├── csrf.png │ │ └── tests.png │ ├── login.hbs │ ├── package.json │ └── server.js ├── logging-in__html-web-forms │ ├── README.md │ ├── admin.hbs │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── logging-in-html-web-form-spec.cy.js │ ├── dashboard.hbs │ ├── images │ │ └── login.png │ ├── login.hbs │ ├── package.json │ ├── server.js │ ├── unauthorized.hbs │ └── users.hbs ├── logging-in__jwt │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ ├── spec.cy.js │ │ │ └── using-ui-spec.cy.js │ ├── images │ │ ├── get-users.png │ │ └── jwt.png │ ├── package.json │ ├── server │ │ ├── _helpers │ │ │ ├── error-handler.js │ │ │ └── jwt.js │ │ ├── config.json │ │ ├── index.js │ │ └── users │ │ │ ├── user.service.js │ │ │ └── users.controller.js │ ├── src │ │ ├── _helpers │ │ │ ├── auth-header.js │ │ │ ├── fake-backend.js │ │ │ ├── index.js │ │ │ └── router.js │ │ ├── _services │ │ │ ├── index.js │ │ │ └── user.service.js │ │ ├── _store │ │ │ ├── alert.module.js │ │ │ ├── authentication.module.js │ │ │ ├── index.js │ │ │ └── users.module.js │ │ ├── app │ │ │ └── App.vue │ │ ├── home │ │ │ └── HomePage.vue │ │ ├── index.html │ │ ├── index.js │ │ └── login │ │ │ └── LoginPage.vue │ └── webpack.config.js ├── logging-in__single-sign-on │ ├── README.md │ ├── app_server.js │ ├── auth_server.js │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ └── logging-in-single-sign-on-spec.cy.js │ │ └── support │ │ │ ├── commands.js │ │ │ └── e2e.js │ ├── dashboard.hbs │ ├── index.hbs │ ├── package.json │ └── unauthorized.hbs ├── logging-in__using-app-code │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ └── login.png │ ├── package.json │ ├── server │ │ ├── _helpers │ │ │ ├── error-handler.js │ │ │ └── jwt.js │ │ ├── config.json │ │ ├── index.js │ │ └── users │ │ │ ├── user.service.js │ │ │ └── users.controller.js │ ├── src │ │ ├── _helpers │ │ │ ├── auth-header.js │ │ │ ├── fake-backend.js │ │ │ ├── index.js │ │ │ └── router.js │ │ ├── _services │ │ │ ├── index.js │ │ │ └── user.service.js │ │ ├── _store │ │ │ ├── alert.module.js │ │ │ ├── authentication.module.js │ │ │ ├── index.js │ │ │ └── users.module.js │ │ ├── app │ │ │ └── App.vue │ │ ├── home │ │ │ └── HomePage.vue │ │ ├── index.html │ │ ├── index.js │ │ └── login │ │ │ └── LoginPage.vue │ └── webpack.config.js ├── logging-in__xhr-web-forms │ ├── README.md │ ├── admin.hbs │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ ├── custom-command-spec.cy.js │ │ │ ├── logging-in-xhr-web-form-spec.cy.js │ │ │ ├── logging-via-request-spec.cy.js │ │ │ └── slow-login-spec.cy.js │ ├── dashboard.hbs │ ├── images │ │ └── tests.png │ ├── login-slow.hbs │ ├── login.hbs │ ├── package.json │ ├── server.js │ └── users.hbs ├── preprocessors__flow-browserify │ ├── .flowconfig │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ └── spec.cy.js │ │ ├── fixtures │ │ │ └── example.json │ │ └── support │ │ │ ├── add.js │ │ │ ├── commands.js │ │ │ └── e2e.js │ └── package.json ├── preprocessors__grep │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ ├── feature-a.cy.js │ │ │ └── feature-b.cy.js │ ├── images │ │ └── grep-admin.png │ └── package.json ├── preprocessors__typescript-browserify │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ └── spec.cy.ts │ │ └── support │ │ │ └── add.ts │ ├── package.json │ └── tsconfig.json ├── preprocessors__typescript-webpack │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ └── spec.cy.ts │ │ └── support │ │ │ ├── add.ts │ │ │ ├── commands.ts │ │ │ └── e2e.ts │ ├── img │ │ ├── cy-type-definitions.png │ │ ├── cy-without-type-definition.png │ │ ├── gui.png │ │ └── source-map.png │ ├── package.json │ ├── tsconfig.json │ ├── tslint.json │ └── webpack.config.js ├── server-communication__bootstrapping-your-app │ ├── README.md │ ├── app.js │ ├── bootstrap.hbs │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ └── bootstrapping_your_app_spec.cy.js │ │ └── fixtures │ │ │ └── bootstrap.json │ ├── package.json │ ├── server.js │ └── xhr.hbs ├── server-communication__env-variables │ ├── .env │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ └── package.json ├── server-communication__offline │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── offline-spec.cy.js │ ├── images │ │ └── offline.gif │ ├── index.html │ ├── offline.js │ ├── package.json │ └── styles.css ├── server-communication__pass-value-between-specs │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ ├── first-spec.cy.js │ │ │ └── second-spec.cy.js │ └── package.json ├── server-communication__request │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── index.js │ └── package.json ├── server-communication__seeding-database-in-node │ ├── .gitignore │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ └── seeding_database_in_node_spec.cy.js │ │ └── fixtures │ │ │ └── seed.json │ ├── index.html │ ├── package.json │ └── server │ │ ├── db.js │ │ ├── index.js │ │ └── routes.js ├── server-communication__server-timing │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── README.md │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ ├── limit.png │ │ ├── log.png │ │ └── print.png │ ├── index.js │ └── package.json ├── server-communication__stream-tests │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ └── spec.cy.js │ │ └── support │ │ │ └── e2e.js │ ├── images │ │ ├── how-it-works.png │ │ └── tests.png │ ├── index.js │ └── package.json ├── server-communication__visit-2nd-domain │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ ├── using-file-spec.cy.js │ │ │ └── using-task-spec.cy.js │ ├── img │ │ └── screenshot.png │ └── package.json ├── server-communication__wait-for-api │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ └── ready.png │ ├── package.json │ ├── public │ │ └── index.html │ └── server.js ├── server-communication__xhr-assertions │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ ├── clock-control.cy.js │ │ │ ├── multiple-requests.cy.js │ │ │ ├── spec.cy.js │ │ │ ├── spok-spec.cy.js │ │ │ ├── wait-vs-get.cy.js │ │ │ └── xml-spec.cy.js │ ├── images │ │ ├── assertions.png │ │ ├── clock.gif │ │ ├── cy-get-example.png │ │ ├── cy-wait-example.png │ │ ├── log-xhr.png │ │ ├── multiple.png │ │ ├── re-run.gif │ │ └── spok.png │ ├── index.html │ ├── package.json │ └── server.js ├── stubbing-spying__console │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ └── console-example.png │ ├── index.html │ └── package.json ├── stubbing-spying__functions │ ├── README.md │ ├── api.js │ ├── auth.js │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── unit-test-stubbing-dependencies-spec.cy.js │ ├── package.json │ └── util.js ├── stubbing-spying__google-analytics │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ ├── ga-method-stubbing.cy.js │ │ │ └── ga-network-stubbing.cy.js │ ├── images │ │ ├── actions.png │ │ ├── blocked.png │ │ ├── calls.png │ │ └── network.png │ ├── index.html │ └── package.json ├── stubbing-spying__intercept │ ├── README.md │ ├── app-jsonp.js │ ├── app.js │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ ├── control-clock-spec.cy.js │ │ │ ├── count-spec.cy.js │ │ │ ├── form-spec.cy.js │ │ │ ├── glob-matching-intercept-url.spec.cy.js │ │ │ ├── header-spec.cy.js │ │ │ ├── html-css-spec.cy.js │ │ │ ├── image-spec.cy.js │ │ │ ├── intercept-events.spec.cy.js │ │ │ ├── intercept-force404.spec.cy.js │ │ │ ├── jsonp-spec.cy.js │ │ │ ├── loading-element-spec.cy.js │ │ │ ├── matching-spec.cy.js │ │ │ ├── middleware-intercept.spec.cy.js │ │ │ ├── ping-spec.cy.js │ │ │ ├── redirect-spec.cy.js │ │ │ ├── repeat-spec.cy.js │ │ │ ├── spy-on-fetch-spec.cy.js │ │ │ ├── stub-fetch-spec.cy.js │ │ │ ├── stubbed-api-spec.cy.js │ │ │ └── times-spec.cy.js │ │ └── fixtures │ │ │ ├── fruits.json │ │ │ ├── roo.jpg │ │ │ └── users.json │ ├── form.html │ ├── fruits-jsonp.html │ ├── fruits.html │ ├── fruits.json │ ├── headers.html │ ├── images │ │ ├── add-type-column.png │ │ ├── tiger.jpg │ │ └── type.png │ ├── index.html │ ├── local-api.html │ ├── package.json │ ├── page2.html │ ├── pics.html │ ├── redirect-example.html │ ├── server.js │ ├── styles.css │ └── users.json ├── stubbing-spying__navigator │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ └── navigator-cookie-enabled-stub.png │ ├── index.html │ └── package.json ├── stubbing-spying__window-fetch │ ├── README.md │ ├── app.js │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ ├── control-clock-spec.cy.js │ │ │ ├── spy-on-fetch-spec.cy.js │ │ │ └── stub-fetch-spec.cy.js │ │ └── support │ │ │ ├── commands.js │ │ │ └── e2e.js │ ├── fruits.json │ ├── images │ │ ├── add-type-column.png │ │ └── type.png │ ├── index.html │ ├── package.json │ ├── page2.html │ ├── server.js │ └── styles.css ├── stubbing-spying__window-print │ ├── README.md │ ├── app.js │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ ├── print-dialog.png │ │ └── stub-print.png │ ├── index.html │ └── package.json ├── stubbing-spying__window │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ ├── spec.cy.js │ │ │ └── spy-before-load.cy.js │ ├── images │ │ ├── spy-before-load.png │ │ └── window-open-stub.png │ ├── index.html │ ├── package.json │ └── page1.html ├── stubbing__resources │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ └── spec.cy.js │ │ └── fixtures │ │ │ └── picture.png │ ├── images │ │ ├── example.png │ │ └── rose.png │ ├── index.html │ └── package.json ├── testing-dom__clipboard │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ ├── permissions-spec.cy.js │ │ │ └── spec.cy.js │ ├── images │ │ └── copy-paste.gif │ ├── index.html │ └── package.json ├── testing-dom__csv-table │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ ├── all-tests.png │ │ ├── rows.png │ │ └── timings.png │ ├── index.html │ ├── package.json │ └── records.csv ├── testing-dom__download │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ ├── form-submission-spec.cy.js │ │ │ ├── local-download-spec.cy.js │ │ │ ├── location-href-spec.cy.js │ │ │ ├── remote-download-spec.cy.js │ │ │ └── utils.js │ ├── document-utils │ │ ├── read-excel.js │ │ └── read-pdf.js │ ├── images │ │ ├── chrome.png │ │ └── firefox.png │ ├── package.json │ └── public │ │ ├── app.js │ │ ├── files.zip │ │ ├── index.html │ │ ├── logo.png │ │ ├── people.xlsx │ │ ├── records.csv │ │ ├── robots.txt │ │ └── why-cypress.pdf ├── testing-dom__drag-drop │ ├── README.md │ ├── basketball.html │ ├── basketball.png │ ├── cypress-logo.png │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── drag_n_drop_spec.cy.js │ ├── package.json │ ├── puzzle.html │ ├── server.js │ └── styles.css ├── testing-dom__form-interactions │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── form-interactions-spec.cy.js │ ├── images │ │ └── range-input.png │ ├── index.html │ ├── package.json │ ├── server.js │ └── styles.css ├── testing-dom__hover-hidden-elements │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── hover-hidden-elements-spec.cy.js │ ├── hidden.html │ ├── images │ │ └── hidden.png │ ├── index.html │ ├── mouse.html │ ├── package.json │ └── server.js ├── testing-dom__lit-element │ ├── .eslintrc.json │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── .eslintrc.json │ │ └── e2e │ │ │ └── shadow-tests.cy.ts │ ├── elements.js │ ├── index.html │ ├── package.json │ └── tsconfig.json ├── testing-dom__page-reloads │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ └── lucky-7.gif │ ├── package.json │ └── public │ │ ├── index.html │ │ └── style.css ├── testing-dom__page-source │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ └── html-text.gif │ └── package.json ├── testing-dom__pagination │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ └── last-page.png │ ├── package.json │ └── public │ │ ├── index.html │ │ ├── pagination.css │ │ └── pagination.js ├── testing-dom__performance-metrics │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ ├── cypress-bw.png │ │ └── performance-example.png │ ├── index.html │ └── package.json ├── testing-dom__responsive-image │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ └── picture.gif │ ├── package.json │ └── responsive-images │ │ ├── elva-480w-close-portrait.jpg │ │ ├── elva-800w.jpg │ │ ├── elva-fairy-320w.jpg │ │ ├── elva-fairy-480w.jpg │ │ ├── elva-fairy-640w.jpg │ │ ├── elva-fairy-800w.jpg │ │ ├── elva-fairy-original.jpg │ │ ├── elva-original.jpg │ │ ├── header.jpg │ │ ├── img-srcset.html │ │ ├── not-responsive.html │ │ ├── picture.html │ │ └── srcset-resolutions.html ├── testing-dom__root-style │ ├── README.md │ ├── app.css │ ├── app.js │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ └── red.gif │ ├── index.html │ └── package.json ├── testing-dom__select2 │ ├── README.md │ ├── app.js │ ├── cypress.config.js │ ├── cypress │ │ ├── e2e │ │ │ └── spec.cy.js │ │ └── fixtures │ │ │ ├── clem.json │ │ │ └── query.json │ ├── images │ │ └── demo.gif │ ├── index.html │ └── package.json ├── testing-dom__shadow-dom │ └── README.md ├── testing-dom__sorting-table │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── spec.cy.js │ ├── images │ │ └── sorted-prices.png │ ├── index.html │ ├── main.js │ └── package.json ├── testing-dom__tab-handling-links │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ └── e2e │ │ │ └── tab_handling_anchor_links_spec.cy.js │ ├── index.html │ ├── package.json │ ├── server.js │ └── users.html ├── testing-dom__wait-for-resource │ ├── README.md │ ├── cypress.config.js │ ├── cypress │ │ ├── README.md │ │ ├── e2e │ │ │ └── spec.cy.js │ │ └── support │ │ │ └── e2e.js │ ├── images │ │ ├── delayed-script.png │ │ ├── natural-width.gif │ │ └── wait-for-image.gif │ ├── package.json │ └── public │ │ ├── a-script.js │ │ ├── app.css │ │ ├── base.css │ │ ├── cypress-logo.png │ │ └── index.html └── unit-testing__application-code │ ├── README.md │ ├── async-methods.js │ ├── cypress.config.js │ ├── cypress │ ├── e2e │ │ ├── async-tests.cy.js │ │ ├── unit_test_application_code_spec.cy.js │ │ ├── wait-for-object-property-spec.cy.js │ │ └── wait-for-window-property-spec.cy.js │ └── fixtures │ │ └── string.txt │ ├── fizzbuzz.js │ ├── index.html │ ├── math.js │ └── package.json ├── nodemon.json ├── package-lock.json ├── package.json ├── renovate.json ├── test-examples.js └── test-repeat.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "@cypress/dev" 4 | ], 5 | "extends": [ 6 | "plugin:@cypress/dev/general", 7 | "plugin:@cypress/dev/tests" 8 | ], 9 | "env": { 10 | "node": true 11 | }, 12 | "globals": { 13 | "cy": true, 14 | "Cypress": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .tmp 3 | .sass-cache 4 | .DS_Store 5 | npm-debug.log 6 | tmp 7 | .projects 8 | *.orig 9 | 10 | screenshots 11 | videos 12 | out.js 13 | examples/*/cypress/logs 14 | examples/*/cypress/downloads 15 | snapshots.js 16 | .nyc_output 17 | coverage 18 | dist 19 | test-data.json 20 | examples/stubbing-spying__intercept/users5.json 21 | **/.parcel-cache 22 | examples/*/data.json 23 | -------------------------------------------------------------------------------- /.node-version: -------------------------------------------------------------------------------- 1 | 22.13.0 2 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | save-exact=true 2 | package-lock=true 3 | legacy-peer-deps=true 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "git.ignoreLimitWarning": true, 3 | "eslint.enable": true, 4 | "eslint.alwaysShowStatus": true, 5 | "standard.enable": false, 6 | "workbench.colorCustomizations": {}, 7 | "editor.codeActionsOnSave": { 8 | "source.fixAll": "explicit" 9 | } 10 | } -------------------------------------------------------------------------------- /examples/blogs__a11y/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | e2e: {}, 5 | }) 6 | -------------------------------------------------------------------------------- /examples/blogs__a11y/cypress/e2e/failing-spec.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | describe('A11y fails', () => { 3 | beforeEach(() => { 4 | cy.visit('index-bad.html') 5 | }) 6 | 7 | it('loads', () => { 8 | cy.contains('p', 'hard to read') 9 | }) 10 | 11 | // NOTE: skip this test on purpose - enable to see failing color contrast check 12 | it.skip('does not pass accessibility check', () => { 13 | cy.contains('p', 'hard to read') 14 | cy.injectAxe() 15 | cy.checkA11y() 16 | }) 17 | }) 18 | -------------------------------------------------------------------------------- /examples/blogs__a11y/cypress/e2e/passing-spec.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | describe('A11y passes', () => { 3 | beforeEach(() => { 4 | cy.visit('index.html') 5 | }) 6 | 7 | it('accessibility check', () => { 8 | cy.contains('This page should pass A11y checks') 9 | cy.injectAxe() 10 | cy.checkA11y() 11 | }) 12 | }) 13 | -------------------------------------------------------------------------------- /examples/blogs__a11y/cypress/support/e2e.js: -------------------------------------------------------------------------------- 1 | // https://github.com/avanslaars/cypress-axe 2 | import 'cypress-axe' 3 | -------------------------------------------------------------------------------- /examples/blogs__a11y/images/failing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__a11y/images/failing.png -------------------------------------------------------------------------------- /examples/blogs__a11y/index-bad.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | 11 |
12 |

A11y demo page - BAD

13 |

some text that is hard to read

14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /examples/blogs__a11y/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 |
13 |

A11y demo page

14 |

This page should pass A11y checks

15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /examples/blogs__a11y/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "a11y-example", 3 | "version": "1.0.0", 4 | "description": "Testing accessibility of a page", 5 | "private": true, 6 | "scripts": { 7 | "cypress:open": "../../node_modules/.bin/cypress open", 8 | "cypress:run": "../../node_modules/.bin/cypress run", 9 | "test:ci": "../../node_modules/.bin/cypress run", 10 | "test:ci:record": "../../node_modules/.bin/cypress run --record" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/blogs__application-actions/.env: -------------------------------------------------------------------------------- 1 | DISABLE_ESLINT_PLUGIN=true 2 | BROWSER=none 3 | -------------------------------------------------------------------------------- /examples/blogs__application-actions/README.md: -------------------------------------------------------------------------------- 1 | # Application Actions 2 | 3 | Application actions are a replacement for Page Objects 4 | 5 | ## Shows how to 6 | 7 | - Invoke methods on the application's model object 8 | - Avoid code duplication and need to create page object hierarchy 9 | - Run e2e very quickly by skipping UI unless testing that specific UI feature 10 | 11 | ## Blog post 12 | 13 | [Stop using Page Objects and Start using App Actions](https://www.cypress.io/blog/2019/01/03/stop-using-page-objects-and-start-using-app-actions/) 14 | -------------------------------------------------------------------------------- /examples/blogs__application-actions/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | fixturesFolder: false, 5 | defaultCommandTimeout: 8000, 6 | e2e: { 7 | baseUrl: 'http://localhost:8888', 8 | excludeSpecPattern: 'utils.js', 9 | }, 10 | }) 11 | -------------------------------------------------------------------------------- /examples/blogs__application-actions/cypress/fixtures/3-todos.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 0, 4 | "text": "first", 5 | "completed": true 6 | }, 7 | { 8 | "id": 1, 9 | "text": "second", 10 | "completed": false 11 | }, 12 | { 13 | "id": 2, 14 | "text": "third", 15 | "completed": true 16 | } 17 | ] 18 | -------------------------------------------------------------------------------- /examples/blogs__application-actions/cypress/support/e2e.js: -------------------------------------------------------------------------------- 1 | require('./commands') 2 | -------------------------------------------------------------------------------- /examples/blogs__assertion-counting/app.js: -------------------------------------------------------------------------------- 1 | /* eslint-env browser */ 2 | 3 | const confirmIt = () => { 4 | // show the confirm prompt after a delay 5 | setTimeout(() => { 6 | window.confirm('Are you sure?') 7 | }, 1000) 8 | } 9 | 10 | document.getElementById('click').addEventListener('click', confirmIt) 11 | 12 | document.getElementById('promise').addEventListener('click', () => { 13 | new Promise((resolve, reject) => { 14 | setTimeout(() => { 15 | reject('Did not handle this promise') 16 | }, 1000) 17 | }) 18 | }) 19 | -------------------------------------------------------------------------------- /examples/blogs__assertion-counting/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | e2e: {}, 5 | }) 6 | -------------------------------------------------------------------------------- /examples/blogs__assertion-counting/cypress/support/e2e.js: -------------------------------------------------------------------------------- 1 | // https://github.com/avanslaars/cypress-axe 2 | import 'cypress-axe' 3 | -------------------------------------------------------------------------------- /examples/blogs__assertion-counting/images/confirm.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__assertion-counting/images/confirm.gif -------------------------------------------------------------------------------- /examples/blogs__assertion-counting/images/fail-test-on-unhandled-promise-rejection.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__assertion-counting/images/fail-test-on-unhandled-promise-rejection.gif -------------------------------------------------------------------------------- /examples/blogs__assertion-counting/images/plan.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__assertion-counting/images/plan.gif -------------------------------------------------------------------------------- /examples/blogs__assertion-counting/images/without-delay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__assertion-counting/images/without-delay.png -------------------------------------------------------------------------------- /examples/blogs__assertion-counting/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |

Assertion counting

5 |

Click on the button, should show Window confirm dialog

6 | 7 |
8 | This button tells the application to create an unhandled rejected promise 9 | 10 |
11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/blogs__assertion-counting/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "assertion-counting", 3 | "version": "1.0.0", 4 | "description": "Confirms the number of assertions during a test", 5 | "scripts": { 6 | "cypress:open": "../../node_modules/.bin/cypress open", 7 | "cypress:run": "../../node_modules/.bin/cypress run", 8 | "test:ci": "../../node_modules/.bin/cypress run", 9 | "test:ci:record": "../../node_modules/.bin/cypress run --record" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/blogs__class-decorator/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | ["@babel/plugin-proposal-decorators", { "legacy": true }], 4 | ["@babel/plugin-proposal-class-properties", { "loose" : true }], 5 | ["@babel/plugin-transform-classes"] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /examples/blogs__class-decorator/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "@cypress/dev" 4 | ], 5 | "extends": [ 6 | "plugin:@cypress/dev/general", 7 | "plugin:@cypress/dev/react" 8 | ], 9 | "settings": { 10 | "react": { 11 | "version": "detect" 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/blogs__class-decorator/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | fixturesFolder: false, 5 | e2e: { 6 | baseUrl: 'http://localhost:1234', 7 | supportFile: false, 8 | }, 9 | }) 10 | -------------------------------------------------------------------------------- /examples/blogs__class-decorator/images/app-decorator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__class-decorator/images/app-decorator.png -------------------------------------------------------------------------------- /examples/blogs__class-decorator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "class-decorator", 3 | "version": "0.0.0", 4 | "description": "Using class decorator to automatically attach instance to the window", 5 | "private": true, 6 | "scripts": { 7 | "cypress:open": "../../node_modules/.bin/cypress open", 8 | "cypress:run": "../../node_modules/.bin/cypress run", 9 | "dev": "../../node_modules/.bin/start-test 1234 cypress:open", 10 | "start": "../../node_modules/.bin/parcel serve src/index.html" 11 | }, 12 | "devDependencies": { 13 | "@babel/core": "^7.12.0" 14 | }, 15 | "browserslist": "> 0.25%, not dead" 16 | } 17 | -------------------------------------------------------------------------------- /examples/blogs__class-decorator/src/actions/index.js: -------------------------------------------------------------------------------- 1 | import * as types from '../constants/ActionTypes' 2 | 3 | export const addTodo = (text) => ({ type: types.ADD_TODO, text }) 4 | 5 | export const deleteTodo = (id) => ({ type: types.DELETE_TODO, id }) 6 | 7 | export const editTodo = (id, text) => ({ type: types.EDIT_TODO, id, text }) 8 | 9 | export const completeTodo = (id) => ({ type: types.COMPLETE_TODO, id }) 10 | 11 | export const completeAllTodos = () => ({ type: types.COMPLETE_ALL_TODOS }) 12 | 13 | export const clearCompleted = () => ({ type: types.CLEAR_COMPLETED }) 14 | 15 | export const setVisibilityFilter = (filter) => ({ type: types.SET_VISIBILITY_FILTER, filter }) 16 | -------------------------------------------------------------------------------- /examples/blogs__class-decorator/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Header from '../containers/Header' 3 | import MainSection from '../containers/MainSection' 4 | 5 | const App = () => { 6 | return ( 7 |
8 |
9 | 10 |
11 | ) 12 | } 13 | 14 | export default App 15 | -------------------------------------------------------------------------------- /examples/blogs__class-decorator/src/constants/ActionTypes.js: -------------------------------------------------------------------------------- 1 | export const ADD_TODO = 'ADD_TODO' 2 | 3 | export const DELETE_TODO = 'DELETE_TODO' 4 | 5 | export const EDIT_TODO = 'EDIT_TODO' 6 | 7 | export const COMPLETE_TODO = 'COMPLETE_TODO' 8 | 9 | export const COMPLETE_ALL_TODOS = 'COMPLETE_ALL_TODOS' 10 | 11 | export const CLEAR_COMPLETED = 'CLEAR_COMPLETED' 12 | 13 | export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER' 14 | -------------------------------------------------------------------------------- /examples/blogs__class-decorator/src/constants/TodoFilters.js: -------------------------------------------------------------------------------- 1 | export const SHOW_ALL = 'show_all' 2 | 3 | export const SHOW_COMPLETED = 'show_completed' 4 | 5 | export const SHOW_ACTIVE = 'show_active' 6 | -------------------------------------------------------------------------------- /examples/blogs__class-decorator/src/containers/FilterLink.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux' 2 | import { setVisibilityFilter } from '../actions' 3 | import Link from '../components/Link.jsx' 4 | 5 | const mapStateToProps = (state, ownProps) => { 6 | return { 7 | active: ownProps.filter === state.visibilityFilter, 8 | } 9 | } 10 | 11 | const mapDispatchToProps = (dispatch, ownProps) => { 12 | return { 13 | setFilter: () => { 14 | dispatch(setVisibilityFilter(ownProps.filter)) 15 | }, 16 | } 17 | } 18 | 19 | export default connect( 20 | mapStateToProps, 21 | mapDispatchToProps 22 | )(Link) 23 | -------------------------------------------------------------------------------- /examples/blogs__class-decorator/src/containers/Header.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux' 2 | import Header from '../components/Header.jsx' 3 | import { addTodo } from '../actions' 4 | 5 | export default connect(null, { addTodo })(Header) 6 | -------------------------------------------------------------------------------- /examples/blogs__class-decorator/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Class Decorator Example 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/blogs__class-decorator/src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from 'react-dom' 3 | import { StoreProvider } from './store' 4 | import 'todomvc-app-css/index.css' 5 | import App from './components/App.jsx' 6 | 7 | render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ) 13 | -------------------------------------------------------------------------------- /examples/blogs__class-decorator/src/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux' 2 | import todos from './todos' 3 | import visibilityFilter from './visibilityFilter' 4 | 5 | const rootReducer = combineReducers({ 6 | todos, 7 | visibilityFilter, 8 | }) 9 | 10 | export default rootReducer 11 | -------------------------------------------------------------------------------- /examples/blogs__class-decorator/src/reducers/visibilityFilter.js: -------------------------------------------------------------------------------- 1 | import { SET_VISIBILITY_FILTER } from '../constants/ActionTypes' 2 | import { SHOW_ALL } from '../constants/TodoFilters' 3 | 4 | const visibilityFilter = (state = SHOW_ALL, action) => { 5 | switch (action.type) { 6 | case SET_VISIBILITY_FILTER: 7 | return action.filter 8 | default: 9 | return state 10 | } 11 | } 12 | 13 | export default visibilityFilter 14 | -------------------------------------------------------------------------------- /examples/blogs__class-decorator/src/store.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { createStore } from 'redux' 3 | import { Provider } from 'react-redux' 4 | import reducer from './reducers' 5 | 6 | export const store = createStore(reducer) 7 | 8 | export const StoreProvider = ({ children }) => ({children}) 9 | 10 | // expose store during tests 11 | // if this were a class, we could use our class decorator 12 | // to expose the singleton automatically 13 | /* istanbul ignore else */ 14 | if (window.Cypress) { 15 | window.store = store 16 | } 17 | -------------------------------------------------------------------------------- /examples/blogs__codepen-demo/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | chromeWebSecurity: false, 5 | fixturesFolder: false, 6 | e2e: { 7 | supportFile: false, 8 | }, 9 | }) 10 | -------------------------------------------------------------------------------- /examples/blogs__codepen-demo/img/all-tests.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__codepen-demo/img/all-tests.png -------------------------------------------------------------------------------- /examples/blogs__codepen-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cypress-example-codepen", 3 | "version": "1.0.0", 4 | "description": "Demo of E2E testing HyperApp.js counter app running on Codepen.io", 5 | "scripts": { 6 | "cypress:open": "../../node_modules/.bin/cypress open", 7 | "cypress:run": "../../node_modules/.bin/cypress run", 8 | "start": "echo", 9 | "test:ci": "npm run cypress:run", 10 | "test:ci:chrome": "npm run cypress:run -- --browser chrome" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/blogs__dayjs/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | fixturesFolder: false, 5 | viewportWidth: 500, 6 | viewportHeight: 200, 7 | e2e: {}, 8 | }) 9 | -------------------------------------------------------------------------------- /examples/blogs__dayjs/cypress/e2e/spec2.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | describe('dayjs example', () => { 4 | it('uses dayjs set in the support file', () => { 5 | cy.visit('index.html') 6 | // dayjs was set in Cypress object in the support file 7 | const todaysDate = Cypress.dayjs().format('MMM DD, YYYY') 8 | 9 | cy.contains('span', `Order shipped on: ${todaysDate}`) 10 | }) 11 | }) 12 | -------------------------------------------------------------------------------- /examples/blogs__dayjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dayjs-example", 3 | "version": "1.0.0", 4 | "description": "Using Dayjs instead of moment.js", 5 | "private": true, 6 | "scripts": { 7 | "cypress:open": "../../node_modules/.bin/cypress open", 8 | "cypress:run": "../../node_modules/.bin/cypress run", 9 | "test:ci": "../../node_modules/.bin/cypress run", 10 | "test:ci:record": "../../node_modules/.bin/cypress run --record" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/blogs__e2e-api-testing/README.md: -------------------------------------------------------------------------------- 1 | # E2E API Testing 2 | 3 | This is an example of using Cypress to test REST APIs. 4 | 5 | ## Blog Post 6 | 7 | We wrote a [companion blog post](https://www.cypress.io/blog/2017/11/07/Add-GUI-to-Your-E2E-API-Tests) that provides more details and explanation of this recipe. 8 | 9 | Please read that if you'd like to understand more about writing E2E API tests in Cypress. 10 | 11 | - Use `cy.request()` to perform API Testing 12 | - Use the Cypress GUI to help debug requests 13 | 14 | ![API testing using Cypress](img/demo.png) 15 | -------------------------------------------------------------------------------- /examples/blogs__e2e-api-testing/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | fixturesFolder: false, 5 | e2e: { 6 | baseUrl: 'http://localhost:7081', 7 | supportFile: false, 8 | }, 9 | }) 10 | -------------------------------------------------------------------------------- /examples/blogs__e2e-api-testing/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "todos": [ 3 | { 4 | "id": 1, 5 | "task": "read something" 6 | }, 7 | { 8 | "id": 2, 9 | "task": "write something" 10 | } 11 | ] 12 | } -------------------------------------------------------------------------------- /examples/blogs__e2e-api-testing/img/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__e2e-api-testing/img/demo.png -------------------------------------------------------------------------------- /examples/blogs__e2e-snapshots/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | video: false, 5 | e2e: { 6 | baseUrl: 'http://localhost:3700', 7 | setupNodeEvents (on, config) { 8 | // `on` is used to hook into various events Cypress emits 9 | // `config` is the resolved Cypress config 10 | on('task', { 11 | failed: require('cypress-failed-log/src/failed')(), 12 | }) 13 | }, 14 | }, 15 | }) 16 | -------------------------------------------------------------------------------- /examples/blogs__e2e-snapshots/cypress/e2e/unit-spec.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | const add = (a, b) => a + b 3 | 4 | describe('functions', () => { 5 | it('adds numbers', () => { 6 | cy.wrap(add(2, 3)).snapshot() 7 | cy.wrap(add(1, 10)).snapshot() 8 | cy.wrap(add(-6, -3)).snapshot({ name: 'negatives' }) 9 | }) 10 | 11 | it('converts string to lowercase', function () { 12 | cy.wrap('My STRING') 13 | .invoke('toLowerCase') 14 | .snapshot({ 15 | name: 'lowercase string', 16 | }) 17 | }) 18 | }) 19 | -------------------------------------------------------------------------------- /examples/blogs__e2e-snapshots/cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "1", 4 | "title": "do first thing", 5 | "completed": false 6 | }, 7 | { 8 | "id": "2", 9 | "title": "do second thing", 10 | "completed": true 11 | }, 12 | { 13 | "id": "3", 14 | "title": "one more thing", 15 | "completed": false 16 | }, 17 | { 18 | "id": "4", 19 | "title": "last item on the agenda", 20 | "completed": false 21 | } 22 | ] 23 | -------------------------------------------------------------------------------- /examples/blogs__e2e-snapshots/cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | require('cypress-failed-log') 2 | require('@cypress/snapshot').register() 3 | -------------------------------------------------------------------------------- /examples/blogs__e2e-snapshots/reset-db.js: -------------------------------------------------------------------------------- 1 | const write = require('fs').writeFileSync 2 | 3 | const resetDatabase = () => { 4 | // for complex resets can use NPM script command 5 | // cy.exec('npm run reset:database') 6 | 7 | // for simple cases, can just overwrite the data file 8 | const data = { 9 | todos: [], 10 | } 11 | const str = `${JSON.stringify(data, null, 2)}\n` 12 | 13 | write('./data.json', str) 14 | } 15 | 16 | resetDatabase() 17 | -------------------------------------------------------------------------------- /examples/blogs__element-coverage/.env: -------------------------------------------------------------------------------- 1 | DISABLE_ESLINT_PLUGIN=true 2 | BROWSER=none 3 | -------------------------------------------------------------------------------- /examples/blogs__element-coverage/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | env: { 5 | 'cypress-plugin-snapshots': {}, 6 | }, 7 | e2e: { 8 | baseUrl: 'http://localhost:3000', 9 | excludeSpecPattern: ['**/*.snap", "**/__snapshot__/*'], 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /examples/blogs__element-coverage/cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "example": "fixture" 3 | } -------------------------------------------------------------------------------- /examples/blogs__element-coverage/img/elements.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__element-coverage/img/elements.png -------------------------------------------------------------------------------- /examples/blogs__element-coverage/src/actions/index.js: -------------------------------------------------------------------------------- 1 | import * as types from '../constants/ActionTypes' 2 | 3 | export const addTodo = (text) => ({ type: types.ADD_TODO, text }) 4 | 5 | export const deleteTodo = (id) => ({ type: types.DELETE_TODO, id }) 6 | 7 | export const editTodo = (id, text) => ({ type: types.EDIT_TODO, id, text }) 8 | 9 | export const completeTodo = (id) => ({ type: types.COMPLETE_TODO, id }) 10 | 11 | export const completeAllTodos = () => ({ type: types.COMPLETE_ALL_TODOS }) 12 | 13 | export const clearCompleted = () => ({ type: types.CLEAR_COMPLETED }) 14 | 15 | export const setVisibilityFilter = (filter) => ({ type: types.SET_VISIBILITY_FILTER, filter }) 16 | -------------------------------------------------------------------------------- /examples/blogs__element-coverage/src/components/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Header from '../containers/Header' 3 | import MainSection from '../containers/MainSection' 4 | 5 | const App = () => { 6 | return
7 |
8 | 9 |
10 | } 11 | 12 | export default App 13 | -------------------------------------------------------------------------------- /examples/blogs__element-coverage/src/constants/ActionTypes.js: -------------------------------------------------------------------------------- 1 | export const ADD_TODO = 'ADD_TODO' 2 | 3 | export const DELETE_TODO = 'DELETE_TODO' 4 | 5 | export const EDIT_TODO = 'EDIT_TODO' 6 | 7 | export const COMPLETE_TODO = 'COMPLETE_TODO' 8 | 9 | export const COMPLETE_ALL_TODOS = 'COMPLETE_ALL_TODOS' 10 | 11 | export const CLEAR_COMPLETED = 'CLEAR_COMPLETED' 12 | 13 | export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER' 14 | -------------------------------------------------------------------------------- /examples/blogs__element-coverage/src/constants/TodoFilters.js: -------------------------------------------------------------------------------- 1 | export const SHOW_ALL = 'show_all' 2 | 3 | export const SHOW_COMPLETED = 'show_completed' 4 | 5 | export const SHOW_ACTIVE = 'show_active' 6 | -------------------------------------------------------------------------------- /examples/blogs__element-coverage/src/containers/FilterLink.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux' 2 | import { setVisibilityFilter } from '../actions' 3 | import Link from '../components/Link' 4 | 5 | const mapStateToProps = (state, ownProps) => { 6 | return { 7 | active: ownProps.filter === state.visibilityFilter, 8 | } 9 | } 10 | 11 | const mapDispatchToProps = (dispatch, ownProps) => { 12 | return { 13 | setFilter: () => { 14 | dispatch(setVisibilityFilter(ownProps.filter)) 15 | }, 16 | } 17 | } 18 | 19 | export default connect( 20 | mapStateToProps, 21 | mapDispatchToProps, 22 | )(Link) 23 | -------------------------------------------------------------------------------- /examples/blogs__element-coverage/src/containers/Header.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux' 2 | import Header from '../components/Header' 3 | import { addTodo } from '../actions' 4 | 5 | export default connect(null, { addTodo })(Header) 6 | -------------------------------------------------------------------------------- /examples/blogs__element-coverage/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from 'react-dom' 3 | import { Provider } from 'react-redux' 4 | import { createStore } from 'redux' 5 | import 'todomvc-app-css/index.css' 6 | import App from './components/App' 7 | import reducer from './reducers' 8 | 9 | const store = createStore(reducer) 10 | 11 | render( 12 | 13 | 14 | , 15 | document.getElementById('root') 16 | ) 17 | 18 | // expose store during tests 19 | if (window.Cypress) { 20 | window.store = store 21 | } 22 | -------------------------------------------------------------------------------- /examples/blogs__element-coverage/src/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux' 2 | import todos from './todos' 3 | import visibilityFilter from './visibilityFilter' 4 | 5 | const rootReducer = combineReducers({ 6 | todos, 7 | visibilityFilter, 8 | }) 9 | 10 | export default rootReducer 11 | -------------------------------------------------------------------------------- /examples/blogs__element-coverage/src/reducers/visibilityFilter.js: -------------------------------------------------------------------------------- 1 | import { SET_VISIBILITY_FILTER } from '../constants/ActionTypes' 2 | import { SHOW_ALL } from '../constants/TodoFilters' 3 | 4 | const visibilityFilter = (state = SHOW_ALL, action) => { 5 | switch (action.type) { 6 | case SET_VISIBILITY_FILTER: 7 | return action.filter 8 | default: 9 | return state 10 | } 11 | } 12 | 13 | export default visibilityFilter 14 | -------------------------------------------------------------------------------- /examples/blogs__form-submit/README.md: -------------------------------------------------------------------------------- 1 | # Form submit 2 | -------------------------------------------------------------------------------- /examples/blogs__form-submit/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | fixturesFolder: false, 5 | defaultCommandTimeout: 1000, 6 | e2e: { 7 | baseUrl: 'http://localhost:58000/', 8 | supportFile: false, 9 | }, 10 | }) 11 | -------------------------------------------------------------------------------- /examples/blogs__form-submit/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Form

4 |
5 | 9 |
10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/blogs__iframes/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | chromeWebSecurity: false, 5 | viewportHeight: 1000, 6 | fixturesFolder: false, 7 | retries: { 8 | runMode: 5, 9 | }, 10 | e2e: {}, 11 | }) 12 | -------------------------------------------------------------------------------- /examples/blogs__iframes/cypress/e2e/custom-command-spec.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | import { skipOn } from '@cypress/skip-test' 3 | 4 | describe('Recipe: blogs__iframes', () => { 5 | skipOn('firefox', () => { 6 | it('gets the post using custom command', () => { 7 | cy.visit('index.html') 8 | cy.getIframeBody() 9 | .find('#run-button').should('have.text', 'Try it').click() 10 | 11 | cy.getIframeBody() 12 | .find('#result').should('include.text', '"delectus aut autem"') 13 | }) 14 | }) 15 | }) 16 | -------------------------------------------------------------------------------- /examples/blogs__iframes/cypress/e2e/first-spec.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | import { skipOn } from '@cypress/skip-test' 3 | 4 | describe('Recipe: blogs__iframes', () => { 5 | skipOn('firefox', () => { 6 | it('gets the post', () => { 7 | cy.visit('index.html').contains('XHR in iframe') 8 | cy.get('iframe') 9 | }) 10 | }) 11 | }) 12 | -------------------------------------------------------------------------------- /examples/blogs__iframes/cypress/support/e2e.js: -------------------------------------------------------------------------------- 1 | Cypress.Commands.add('getIframeBody', () => { 2 | // get the iframe > document > body 3 | // and retry until the body element is not empty 4 | cy.log('getIframeBody') 5 | 6 | return cy 7 | .get('iframe[data-cy="the-frame"]', { log: false }) 8 | .its('0.contentDocument.body', { log: false }).should('not.be.empty') 9 | // wraps "body" DOM element to allow 10 | // chaining more Cypress commands, like ".find(...)" 11 | // https://on.cypress.io/wrap 12 | .then((body) => cy.wrap(body, { log: false })) 13 | }) 14 | -------------------------------------------------------------------------------- /examples/blogs__iframes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 8 |

XHR in iframe

9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/blogs__iframes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "iframes", 3 | "version": "1.0.0", 4 | "description": "Interacting with iframes", 5 | "private": true, 6 | "scripts": { 7 | "cypress:open": "../../node_modules/.bin/cypress open", 8 | "cypress:run": "../../node_modules/.bin/cypress run", 9 | "skip:test:ci:firefox": "../../node_modules/.bin/cypress run --browser firefox", 10 | "test:ci": "../../node_modules/.bin/cypress run", 11 | "test:ci:chrome": "../../node_modules/.bin/cypress run --browser chrome", 12 | "test:ci:record": "../../node_modules/.bin/cypress run --record" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/blogs__notification/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | fixturesFolder: false, 5 | viewportHeight: 100, 6 | viewportWidth: 200, 7 | e2e: { 8 | supportFile: false, 9 | }, 10 | }) 11 | -------------------------------------------------------------------------------- /examples/blogs__notification/images/cannot-use-spy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__notification/images/cannot-use-spy.png -------------------------------------------------------------------------------- /examples/blogs__notification/images/enable-cypress-notifications.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__notification/images/enable-cypress-notifications.png -------------------------------------------------------------------------------- /examples/blogs__notification/images/enabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__notification/images/enabled.png -------------------------------------------------------------------------------- /examples/blogs__notification/images/spying-via-workaround.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__notification/images/spying-via-workaround.png -------------------------------------------------------------------------------- /examples/blogs__notification/images/tests.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__notification/images/tests.png -------------------------------------------------------------------------------- /examples/blogs__notification/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /examples/blogs__notification/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "notification", 3 | "version": "1.0.0", 4 | "description": "How to test browser notifications from Cypress", 5 | "scripts": { 6 | "cypress:open": "../../node_modules/.bin/cypress open", 7 | "cypress:run": "../../node_modules/.bin/cypress run", 8 | "test:ci": "../../node_modules/.bin/cypress run", 9 | "test:ci:chrome": "../../node_modules/.bin/cypress run --browser chrome", 10 | "test:ci:chrome:headless": "../../node_modules/.bin/cypress run --browser chrome --headless", 11 | "test:ci:record": "../../node_modules/.bin/cypress run --record" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/blogs__testing-redux-store/.env: -------------------------------------------------------------------------------- 1 | DISABLE_ESLINT_PLUGIN=true 2 | -------------------------------------------------------------------------------- /examples/blogs__testing-redux-store/.gitignore: -------------------------------------------------------------------------------- 1 | .nyc_output 2 | coverage 3 | dist 4 | -------------------------------------------------------------------------------- /examples/blogs__testing-redux-store/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | const { initPlugin } = require('cypress-plugin-snapshots/plugin') 4 | 5 | module.exports = defineConfig({ 6 | env: { 7 | 'cypress-plugin-snapshots': {}, 8 | }, 9 | e2e: { 10 | baseUrl: 'http://localhost:3000', 11 | excludeSpecPattern: ['**/*.snap', '**/__snapshot__/*'], 12 | setupNodeEvents (on, config) { 13 | initPlugin(on, config) 14 | 15 | return config 16 | }, 17 | }, 18 | }) 19 | -------------------------------------------------------------------------------- /examples/blogs__testing-redux-store/cypress/e2e/__snapshots__/spec.js.snap: -------------------------------------------------------------------------------- 1 | exports[`snapshots #0`] = 2 | { 3 | "todos": [ 4 | { 5 | "completed": false, 6 | "id": 0, 7 | "text": "Use Redux" 8 | }, 9 | { 10 | "completed": false, 11 | "id": 1, 12 | "text": "first" 13 | }, 14 | { 15 | "completed": true, 16 | "id": 2, 17 | "text": "second" 18 | }, 19 | { 20 | "completed": false, 21 | "id": 3, 22 | "text": "third" 23 | } 24 | ], 25 | "visibilityFilter": "show_completed" 26 | }; 27 | -------------------------------------------------------------------------------- /examples/blogs__testing-redux-store/cypress/fixtures/3-todos.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 0, 4 | "text": "first", 5 | "completed": true 6 | }, 7 | { 8 | "id": 1, 9 | "text": "second", 10 | "completed": false 11 | }, 12 | { 13 | "id": 2, 14 | "text": "third", 15 | "completed": true 16 | } 17 | ] 18 | -------------------------------------------------------------------------------- /examples/blogs__testing-redux-store/cypress/support/e2e.js: -------------------------------------------------------------------------------- 1 | import 'cypress-pipe' 2 | import 'cypress-plugin-snapshots/commands' 3 | -------------------------------------------------------------------------------- /examples/blogs__testing-redux-store/src/components/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Header from '../containers/Header' 3 | import MainSection from '../containers/MainSection' 4 | 5 | const App = () => { 6 | return
7 |
8 | 9 |
10 | } 11 | 12 | export default App 13 | -------------------------------------------------------------------------------- /examples/blogs__testing-redux-store/src/constants/ActionTypes.js: -------------------------------------------------------------------------------- 1 | export const ADD_TODO = 'ADD_TODO' 2 | 3 | export const DELETE_TODO = 'DELETE_TODO' 4 | 5 | export const EDIT_TODO = 'EDIT_TODO' 6 | 7 | export const COMPLETE_TODO = 'COMPLETE_TODO' 8 | 9 | export const COMPLETE_ALL_TODOS = 'COMPLETE_ALL_TODOS' 10 | 11 | export const CLEAR_COMPLETED = 'CLEAR_COMPLETED' 12 | 13 | export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER' 14 | -------------------------------------------------------------------------------- /examples/blogs__testing-redux-store/src/constants/TodoFilters.js: -------------------------------------------------------------------------------- 1 | export const SHOW_ALL = 'show_all' 2 | 3 | export const SHOW_COMPLETED = 'show_completed' 4 | 5 | export const SHOW_ACTIVE = 'show_active' 6 | -------------------------------------------------------------------------------- /examples/blogs__testing-redux-store/src/containers/FilterLink.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux' 2 | import { setVisibilityFilter } from '../actions' 3 | import Link from '../components/Link' 4 | 5 | const mapStateToProps = (state, ownProps) => { 6 | return { 7 | active: ownProps.filter === state.visibilityFilter, 8 | } 9 | } 10 | 11 | const mapDispatchToProps = (dispatch, ownProps) => { 12 | return { 13 | setFilter: () => { 14 | dispatch(setVisibilityFilter(ownProps.filter)) 15 | }, 16 | } 17 | } 18 | 19 | export default connect( 20 | mapStateToProps, 21 | mapDispatchToProps, 22 | )(Link) 23 | -------------------------------------------------------------------------------- /examples/blogs__testing-redux-store/src/containers/Header.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux' 2 | import Header from '../components/Header' 3 | import { addTodo } from '../actions' 4 | 5 | export default connect(null, { addTodo })(Header) 6 | -------------------------------------------------------------------------------- /examples/blogs__testing-redux-store/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from 'react-dom' 3 | import { Provider } from 'react-redux' 4 | import { createStore } from 'redux' 5 | import 'todomvc-app-css/index.css' 6 | import App from './components/App' 7 | import reducer from './reducers' 8 | 9 | const store = createStore(reducer) 10 | 11 | render( 12 | 13 | 14 | , 15 | document.getElementById('root') 16 | ) 17 | 18 | // expose store during tests 19 | if (window.Cypress) { 20 | window.store = store 21 | } 22 | -------------------------------------------------------------------------------- /examples/blogs__testing-redux-store/src/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux' 2 | import todos from './todos' 3 | import visibilityFilter from './visibilityFilter' 4 | 5 | const rootReducer = combineReducers({ 6 | todos, 7 | visibilityFilter, 8 | }) 9 | 10 | export default rootReducer 11 | -------------------------------------------------------------------------------- /examples/blogs__testing-redux-store/src/reducers/visibilityFilter.js: -------------------------------------------------------------------------------- 1 | import { SET_VISIBILITY_FILTER } from '../constants/ActionTypes' 2 | import { SHOW_ALL } from '../constants/TodoFilters' 3 | 4 | const visibilityFilter = (state = SHOW_ALL, action) => { 5 | switch (action.type) { 6 | case SET_VISIBILITY_FILTER: 7 | return action.filter 8 | default: 9 | return state 10 | } 11 | } 12 | 13 | export default visibilityFilter 14 | -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/.env: -------------------------------------------------------------------------------- 1 | DISABLE_ESLINT_PLUGIN=true 2 | BROWSER=none 3 | -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/_metadata/computed_hashes.json: -------------------------------------------------------------------------------- 1 | { -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/128-deadcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/128-deadcode.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/128-development.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/128-development.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/128-disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/128-disabled.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/128-outdated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/128-outdated.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/128-production.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/128-production.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/128-restricted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/128-restricted.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/128-unminified.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/128-unminified.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/16-deadcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/16-deadcode.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/16-development.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/16-development.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/16-disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/16-disabled.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/16-outdated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/16-outdated.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/16-production.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/16-production.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/16-restricted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/16-restricted.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/16-unminified.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/16-unminified.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/32-deadcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/32-deadcode.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/32-development.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/32-development.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/32-disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/32-disabled.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/32-outdated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/32-outdated.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/32-production.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/32-production.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/32-restricted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/32-restricted.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/32-unminified.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/32-unminified.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/48-deadcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/48-deadcode.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/48-development.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/48-development.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/48-disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/48-disabled.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/48-outdated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/48-outdated.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/48-production.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/48-production.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/48-restricted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/48-restricted.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/icons/48-unminified.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/4.28.0_0/icons/48-unminified.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/manifest.fingerprint: -------------------------------------------------------------------------------- 1 | 1.680bdafba223fa7ea797e429ff19aee094d39953dcf862541040241a2b4af33d -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/popups/disabled.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 |

14 | This page doesn’t appear to be using React. 15 |
16 | If this seems wrong, follow the troubleshooting instructions. 17 |

18 | -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/popups/production.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 |

14 | This page is using the production build of React. ✅ 15 |
16 | Open the developer tools, and "Components" and "Profiler" tabs will appear to the right. 17 |

18 | -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/popups/restricted.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 |

11 | This is a restricted browser page. 12 |
13 | React devtools cannot access this page. 14 |

15 | -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/4.28.0_0/popups/shared.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | font-size: 14px; 3 | } 4 | 5 | body { 6 | margin: 8px; 7 | } -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/cypress/e2e/spec.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | describe('React DevTools', () => { 3 | it('loads React DevTools extension', () => { 4 | cy.visit('localhost:3000') 5 | // ? how do we confirm this is working? 6 | cy.get('.board-row').eq(0).find('.square').eq(0).click() 7 | cy.get('.board-row').eq(0).find('.square').eq(1).click() 8 | }) 9 | }) 10 | -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/cypress/support/e2e.js: -------------------------------------------------------------------------------- 1 | /// 2 | /* global window */ 3 | Cypress.on('window:before:load', (win) => { 4 | // this lets React DevTools "see" components inside application's iframe 5 | win.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__ 6 | }) 7 | -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/public/favicon.ico -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/public/logo192.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__use-react-devtools/public/logo512.png -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /examples/blogs__use-react-devtools/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /examples/blogs__vue-vuex-rest/cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "1", 4 | "title": "do first thing", 5 | "completed": false 6 | }, 7 | { 8 | "id": "2", 9 | "title": "do second thing", 10 | "completed": true 11 | }, 12 | { 13 | "id": "3", 14 | "title": "one more thing", 15 | "completed": false 16 | }, 17 | { 18 | "id": "4", 19 | "title": "last item on the agenda", 20 | "completed": false 21 | } 22 | ] 23 | -------------------------------------------------------------------------------- /examples/blogs__vue-vuex-rest/cypress/fixtures/todos.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "mock first", 4 | "completed": false, 5 | "id": "1" 6 | }, 7 | { 8 | "title": "mock second", 9 | "completed": true, 10 | "id": "2" 11 | } 12 | ] 13 | -------------------------------------------------------------------------------- /examples/blogs__vue-vuex-rest/img/speed-spec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__vue-vuex-rest/img/speed-spec.png -------------------------------------------------------------------------------- /examples/blogs__vue-vuex-rest/img/vue-vuex-rest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/blogs__vue-vuex-rest/img/vue-vuex-rest.png -------------------------------------------------------------------------------- /examples/blogs__vue-vuex-rest/reset-db.js: -------------------------------------------------------------------------------- 1 | const write = require('fs').writeFileSync 2 | 3 | const resetDatabase = () => { 4 | // for complex resets can use NPM script command 5 | // cy.exec('npm run reset:database') 6 | 7 | // for simple cases, can just overwrite the data file 8 | const data = { 9 | todos: [], 10 | } 11 | const str = `${JSON.stringify(data, null, 2)}\n` 12 | 13 | write('./data.json', str) 14 | } 15 | 16 | resetDatabase() 17 | -------------------------------------------------------------------------------- /examples/extending-cypress__chai-assertions/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | fixturesFolder: false, 5 | e2e: {}, 6 | }) 7 | -------------------------------------------------------------------------------- /examples/extending-cypress__chai-assertions/images/custom-assertion-intellisense.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/extending-cypress__chai-assertions/images/custom-assertion-intellisense.png -------------------------------------------------------------------------------- /examples/extending-cypress__chai-assertions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "extending-chai-assertion-plugins", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "cypress:open": "../../node_modules/.bin/cypress open", 7 | "cypress:run": "../../node_modules/.bin/cypress run", 8 | "test:ci": "../../node_modules/.bin/cypress run", 9 | "test:ci:record": "../../node_modules/.bin/cypress run --record" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/file-upload-react/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | e2e: {}, 5 | }) 6 | -------------------------------------------------------------------------------- /examples/file-upload-react/cypress/support/e2e.js: -------------------------------------------------------------------------------- 1 | import 'cypress-file-upload' 2 | -------------------------------------------------------------------------------- /examples/fundamentals__add-custom-command-ts/README.md: -------------------------------------------------------------------------------- 1 | # add custom command in TypeScript 2 | > Write your own Cypress commands using TypeScript 3 | 4 | In this recipe we do not use `tsconfig.json` file, thus we need to specify additional command types using `/// ` commands, like this: 5 | 6 | ```js 7 | // cypress/e2e/spec.ts 8 | /// 9 | ``` 10 | 11 | ![IntelliSense for custom command cy.dataCy](images/data-cy.png) 12 | 13 | See [cypress/support/e2e.ts](cypress/support/e2e.ts) and [cypress/support/index.d.ts](cypress/support/index.d.ts). 14 | -------------------------------------------------------------------------------- /examples/fundamentals__add-custom-command-ts/cypress.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'cypress' 2 | 3 | export default defineConfig({ 4 | viewportHeight: 200, 5 | viewportWidth: 300, 6 | fixturesFolder: false, 7 | e2e: {}, 8 | }) 9 | -------------------------------------------------------------------------------- /examples/fundamentals__add-custom-command-ts/images/data-cy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/fundamentals__add-custom-command-ts/images/data-cy.png -------------------------------------------------------------------------------- /examples/fundamentals__add-custom-command-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "add-custom-command-ts", 3 | "version": "1.0.0", 4 | "description": "Write your own Cypress commands in TypeScript", 5 | "scripts": { 6 | "cypress:open": "../../node_modules/.bin/cypress open", 7 | "cypress:run": "../../node_modules/.bin/cypress run", 8 | "test:ci": "../../node_modules/.bin/cypress run", 9 | "test:ci:record": "../../node_modules/.bin/cypress run --record" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/fundamentals__add-custom-command-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": ["*.ts"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/fundamentals__add-custom-command/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | viewportHeight: 200, 5 | viewportWidth: 300, 6 | fixturesFolder: false, 7 | e2e: {}, 8 | }) 9 | -------------------------------------------------------------------------------- /examples/fundamentals__add-custom-command/images/async-add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/fundamentals__add-custom-command/images/async-add.png -------------------------------------------------------------------------------- /examples/fundamentals__add-custom-command/images/custom-command-found.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/fundamentals__add-custom-command/images/custom-command-found.png -------------------------------------------------------------------------------- /examples/fundamentals__add-custom-command/images/custom-command-not-found.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/fundamentals__add-custom-command/images/custom-command-not-found.png -------------------------------------------------------------------------------- /examples/fundamentals__add-custom-command/images/wait-until.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/fundamentals__add-custom-command/images/wait-until.png -------------------------------------------------------------------------------- /examples/fundamentals__add-custom-command/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "add-custom-command", 3 | "version": "1.0.0", 4 | "description": "Write your own Cypress commands", 5 | "scripts": { 6 | "cypress:open": "../../node_modules/.bin/cypress open", 7 | "cypress:run": "../../node_modules/.bin/cypress run", 8 | "test:ci": "../../node_modules/.bin/cypress run", 9 | "test:ci:record": "../../node_modules/.bin/cypress run --record" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/fundamentals__chrome-remote-debugging/images/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/fundamentals__chrome-remote-debugging/images/example.png -------------------------------------------------------------------------------- /examples/fundamentals__chrome-remote-debugging/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chrome-remote-debugging", 3 | "version": "1.0.0", 4 | "description": "Use the CRI in your tests", 5 | "scripts": { 6 | "cypress:open": "../../node_modules/.bin/cypress open", 7 | "cypress:run:chrome": "../../node_modules/.bin/cypress run --headless --browser chrome", 8 | "test:ci:chrome": "npm run cypress:run:chrome" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/fundamentals__custom-browsers/cypress/e2e/spec.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | describe('browser', () => { 3 | it('works', () => { 4 | cy.log( 5 | `Running in browser **${Cypress.browser.displayName} v${ 6 | Cypress.browser.majorVersion 7 | }**` 8 | ) 9 | 10 | cy.task('echo', { browser: Cypress.browser }) 11 | }) 12 | }) 13 | -------------------------------------------------------------------------------- /examples/fundamentals__custom-browsers/cypress/plugins/tasks.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | module.exports = { 3 | echo (what) { 4 | console.log(what) 5 | 6 | return null 7 | }, 8 | } 9 | -------------------------------------------------------------------------------- /examples/fundamentals__custom-browsers/images/brave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/fundamentals__custom-browsers/images/brave.png -------------------------------------------------------------------------------- /examples/fundamentals__custom-browsers/images/only-chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/fundamentals__custom-browsers/images/only-chrome.png -------------------------------------------------------------------------------- /examples/fundamentals__custom-browsers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cypress-custom-browsers", 3 | "version": "1.0.0", 4 | "description": "Customizes list of browsers", 5 | "scripts": { 6 | "cypress:open": "../../node_modules/.bin/cypress open", 7 | "cypress:run": "../../node_modules/.bin/cypress run", 8 | "start": "echo nothing to start", 9 | "test:ci": "../../node_modules/.bin/cypress run", 10 | "test:ci:brave": "../../node_modules/.bin/cypress run --config pluginsFile=cypress/plugins/brave.js", 11 | "test:ci:record": "../../node_modules/.bin/cypress run --record" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/fundamentals__cy-events/app.js: -------------------------------------------------------------------------------- 1 | /* eslint-env browser */ 2 | document 3 | .getElementById('click-me') 4 | .addEventListener('click', () => { 5 | /* global Analytics */ 6 | Analytics.sendEvent('click', 'button#click-me') 7 | }) 8 | -------------------------------------------------------------------------------- /examples/fundamentals__cy-events/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | fixturesFolder: false, 5 | e2e: { 6 | supportFile: false, 7 | }, 8 | }) 9 | -------------------------------------------------------------------------------- /examples/fundamentals__cy-events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |

Register events

5 |

6 | Click on the button to file "analytics" event 7 | 8 |

9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/fundamentals__cy-events/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cy-events", 3 | "version": "1.0.0", 4 | "description": "Examples of Cypress events", 5 | "private": true, 6 | "scripts": { 7 | "cypress:open": "../../node_modules/.bin/cypress open", 8 | "cypress:run": "../../node_modules/.bin/cypress run", 9 | "test:ci": "../../node_modules/.bin/cypress run", 10 | "test:ci:record": "../../node_modules/.bin/cypress run --record" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/fundamentals__dynamic-tests-from-api/images/users.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/fundamentals__dynamic-tests-from-api/images/users.png -------------------------------------------------------------------------------- /examples/fundamentals__dynamic-tests-from-api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dynamic-tests-from-api", 3 | "version": "1.0.0", 4 | "description": "Create Cypress tests dynamically from fetched data", 5 | "private": true, 6 | "scripts": { 7 | "cypress:open": "../../node_modules/.bin/cypress open", 8 | "cypress:run": "../../node_modules/.bin/cypress run", 9 | "test:ci": "npm run cypress:run", 10 | "test:ci:record": "npm run cypress:run -- --record" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/fundamentals__dynamic-tests-from-csv/cypress/plugins/users.csv: -------------------------------------------------------------------------------- 1 | user id,first name,last name 2 | 101,Joe,Smith 3 | 102,Mary,Jane 4 | 103,Adam,Peterson 5 | -------------------------------------------------------------------------------- /examples/fundamentals__dynamic-tests-from-csv/images/csv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/fundamentals__dynamic-tests-from-csv/images/csv.png -------------------------------------------------------------------------------- /examples/fundamentals__dynamic-tests-from-csv/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dynamic-tests-from-csv", 3 | "version": "1.0.0", 4 | "description": "Create Cypress tests dynamically from CSV data", 5 | "private": true, 6 | "scripts": { 7 | "cypress:open": "../../node_modules/.bin/cypress open", 8 | "cypress:run": "../../node_modules/.bin/cypress run", 9 | "test:ci": "npm run cypress:run", 10 | "test:ci:record": "npm run cypress:run -- --record" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/fundamentals__dynamic-tests/cypress/fixtures/colors.json: -------------------------------------------------------------------------------- 1 | [ 2 | "green", 3 | "blue", 4 | "red" 5 | ] 6 | -------------------------------------------------------------------------------- /examples/fundamentals__dynamic-tests/cypress/support/e2e.js: -------------------------------------------------------------------------------- 1 | // nothing else to load 2 | -------------------------------------------------------------------------------- /examples/fundamentals__dynamic-tests/images/users.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/fundamentals__dynamic-tests/images/users.png -------------------------------------------------------------------------------- /examples/fundamentals__dynamic-tests/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dynamic-tests", 3 | "version": "1.0.0", 4 | "description": "Create Cypress tests dynamically from data", 5 | "scripts": { 6 | "cypress:open": "../../node_modules/.bin/cypress open", 7 | "cypress:run": "../../node_modules/.bin/cypress run", 8 | "test:ci": "npm run cypress:run", 9 | "test:ci:record": "npm run cypress:run -- --record" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/fundamentals__errors/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | fixturesFolder: false, 5 | e2e: { 6 | supportFile: false, 7 | }, 8 | }) 9 | -------------------------------------------------------------------------------- /examples/fundamentals__errors/images/app-error.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/fundamentals__errors/images/app-error.gif -------------------------------------------------------------------------------- /examples/fundamentals__errors/images/test-error.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/fundamentals__errors/images/test-error.gif -------------------------------------------------------------------------------- /examples/fundamentals__errors/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |

Handling application errors

5 |

6 | Click on the button to cause application error 7 | 8 |

9 | 10 |

11 | This button tells the application to create an unhandled rejected promise 12 | 13 |

14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /examples/fundamentals__errors/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "handling-application-errors", 3 | "version": "1.0.0", 4 | "description": "Handling application errors example", 5 | "private": true, 6 | "scripts": { 7 | "cypress:open": "../../node_modules/.bin/cypress open", 8 | "cypress:run": "../../node_modules/.bin/cypress run", 9 | "test:ci": "../../node_modules/.bin/cypress run", 10 | "test:ci:record": "../../node_modules/.bin/cypress run --record" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/fundamentals__fixtures/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | e2e: {}, 5 | }) 6 | -------------------------------------------------------------------------------- /examples/fundamentals__fixtures/cypress/e2e/require-fixtures-spec.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | // because JSON files can be bundled by default 3 | // the most common use case for fixtures - JSON data - can be simply 4 | // which is "loaded" once 5 | const city = require('../fixtures/city.json') 6 | const country = require('../fixtures/country.json') 7 | 8 | describe('requires fixtures', () => { 9 | it('has city', () => { 10 | expect(city).to.deep.equal({ name: 'Atlanta' }) 11 | }) 12 | 13 | it('has country', () => { 14 | expect(country).to.deep.equal({ name: 'United States' }) 15 | }) 16 | }) 17 | -------------------------------------------------------------------------------- /examples/fundamentals__fixtures/cypress/e2e/single-fixture-spec.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | describe('Loading single fixture', () => { 3 | it('loads', () => { 4 | cy.fixture('city').should('deep.equal', { name: 'Atlanta' }) 5 | }) 6 | }) 7 | -------------------------------------------------------------------------------- /examples/fundamentals__fixtures/cypress/fixtures/city.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Atlanta" 3 | } 4 | -------------------------------------------------------------------------------- /examples/fundamentals__fixtures/cypress/fixtures/country.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "United States" 3 | } 4 | -------------------------------------------------------------------------------- /examples/fundamentals__fixtures/cypress/fixtures/names.js: -------------------------------------------------------------------------------- 1 | const names = [ 2 | 'Joe Bravo', 3 | 'Mary Sue', 4 | ] 5 | 6 | // don't forget to export the list 7 | module.exports = { 8 | names, 9 | } 10 | -------------------------------------------------------------------------------- /examples/fundamentals__fixtures/cypress/fixtures/users.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Joe Bravo", 4 | "age": 20 5 | }, 6 | { 7 | "name": "Mike Smith", 8 | "age": 30 9 | }, 10 | { 11 | "name": "Alicia Blue", 12 | "age": 25 13 | } 14 | ] 15 | -------------------------------------------------------------------------------- /examples/fundamentals__fixtures/cypress/support/e2e.js: -------------------------------------------------------------------------------- 1 | // nothing else to load 2 | -------------------------------------------------------------------------------- /examples/fundamentals__fixtures/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fundamentals__fixtures", 3 | "version": "1.0.0", 4 | "description": "Create Cypress tests dynamically from data", 5 | "scripts": { 6 | "cypress:open": "../../node_modules/.bin/cypress open", 7 | "cypress:run": "../../node_modules/.bin/cypress run", 8 | "test:ci": "../../node_modules/.bin/cypress run", 9 | "test:ci:record": "../../node_modules/.bin/cypress run --record" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/fundamentals__module-api-wrap/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | fixturesFolder: false, 5 | e2e: { 6 | supportFile: false, 7 | }, 8 | }) 9 | -------------------------------------------------------------------------------- /examples/fundamentals__module-api-wrap/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cypress-module-api-wrap", 3 | "version": "1.0.0", 4 | "description": "Run Cypress via its module API by parsing cypress run arguments", 5 | "scripts": { 6 | "start": "echo nothing to start", 7 | "test": "node ./run-me cypress run --record false --config video=false,viewportHeight=300,viewportWidth=100 --env MY_FLAG=true --port 5004", 8 | "test:ci": "npm run test" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/fundamentals__module-api/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | fixturesFolder: false, 5 | e2e: {}, 6 | }) 7 | -------------------------------------------------------------------------------- /examples/fundamentals__module-api/cypress/e2e/first-spec.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | describe('first feature', () => { 3 | it('works', () => {}) 4 | }) 5 | -------------------------------------------------------------------------------- /examples/fundamentals__module-api/cypress/e2e/second-spec.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | describe('second feature', () => { 3 | // empty second test 4 | it('works', () => {}) 5 | }) 6 | -------------------------------------------------------------------------------- /examples/fundamentals__module-api/cypress/e2e/third-spec.cy.js: -------------------------------------------------------------------------------- 1 | /// 2 | describe('third feature', () => { 3 | it('works', () => {}) 4 | }) 5 | -------------------------------------------------------------------------------- /examples/fundamentals__module-api/cypress/support/utils/append_key.js: -------------------------------------------------------------------------------- 1 | module.exports = function (str) { 2 | return `${str}+APIkey123` 3 | } 4 | -------------------------------------------------------------------------------- /examples/fundamentals__module-api/cypress/support/utils/get_selector.js: -------------------------------------------------------------------------------- 1 | // ES2015 module export function 2 | // which simply concats a class selector 3 | // to the string argument 4 | 5 | export default (str) => { 6 | return `.my-app-${str}` 7 | } 8 | -------------------------------------------------------------------------------- /examples/fundamentals__module-api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cypress-module-api", 3 | "version": "1.0.0", 4 | "description": "Run Cypress via its module API", 5 | "scripts": { 6 | "cypress:open": "../../node_modules/.bin/cypress open", 7 | "cypress:run": "node ./e2e-tests", 8 | "start": "echo nothing to start", 9 | "test:ci": "node ./e2e-tests", 10 | "test:ci:record": "node ./e2e-tests --record" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/fundamentals__node-modules/README.md: -------------------------------------------------------------------------------- 1 | # es2015-commonsjs-modules 2 | > Use NPM modules from Cypress specs 3 | 4 | Thanks to the built-in JS bundler, Cypress bundles modules that use ES5 `require` and/or ES6 `import` mechanism. See [cypress/e2e/es2015-commonjs-modules-spec.cy.js](cypress/e2e/es2015-commonjs-modules-spec.cy.js) 5 | 6 | - Import ES2015 modules. 7 | - Require CommonJS modules. 8 | - Organize reusable utility functions. 9 | - Import 3rd party `node_modules`. 10 | -------------------------------------------------------------------------------- /examples/fundamentals__node-modules/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | fixturesFolder: false, 5 | e2e: {}, 6 | }) 7 | -------------------------------------------------------------------------------- /examples/fundamentals__node-modules/cypress/support/utils/append_key.js: -------------------------------------------------------------------------------- 1 | module.exports = function (str) { 2 | return `${str}+APIkey123` 3 | } 4 | -------------------------------------------------------------------------------- /examples/fundamentals__node-modules/cypress/support/utils/get_selector.js: -------------------------------------------------------------------------------- 1 | // ES2015 module export function 2 | // which simply concats a class selector 3 | // to the string argument 4 | 5 | export default (str) => { 6 | return `.my-app-${str}` 7 | } 8 | -------------------------------------------------------------------------------- /examples/fundamentals__node-modules/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fundamentals__node_modules", 3 | "version": "1.0.0", 4 | "description": "Use NPM modules from Cypress specs", 5 | "scripts": { 6 | "cypress:open": "../../node_modules/.bin/cypress open", 7 | "cypress:run": "../../node_modules/.bin/cypress run", 8 | "test:ci": "../../node_modules/.bin/cypress run", 9 | "test:ci:record": "../../node_modules/.bin/cypress run --record" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/fundamentals__timeout/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | fixturesFolder: false, 5 | e2e: { 6 | supportFile: false, 7 | specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}', 8 | }, 9 | }) 10 | -------------------------------------------------------------------------------- /examples/fundamentals__timeout/images/test-is-too-long.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/fundamentals__timeout/images/test-is-too-long.png -------------------------------------------------------------------------------- /examples/fundamentals__timeout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test-timeout", 3 | "version": "1.0.0", 4 | "description": "Test throws an error if it runs over the time limit", 5 | "scripts": { 6 | "cypress:open": "../../node_modules/.bin/cypress open", 7 | "cypress:run": "../../node_modules/.bin/cypress run", 8 | "test:ci": "npm run cypress:run" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/fundamentals__typescript/README.Md: -------------------------------------------------------------------------------- 1 | # Out-of-the-box TypeScript 2 | > Write tests in TypeScript without setting up preprocessors 3 | 4 | From Cypress 4.4.0, you can write tests in TypeScript without setting up preprocessors. See [the official doc](https://on.cypress.io/typescript-support) for more details. 5 | 6 | - Use out-of-the-box TypeScript. 7 | - Write spec files, support files and configuration in TypeScript. 8 | - Define type for the custom commands. 9 | - Check types in the spec files. 10 | - Show difference between Test Runner `window` and `AUTWindow` types. And how to extend `AUTWindow` type. 11 | -------------------------------------------------------------------------------- /examples/fundamentals__typescript/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | e2e: { 5 | specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}', 6 | }, 7 | }) 8 | -------------------------------------------------------------------------------- /examples/fundamentals__typescript/cypress/fixtures/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Test 5 | 6 | 7 | click me 8 | 9 | 12 | 13 | -------------------------------------------------------------------------------- /examples/fundamentals__typescript/cypress/support/commands.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | // Copied an example command from https://on.cypress.io/custom-commands 4 | Cypress.Commands.add('clickLink', (label: string | number | RegExp) => { 5 | cy.get('a').contains(label).click() 6 | }) 7 | -------------------------------------------------------------------------------- /examples/fundamentals__typescript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "with-typescript", 3 | "version": "1.0.0", 4 | "description": "Use out-of-the-box TypeScript with TypeScript", 5 | "scripts": { 6 | "cypress:open": "../../node_modules/.bin/cypress open", 7 | "precypress:run": "npm run lint", 8 | "cypress:run": "../../node_modules/.bin/cypress run", 9 | "lint": "../../node_modules/.bin/tslint --project ./tsconfig.json", 10 | "postlint": "npm run tsc", 11 | "test:ci": "../../node_modules/.bin/cypress run", 12 | "tsc": "../../node_modules/.bin/tsc --pretty --noEmit" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/fundamentals__typescript/tsconfig.json: -------------------------------------------------------------------------------- 1 | // This file is required to make `npm run tsc` work. 2 | { 3 | "include": [ 4 | "cypress/e2e/*.ts", 5 | "cypress/e2e/**/*.ts", 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /examples/fundamentals__window-size/200px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/fundamentals__window-size/200px.png -------------------------------------------------------------------------------- /examples/fundamentals__window-size/images/page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/fundamentals__window-size/images/page.png -------------------------------------------------------------------------------- /examples/fundamentals__window-size/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/fundamentals__window-size/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "window-size", 3 | "version": "1.0.0", 4 | "description": "How to control the browser window size", 5 | "private": true, 6 | "scripts": { 7 | "cypress:open": "../../node_modules/.bin/cypress open", 8 | "cypress:run": "../../node_modules/.bin/cypress run", 9 | "test:ci": "../../node_modules/.bin/cypress run --headless --browser chrome", 10 | "test:ci:record": "../../node_modules/.bin/cypress run --record --headless --browser chrome" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/logging-in__basic-auth/README.md: -------------------------------------------------------------------------------- 1 | # logging-in__basic-auth 2 | Shows how to visit the page protected by the [Basic Authentication](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication) 3 | 4 | The static site from [public folder](./public) is protected by the basic authentication, see [server.js](./server.js). 5 | 6 | The [cypress/e2e/spec.cy.js](./cypress/e2e/spec.cy.js) shows how to pass the username and the password when calling [cy.visit](https://on.cypress.io/visit) and [cy.request](https://on.cypress.io/request) commands. 7 | -------------------------------------------------------------------------------- /examples/logging-in__basic-auth/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | fixturesFolder: false, 5 | viewportHeight: 200, 6 | viewportWidth: 200, 7 | e2e: { 8 | baseUrl: 'http://localhost:7065', 9 | supportFile: false, 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /examples/logging-in__basic-auth/images/login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/logging-in__basic-auth/images/login.png -------------------------------------------------------------------------------- /examples/logging-in__basic-auth/public/app.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /examples/logging-in__basic-auth/public/app.js: -------------------------------------------------------------------------------- 1 | /* global document */ 2 | document.getElementById('app-message').innerText = 'app.js loaded' 3 | -------------------------------------------------------------------------------- /examples/logging-in__basic-auth/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

Red

6 |
7 | 8 | 9 | -------------------------------------------------------------------------------- /examples/logging-in__csrf-tokens/csrf.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Logging In - CSRF Tokens - Invalid 5 | 15 | 16 | 17 |

csrf.html

18 |

The CSRF token was invalid.

19 | 20 | 21 | -------------------------------------------------------------------------------- /examples/logging-in__csrf-tokens/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | fixturesFolder: false, 5 | e2e: { 6 | baseUrl: 'http://localhost:7076', 7 | supportFile: false, 8 | }, 9 | }) 10 | -------------------------------------------------------------------------------- /examples/logging-in__csrf-tokens/dashboard.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Logging In - CSRF Tokens - Dashboard 5 | 6 | 7 |

dashboard.html

8 |

You are logged in

9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/logging-in__csrf-tokens/images/csrf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/logging-in__csrf-tokens/images/csrf.png -------------------------------------------------------------------------------- /examples/logging-in__csrf-tokens/images/tests.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/logging-in__csrf-tokens/images/tests.png -------------------------------------------------------------------------------- /examples/logging-in__csrf-tokens/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "logging-in-csrf-tokens", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "cypress:open": "../../node_modules/.bin/cypress open", 7 | "cypress:run": "../../node_modules/.bin/cypress run", 8 | "cypress:run:record": "../../node_modules/.bin/cypress run --record", 9 | "dev": "../../node_modules/.bin/start-test 7076 cypress:open", 10 | "start": "node server.js --port 7076", 11 | "test:ci": "../../node_modules/.bin/start-test 7076 cypress:run", 12 | "test:ci:record": "../../node_modules/.bin/start-test 7076 cypress:run:record" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/logging-in__html-web-forms/admin.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Logging In - HTML Web Form - Admin 5 | 6 | 7 |

Admin

8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/logging-in__html-web-forms/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | fixturesFolder: false, 5 | e2e: { 6 | baseUrl: 'http://localhost:7077', 7 | supportFile: false, 8 | }, 9 | }) 10 | -------------------------------------------------------------------------------- /examples/logging-in__html-web-forms/dashboard.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Logging In - HTML Web Form - Dashboard 5 | 6 | 7 |

Welcome to the Dashboard{{#if user}}, {{user}}{{/if}}!

8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/logging-in__html-web-forms/images/login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/logging-in__html-web-forms/images/login.png -------------------------------------------------------------------------------- /examples/logging-in__html-web-forms/unauthorized.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Logging In - HTML Web Form - Unauthorized 5 | 15 | 16 | 17 |

You are not logged in and cannot access this page

18 | 19 | 20 | -------------------------------------------------------------------------------- /examples/logging-in__html-web-forms/users.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Logging In - HTML Web Form - Users 5 | 6 | 7 |

Users

8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/logging-in__jwt/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | fixturesFolder: false, 5 | env: { 6 | username: 'test', 7 | password: 'test', 8 | }, 9 | e2e: { 10 | baseUrl: 'http://localhost:8081', 11 | supportFile: false, 12 | }, 13 | }) 14 | -------------------------------------------------------------------------------- /examples/logging-in__jwt/images/get-users.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/logging-in__jwt/images/get-users.png -------------------------------------------------------------------------------- /examples/logging-in__jwt/images/jwt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/logging-in__jwt/images/jwt.png -------------------------------------------------------------------------------- /examples/logging-in__jwt/server/_helpers/error-handler.js: -------------------------------------------------------------------------------- 1 | module.exports = errorHandler 2 | 3 | function errorHandler (err, req, res, next) { 4 | if (typeof (err) === 'string') { 5 | // custom application error 6 | return res.status(400).json({ message: err }) 7 | } 8 | 9 | if (err.name === 'UnauthorizedError') { 10 | // jwt authentication error 11 | return res.status(401).json({ message: 'Invalid Token' }) 12 | } 13 | 14 | // default to 500 server error 15 | return res.status(500).json({ message: err.message }) 16 | } 17 | -------------------------------------------------------------------------------- /examples/logging-in__jwt/server/_helpers/jwt.js: -------------------------------------------------------------------------------- 1 | const expressJwt = require('express-jwt') 2 | const config = require('../config.json') 3 | 4 | module.exports = jwt 5 | 6 | function jwt () { 7 | const { secret } = config 8 | 9 | return expressJwt({ secret }).unless({ 10 | path: [ 11 | // public routes that don't require authentication 12 | '/users/authenticate', 13 | ], 14 | }) 15 | } 16 | -------------------------------------------------------------------------------- /examples/logging-in__jwt/server/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "secret": "Verify JWT using this secret string" 3 | } 4 | -------------------------------------------------------------------------------- /examples/logging-in__jwt/src/_helpers/auth-header.js: -------------------------------------------------------------------------------- 1 | /* global localStorage */ 2 | export function authHeader () { 3 | // return authorization header with jwt token 4 | let user = JSON.parse(localStorage.getItem('user')) 5 | 6 | if (user && user.token) { 7 | return { 'Authorization': `Bearer ${user.token}` } 8 | } 9 | 10 | return {} 11 | } 12 | -------------------------------------------------------------------------------- /examples/logging-in__jwt/src/_helpers/index.js: -------------------------------------------------------------------------------- 1 | export * from './fake-backend' 2 | 3 | export * from './router' 4 | 5 | export * from './auth-header' 6 | -------------------------------------------------------------------------------- /examples/logging-in__jwt/src/_services/index.js: -------------------------------------------------------------------------------- 1 | export * from './user.service' 2 | -------------------------------------------------------------------------------- /examples/logging-in__jwt/src/_store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | import { alert } from './alert.module' 5 | import { authentication } from './authentication.module' 6 | import { users } from './users.module' 7 | 8 | Vue.use(Vuex) 9 | 10 | export const store = new Vuex.Store({ 11 | modules: { 12 | alert, 13 | authentication, 14 | users, 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /examples/logging-in__jwt/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | import { store } from './_store' 4 | import { router } from './_helpers' 5 | import App from './app/App' 6 | 7 | // setup fake backend 8 | // import { configureFakeBackend } from './_helpers'; 9 | // configureFakeBackend(); 10 | 11 | new Vue({ 12 | el: '#app', 13 | router, 14 | store, 15 | render: (h) => h(App), 16 | }) 17 | -------------------------------------------------------------------------------- /examples/logging-in__single-sign-on/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | hosts: { 5 | 'auth.corp.com': '127.0.0.1', 6 | }, 7 | fixturesFolder: false, 8 | e2e: { 9 | baseUrl: 'http://localhost:7074', 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /examples/logging-in__single-sign-on/dashboard.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Logging In - Single Sign On - Dashboard 5 | 6 | 7 |

Welcome to the Dashboard!

8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/logging-in__single-sign-on/unauthorized.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Logging In - Single Sign On- Unauthorized 5 | 15 | 16 | 17 |

You are not logged in and cannot access this page

18 | 19 | 20 | -------------------------------------------------------------------------------- /examples/logging-in__using-app-code/images/login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/logging-in__using-app-code/images/login.png -------------------------------------------------------------------------------- /examples/logging-in__using-app-code/server/_helpers/error-handler.js: -------------------------------------------------------------------------------- 1 | module.exports = errorHandler 2 | 3 | function errorHandler (err, req, res, next) { 4 | if (typeof (err) === 'string') { 5 | // custom application error 6 | return res.status(400).json({ message: err }) 7 | } 8 | 9 | if (err.name === 'UnauthorizedError') { 10 | // jwt authentication error 11 | return res.status(401).json({ message: 'Invalid Token' }) 12 | } 13 | 14 | // default to 500 server error 15 | return res.status(500).json({ message: err.message }) 16 | } 17 | -------------------------------------------------------------------------------- /examples/logging-in__using-app-code/server/_helpers/jwt.js: -------------------------------------------------------------------------------- 1 | const expressJwt = require('express-jwt') 2 | const config = require('../config.json') 3 | 4 | module.exports = jwt 5 | 6 | function jwt () { 7 | const { secret } = config 8 | 9 | return expressJwt({ secret }).unless({ 10 | path: [ 11 | // public routes that don't require authentication 12 | '/users/authenticate', 13 | ], 14 | }) 15 | } 16 | -------------------------------------------------------------------------------- /examples/logging-in__using-app-code/server/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "secret": "Verify JWT using this secret string" 3 | } 4 | -------------------------------------------------------------------------------- /examples/logging-in__using-app-code/src/_helpers/auth-header.js: -------------------------------------------------------------------------------- 1 | /* global localStorage */ 2 | export function authHeader () { 3 | // return authorization header with jwt token 4 | let user = JSON.parse(localStorage.getItem('user')) 5 | 6 | if (user && user.token) { 7 | return { 'Authorization': `Bearer ${user.token}` } 8 | } 9 | 10 | return {} 11 | } 12 | -------------------------------------------------------------------------------- /examples/logging-in__using-app-code/src/_helpers/index.js: -------------------------------------------------------------------------------- 1 | export * from './fake-backend' 2 | 3 | export * from './router' 4 | 5 | export * from './auth-header' 6 | -------------------------------------------------------------------------------- /examples/logging-in__using-app-code/src/_services/index.js: -------------------------------------------------------------------------------- 1 | export * from './user.service' 2 | -------------------------------------------------------------------------------- /examples/logging-in__using-app-code/src/_store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | import { alert } from './alert.module' 5 | import { authentication } from './authentication.module' 6 | import { users } from './users.module' 7 | 8 | Vue.use(Vuex) 9 | 10 | export const store = new Vuex.Store({ 11 | modules: { 12 | alert, 13 | authentication, 14 | users, 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /examples/logging-in__using-app-code/src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | import { store } from './_store' 4 | import { router } from './_helpers' 5 | import App from './app/App' 6 | 7 | // setup fake backend 8 | // import { configureFakeBackend } from './_helpers'; 9 | // configureFakeBackend(); 10 | 11 | new Vue({ 12 | el: '#app', 13 | router, 14 | store, 15 | render: (h) => h(App), 16 | }) 17 | -------------------------------------------------------------------------------- /examples/logging-in__xhr-web-forms/admin.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Logging In - XHR Web Form - Admin 5 | 6 | 7 |

Admin

8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/logging-in__xhr-web-forms/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | fixturesFolder: false, 5 | e2e: { 6 | baseUrl: 'http://localhost:7079', 7 | supportFile: false, 8 | }, 9 | }) 10 | -------------------------------------------------------------------------------- /examples/logging-in__xhr-web-forms/dashboard.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Logging In - XHR Web Form - Dashboard 5 | 6 | 7 |

Welcome to the Dashboard{{#if user}}, {{user}}{{/if}}!

8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/logging-in__xhr-web-forms/images/tests.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/logging-in__xhr-web-forms/images/tests.png -------------------------------------------------------------------------------- /examples/logging-in__xhr-web-forms/users.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Logging In - XHR Web Form - Users 5 | 6 | 7 |

Users

8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/preprocessors__flow-browserify/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules 3 | 4 | [include] 5 | 6 | [libs] 7 | src/flow-types.js 8 | 9 | [lints] 10 | 11 | [options] 12 | 13 | [strict] 14 | -------------------------------------------------------------------------------- /examples/preprocessors__flow-browserify/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require("cypress") 2 | 3 | const browserify = require("@cypress/browserify-preprocessor") 4 | 5 | module.exports = defineConfig({ 6 | fixturesFolder: false, 7 | e2e: { 8 | setupNodeEvents(on, config) { 9 | const options = browserify.defaultOptions 10 | options.browserifyOptions.transform[1][1].presets.push( 11 | "@babel/preset-flow" 12 | ) 13 | on("file:preprocessor", browserify(options)) 14 | }, 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /examples/preprocessors__flow-browserify/cypress/e2e/spec.cy.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import { add } from '../support/add' // Flow typed file 3 | 4 | declare function describe(any, Function): any 5 | declare function it(any, Function): any 6 | declare function expect(any): any 7 | 8 | describe('Flow', () => { 9 | it('works', () => { 10 | // note: Flow definition 11 | const x: number = 42 12 | 13 | add(1, 'a') // Flow error 14 | }) 15 | }) 16 | -------------------------------------------------------------------------------- /examples/preprocessors__flow-browserify/cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } -------------------------------------------------------------------------------- /examples/preprocessors__flow-browserify/cypress/support/add.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | export const add = (a: number, b: number) => a + b 3 | -------------------------------------------------------------------------------- /examples/preprocessors__flow-browserify/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cypress-example-flow-browserify", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "cypress:open": "../../node_modules/.bin/cypress open", 7 | "cypress:run": "../../node_modules/.bin/cypress run", 8 | "start": "echo" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/preprocessors__grep/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | const selectTestsWithGrep = require('cypress-select-tests/grep') 4 | 5 | module.exports = defineConfig({ 6 | e2e: { 7 | supportFile: false, 8 | setupNodeEvents (on, config) { 9 | on('file:preprocessor', selectTestsWithGrep(config)) 10 | }, 11 | }, 12 | }) 13 | -------------------------------------------------------------------------------- /examples/preprocessors__grep/cypress/e2e/feature-a.cy.js: -------------------------------------------------------------------------------- 1 | describe('feature A', () => { 2 | it('works', () => {}) 3 | 4 | it('reports for @admin', () => {}) 5 | }) 6 | -------------------------------------------------------------------------------- /examples/preprocessors__grep/cypress/e2e/feature-b.cy.js: -------------------------------------------------------------------------------- 1 | describe('feature B', () => { 2 | it('works', () => {}) 3 | 4 | it('an edge case', () => {}) 5 | 6 | it('works for @admin', () => {}) 7 | }) 8 | -------------------------------------------------------------------------------- /examples/preprocessors__grep/images/grep-admin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/preprocessors__grep/images/grep-admin.png -------------------------------------------------------------------------------- /examples/preprocessors__grep/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cypress-example-grep", 3 | "version": "1.0.0", 4 | "description": "Selecting specs and tests to run using grep", 5 | "scripts": { 6 | "cypress:open": "../../node_modules/.bin/cypress open", 7 | "cypress:run": "../../node_modules/.bin/cypress run", 8 | "start": "echo", 9 | "test:ci": "../../node_modules/.bin/cypress run", 10 | "test:ci:record": "../../node_modules/.bin/cypress run --record" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/preprocessors__typescript-browserify/README.md: -------------------------------------------------------------------------------- 1 | # Typescript with Browserify 2 | 3 | This is an example showing TypeScript tests with Cypress using Browserify. See Cypress' [TypeScript Support](https://on.cypress.io/typescript-support) docs for more details. 4 | 5 | It uses [browserify](http://browserify.org/) to transpile TypeScript tests 6 | via [@cypress/browserify-preprocessor](https://github.com/cypress-io/cypress-browserify-preprocessor#typescript) 7 | 8 | See: 9 | - [tsconfig.json](tsconfig.json) 10 | - [cypress.config.js](cypress.config.js) 11 | - [example test](cypress/e2e/spec.ts) 12 | -------------------------------------------------------------------------------- /examples/preprocessors__typescript-browserify/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | const browserify = require('@cypress/browserify-preprocessor') 4 | 5 | module.exports = defineConfig({ 6 | fixturesFolder: false, 7 | e2e: { 8 | supportFile: false, 9 | setupNodeEvents (on, config) { 10 | const options = { 11 | typescript: require.resolve('typescript'), 12 | } 13 | 14 | on('file:preprocessor', browserify(options)) 15 | }, 16 | }, 17 | }) 18 | -------------------------------------------------------------------------------- /examples/preprocessors__typescript-browserify/cypress/support/add.ts: -------------------------------------------------------------------------------- 1 | export const add = (a: number, b: number) => a + b 2 | -------------------------------------------------------------------------------- /examples/preprocessors__typescript-browserify/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cypress-example-typescript-browserify", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "cypress:open": "../../node_modules/.bin/cypress open", 7 | "cypress:run": "../../node_modules/.bin/cypress run", 8 | "start": "echo", 9 | "test:ci": "../../node_modules/.bin/cypress run", 10 | "test:ci:record": "../../node_modules/.bin/cypress run --record" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/preprocessors__typescript-browserify/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "types": [ 8 | // load Cypress global type 9 | "cypress" 10 | ] 11 | }, 12 | "include": [ 13 | // process only spec files 14 | "cypress/**/*.ts" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /examples/preprocessors__typescript-webpack/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | const wp = require('@cypress/webpack-preprocessor') 4 | 5 | module.exports = defineConfig({ 6 | fixturesFolder: false, 7 | e2e: { 8 | supportFile: 'cypress/support/e2e.ts', 9 | setupNodeEvents (on, config) { 10 | const options = { 11 | webpackOptions: require('./webpack.config'), 12 | } 13 | 14 | on('file:preprocessor', wp(options)) 15 | }, 16 | }, 17 | }) 18 | -------------------------------------------------------------------------------- /examples/preprocessors__typescript-webpack/cypress/support/add.ts: -------------------------------------------------------------------------------- 1 | export const add = (a: number, b: number) => a + b 2 | -------------------------------------------------------------------------------- /examples/preprocessors__typescript-webpack/img/cy-type-definitions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/preprocessors__typescript-webpack/img/cy-type-definitions.png -------------------------------------------------------------------------------- /examples/preprocessors__typescript-webpack/img/cy-without-type-definition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/preprocessors__typescript-webpack/img/cy-without-type-definition.png -------------------------------------------------------------------------------- /examples/preprocessors__typescript-webpack/img/gui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/preprocessors__typescript-webpack/img/gui.png -------------------------------------------------------------------------------- /examples/preprocessors__typescript-webpack/img/source-map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/preprocessors__typescript-webpack/img/source-map.png -------------------------------------------------------------------------------- /examples/preprocessors__typescript-webpack/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "types": [ 8 | // load Cypress global type 9 | "cypress" 10 | ] 11 | }, 12 | "include": [ 13 | // process only spec files 14 | "cypress/**/*.ts" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /examples/preprocessors__typescript-webpack/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rules": { 4 | "semicolon": [ 5 | true, 6 | "never" 7 | ], 8 | "quotemark": [ 9 | true, 10 | "single" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/server-communication__bootstrapping-your-app/app.js: -------------------------------------------------------------------------------- 1 | /* eslint-env browser */ 2 | /* global $ */ 3 | window.App = { 4 | start (data) { 5 | // simply fill in the text contents of the 6 | // 
 element with our data
 7 |     $('pre').text(JSON.stringify(data))
 8 |   },
 9 | }
10 | 


--------------------------------------------------------------------------------
/examples/server-communication__bootstrapping-your-app/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 | 
3 | module.exports = defineConfig({
4 |   e2e: {
5 |     baseUrl: 'http://localhost:7070',
6 |     supportFile: false,
7 |   },
8 | })
9 | 


--------------------------------------------------------------------------------
/examples/server-communication__bootstrapping-your-app/cypress/fixtures/bootstrap.json:
--------------------------------------------------------------------------------
1 | {
2 |   "env": "test",
3 |   "api": "https://test-api.company.com"
4 | }


--------------------------------------------------------------------------------
/examples/server-communication__env-variables/.env:
--------------------------------------------------------------------------------
 1 | # these variables will be read by the `setupNodeEvents` function in the Cypress configuration
 2 | FOO=42
 3 | BAR=baz
 4 | USER_NAME=aTester
 5 | # these variables will be read automatically
 6 | # CYPRESS_ part will be removed
 7 | # access them with Cypress.env("ping"), Cypress.env("HOST")
 8 | CYPRESS_ping=123
 9 | CYPRESS_HOST=laura.dev.local
10 | cypress_api_server=http://localhost:8888/api/v1/
11 | 


--------------------------------------------------------------------------------
/examples/server-communication__offline/README.md:
--------------------------------------------------------------------------------
1 | # Offline network test
2 | 
3 | NOTE: This test has known issues related to bug in Chrome where "Offline Mode" does not impact websockets.
4 | This execution is not recommended and will be refactored to use cy.intercept() at a later date. 
5 | 
6 | - [offline-spec.cy.js](cypress/e2e/offline-spec.cy.js) emulates offline network connection using Chrome Debugger Protocol and tests how the application handles it
7 | 
8 | ![Network status test](images/offline.gif)
9 | 


--------------------------------------------------------------------------------
/examples/server-communication__offline/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('cypress')
 2 | 
 3 | module.exports = defineConfig({
 4 |   fixturesFolder: false,
 5 |   viewportWidth: 500,
 6 |   viewportHeight: 400,
 7 |   defaultCommandTimeout: 8000,
 8 |   e2e: {
 9 |     baseUrl: 'http://localhost:7080',
10 |     supportFile: false,
11 |   },
12 | })
13 | 


--------------------------------------------------------------------------------
/examples/server-communication__offline/images/offline.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/server-communication__offline/images/offline.gif


--------------------------------------------------------------------------------
/examples/server-communication__offline/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   Offline
 5 |   
 6 | 
 7 | 
 8 |   
Users

 9 |   
click the button to load user list

10 |   
    
11 |   
12 | 
13 |   
14 | 
15 |   
16 | 
17 | 
18 | 


--------------------------------------------------------------------------------
/examples/server-communication__offline/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "offline",
 3 |   "version": "1.0.0",
 4 |   "description": "Offline network test",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "cypress:open": "../../node_modules/.bin/cypress open",
 8 |     "cypress:run": "../../node_modules/.bin/cypress run",
 9 |     "cypress:run:record": "../../node_modules/.bin/cypress run --record",
10 |     "dev": "../../node_modules/.bin/start-test 7080 cypress:open",
11 |     "start": "../../node_modules/.bin/serve -l 7080 --no-clipboard"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/server-communication__pass-value-between-specs/cypress/e2e/second-spec.cy.js:
--------------------------------------------------------------------------------
 1 | /// 
 2 | describe('Second spec', () => {
 3 |   // just for our sake we can verify the object
 4 |   const expectedTodo = {
 5 |     userId: 1,
 6 |     id: 1,
 7 |     title: 'delectus aut autem',
 8 |     completed: false,
 9 |   }
10 | 
11 |   it('has the saved item from the first spec', () => {
12 |     // if the previous spec file has passed, we should have
13 |     // the item stored in the `setupNodeEvents` function in the
14 |     // Cypress configuration
15 |     cy.task('getItem', 'todo').should('deep.equal', expectedTodo)
16 |   })
17 | })
18 | 


--------------------------------------------------------------------------------
/examples/server-communication__pass-value-between-specs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pass-value-between-specs",
 3 |   "version": "1.0.0",
 4 |   "description": "Passing a value from a test in the first spec to a test in the second spec",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "cypress:open": "../../node_modules/.bin/cypress open",
 8 |     "cypress:run": "../../node_modules/.bin/cypress run"
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/examples/server-communication__request/README.md:
--------------------------------------------------------------------------------
 1 | # Making HTTP requests
 2 | > How to use `cy.request`, `window.fetch`, and `cy.task` commands to make HTTP requests to the server with and without cookies
 3 | 
 4 | The [cypress/e2e/spec.cy.js](./cypress/e2e/spec.cy.js) shows how to make HTTP requests with or without cookies. Read the blog post [Cypress request and cookies](https://glebbahmutov.com/blog/cypress-request-and-cookies/) for details.
 5 | 
 6 | To run assuming the dependencies were installed in the root folder:
 7 | 
 8 | ```shell
 9 | $ npm run dev
10 | ```
11 | 
12 | Click on the spec file.
13 | 


--------------------------------------------------------------------------------
/examples/server-communication__request/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "request-with-headers",
 3 |   "version": "1.0.0",
 4 |   "description": "Making API request with headers",
 5 |   "private": true,
 6 |   "main": "index.js",
 7 |   "scripts": {
 8 |     "cypress:open": "../../node_modules/.bin/cypress open",
 9 |     "cypress:run": "../../node_modules/.bin/cypress run",
10 |     "dev": "../../node_modules/.bin/start-test 3000 cypress:open",
11 |     "start": "../../node_modules/.bin/micro"
12 |   },
13 |   "license": "MIT",
14 |   "author": "Gleb Bahmutov "
15 | }
16 | 


--------------------------------------------------------------------------------
/examples/server-communication__seeding-database-in-node/.gitignore:
--------------------------------------------------------------------------------
1 | db.json
2 | 


--------------------------------------------------------------------------------
/examples/server-communication__seeding-database-in-node/README.md:
--------------------------------------------------------------------------------
 1 | # Seeding Your Database in Node
 2 | 
 3 | This recipe demonstrates:
 4 | 
 5 | * Seeding your database with node.js using [`cy.task()`](https://on.cypress.io/task)
 6 | 
 7 | ## Seeding your database
 8 | 
 9 | If you use Node.js for your app, you can re-use your app code to help set up and manipulate data for your tests. In this example, we utilize [`cy.task()`](https://on.cypress.io/task) to connect with node via the `setupNodeEvents` function to re-use the `server/db.js` and seed the database.
10 | 


--------------------------------------------------------------------------------
/examples/server-communication__seeding-database-in-node/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('cypress')
 2 | 
 3 | const { seed } = require('./server/db')
 4 | 
 5 | module.exports = defineConfig({
 6 |   e2e: {
 7 |     baseUrl: 'http://localhost:7082',
 8 |     supportFile: false,
 9 |     setupNodeEvents (on, config) {
10 |       on('task', {
11 |         'seed:db' (data) {
12 |           return seed(data).then(() => {
13 |             return data
14 |           })
15 |         },
16 |       })
17 |     },
18 |   },
19 | })
20 | 


--------------------------------------------------------------------------------
/examples/server-communication__seeding-database-in-node/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "seeding-your-database",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "scripts": {
 6 |     "cypress:open": "../../node_modules/.bin/cypress open",
 7 |     "cypress:run": "../../node_modules/.bin/cypress run",
 8 |     "cypress:run:record": "../../node_modules/.bin/cypress run --record",
 9 |     "start": "node server/index.js --port 7082",
10 |     "test:ci": "../../node_modules/.bin/start-test 7082 cypress:run",
11 |     "test:ci:record": "../../node_modules/.bin/start-test 7082 cypress:run:record"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/server-communication__seeding-database-in-node/server/db.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs-extra')
 2 | const path = require('path')
 3 | 
 4 | const filePath = path.join(__dirname, 'db.json')
 5 | 
 6 | function seed (data) {
 7 |   return fs.outputJson(filePath, data)
 8 | }
 9 | 
10 | function getPosts () {
11 |   return fs.readJson(filePath)
12 |   .then((data = {}) => {
13 |     return data.posts
14 |   })
15 | }
16 | 
17 | module.exports = {
18 |   seed,
19 |   getPosts,
20 | }
21 | 


--------------------------------------------------------------------------------
/examples/server-communication__seeding-database-in-node/server/index.js:
--------------------------------------------------------------------------------
1 | require('babel-register')
2 | require('./routes')
3 | 


--------------------------------------------------------------------------------
/examples/server-communication__seeding-database-in-node/server/routes.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const minimist = require('minimist')
 3 | const express = require('express')
 4 | const { getPosts } = require('./db')
 5 | 
 6 | const app = express()
 7 | 
 8 | // get port from passed in args from scripts/start.js
 9 | const port = minimist(process.argv.slice(2)).port
10 | 
11 | app.use(express.static('.'))
12 | app.use('/node_modules', express.static(path.join(__dirname, '..', '..', '..', 'node_modules')))
13 | 
14 | app.get('/posts.json', (req, res) => {
15 |   getPosts().then((posts) => {
16 |     res.json(posts)
17 |   })
18 | })
19 | 
20 | app.listen(port)
21 | 


--------------------------------------------------------------------------------
/examples/server-communication__server-timing/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('cypress')
 2 | 
 3 | module.exports = defineConfig({
 4 |   fixturesFolder: false,
 5 |   e2e: {
 6 |     baseUrl: 'http://localhost:3000',
 7 |     supportFile: false,
 8 |   },
 9 | })
10 | 


--------------------------------------------------------------------------------
/examples/server-communication__server-timing/images/limit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/server-communication__server-timing/images/limit.png


--------------------------------------------------------------------------------
/examples/server-communication__server-timing/images/log.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/server-communication__server-timing/images/log.png


--------------------------------------------------------------------------------
/examples/server-communication__server-timing/images/print.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/server-communication__server-timing/images/print.png


--------------------------------------------------------------------------------
/examples/server-communication__server-timing/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "server-timing",
 3 |   "version": "1.0.0",
 4 |   "description": "Show server timing results from Cypress visit",
 5 |   "private": true,
 6 |   "main": "index.js",
 7 |   "scripts": {
 8 |     "cypress:open": "../../node_modules/.bin/cypress open",
 9 |     "cypress:run": "../../node_modules/.bin/cypress run",
10 |     "dev": "../../node_modules/.bin/start-test 3000 cypress:open",
11 |     "start": "../../node_modules/.bin/micro"
12 |   },
13 |   "license": "MIT",
14 |   "author": "Gleb Bahmutov "
15 | }
16 | 


--------------------------------------------------------------------------------
/examples/server-communication__stream-tests/cypress/e2e/spec.cy.js:
--------------------------------------------------------------------------------
 1 | /// 
 2 | const pkg = require('../../package.json')
 3 | 
 4 | describe(pkg.name, () => {
 5 |   it('first test', () => {
 6 |     cy.wait(1000)
 7 |   })
 8 | 
 9 |   it('second test', () => {
10 |     cy.wait(1000)
11 |   })
12 | 
13 |   it('third test', () => {
14 |     cy.wait(1000)
15 |   })
16 | })
17 | 


--------------------------------------------------------------------------------
/examples/server-communication__stream-tests/images/how-it-works.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/server-communication__stream-tests/images/how-it-works.png


--------------------------------------------------------------------------------
/examples/server-communication__stream-tests/images/tests.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/server-communication__stream-tests/images/tests.png


--------------------------------------------------------------------------------
/examples/server-communication__stream-tests/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "stream-tests",
 3 |   "version": "1.0.0",
 4 |   "description": "Run Cypress using NPM module API and receive event after each test finishes",
 5 |   "scripts": {
 6 |     "cypress:open": "../../node_modules/.bin/cypress open",
 7 |     "cypress:run": "node .",
 8 |     "test": "node .",
 9 |     "test:ci": "node ."
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/examples/server-communication__visit-2nd-domain/img/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/server-communication__visit-2nd-domain/img/screenshot.png


--------------------------------------------------------------------------------
/examples/server-communication__visit-2nd-domain/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "visit-2nd-domain",
 3 |   "version": "1.0.0",
 4 |   "description": "Visiting two different domains from two different tests",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "cypress:open": "../../node_modules/.bin/cypress open",
 8 |     "cypress:run": "../../node_modules/.bin/cypress run"
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/examples/server-communication__wait-for-api/README.md:
--------------------------------------------------------------------------------
1 | # Wait for API
2 | 
3 | Sometimes the backend API is not immediately ready and our test needs to wait. This recipe shows how to avoid hard-coded waits, and instead ping the API periodically using [cy.request](https://on.cypress.io/request). When we finally get the successful response, we know the API is ready and proceed with the rest of the test.
4 | 
5 | ![Tests](./images/ready.png)
6 | 
7 | The recipe shows how to implement the network calls with retries via recursion or via [cypress-recurse](https://github.com/bahmutov/cypress-recurse)
8 | 


--------------------------------------------------------------------------------
/examples/server-communication__wait-for-api/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('cypress')
 2 | 
 3 | module.exports = defineConfig({
 4 |   fixturesFolder: false,
 5 |   viewportHeight: 300,
 6 |   viewportWidth: 500,
 7 |   defaultCommandTimeout: 1000,
 8 |   requestTimeout: 1000,
 9 |   e2e: {
10 |     baseUrl: 'http://localhost:7668',
11 |     supportFile: false,
12 |   },
13 | })
14 | 


--------------------------------------------------------------------------------
/examples/server-communication__wait-for-api/images/ready.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/server-communication__wait-for-api/images/ready.png


--------------------------------------------------------------------------------
/examples/server-communication__wait-for-api/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "wait-for-api",
 3 |   "version": "1.0.0",
 4 |   "description": "Calling backend API until it is ready to work",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "cypress:open": "../../node_modules/.bin/cypress open",
 8 |     "cypress:run": "../../node_modules/.bin/cypress run",
 9 |     "dev": "../../node_modules/.bin/start-test 7668 cypress:open",
10 |     "start": "node ./server"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/examples/server-communication__xhr-assertions/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('cypress')
 2 | 
 3 | module.exports = defineConfig({
 4 |   fixturesFolder: false,
 5 |   viewportHeight: 300,
 6 |   viewportWidth: 500,
 7 |   e2e: {
 8 |     supportFile: false,
 9 |   },
10 | })
11 | 


--------------------------------------------------------------------------------
/examples/server-communication__xhr-assertions/images/assertions.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/server-communication__xhr-assertions/images/assertions.png


--------------------------------------------------------------------------------
/examples/server-communication__xhr-assertions/images/clock.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/server-communication__xhr-assertions/images/clock.gif


--------------------------------------------------------------------------------
/examples/server-communication__xhr-assertions/images/cy-get-example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/server-communication__xhr-assertions/images/cy-get-example.png


--------------------------------------------------------------------------------
/examples/server-communication__xhr-assertions/images/cy-wait-example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/server-communication__xhr-assertions/images/cy-wait-example.png


--------------------------------------------------------------------------------
/examples/server-communication__xhr-assertions/images/log-xhr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/server-communication__xhr-assertions/images/log-xhr.png


--------------------------------------------------------------------------------
/examples/server-communication__xhr-assertions/images/multiple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/server-communication__xhr-assertions/images/multiple.png


--------------------------------------------------------------------------------
/examples/server-communication__xhr-assertions/images/re-run.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/server-communication__xhr-assertions/images/re-run.gif


--------------------------------------------------------------------------------
/examples/server-communication__xhr-assertions/images/spok.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/server-communication__xhr-assertions/images/spok.png


--------------------------------------------------------------------------------
/examples/stubbing-spying__console/README.md:
--------------------------------------------------------------------------------
 1 | # Stubbing Console
 2 | 
 3 | The spec file [cypress/e2e/spec.cy.js](cypress/e2e/spec.cy.js) shows how to spy on and stub methods of the `console` object. See [index.html](index.html) to see what the "application" is logging on load.
 4 | 
 5 | ![Test example](images/console-example.png)
 6 | 
 7 | ## Learn more
 8 | 
 9 | - [`cy.spy()`](https://on.cypress.io/spy)
10 | - [`cy.stub()`](https://on.cypress.io/stub)
11 | - [`cy.visit()`](https://on.cypress.io/visit)
12 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__console/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 | 
3 | module.exports = defineConfig({
4 |   fixturesFolder: false,
5 |   e2e: {
6 |     supportFile: false,
7 |   },
8 | })
9 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__console/images/console-example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing-spying__console/images/console-example.png


--------------------------------------------------------------------------------
/examples/stubbing-spying__functions/api.js:
--------------------------------------------------------------------------------
 1 | // this is one of the (possibly 3rd party) modules that
 2 | // our app depends on. the implementation doesn't really matter,
 3 | // as we stub out this behavior in our test anyway
 4 | 
 5 | export default {
 6 |   login (username, password) {
 7 |     // send request to log user in
 8 |   },
 9 | 
10 |   onUnauth (callback) {
11 |     // monitor api and call callback when auth expires
12 |   },
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__functions/auth.js:
--------------------------------------------------------------------------------
 1 | import api from './api'
 2 | import util from './util'
 3 | 
 4 | export default class Auth {
 5 |   constructor () {
 6 |     this.loggedIn = false
 7 |     this.userId = null
 8 | 
 9 |     api.onUnauth(() => {
10 |       this.loggedIn = false
11 |     })
12 |   }
13 | 
14 |   login (username, password) {
15 |     return api.login(username, password)
16 |     .then((userId) => {
17 |       this.loggedIn = true
18 |       this.userId = userId
19 |     })
20 |     .catch((error) => {
21 |       util.log(error.message)
22 |     })
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__functions/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 | 
3 | module.exports = defineConfig({
4 |   fixturesFolder: false,
5 |   e2e: {
6 |     supportFile: false,
7 |   },
8 | })
9 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__functions/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "unit-test-stubbing-dependencies",
 3 |   "version": "1.0.0",
 4 |   "description": "Shows how to control dependencies during tests using cy.spy and cy.stub",
 5 |   "scripts": {
 6 |     "cypress:open": "../../node_modules/.bin/cypress open",
 7 |     "cypress:run": "../../node_modules/.bin/cypress run",
 8 |     "start": "echo nothing to start, this recipe does not run server",
 9 |     "test:ci": "npm run cypress:run",
10 |     "test:ci:record": "npm run cypress:run -- --record"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__functions/util.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 | export default {
3 |   log (...args) {
4 |     console.log(...args)
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__google-analytics/images/actions.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing-spying__google-analytics/images/actions.png


--------------------------------------------------------------------------------
/examples/stubbing-spying__google-analytics/images/blocked.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing-spying__google-analytics/images/blocked.png


--------------------------------------------------------------------------------
/examples/stubbing-spying__google-analytics/images/calls.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing-spying__google-analytics/images/calls.png


--------------------------------------------------------------------------------
/examples/stubbing-spying__google-analytics/images/network.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing-spying__google-analytics/images/network.png


--------------------------------------------------------------------------------
/examples/stubbing-spying__google-analytics/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "stubbing-google-analytics",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "scripts": {
 6 |     "cypress:open": "../../node_modules/.bin/cypress open",
 7 |     "cypress:run": "../../node_modules/.bin/cypress run",
 8 |     "start": "echo",
 9 |     "test:ci": "npm run cypress:run",
10 |     "test:ci:record": "npm run cypress:run -- --record"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__intercept/cypress/fixtures/fruits.json:
--------------------------------------------------------------------------------
1 | [
2 |   "Apples 🍎",
3 |   "Green Apples 🍏",
4 |   "Grapes 🍇"
5 | ]
6 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__intercept/cypress/fixtures/roo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing-spying__intercept/cypress/fixtures/roo.jpg


--------------------------------------------------------------------------------
/examples/stubbing-spying__intercept/cypress/fixtures/users.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "id": "101",
 4 |     "email": "test1@test.com"
 5 |   },
 6 |   {
 7 |     "id": "102",
 8 |     "email": "test2@test.com"
 9 |   }
10 | ]
11 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__intercept/fruits-jsonp.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   Fruits JSONP
 5 |   
 6 |   
 9 | 
10 | 
11 |   
    Favorite Fruits (JSONP)
    
12 |   
      
13 |   
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__intercept/fruits.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   Fruits
 5 |   
 6 | 
 7 | 
 8 |   
      Favorite Fruits
      
 9 |   
        
10 |   
11 | 
12 | 
13 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__intercept/headers.html:
--------------------------------------------------------------------------------
1 | 
2 |   
        
3 |   
4 |   
5 | 
6 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__intercept/images/add-type-column.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing-spying__intercept/images/add-type-column.png


--------------------------------------------------------------------------------
/examples/stubbing-spying__intercept/images/tiger.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing-spying__intercept/images/tiger.jpg


--------------------------------------------------------------------------------
/examples/stubbing-spying__intercept/images/type.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing-spying__intercept/images/type.png


--------------------------------------------------------------------------------
/examples/stubbing-spying__intercept/pics.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   Spy / Stub / Clock
 5 |   
 6 | 
 7 | 
 8 |   
        Below is a picture of a tiger
        
 9 |   
10 | 
11 | 
12 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__intercept/redirect-example.html:
--------------------------------------------------------------------------------
 1 | 
 2 |   
        Redirect example
        
 3 | 
 4 |   
        
 5 |     Click Log out to be redirected to "/"
 6 |   
        
 7 | 
 8 |   
        
 9 |     Click Get out to be redirected to another domain
10 |   
        
11 | 
12 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__navigator/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 | 
3 | module.exports = defineConfig({
4 |   fixturesFolder: false,
5 |   e2e: {
6 |     supportFile: false,
7 |   },
8 | })
9 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__navigator/images/navigator-cookie-enabled-stub.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing-spying__navigator/images/navigator-cookie-enabled-stub.png


--------------------------------------------------------------------------------
/examples/stubbing-spying__navigator/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   
 6 |   Stubbing Navigator
 7 | 
 8 | 
 9 | 
10 |   
        My Application
        
11 |   
        
12 | 
13 | 
20 | 
21 | 
22 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__navigator/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "stubbing-spying__navigator",
 3 |   "version": "1.0.0",
 4 |   "description": "Stubbing navigator in Cypress.io",
 5 |   "scripts": {
 6 |     "cypress:open": "../../node_modules/.bin/cypress open",
 7 |     "cypress:run": "../../node_modules/.bin/cypress run",
 8 |     "test:ci": "npm run cypress:run",
 9 |     "test:ci:record": "npm run cypress:run -- --record"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__window-fetch/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('cypress')
 2 | 
 3 | module.exports = defineConfig({
 4 |   fixturesFolder: false,
 5 |   experimentalFetchPolyfill: true,
 6 |   e2e: {
 7 |     baseUrl: 'http://localhost:7080',
 8 |     excludeSpecPattern: 'deferred.js',
 9 |   },
10 | })
11 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__window-fetch/images/add-type-column.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing-spying__window-fetch/images/add-type-column.png


--------------------------------------------------------------------------------
/examples/stubbing-spying__window-fetch/images/type.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing-spying__window-fetch/images/type.png


--------------------------------------------------------------------------------
/examples/stubbing-spying__window-fetch/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   Spy / Stub / Clock
 5 |   
 6 | 
 7 | 
 8 |   
        Favorite Fruits
        
 9 |   
          
10 |   Go to page 2
11 |   
12 | 
13 | 
14 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__window-fetch/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "spy-stub-clock",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "scripts": {
 6 |     "cypress:open": "../../node_modules/.bin/cypress open",
 7 |     "cypress:run": "../../node_modules/.bin/cypress run",
 8 |     "cypress:run:record": "../../node_modules/.bin/cypress run --record",
 9 |     "dev": "../../node_modules/.bin/start-test 7080 cypress:open",
10 |     "start": "node server.js --port 7080",
11 |     "test:ci": "../../node_modules/.bin/start-test 7080 cypress:run",
12 |     "test:ci:record": "../../node_modules/.bin/start-test 7080 cypress:run:record"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__window-fetch/page2.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   Spy / Stub / Clock
 6 |   
 7 | 
 8 | 
 9 | 
10 |   
          Favorite Fruits: Page 2
          
11 |   
            
12 |   Go back
13 |   
14 | 
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__window-print/README.md:
--------------------------------------------------------------------------------
 1 | # Stubbing `window.print`
 2 | 
 3 | This is an example showing how to stub `window.print` method call
 4 | 
 5 | ## The application
 6 | 
 7 | The page [index.html](index.html) calls `window.print` on button click. Without stubbing, the test would click and then a system print dialog would block the rest of the test.
 8 | 
 9 | ![System print dialog](images/print-dialog.png)
10 | 
11 | By stubbing the `window.print` the [spec.cy.js](cypress/e2e/spec.cy.js) can confirm the call has happened.
12 | 
13 | ![Stub window print test](images/stub-print.png)
14 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__window-print/app.js:
--------------------------------------------------------------------------------
1 | /* eslint-env browser */
2 | document.getElementById('print-window')
3 | .addEventListener('click', () => {
4 |   window.print()
5 | })
6 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__window-print/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 | 
3 | module.exports = defineConfig({
4 |   fixturesFolder: false,
5 |   e2e: {
6 |     supportFile: false,
7 |   },
8 | })
9 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__window-print/cypress/e2e/spec.cy.js:
--------------------------------------------------------------------------------
 1 | /// 
 2 | 
 3 | describe('window.print', () => {
 4 |   it('can be stubbed', () => {
 5 |     cy.visit('index.html')
 6 |     cy.window().then((win) => {
 7 |       cy.stub(win, 'print').as('print')
 8 |     })
 9 | 
10 |     cy.contains('button', 'Print').click()
11 |     cy.get('@print').should('have.been.calledOnce')
12 |   })
13 | })
14 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__window-print/images/print-dialog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing-spying__window-print/images/print-dialog.png


--------------------------------------------------------------------------------
/examples/stubbing-spying__window-print/images/stub-print.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing-spying__window-print/images/stub-print.png


--------------------------------------------------------------------------------
/examples/stubbing-spying__window-print/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     Stubbing Window Print
 6 |   
 7 |   
 8 |     
            Application
            
 9 |     
              
10 |       
            • 
11 |         
12 |       
              • 
13 |     
            
14 | 
15 |     
16 |   
17 | 
18 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__window-print/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "stubbing-window-print",
 3 |   "version": "1.0.0",
 4 |   "description": "Stubbing window.print from test",
 5 |   "scripts": {
 6 |     "cypress:open": "../../node_modules/.bin/cypress open",
 7 |     "cypress:run": "../../node_modules/.bin/cypress run",
 8 |     "test:ci": "npm run cypress:run",
 9 |     "test:ci:record": "npm run cypress:run -- --record"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__window/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 | 
3 | module.exports = defineConfig({
4 |   fixturesFolder: false,
5 |   e2e: {
6 |     supportFile: false,
7 |   },
8 | })
9 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__window/cypress/e2e/spec.cy.js:
--------------------------------------------------------------------------------
 1 | /// 
 2 | describe('window open', function () {
 3 |   it('opens a new window with page1', function () {
 4 |     // window.open is called on click
 5 |     // thus we can create method stub after the cy.visit
 6 |     // but before cy.click
 7 |     cy.visit('/index.html')
 8 |     cy.window().then((win) => {
 9 |       cy.stub(win, 'open').as('windowOpen')
10 |     })
11 | 
12 |     cy.get('#open-window').click()
13 |     cy.get('@windowOpen').should('be.calledWith', 'page1.html')
14 |   })
15 | })
16 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__window/cypress/e2e/spy-before-load.cy.js:
--------------------------------------------------------------------------------
 1 | /// 
 2 | describe('application', function () {
 3 |   beforeEach(function () {
 4 |     // application prints "hello" to the console
 5 |     // during the page load, thus we need to create
 6 |     // our spy as soon as the window object is created but
 7 |     // before the page loads
 8 |     cy.visit('/index.html', {
 9 |       onBeforeLoad (win) {
10 |         cy.spy(win.console, 'log').as('console.log')
11 |       },
12 |     })
13 |   })
14 | 
15 |   it('prints hello on load', function () {
16 |     cy.get('@console.log').should('be.calledWith', 'hello')
17 |   })
18 | })
19 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__window/images/spy-before-load.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing-spying__window/images/spy-before-load.png


--------------------------------------------------------------------------------
/examples/stubbing-spying__window/images/window-open-stub.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing-spying__window/images/window-open-stub.png


--------------------------------------------------------------------------------
/examples/stubbing-spying__window/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     Stubbing Window
 6 |   
 7 |   
 8 |     
            My Application
            
 9 |     
              
10 |       
            • 
11 |         
12 |       
              • 
13 |     
            
14 | 
15 |     
24 |   
25 | 
26 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__window/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "stubbing-window",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "scripts": {
 6 |     "cypress:open": "../../node_modules/.bin/cypress open",
 7 |     "cypress:run": "../../node_modules/.bin/cypress run",
 8 |     "start": "echo",
 9 |     "test:ci": "npm run cypress:run",
10 |     "test:ci:record": "npm run cypress:run -- --record"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/examples/stubbing-spying__window/page1.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     Stubbing Window
 6 |   
 7 |   
 8 |     
            Page 1
            
 9 |   
10 | 
11 | 


--------------------------------------------------------------------------------
/examples/stubbing__resources/README.md:
--------------------------------------------------------------------------------
1 | # Stubbing Resources
2 | 
3 | The spec file [cypress/e2e/spec.cy.js](cypress/e2e/spec.cy.js) shows how to stub resources that are loaded e.g. by `img` tag. This works by observing DOM mutations and changing the `src` attribute.
4 | 
5 | When clicking onto the button in the `index.html`, a new `img` tag is created that is supposed to load [images/rose.png](images/rose.png). Instead we load a red image from the fixture file [cypress/fixtures/picture.png](cypress/fixtures/picture.png).
6 | 
7 | ![Test example](images/example.png)
8 | 


--------------------------------------------------------------------------------
/examples/stubbing__resources/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 | 
3 | module.exports = defineConfig({
4 |   fixturesFolder: 'cypress/fixtures',
5 |   e2e: {
6 |     supportFile: false,
7 |   },
8 | })
9 | 


--------------------------------------------------------------------------------
/examples/stubbing__resources/cypress/fixtures/picture.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing__resources/cypress/fixtures/picture.png


--------------------------------------------------------------------------------
/examples/stubbing__resources/images/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing__resources/images/example.png


--------------------------------------------------------------------------------
/examples/stubbing__resources/images/rose.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/stubbing__resources/images/rose.png


--------------------------------------------------------------------------------
/examples/stubbing__resources/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
            
 6 |   
            
 7 | 
 8 |   
17 | 
18 | 
19 | 
20 | 


--------------------------------------------------------------------------------
/examples/stubbing__resources/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "stubbing-resources",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "scripts": {
 6 |     "cypress:open": "../../node_modules/.bin/cypress open",
 7 |     "cypress:run": "../../node_modules/.bin/cypress run",
 8 |     "test:ci": "npm run cypress:run",
 9 |     "test:ci:record": "npm run cypress:run -- --record"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/examples/testing-dom__clipboard/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('cypress')
 2 | 
 3 | module.exports = defineConfig({
 4 |   fixturesFolder: false,
 5 |   viewportWidth: 400,
 6 |   viewportHeight: 300,
 7 |   e2e: {
 8 |     supportFile: false,
 9 |   },
10 | })
11 | 


--------------------------------------------------------------------------------
/examples/testing-dom__clipboard/images/copy-paste.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__clipboard/images/copy-paste.gif


--------------------------------------------------------------------------------
/examples/testing-dom__csv-table/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('cypress')
 2 | 
 3 | module.exports = defineConfig({
 4 |   fixturesFolder: false,
 5 |   viewportWidth: 500,
 6 |   viewportHeight: 1000,
 7 |   e2e: {
 8 |     supportFile: false,
 9 |   },
10 | })
11 | 


--------------------------------------------------------------------------------
/examples/testing-dom__csv-table/images/all-tests.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__csv-table/images/all-tests.png


--------------------------------------------------------------------------------
/examples/testing-dom__csv-table/images/rows.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__csv-table/images/rows.png


--------------------------------------------------------------------------------
/examples/testing-dom__csv-table/images/timings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__csv-table/images/timings.png


--------------------------------------------------------------------------------
/examples/testing-dom__csv-table/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "csv-table",
 3 |   "version": "1.0.0",
 4 |   "description": "Loads CSV file and checks HTML table to have the text content matching the loaded CSV records",
 5 |   "scripts": {
 6 |     "cypress:open": "../../node_modules/.bin/cypress open",
 7 |     "cypress:run": "../../node_modules/.bin/cypress run",
 8 |     "start": "echo nothing to start",
 9 |     "test:ci": "npm run cypress:run",
10 |     "test:ci:record": "npm run cypress:run -- --record"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/examples/testing-dom__download/document-utils/read-excel.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-console */
 2 | const readXlsxFile = require('read-excel-file/node')
 3 | 
 4 | const readExcelFile = (filename) => {
 5 |   // we must read the Excel file using Node library
 6 |   // and can return the parsed list to the browser
 7 |   // for the spec code to validate it
 8 |   console.log('reading Excel file %s', filename)
 9 |   console.log('from cwd %s', process.cwd())
10 | 
11 |   return readXlsxFile(filename)
12 | }
13 | 
14 | module.exports = { readExcelFile }
15 | 


--------------------------------------------------------------------------------
/examples/testing-dom__download/document-utils/read-pdf.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-console */
 2 | 
 3 | const { readFileSync } = require('fs')
 4 | const pdf = require('pdf-parse')
 5 | 
 6 | const readPdf = (filename) => {
 7 |   console.log('reading PDF file %s', filename)
 8 | 
 9 |   const dataBuffer = readFileSync(filename)
10 | 
11 |   return pdf(dataBuffer).then(function (data) {
12 |     return {
13 |       numpages: data.numpages,
14 |       text: data.text,
15 |     }
16 |   })
17 | }
18 | 
19 | module.exports = { readPdf }
20 | 
21 | if (!module.parent) {
22 |   const filename = './public/why-cypress.pdf'
23 | 
24 |   readPdf(filename).then(console.log)
25 | }
26 | 


--------------------------------------------------------------------------------
/examples/testing-dom__download/images/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__download/images/chrome.png


--------------------------------------------------------------------------------
/examples/testing-dom__download/images/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__download/images/firefox.png


--------------------------------------------------------------------------------
/examples/testing-dom__download/public/app.js:
--------------------------------------------------------------------------------
 1 | /* global document */
 2 | /* eslint-disable no-console */
 3 | document.querySelector('[data-cy=download-csv-href]').addEventListener('click', () => {
 4 |   console.log('about to download CSV file')
 5 |   document.location.href = 'records.csv'
 6 | })
 7 | 
 8 | document.querySelector('[data-cy=download-pdf-href]').addEventListener('click', () => {
 9 |   console.log('about to download PDF file')
10 |   document.location.href = 'why-cypress.pdf'
11 | })
12 | 


--------------------------------------------------------------------------------
/examples/testing-dom__download/public/files.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__download/public/files.zip


--------------------------------------------------------------------------------
/examples/testing-dom__download/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__download/public/logo.png


--------------------------------------------------------------------------------
/examples/testing-dom__download/public/people.xlsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__download/public/people.xlsx


--------------------------------------------------------------------------------
/examples/testing-dom__download/public/records.csv:
--------------------------------------------------------------------------------
1 | "First name","Last name","Occupation","Age","City","State"
2 | "Joe","Smith","student",20,"Boston","MA"
3 | "Mary","Sue","driver",21,"New York","NY"
4 | "Adam","Brown","plumber",22,"Miami","FL"
5 | 


--------------------------------------------------------------------------------
/examples/testing-dom__download/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow: /ja/
3 | Disallow: /zh-cn/
4 | Disallow: /pt-br/
5 | Disallow: /ru/
6 | Disallow: /fonts/
7 | 


--------------------------------------------------------------------------------
/examples/testing-dom__download/public/why-cypress.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__download/public/why-cypress.pdf


--------------------------------------------------------------------------------
/examples/testing-dom__drag-drop/README.md:
--------------------------------------------------------------------------------
 1 | # drag-n-drop
 2 | 
 3 | > Performing Drag & Drop by triggering mouse and drag events
 4 | 
 5 | See test file [cypress/e2e/drag_n_drop_spec.cy.js](cypress/e2e/drag_n_drop_spec.cy.js) that shows how to simulate drag & drop behavior using
 6 | 
 7 | - mouse events
 8 | - drag events
 9 | 
10 | In both cases, the tests use [`cy.trigger`](https://on.cypress.io/trigger) command.
11 | 
12 | Alternatively use [`.selectFile()`](https://on.cypress.io/selectfile) if you are testing the dragging and dropping of files.
13 | 


--------------------------------------------------------------------------------
/examples/testing-dom__drag-drop/basketball.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__drag-drop/basketball.png


--------------------------------------------------------------------------------
/examples/testing-dom__drag-drop/cypress-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__drag-drop/cypress-logo.png


--------------------------------------------------------------------------------
/examples/testing-dom__drag-drop/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('cypress')
 2 | 
 3 | module.exports = defineConfig({
 4 |   fixturesFolder: false,
 5 |   e2e: {
 6 |     baseUrl: 'http://localhost:7071',
 7 |     supportFile: false,
 8 |   },
 9 | })
10 | 


--------------------------------------------------------------------------------
/examples/testing-dom__drag-drop/server.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const minimist = require('minimist')
 3 | const express = require('express')
 4 | const app = express()
 5 | 
 6 | // get port from passed in args from scripts/start.js
 7 | const port = minimist(process.argv.slice(2)).port
 8 | 
 9 | app.use(express.static('.'))
10 | app.use('/node_modules', express.static(path.join(__dirname, '..', '..', 'node_modules')))
11 | 
12 | app.listen(port)
13 | 


--------------------------------------------------------------------------------
/examples/testing-dom__form-interactions/README.md:
--------------------------------------------------------------------------------
 1 | # form-interactions
 2 | 
 3 | > Shows how to change the value of a range input
 4 | 
 5 | - Use [`.invoke()`](https://on.cypress.io/invoke) and [`.trigger()`](https://on.cypress.io/trigger) to test a range input (slider).
 6 | 
 7 | The test triggers `change` event on an `` form element and asserts the value does get changed.
 8 | 
 9 | ![range input](images/range-input.png)
10 | 
11 | ## See
12 | 
13 | - [cypress/e2e/form-interactions-spec.cy.js](cypress/e2e/form-interactions-spec.cy.js)
14 | - [`cy.trigger`](https://on.cypress.io/trigger)
15 | 


--------------------------------------------------------------------------------
/examples/testing-dom__form-interactions/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('cypress')
 2 | 
 3 | module.exports = defineConfig({
 4 |   fixturesFolder: false,
 5 |   e2e: {
 6 |     baseUrl: 'http://localhost:7072',
 7 |     supportFile: false,
 8 |   },
 9 | })
10 | 


--------------------------------------------------------------------------------
/examples/testing-dom__form-interactions/images/range-input.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__form-interactions/images/range-input.png


--------------------------------------------------------------------------------
/examples/testing-dom__form-interactions/server.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const minimist = require('minimist')
 3 | const express = require('express')
 4 | const app = express()
 5 | 
 6 | // get port from passed in args from scripts/start.js
 7 | const port = minimist(process.argv.slice(2)).port
 8 | 
 9 | app.use(express.static('.'))
10 | app.use('/node_modules', express.static(path.join(__dirname, '..', '..', 'node_modules')))
11 | 
12 | app.listen(port)
13 | 


--------------------------------------------------------------------------------
/examples/testing-dom__hover-hidden-elements/README.md:
--------------------------------------------------------------------------------
 1 | # hover-hidden-elements
 2 | > Interact with elements that are hidden by CSS
 3 | 
 4 | See [cypress/e2e/hover-hidden-elements-spec.cy.js](cypress/e2e/hover-hidden-elements-spec.cy.js) to find how to get around Cypress' lack of `.hover()` command.
 5 | 
 6 | - Interact with elements that are hidden by CSS.
 7 | - Use [`.invoke()`](https://on.cypress.io/invoke) and [`.trigger()`](https://on.cypress.io/trigger) to simulate hovering.
 8 | - Trigger `mouseover`, `mouseout`, `mouseenter`, `mouseleave` events.
 9 | - Get around the lack of a `.hover()` command.
10 | 
11 | ![Test runner](images/hidden.png)
12 | 


--------------------------------------------------------------------------------
/examples/testing-dom__hover-hidden-elements/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('cypress')
 2 | 
 3 | module.exports = defineConfig({
 4 |   fixturesFolder: false,
 5 |   e2e: {
 6 |     baseUrl: 'http://localhost:7073',
 7 |     supportFile: false,
 8 |   },
 9 | })
10 | 


--------------------------------------------------------------------------------
/examples/testing-dom__hover-hidden-elements/images/hidden.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__hover-hidden-elements/images/hidden.png


--------------------------------------------------------------------------------
/examples/testing-dom__hover-hidden-elements/index.html:
--------------------------------------------------------------------------------
1 | 
2 |   See "hidden.html" and "mouse.html" documents.
3 | 
4 | 


--------------------------------------------------------------------------------
/examples/testing-dom__hover-hidden-elements/server.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const minimist = require('minimist')
 3 | const express = require('express')
 4 | const app = express()
 5 | 
 6 | // get port from passed in args from scripts/start.js
 7 | const port = minimist(process.argv.slice(2)).port
 8 | 
 9 | app.use(express.static('.'))
10 | app.use('/node_modules', express.static(path.join(__dirname, '..', '..', 'node_modules')))
11 | 
12 | app.listen(port)
13 | 


--------------------------------------------------------------------------------
/examples/testing-dom__lit-element/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "plugins": [
 3 |     "@cypress/dev"
 4 |   ],
 5 |   "extends": [
 6 |     "plugin:@cypress/dev/general"
 7 |   ],
 8 |   "env": {
 9 |     "browser": true
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/examples/testing-dom__lit-element/README.md:
--------------------------------------------------------------------------------
1 | # lit-element
2 | > Testing page with lit-element components that use Shadow DOM
3 | 
4 | - Test simple shadow DOM assertions in [lit-elements](https://lit-element.polymer-project.org/)
5 | 


--------------------------------------------------------------------------------
/examples/testing-dom__lit-element/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 | 
3 | module.exports = defineConfig({
4 |   fixturesFolder: false,
5 |   e2e: {
6 |     supportFile: false,
7 |   },
8 | })
9 | 


--------------------------------------------------------------------------------
/examples/testing-dom__lit-element/cypress/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "plugins": [
3 |     "@cypress/dev"
4 |   ],
5 |   "extends": [
6 |     "plugin:@cypress/dev/tests"
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/examples/testing-dom__lit-element/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |   
 6 |   
 7 |     
 8 |     
            
 9 |       
10 |         
            Testing 123
            
11 |                   
12 |     
            
13 |   
14 | 
15 | 


--------------------------------------------------------------------------------
/examples/testing-dom__lit-element/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "unit-test-lit-element",
 3 |   "version": "1.0.0",
 4 |   "description": "Load and unit test lit-element projects",
 5 |   "scripts": {
 6 |     "cypress:open": "../../node_modules/.bin/cypress open",
 7 |     "cypress:run": "../../node_modules/.bin/cypress run",
 8 |     "start": "echo there is no web server to start in this project",
 9 |     "test:ci": "npm run cypress:run",
10 |     "test:ci:firefox": "npm run cypress:run -- --browser firefox",
11 |     "test:ci:record": "npm run cypress:run -- --record"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/testing-dom__lit-element/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "files": ["*.ts"]
3 | }
4 | 


--------------------------------------------------------------------------------
/examples/testing-dom__page-reloads/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('cypress')
 2 | 
 3 | module.exports = defineConfig({
 4 |   fixturesFolder: false,
 5 |   viewportHeight: 100,
 6 |   viewportWidth: 100,
 7 |   e2e: {
 8 |     supportFile: false,
 9 |   },
10 | })
11 | 


--------------------------------------------------------------------------------
/examples/testing-dom__page-reloads/images/lucky-7.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__page-reloads/images/lucky-7.gif


--------------------------------------------------------------------------------
/examples/testing-dom__page-reloads/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "page-reloads",
 3 |   "version": "1.0.0",
 4 |   "description": "The test reloads the page until an expected text appears",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "cypress:open": "../../node_modules/.bin/cypress open",
 8 |     "cypress:run": "../../node_modules/.bin/cypress run"
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/examples/testing-dom__page-reloads/public/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 |   
 3 | 
 4 | 
 5 |   
            
 6 |   
15 | 
16 | 


--------------------------------------------------------------------------------
/examples/testing-dom__page-reloads/public/style.css:
--------------------------------------------------------------------------------
1 | body {
2 |   display: flex;
3 |   justify-content: center;
4 |   align-items: center;
5 |   font-size: 4em;
6 | }
7 | 


--------------------------------------------------------------------------------
/examples/testing-dom__page-source/README.md:
--------------------------------------------------------------------------------
1 | # Page source
2 | > Get the source of the page under test
3 | 
4 | ![Current HTML as text](./images/html-text.gif)
5 | 
6 | You can get the current document's HTML using `document.documentElement.outerHTML` property. Then you can validate / sanitize the HTML. You can even write it back as text into the current browser to see it, as [spec.cy.js](./cypress/e2e/spec.cy.js) shows.
7 | 


--------------------------------------------------------------------------------
/examples/testing-dom__page-source/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('cypress')
 2 | 
 3 | module.exports = defineConfig({
 4 |   fixturesFolder: false,
 5 |   e2e: {
 6 |     baseUrl: 'https://www.cypress.io/',
 7 |     supportFile: false,
 8 |   },
 9 | })
10 | 


--------------------------------------------------------------------------------
/examples/testing-dom__page-source/images/html-text.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__page-source/images/html-text.gif


--------------------------------------------------------------------------------
/examples/testing-dom__page-source/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "page-source",
 3 |   "version": "1.0.0",
 4 |   "description": "Get the source of the page under test",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "cypress:open": "../../node_modules/.bin/cypress open",
 8 |     "cypress:run": "../../node_modules/.bin/cypress run",
 9 |     "start": "echo nothing to start",
10 |     "test:ci": "npm run cypress:run"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/examples/testing-dom__pagination/README.md:
--------------------------------------------------------------------------------
1 | # Pagination
2 | > The test clicks the "Next" link until it gets to the last page
3 | 
4 | ![The last page](./images/last-page.png)
5 | 
6 | See the [cypress/e2e/spec.cy.js](./cypress/e2e/spec.cy.js) file.
7 | 


--------------------------------------------------------------------------------
/examples/testing-dom__pagination/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('cypress')
 2 | 
 3 | module.exports = defineConfig({
 4 |   fixturesFolder: false,
 5 |   viewportHeight: 500,
 6 |   viewportWidth: 500,
 7 |   e2e: {
 8 |     supportFile: false,
 9 |   },
10 | })
11 | 


--------------------------------------------------------------------------------
/examples/testing-dom__pagination/images/last-page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__pagination/images/last-page.png


--------------------------------------------------------------------------------
/examples/testing-dom__pagination/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pagination",
 3 |   "version": "1.0.0",
 4 |   "description": "The test clicks the Next link until it gets to the last page",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "cypress:open": "../../node_modules/.bin/cypress open",
 8 |     "cypress:run": "../../node_modules/.bin/cypress run"
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/examples/testing-dom__performance-metrics/README.md:
--------------------------------------------------------------------------------
 1 | # Utilize window.performance 
 2 | 
 3 | The spec file [cypress/e2e/spec.cy.js](cypress/e2e/spec.cy.js) shows how you can utilize [cypress](https://cypress.io) to monitor your website.
 4 | 
 5 | ![Test example](images/performance-example.png)
 6 | 
 7 | ## Learn more
 8 | 
 9 | - [`cy.visit()`](https://on.cypress.io/visit)
10 | 


--------------------------------------------------------------------------------
/examples/testing-dom__performance-metrics/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 | 
3 | module.exports = defineConfig({
4 |   fixturesFolder: false,
5 |   e2e: {
6 |     supportFile: false,
7 |   },
8 | })
9 | 


--------------------------------------------------------------------------------
/examples/testing-dom__performance-metrics/images/cypress-bw.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__performance-metrics/images/cypress-bw.png


--------------------------------------------------------------------------------
/examples/testing-dom__performance-metrics/images/performance-example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__performance-metrics/images/performance-example.png


--------------------------------------------------------------------------------
/examples/testing-dom__performance-metrics/index.html:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | 
4 |   
            Performance metrics
            
5 |   
6 | 
7 | 


--------------------------------------------------------------------------------
/examples/testing-dom__performance-metrics/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "performance-metrics",
 3 |   "version": "1.0.0",
 4 |   "description": "Shows how to evaluate some performance metrics",
 5 |   "scripts": {
 6 |     "cypress:open": "../../node_modules/.bin/cypress open",
 7 |     "cypress:run": "../../node_modules/.bin/cypress run",
 8 |     "test:ci:firefox": "../../node_modules/.bin/cypress run --browser firefox"
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/examples/testing-dom__responsive-image/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 | 
3 | module.exports = defineConfig({
4 |   fixturesFolder: false,
5 |   e2e: {
6 |     supportFile: false,
7 |   },
8 | })
9 | 


--------------------------------------------------------------------------------
/examples/testing-dom__responsive-image/images/picture.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__responsive-image/images/picture.gif


--------------------------------------------------------------------------------
/examples/testing-dom__responsive-image/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "responsive-image",
 3 |   "version": "1.0.0",
 4 |   "description": "Testing how the browser loads images depending on viewport",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "cypress:open": "../../node_modules/.bin/cypress open",
 8 |     "cypress:run": "../../node_modules/.bin/cypress run",
 9 |     "start": "echo nothing to start",
10 |     "test:ci": "npm run cypress:run"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/examples/testing-dom__responsive-image/responsive-images/elva-480w-close-portrait.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__responsive-image/responsive-images/elva-480w-close-portrait.jpg


--------------------------------------------------------------------------------
/examples/testing-dom__responsive-image/responsive-images/elva-800w.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__responsive-image/responsive-images/elva-800w.jpg


--------------------------------------------------------------------------------
/examples/testing-dom__responsive-image/responsive-images/elva-fairy-320w.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__responsive-image/responsive-images/elva-fairy-320w.jpg


--------------------------------------------------------------------------------
/examples/testing-dom__responsive-image/responsive-images/elva-fairy-480w.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__responsive-image/responsive-images/elva-fairy-480w.jpg


--------------------------------------------------------------------------------
/examples/testing-dom__responsive-image/responsive-images/elva-fairy-640w.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__responsive-image/responsive-images/elva-fairy-640w.jpg


--------------------------------------------------------------------------------
/examples/testing-dom__responsive-image/responsive-images/elva-fairy-800w.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__responsive-image/responsive-images/elva-fairy-800w.jpg


--------------------------------------------------------------------------------
/examples/testing-dom__responsive-image/responsive-images/elva-fairy-original.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__responsive-image/responsive-images/elva-fairy-original.jpg


--------------------------------------------------------------------------------
/examples/testing-dom__responsive-image/responsive-images/elva-original.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__responsive-image/responsive-images/elva-original.jpg


--------------------------------------------------------------------------------
/examples/testing-dom__responsive-image/responsive-images/header.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__responsive-image/responsive-images/header.jpg


--------------------------------------------------------------------------------
/examples/testing-dom__responsive-image/responsive-images/srcset-resolutions.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 6 |     Responsive HTML images demo
 7 |     
14 |   
15 |   
16 |     
17 | 
18 |         Elva dressed as a fairy 
22 | 
23 |         
24 |   
25 | 


--------------------------------------------------------------------------------
/examples/testing-dom__root-style/README.md:
--------------------------------------------------------------------------------
1 | # Testing how the app sets the root document style variable
2 | 
3 | The application in [index.html](index.html) uses `` to set the CSS variable that controls the background style, see [app.css](app.css)
4 | 
5 | ![triggered color change](images/red.gif)
6 | 
7 | Find tests in [cypress/e2e/spec.cy.js](cypress/e2e/spec.cy.js) file.
8 | 


--------------------------------------------------------------------------------
/examples/testing-dom__root-style/app.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --main-color: #fff;
 3 |   --background-color: #000;
 4 | }
 5 | body {
 6 |   color: var(--main-color);
 7 |   background-color: var(--background-color);
 8 |   font-size: xx-large;
 9 | }
10 | 


--------------------------------------------------------------------------------
/examples/testing-dom__root-style/app.js:
--------------------------------------------------------------------------------
1 | /* eslint-env browser */
2 | /* eslint-disable no-console */
3 | document.querySelector('input[type=color]').addEventListener('change', (e) => {
4 |   console.log('setting new background color to: %s', e.target.value)
5 |   document.documentElement.style.setProperty('--background-color', e.target.value)
6 | })
7 | 


--------------------------------------------------------------------------------
/examples/testing-dom__root-style/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('cypress')
 2 | 
 3 | module.exports = defineConfig({
 4 |   fixturesFolder: false,
 5 |   viewportWidth: 300,
 6 |   viewportHeight: 300,
 7 |   e2e: {
 8 |     supportFile: false,
 9 |   },
10 | })
11 | 


--------------------------------------------------------------------------------
/examples/testing-dom__root-style/images/red.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__root-style/images/red.gif


--------------------------------------------------------------------------------
/examples/testing-dom__root-style/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 |   
 3 | 
 4 | 
 5 |   This is the body of the document
 6 |   
            Change color using this color input
 7 |     
 8 |   
            
 9 |   
10 | 
11 | 
12 | 


--------------------------------------------------------------------------------
/examples/testing-dom__root-style/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "root-style",
 3 |   "version": "1.0.0",
 4 |   "description": "Tests how the app changes CSS variable using input color element",
 5 |   "scripts": {
 6 |     "cypress:open": "../../node_modules/.bin/cypress open",
 7 |     "cypress:run": "../../node_modules/.bin/cypress run",
 8 |     "test:ci": "npm run cypress:run",
 9 |     "test:ci:record": "npm run cypress:run -- --record"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/examples/testing-dom__select2/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('cypress')
 2 | 
 3 | module.exports = defineConfig({
 4 |   defaultCommandTimeout: 3000,
 5 |   retries: {
 6 |     runMode: 5,
 7 |   },
 8 |   e2e: {
 9 |     supportFile: false,
10 |   },
11 | })
12 | 


--------------------------------------------------------------------------------
/examples/testing-dom__select2/images/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__select2/images/demo.gif


--------------------------------------------------------------------------------
/examples/testing-dom__select2/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "select2-recipe",
 3 |   "version": "1.0.0",
 4 |   "description": "Testing Select2 widgets",
 5 |   "scripts": {
 6 |     "cypress:open": "../../node_modules/.bin/cypress open",
 7 |     "cypress:run": "../../node_modules/.bin/cypress run",
 8 |     "test:ci": "npm run cypress:run",
 9 |     "test:ci:record": "npm run cypress:run -- --record"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/examples/testing-dom__sorting-table/README.md:
--------------------------------------------------------------------------------
1 | # Sorting Table
2 | 
3 | Ag-Grid table in [index.html](index.html) taken from [plain JavaScript documentation](https://www.ag-grid.com/javascript-grid/) example available at [plnkr.co](https://plnkr.co/edit/nmWxAxWONarW5gj2).
4 | 
5 | See [cypress/e2e/spec.cy.js](cypress/e2e/spec.cy.js) that confirms the table can be sorted by price. Read the blog post [Sorting the Table](https://www.cypress.io/blog/2020/07/27/sorting-the-table/)
6 | 
7 | ![Sorted prices test](images/sorted-prices.png)
8 | 


--------------------------------------------------------------------------------
/examples/testing-dom__sorting-table/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 | 
3 | module.exports = defineConfig({
4 |   fixturesFolder: false,
5 |   e2e: {
6 |     supportFile: false,
7 |   },
8 | })
9 | 


--------------------------------------------------------------------------------
/examples/testing-dom__sorting-table/images/sorted-prices.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__sorting-table/images/sorted-prices.png


--------------------------------------------------------------------------------
/examples/testing-dom__sorting-table/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 |   Ag-Grid Basic Example
 6 |   
 7 |   
 8 | 
 9 | 
10 | 
11 |   
            Ag-Grid Table
            
12 |   
            
13 | 
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/examples/testing-dom__sorting-table/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sorting-table",
 3 |   "version": "1.0.0",
 4 |   "description": "Sorting Ag-Grid table",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "cypress:open": "../../node_modules/.bin/cypress open",
 8 |     "cypress:run": "../../node_modules/.bin/cypress run",
 9 |     "test:ci": "npm run cypress:run",
10 |     "test:ci:record": "npm run cypress:run -- --record"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/examples/testing-dom__tab-handling-links/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('cypress')
 2 | 
 3 | module.exports = defineConfig({
 4 |   fixturesFolder: false,
 5 |   e2e: {
 6 |     baseUrl: 'http://localhost:7078',
 7 |     supportFile: false,
 8 |   },
 9 | })
10 | 


--------------------------------------------------------------------------------
/examples/testing-dom__tab-handling-links/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "testing-dom__tab-handling-links",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "scripts": {
 6 |     "cypress:open": "../../node_modules/.bin/cypress open",
 7 |     "cypress:run": "../../node_modules/.bin/cypress run",
 8 |     "cypress:run:record": "../../node_modules/.bin/cypress run --record",
 9 |     "dev": "../../node_modules/.bin/start-test 7078 cypress:open",
10 |     "start": "node server.js --port 7078",
11 |     "test:ci": "../../node_modules/.bin/start-test 7078 cypress:run",
12 |     "test:ci:record": "../../node_modules/.bin/start-test 7078 cypress:run:record"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/examples/testing-dom__tab-handling-links/server.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const minimist = require('minimist')
 3 | const express = require('express')
 4 | const app = express()
 5 | 
 6 | // get port from passed in args from scripts/start.js
 7 | const port = minimist(process.argv.slice(2)).port
 8 | 
 9 | app.use(express.static('.'))
10 | app.use('/node_modules', express.static(path.join(__dirname, '..', '..', 'node_modules')))
11 | 
12 | app.listen(port)
13 | 


--------------------------------------------------------------------------------
/examples/testing-dom__tab-handling-links/users.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   Tab Handling and Anchor Links - Users
 5 | 
 6 | 
 7 |   
            Users
            
 8 | 
 9 | 
10 | 


--------------------------------------------------------------------------------
/examples/testing-dom__wait-for-resource/cypress.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('cypress')
 2 | 
 3 | module.exports = defineConfig({
 4 |   viewportHeight: 600,
 5 |   viewportWidth: 300,
 6 |   e2e: {
 7 |     baseUrl: 'http://localhost:4500',
 8 |   },
 9 | })
10 | 


--------------------------------------------------------------------------------
/examples/testing-dom__wait-for-resource/images/delayed-script.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__wait-for-resource/images/delayed-script.png


--------------------------------------------------------------------------------
/examples/testing-dom__wait-for-resource/images/natural-width.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__wait-for-resource/images/natural-width.gif


--------------------------------------------------------------------------------
/examples/testing-dom__wait-for-resource/images/wait-for-image.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__wait-for-resource/images/wait-for-image.gif


--------------------------------------------------------------------------------
/examples/testing-dom__wait-for-resource/public/a-script.js:
--------------------------------------------------------------------------------
1 | // typical JavaScript
2 | /* eslint-disable no-console */
3 | console.log('a-script.js has loaded')
4 | 


--------------------------------------------------------------------------------
/examples/testing-dom__wait-for-resource/public/app.css:
--------------------------------------------------------------------------------
1 | h1 {
2 |   color: red;
3 | }
4 | 


--------------------------------------------------------------------------------
/examples/testing-dom__wait-for-resource/public/base.css:
--------------------------------------------------------------------------------
1 | main {
2 |   font-size: x-large;
3 |   padding: 1em;
4 | }
5 | 


--------------------------------------------------------------------------------
/examples/testing-dom__wait-for-resource/public/cypress-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cypress-io/cypress-example-recipes/b432cc7f9cf55855cbeda5f318e3bc0a5266e51b/examples/testing-dom__wait-for-resource/public/cypress-logo.png


--------------------------------------------------------------------------------
/examples/unit-testing__application-code/cypress.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('cypress')
2 | 
3 | module.exports = defineConfig({
4 |   e2e: {
5 |     supportFile: false,
6 |   },
7 | })
8 | 


--------------------------------------------------------------------------------
/examples/unit-testing__application-code/cypress/e2e/wait-for-window-property-spec.cy.js:
--------------------------------------------------------------------------------
 1 | /// 
 2 | 
 3 | context('waiting for a property of an object', () => {
 4 |   it('waits for a variable to be set on application\'s Window object', () => {
 5 |     cy.visit('./index.html')
 6 |     // similar to above examples, cy.window() yields application's Window
 7 |     // object and we tell Cypress to retry until that object has property "AppReady"
 8 |     // and its value is `true`.
 9 |     cy.window().should('have.property', 'AppReady', true)
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/examples/unit-testing__application-code/cypress/fixtures/string.txt:
--------------------------------------------------------------------------------
1 | brown fox
2 | 


--------------------------------------------------------------------------------
/examples/unit-testing__application-code/fizzbuzz.js:
--------------------------------------------------------------------------------
 1 | module.exports = (num) => {
 2 |   if (num % 3 === 0 && num % 5 === 0) {
 3 |     return 'fizzbuzz'
 4 |   }
 5 | 
 6 |   if (num % 3 === 0) {
 7 |     return 'fizz'
 8 |   }
 9 | 
10 |   if (num % 5 === 0) {
11 |     return 'buzz'
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/examples/unit-testing__application-code/index.html:
--------------------------------------------------------------------------------
1 | 
2 |   
7 | 
8 | 


--------------------------------------------------------------------------------
/examples/unit-testing__application-code/math.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   add: (a, b) => {
 3 |     return a + b
 4 |   },
 5 | 
 6 |   subtract: (a, b) => {
 7 |     return a - b
 8 |   },
 9 | 
10 |   divide: (a, b) => {
11 |     return a / b
12 |   },
13 | 
14 |   multiply: (a, b) => {
15 |     return a * b
16 |   },
17 | }
18 | 


--------------------------------------------------------------------------------
/examples/unit-testing__application-code/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "unit-test-application-code",
 3 |   "version": "1.0.0",
 4 |   "description": "Load and unit test application code without loading a web page",
 5 |   "scripts": {
 6 |     "cypress:open": "../../node_modules/.bin/cypress open",
 7 |     "cypress:run": "../../node_modules/.bin/cypress run",
 8 |     "start": "echo there is no web server to start in this project",
 9 |     "test:ci": "npm run cypress:run",
10 |     "test:ci:firefox": "npm run cypress:run -- --browser firefox",
11 |     "test:ci:record": "npm run cypress:run -- --record"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/nodemon.json:
--------------------------------------------------------------------------------
1 | {
2 |   "ignore": [
3 |     "cypress/integration/*.js",
4 |     "db.json"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------