{ "doc": { "id": "app/faq", "title": "Frequently Asked Questions | Cypress Documentation", "description": "Get answers to common questions about Cypress, including general questions, how-to questions, and more.", "section": "app", "source_path": "/llm/markdown/app/faq.md", "version": "ce02913654e2655ee63448bdc92bb92c7b46a619", "updated_at": "2026-04-22T19:37:51.587Z", "headings": [ { "id": "app/faq#frequently-asked-questions", "text": "Frequently Asked Questions", "level": 1 }, { "id": "app/faq#general-cypress-questions", "text": "General Cypress Questions", "level": 2 }, { "id": "app/faq#is-cypress-free-and-open-source", "text": " Is Cypress free and open source?", "level": 3 }, { "id": "app/faq#what-operating-systems-do-you-support", "text": " What operating systems do you support?", "level": 3 }, { "id": "app/faq#do-you-support-native-mobile-apps", "text": " Do you support native mobile apps?", "level": 3 }, { "id": "app/faq#how-is-this-different-from-x-testing-tool", "text": " How is this different from 'X' testing tool?", "level": 3 }, { "id": "app/faq#do-you-support-x-language-or-x-framework", "text": " Do you support X language or X framework?", "level": 3 }, { "id": "app/faq#will-cypress-work-in-my-ci-provider", "text": " Will Cypress work in my CI provider?", "level": 3 }, { "id": "app/faq#does-cypress-require-me-to-change-any-of-my-existing-code", "text": " Does Cypress require me to change any of my existing code?", "level": 3 }, { "id": "app/faq#we-use-websockets-will-cypress-work-with-that", "text": " We use WebSockets; will Cypress work with that?", "level": 3 }, { "id": "app/faq#is-it-possible-to-use-cypress-on-jspa", "text": " Is it possible to use cypress on .jspa?", "level": 3 }, { "id": "app/faq#can-i-use-cypress-to-script-user-actions-on-an-external-site-like-gmail-com", "text": " Can I use Cypress to script user-actions on an external site like gmail.com?", "level": 3 }, { "id": "app/faq#is-there-code-coverage", "text": " Is there code coverage?", "level": 3 }, { "id": "app/faq#are-there-driver-bindings-in-my-language", "text": " Are there driver bindings in my language?", "level": 3 }, { "id": "app/faq#whats-the-difference-between-a-spec-test-and-a-test-suite", "text": " What's the difference between a Spec, Test, and a Test Suite?", "level": 3 }, { "id": "app/faq#when-should-i-write-a-end-to-end-tests-and-when-should-i-write-component-tests", "text": " When should I write a End-to-End tests and when should I write Component Tests?", "level": 3 }, { "id": "app/faq#when-should-i-write-a-unit-test-and-when-should-i-write-an-end-to-end-test", "text": " When should I write a unit test and when should I write an end-to-end test?", "level": 3 }, { "id": "app/faq#how-do-i-convince-my-company-to-use-cypress", "text": " How do I convince my company to use Cypress?", "level": 3 }, { "id": "app/faq#how-can-i-find-out-about-new-versions-of-cypress", "text": " How can I find out about new versions of Cypress?", "level": 3 }, { "id": "app/faq#how-often-are-cypress-versions-released", "text": " How often are Cypress versions released?", "level": 3 }, { "id": "app/faq#what-information-is-captured-or-transmitted-when-using-the-cypress-app", "text": " What information is captured or transmitted when using the Cypress App?", "level": 3 }, { "id": "app/faq#can-i-write-api-tests-using-cypress", "text": " Can I write API tests using Cypress?", "level": 3 }, { "id": "app/faq#how-to-cypress-questions", "text": "\"How-to\" Cypress Questions", "level": 2 }, { "id": "app/faq#how-do-i-get-an-elements-text-contents", "text": " How do I get an element's text contents?", "level": 3 }, { "id": "app/faq#how-do-i-get-an-inputs-value", "text": " How do I get an input's value?", "level": 3 }, { "id": "app/faq#how-do-i-compare-the-value-or-state-of-one-thing-to-another", "text": " How do I compare the value or state of one thing to another?", "level": 3 }, { "id": "app/faq#can-i-store-an-attributes-value-in-a-constant-or-a-variable-for-later-use", "text": " Can I store an attribute's value in a constant or a variable for later use?", "level": 3 }, { "id": "app/faq#how-do-i-get-the-native-dom-reference-of-an-element-found-using-cypress", "text": " How do I get the native DOM reference of an element found using Cypress?", "level": 3 }, { "id": "app/faq#how-do-i-do-something-different-if-an-element-doesnt-exist", "text": " How do I do something different if an element doesn't exist?", "level": 3 }, { "id": "app/faq#how-can-i-make-cypress-wait-until-something-is-visible-in-the-dom", "text": " How can I make Cypress wait until something is visible in the DOM?", "level": 3 }, { "id": "app/faq#how-do-i-wait-for-my-application-to-load", "text": " How do I wait for my application to load? ", "level": 3 }, { "id": "app/faq#can-i-throttle-network-speeds-using-cypress", "text": " Can I throttle network speeds using Cypress?", "level": 3 }, { "id": "app/faq#can-i-use-es7-async-await-syntax", "text": " Can I use ES7 async / await syntax?", "level": 3 }, { "id": "app/faq#how-do-i-select-or-query-for-elements-if-my-application-uses-dynamic-classes-or-dynamic-ids", "text": " How do I select or query for elements if my application uses dynamic classes or dynamic IDs?", "level": 3 }, { "id": "app/faq#i-want-to-run-tests-only-within-one-specific-folder-how-do-i-do-this", "text": " I want to run tests only within one specific folder. How do I do this?", "level": 3 }, { "id": "app/faq#is-there-a-suggested-way-or-best-practice-for-how-i-should-target-elements-or-write-element-selectors", "text": " Is there a suggested way or best practice for how I should target elements or write element selectors?", "level": 3 }, { "id": "app/faq#can-i-prevent-cypress-from-failing-my-test-when-my-application-throws-an-uncaught-exception-error", "text": " Can I prevent Cypress from failing my test when my application throws an uncaught exception error?", "level": 3 }, { "id": "app/faq#will-cypress-fail-the-test-when-an-application-has-unhandled-rejected-promise", "text": " Will Cypress fail the test when an application has unhandled rejected promise?", "level": 3 }, { "id": "app/faq#can-i-override-environment-variables-or-create-configuration-for-different-environments", "text": " Can I override environment variables or create configuration for different environments?", "level": 3 }, { "id": "app/faq#can-i-override-or-change-the-default-user-agent-the-browser-uses", "text": " Can I override or change the default user agent the browser uses?", "level": 3 }, { "id": "app/faq#can-i-block-traffic-going-to-specific-domains-i-want-to-block-google-analytics-or-other-providers", "text": " Can I block traffic going to specific domains? I want to block Google Analytics or other providers.", "level": 3 }, { "id": "app/faq#how-can-i-verify-that-calls-to-analytics-like-google-analytics-are-being-made-correct", "text": " How can I verify that calls to analytics like Google Analytics are being made correct?", "level": 3 }, { "id": "app/faq#im-trying-to-test-a-chat-application-can-i-run-more-than-one-browser-at-a-time-with-cypress", "text": " I'm trying to test a chat application. Can I run more than one browser at a time with Cypress?", "level": 3 }, { "id": "app/faq#how-can-i-modify-or-pass-arguments-used-to-launch-the-browser", "text": " How can I modify or pass arguments used to launch the browser?", "level": 3 }, { "id": "app/faq#can-i-make-cy-request-poll-until-a-condition-is-met", "text": " Can I make cy.request() poll until a condition is met?", "level": 3 }, { "id": "app/faq#can-i-use-the-page-object-pattern", "text": " Can I use the Page Object pattern?", "level": 3 }, { "id": "app/faq#can-i-run-a-single-test-or-group-of-tests", "text": " Can I run a single test or group of tests?", "level": 3 }, { "id": "app/faq#how-do-i-test-uploading-a-file", "text": " How do I test uploading a file?", "level": 3 }, { "id": "app/faq#how-do-i-check-that-an-email-was-sent-out", "text": " How do I check that an email was sent out?", "level": 3 }, { "id": "app/faq#how-do-i-wait-for-multiple-requests-to-the-same-url", "text": " How do I wait for multiple requests to the same url?", "level": 3 }, { "id": "app/faq#how-do-i-seed-reset-my-database", "text": " How do I seed / reset my database?", "level": 3 }, { "id": "app/faq#how-do-i-test-elements-inside-an-iframe", "text": " How do I test elements inside an iframe?", "level": 3 }, { "id": "app/faq#how-do-i-preserve-cookies-localstorage-in-between-my-tests", "text": " How do I preserve cookies / localStorage in between my tests?", "level": 3 }, { "id": "app/faq#some-of-my-elements-animate-in-how-do-i-work-around-that", "text": " Some of my elements animate in; how do I work around that?", "level": 3 }, { "id": "app/faq#can-i-test-anchor-links-that-open-in-a-new-tab", "text": " Can I test anchor links that open in a new tab?", "level": 3 }, { "id": "app/faq#can-i-dynamically-test-multiple-viewports", "text": " Can I dynamically test multiple viewports?", "level": 3 }, { "id": "app/faq#can-i-run-the-same-tests-on-multiple-subdomains", "text": " Can I run the same tests on multiple subdomains? ", "level": 3 }, { "id": "app/faq#how-do-i-require-or-import-node-modules-in-cypress", "text": " How do I require or import node modules in Cypress?", "level": 3 }, { "id": "app/faq#is-there-a-way-to-give-a-proper-ssl-certificate-to-your-proxy-so-the-page-doesnt-show-up-as-not-secure", "text": " Is there a way to give a proper SSL certificate to your proxy so the page doesn't show up as \"not secure\"?", "level": 3 }, { "id": "app/faq#is-there-any-way-to-detect-if-my-app-is-running-under-cypress", "text": " Is there any way to detect if my app is running under Cypress?", "level": 3 }, { "id": "app/faq#is-there-a-way-to-test-that-a-file-got-downloaded-i-want-to-test-that-a-button-click-triggers-a-download", "text": " Is there a way to test that a file got downloaded? I want to test that a button click triggers a download.", "level": 3 }, { "id": "app/faq#is-it-possible-to-catch-the-promise-chain-in-cypress", "text": " Is it possible to catch the promise chain in Cypress?", "level": 3 }, { "id": "app/faq#is-there-a-way-to-modify-the-screenshots-video-resolution", "text": " Is there a way to modify the screenshots/video resolution?", "level": 3 }, { "id": "app/faq#does-cypress-support-es7", "text": " Does Cypress support ES7?", "level": 3 }, { "id": "app/faq#how-does-one-determine-what-the-latest-version-of-cypress-is", "text": " How does one determine what the latest version of Cypress is?", "level": 3 }, { "id": "app/faq#when-i-visit-my-site-directly-the-certificate-is-verified-however-the-browser-launched-through-cypress-is-showing-it-as-not-secure-why", "text": " When I visit my site directly, the certificate is verified, however the browser launched through Cypress is showing it as \"Not Secure\". Why?", "level": 3 }, { "id": "app/faq#how-do-i-run-the-server-and-tests-together-and-then-shutdown-the-server", "text": " How do I run the server and tests together and then shutdown the server?", "level": 3 }, { "id": "app/faq#i-found-a-bug-what-do-i-do", "text": " I found a bug! What do I do?", "level": 3 }, { "id": "app/faq#what-is-the-right-balance-between-custom-commands-and-utility-functions", "text": " What is the right balance between custom commands and utility functions?", "level": 3 }, { "id": "app/faq#can-my-tests-interact-with-redux-vuex-data-store", "text": " Can my tests interact with Redux / Vuex data store?", "level": 3 }, { "id": "app/faq#how-do-i-spy-on-console-log", "text": " How do I spy on console.log?", "level": 3 }, { "id": "app/faq#how-do-i-use-special-characters-with-cy-get", "text": " How do I use special characters with cy.get()?", "level": 3 }, { "id": "app/faq#why-doesnt-the-instanceof-event-work", "text": " Why doesn't the instanceof Event work?", "level": 3 }, { "id": "app/faq#how-do-i-prevent-application-redirecting-to-another-url", "text": " How do I prevent application redirecting to another URL?", "level": 3 }, { "id": "app/faq#continuous-integration-ci-cd", "text": "Continuous Integration (CI/CD)", "level": 2 }, { "id": "app/faq#why-do-my-cypress-tests-pass-locally-but-not-in-ci", "text": " Why do my Cypress tests pass locally but not in CI?", "level": 3 }, { "id": "app/faq#why-are-my-video-recordings-freezing-or-dropping-frames-when-running-in-ci", "text": " Why are my video recordings freezing or dropping frames when running in CI?", "level": 3 }, { "id": "app/faq#what-can-i-do-if-my-tests-crash-or-hang-on-ci", "text": " What can I do if my tests crash or hang on CI?", "level": 3 }, { "id": "app/faq#how-can-i-parallelize-my-runs", "text": " How can I parallelize my runs?", "level": 3 }, { "id": "app/faq#i-tried-to-install-cypress-in-my-ci-but-i-get-the-error-eacces-permission-denied", "text": " I tried to install Cypress in my CI, but I get the error: EACCES: permission denied.", "level": 3 }, { "id": "app/faq#is-there-an-option-to-run-cypress-in-ci-with-developer-tools-open-we-want-to-track-network-and-console-issues", "text": " Is there an option to run Cypress in CI with Developer Tools open? We want to track network and console issues.", "level": 3 }, { "id": "app/faq#distinct-cypress-use-cases", "text": "Distinct Cypress Use Cases", "level": 2 }, { "id": "app/faq#can-i-use-cypress-to-test-charts-and-graphs", "text": " Can I use Cypress to test charts and graphs?", "level": 3 }, { "id": "app/faq#can-i-test-a-chrome-extension-how-do-i-load-my-chrome-extension", "text": " Can I test a chrome extension? How do I load my chrome extension?", "level": 3 }, { "id": "app/faq#can-i-test-my-electron-app", "text": " Can I test my Electron app?", "level": 3 }, { "id": "app/faq#can-i-test-the-html-head-element", "text": " Can I test the HTML element?", "level": 3 }, { "id": "app/faq#can-i-check-that-a-forms-html-form-validation-is-shown-when-an-input-is-invalid", "text": " Can I check that a form's HTML form validation is shown when an input is invalid?", "level": 3 }, { "id": "app/faq#can-cypress-be-used-for-model-based-testing", "text": " Can Cypress be used for model-based testing?", "level": 3 }, { "id": "app/faq#can-cypress-be-used-for-performance-testing", "text": " Can Cypress be used for performance testing?", "level": 3 }, { "id": "app/faq#integrations-with-other-tools-frameworks-libraries", "text": "Integrations with Other Tools/Frameworks/Libraries", "level": 2 }, { "id": "app/faq#can-i-test-react-applications-using-cypress", "text": " Can I test React applications using Cypress?", "level": 3 }, { "id": "app/faq#can-i-use-jest-snapshots", "text": " Can I use Jest snapshots?", "level": 3 }, { "id": "app/faq#can-i-use-testing-library", "text": " Can I use Testing Library?", "level": 3 }, { "id": "app/faq#can-i-use-cucumber-to-write-tests", "text": " Can I use Cucumber to write tests?", "level": 3 }, { "id": "app/faq#can-i-check-the-graphql-network-calls-using-cypress", "text": " Can I check the GraphQL network calls using Cypress?", "level": 3 }, { "id": "app/faq#is-there-an-eslint-plugin-for-cypress-or-a-list-of-globals", "text": " Is there an ESLint plugin for Cypress or a list of globals?", "level": 3 }, { "id": "app/faq#component-testing", "text": "Component Testing", "level": 2 }, { "id": "app/faq#what-is-component-testing", "text": " What is component testing?", "level": 3 }, { "id": "app/faq#how-does-cypress-do-component-testing", "text": " How does Cypress do component testing?", "level": 3 }, { "id": "app/faq#how-does-cypress-component-testing-compare-to-other-options", "text": " How does Cypress component testing compare to other options?", "level": 3 }, { "id": "app/faq#what-is-the-mount-function", "text": " What is the Mount Function?", "level": 3 }, { "id": "app/faq#why-isnt-my-component-rendering-as-it-should", "text": " Why isn't my component rendering as it should?", "level": 3 }, { "id": "app/faq#why-doesnt-my-spec-show-in-the-specs-page", "text": " Why doesn't my spec show in the Specs page?", "level": 3 }, { "id": "app/faq#how-do-i-fix-eslint-errors-for-things-like-using-the-global-cypress-objects", "text": " How do I fix ESLint errors for things like using the global Cypress objects?", "level": 3 }, { "id": "app/faq#why-isnt-typescript-recognizing-the-global-cypress-objects-or-custom-cypress-commands-eg-cy-mount", "text": " Why isn't TypeScript recognizing the global Cypress objects or custom cypress commands (eg: cy.mount)?", "level": 3 }, { "id": "app/faq#how-do-i-get-typescript-to-recognize-cypress-types-and-not-jest-types", "text": " How do I get TypeScript to recognize Cypress types and not Jest types?", "level": 3 } ] }, "content": { "type": "root", "children": [ { "type": "heading", "depth": 1, "children": [ { "type": "text", "value": "Frequently Asked Questions" } ] }, { "type": "heading", "depth": 2, "children": [ { "type": "text", "value": "General Cypress Questions" } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Is Cypress free and open source?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "The " }, { "type": "link", "title": null, "url": "/llm/markdown/app/get-started/why-cypress.md", "children": [ { "type": "text", "value": "Cypress App" } ] }, { "type": "text", "value": " is a free, downloadable and open\nsource (MIT license) application. This is always free to use." } ] }, { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "/llm/markdown/cloud/get-started/introduction.md", "children": [ { "type": "text", "value": "Cypress Cloud" } ] }, { "type": "text", "value": " is a web application that offers a\nvariety of billing plans (including a free, open source plan) for when you want\nto record your test runs in CI." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Additionally, we have premium solutions like " }, { "type": "link", "title": null, "url": "/llm/markdown/ui-coverage/get-started/introduction.md", "children": [ { "type": "text", "value": "UI Coverage" } ] }, { "type": "text", "value": " and " }, { "type": "link", "title": null, "url": "/llm/markdown/accessibility/get-started/introduction.md", "children": [ { "type": "text", "value": "Cypress Accessibility" } ] }, { "type": "text", "value": " which have separate pricing." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Please see our " }, { "type": "link", "title": null, "url": "https://www.cypress.io/pricing", "children": [ { "type": "text", "value": "Pricing Page" } ] }, { "type": "text", "value": " for more details." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " What operating systems do you support?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can " }, { "type": "link", "title": null, "url": "/llm/markdown/app/get-started/install-cypress.md", "children": [ { "type": "text", "value": "install Cypress" } ] }, { "type": "text", "value": " on Mac,\nLinux, and Windows. For additional information, please see our\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/get-started/install-cypress.md#System-requirements", "children": [ { "type": "text", "value": "System requirements" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Do you support native mobile apps?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress will never be able to run on a native mobile app, but we can test some\nfunctionality of mobile web browsers and test mobile applications that are\ndeveloped in a browser, such as with\n" }, { "type": "link", "title": null, "url": "https://ionicframework.com/", "children": [ { "type": "text", "value": "the Ionic framework" } ] }, { "type": "text", "value": "." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Currently you can control the viewport with the\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/viewport.md", "children": [ { "type": "text", "value": "`cy.viewport()`" } ] }, { "type": "text", "value": " command to test responsive, mobile\nviews in a website or web application. You can also mimic certain behaviors like\nswiping using " }, { "type": "link", "title": null, "url": "/llm/markdown/api/cypress-api/custom-commands.md", "children": [ { "type": "text", "value": "custom commands" } ] }, { "type": "text", "value": "." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can read about testing mobile applications with Ionic and Cypress\n" }, { "type": "link", "title": null, "url": "https://www.cypress.io/blog/2020/07/08/end-to-end-testing-mobile-apps-with-ionic-and-cypress/", "children": [ { "type": "text", "value": "here" } ] }, { "type": "text", "value": "\nand see how we manage testing the mobile viewport in the\n" }, { "type": "link", "title": null, "url": "https://github.com/cypress-io/cypress-realworld-app", "children": [ { "type": "text", "value": "Cypress Real World App" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How is this different from 'X' testing tool?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "The Cypress App is a hybrid application/framework/service all rolled into one. It takes\na little bit of other testing tools, brings them together and improves on them." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "In addition to the App, Cypress offers solutions like the " }, { "type": "link", "title": null, "url": "/llm/markdown/cloud/get-started/introduction.md", "children": [ { "type": "text", "value": "Cypress Cloud" } ] }, { "type": "text", "value": ",\n" }, { "type": "link", "title": null, "url": "/llm/markdown/ui-coverage/get-started/introduction.md", "children": [ { "type": "text", "value": "UI Coverage" } ] }, { "type": "text", "value": ", and " }, { "type": "link", "title": null, "url": "/llm/markdown/accessibility/get-started/introduction.md", "children": [ { "type": "text", "value": "Accessibility" } ] }, { "type": "text", "value": " to extend the value of your tests and gain insights into the health of your test suite." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can see our evaluation of Cypress against some frameworks in our " }, { "type": "link", "title": null, "url": "/llm/markdown/app/guides/migration/playwright-to-cypress.md", "children": [ { "type": "text", "value": "Migrating from Playwright" } ] }, { "type": "text", "value": ", " }, { "type": "link", "title": null, "url": "/llm/markdown/app/guides/migration/selenium-to-cypress.md", "children": [ { "type": "text", "value": "Migrating from Selenium" } ] }, { "type": "text", "value": ", and " }, { "type": "link", "title": null, "url": "/llm/markdown/app/guides/migration/protractor-to-cypress.md", "children": [ { "type": "text", "value": "Migrating from Protractor" } ] }, { "type": "text", "value": " guides." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Do you support X language or X framework?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Any and all. Ruby, Node, C#, PHP - none of that matters. Cypress tests anything\nthat runs in the context of a browser. It is back end, front end, language and\nframework agnostic." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You'll write your tests in JavaScript or TypeScript, but beyond that Cypress works everywhere." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Will Cypress work in my CI provider?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress works in any " }, { "type": "link", "title": null, "url": "/llm/markdown/app/continuous-integration/overview.md", "children": [ { "type": "text", "value": "CI provider" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Does Cypress require me to change any of my existing code?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "No. But if you're wanting to test parts of your application that are not easily\ntestable, you'll want to refactor those situations (as you would for any\ntesting)." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " We use WebSockets; will Cypress work with that?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Is it possible to use cypress on .jspa?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes. Cypress works on anything rendered to a browser." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I use Cypress to script user-actions on an external site like gmail.com?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Using Cypress to test against a\n3rd party application is not its intended use. It may work but will defeat the\npurpose of why it was created. You use Cypress while you develop your\napplication, it helps you write your tests." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Is there code coverage?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "There is a plugin and detailed documentation on how to get end-to-end, unit and\nfull stack code coverage." } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Read our " }, { "type": "link", "title": null, "url": "/llm/markdown/app/tooling/code-coverage.md", "children": [ { "type": "text", "value": "Code Coverage guide" } ] } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Use the " }, { "type": "link", "title": null, "url": "https://github.com/cypress-io/code-coverage", "children": [ { "type": "text", "value": "@cypress/code-coverage" } ] }, { "type": "text", "value": "\nplugin" } ] } ] } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Are there driver bindings in my language?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress does not utilize WebDriver for testing, so it does not use or have any\nnotion of driver bindings. If your language can be somehow transpiled to\nJavaScript, then you can configure\n" }, { "type": "link", "title": null, "url": "https://github.com/cypress-io/cypress/tree/develop/npm/webpack-preprocessor", "children": [ { "type": "text", "value": "Cypress webpack preprocessor" } ] }, { "type": "text", "value": "\nor\n" }, { "type": "link", "title": null, "url": "https://github.com/cypress-io/cypress-browserify-preprocessor", "children": [ { "type": "text", "value": "Cypress Browserify preprocessor" } ] }, { "type": "text", "value": "\nto transpile your tests to JavaScript that Cypress can run." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " What's the difference between a Spec, Test, and a Test Suite?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "The terms spec, test, and test suite have specific meanings. Here's how they are differentiated in Cypress:" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Spec A single test file that contains a set of test cases or individual tests. Each spec file typically focuses on testing a specific feature, functionality, or aspect of the application under test. Specs define the test scenarios, interactions with the application, and assertions to verify expected behavior. Spec files are written in JavaScript or TypeScript and have a `.js` or `.ts` extension." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Test An individual test case within a spec file. It represents a specific scenario or behavior that needs to be tested. A test typically consists of a series of actions performed on the application being tested, such as interacting with UI elements, submitting forms, or making assertions to validate the expected outcomes. Cypress provides a rich set of built-in commands and APIs to facilitate writing tests and interacting with the application in a declarative manner." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Test Suite A collection of spec files that are grouped together. It allows you to organize your tests based on different criteria, such as functional areas, modules, or specific features. A test suite can include multiple spec files, each containing one or more tests. By grouping related tests together in a test suite, you can organize and manage your tests more effectively. Cypress provides options to run individual spec files, multiple spec files, or the entire test suite during test execution." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " When should I write a End-to-End tests and when should I write Component Tests?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "For more information on how to choose a Cypress testing type, we recommend this " }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/testing-types.md", "children": [ { "type": "text", "value": "Testing Types Guide" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " When should I write a unit test and when should I write an end-to-end test?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "We believe unit tests and end-to-end tests have differences that should guide\nyour choice." } ] }, { "type": "table", "align": [ null, null ], "children": [ { "type": "tableRow", "children": [ { "type": "tableCell", "children": [ { "type": "text", "value": "Unit tests" } ] }, { "type": "tableCell", "children": [ { "type": "text", "value": "End-to-end tests" } ] } ] }, { "type": "tableRow", "children": [ { "type": "tableCell", "children": [ { "type": "text", "value": "Focus on code" } ] }, { "type": "tableCell", "children": [ { "type": "text", "value": "Focus on the features" } ] } ] }, { "type": "tableRow", "children": [ { "type": "tableCell", "children": [ { "type": "text", "value": "Should be kept short" } ] }, { "type": "tableCell", "children": [ { "type": "text", "value": "Can be long" } ] } ] }, { "type": "tableRow", "children": [ { "type": "tableCell", "children": [ { "type": "text", "value": "Examine the returned result of actions" } ] }, { "type": "tableCell", "children": [ { "type": "text", "value": "Examine side effect of actions: DOM, storage, network, file system, database" } ] } ] }, { "type": "tableRow", "children": [ { "type": "tableCell", "children": [ { "type": "text", "value": "Important to developer workflow" } ] }, { "type": "tableCell", "children": [ { "type": "text", "value": "Important to end user's workflow" } ] } ] } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "In addition to the above differences, below are a few rules of thumb to decide\nwhen to write a unit test and when to write an end-to-end test." } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "If the code you are trying to test is called from other code, use a unit test." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "If the code is going be called from the external system, like a browser, use\nan end-to-end test." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "If a unit test requires a lot of mocking and you have to bring tools like\n`jsdom`, `enzyme`, or `sinon.js` to simulate a real world environment, you may\nwant to rewrite it as an end-to-end test." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "If an end-to-end test does not go through the browser and instead calls the\ncode directly, you probably want to rewrite it as a unit test" } ] } ] } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Finally, unit and end-to-end tests are not that different and have common\nfeatures. Good tests:" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Focus on and test only one thing." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Are flake-free and do not fail randomly." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Give you confidence to refactor code and add new features." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Are able to run both locally and on a\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/continuous-integration/overview.md", "children": [ { "type": "text", "value": "continuous integration" } ] }, { "type": "text", "value": " server." } ] } ] } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Certainly, unit and end-to-end tests are NOT in opposition to each other and are\ncomplementary tools in your toolbox." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I convince my company to use Cypress?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "First, be honest with yourself -\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/get-started/why-cypress.md", "children": [ { "type": "text", "value": "is Cypress the right tool" } ] }, { "type": "text", "value": " for your company and\nyour project? We believe that the best approach is a \"bottoms up\" approach,\nwhere you can demonstrate how Cypress solves your company's particular needs.\nImplement a prototype with your project to see how it feels. Test a couple of\ncommon user stories. Identify if there are any technical blockers. Show the\nprototype to others before proceeding any further. If you can demonstrate the\nbenefits of using Cypress as a developer tool for your project to other\nengineers, then Cypress will likely be more quickly adopted." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How can I find out about new versions of Cypress?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "We publish our releases at GitHub and npm, together with the releases we also\npublish a changelog with the principal changes, fixes, and updates. You can\nfollow through these links:" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "https://github.com/cypress-io/cypress/releases", "children": [ { "type": "text", "value": "GitHub (Releases & changelog)" } ] } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "https://www.npmjs.com/package/cypress", "children": [ { "type": "text", "value": "npm (Releases)" } ] } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "/llm/markdown/app/references/changelog.md", "children": [ { "type": "text", "value": "Changelog" } ] } ] } ] } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How often are Cypress versions released?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "We try to release the Cypress App every two weeks." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "If there is a significant bug outside of our release schedule then we release a\npatch as soon as possible." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " What information is captured or transmitted when using the Cypress App?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "The Cypress App runs locally so no data is sent to Cypress aside from exception data,\nwhich can be disabled using the instructions\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/advanced-installation.md#Opt-out-of-sending-exception-data-to-Cypress", "children": [ { "type": "text", "value": "here" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I write API tests using Cypress?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress is mainly designed to run end-to-end and component tests, but if you\nneed to write a few tests that call the backend API using the\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/request.md", "children": [ { "type": "text", "value": "`cy.request()`" } ] }, { "type": "text", "value": " command ... who can stop you?" } ] }, { "type": "code", "lang": "js", "meta": null, "value": "it('adds a todo', () => {\n cy.request({\n url: '/todos',\n method: 'POST',\n body: {\n title: 'Write REST API',\n },\n })\n .its('body')\n .should('deep.contain', {\n title: 'Write REST API',\n completed: false,\n })\n})" }, { "type": "paragraph", "children": [ { "type": "text", "value": "Take a look at our that\nuses quite a few such tests to verify the backend APIs." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can verify the responses using the built-in assertions and perform multiple\ncalls. You can even write E2E tests that combine UI commands with API testing as\nneeded:" } ] }, { "type": "code", "lang": "js", "meta": null, "value": "it('adds todos', () => {\n // drive the application through its UI\n cy.visit('/')\n cy.get('.new-todo')\n .type('write E2E tests{enter}')\n .type('add API tests as needed{enter}')\n // now confirm the server has 2 todo items\n cy.request('/todos')\n .its('body')\n .should('have.length', 2)\n .and((items) => {\n // confirm the returned items\n })\n})" }, { "type": "paragraph", "children": [ { "type": "text", "value": "A good strategy for writing targeted API tests is to use them to reach the\nhard-to-test code not covered by other tests. You can find such places in the\ncode using the " }, { "type": "link", "title": null, "url": "/llm/markdown/app/tooling/code-coverage.md", "children": [ { "type": "text", "value": "code coverage" } ] }, { "type": "text", "value": " as a guide. Watch\nthe" } ] }, { "type": "heading", "depth": 2, "children": [ { "type": "text", "value": "\"How-to\" Cypress Questions" } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I get an element's text contents?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress commands yield jQuery objects, so you can call methods on them." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "If you're trying to assert on an element's text content:" } ] }, { "type": "code", "lang": "javascript", "meta": null, "value": "cy.get('div').should('have.text', 'foobarbaz')" }, { "type": "paragraph", "children": [ { "type": "text", "value": "If the text contains a\n" }, { "type": "link", "title": null, "url": "https://en.wikipedia.org/wiki/Non-breaking_space", "children": [ { "type": "text", "value": "non-breaking space" } ] }, { "type": "text", "value": " entity\n` ` then use the Unicode character `\\u00a0` instead of ` `." } ] }, { "type": "code", "lang": "html", "meta": null, "value": "
Hello world
" }, { "type": "code", "lang": "javascript", "meta": null, "value": "cy.get('div').should('have.text', 'Hello\\u00a0world')" }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can also use the " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/contains.md", "children": [ { "type": "text", "value": "cy.contains" } ] }, { "type": "text", "value": " command which handles\nthe non-breaking space entities" } ] }, { "type": "code", "lang": "javascript", "meta": null, "value": "cy.contains('div', 'Hello world')" }, { "type": "paragraph", "children": [ { "type": "text", "value": "If you'd like to work with the text prior to an assertion:" } ] }, { "type": "code", "lang": "javascript", "meta": null, "value": "cy.get('div').should(($div) => {\n const text = $div.text()\n\n expect(text).to.match(/foo/)\n expect(text).to.include('foo')\n expect(text).not.to.include('bar')\n})" }, { "type": "paragraph", "children": [ { "type": "text", "value": "If you need to convert text to a number before checking if it is greater than\n10:" } ] }, { "type": "code", "lang": "javascript", "meta": null, "value": "cy.get('div').invoke('text').then(parseFloat).should('be.gt', 10)" }, { "type": "paragraph", "children": [ { "type": "text", "value": "If you need to hold a reference or compare values of text:" } ] }, { "type": "code", "lang": "javascript", "meta": null, "value": "cy.get('div')\n .invoke('text')\n .then((text1) => {\n // do more work here\n\n // click the button which changes the div's text\n cy.get('button').click()\n\n // grab the div again and compare its previous text\n // to the current text\n cy.get('div')\n .invoke('text')\n .should((text2) => {\n expect(text1).not.to.eq(text2)\n })\n })" }, { "type": "paragraph", "children": [ { "type": "text", "value": "jQuery's `.text()` method automatically calls `elem.textContent` under the hood.\nIf you'd like to instead use `innerText` you can do the following:" } ] }, { "type": "code", "lang": "javascript", "meta": null, "value": "cy.get('div').should(($div) => {\n // access the native DOM element\n expect($div.get(0).innerText).to.eq('foobarbaz')\n})" }, { "type": "paragraph", "children": [ { "type": "text", "value": "This is the equivalent of Selenium's `getText()` method, which returns the\ninnerText of a visible element." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I get an input's value?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress yields you jQuery objects, so you can call methods on them." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "If you're trying to assert on an input's value:" } ] }, { "type": "code", "lang": "javascript", "meta": null, "value": "// make an assertion on the value\ncy.get('input').should('have.value', 'abc')" }, { "type": "paragraph", "children": [ { "type": "text", "value": "If you'd like to massage or work with the text prior to an assertion:" } ] }, { "type": "code", "lang": "javascript", "meta": null, "value": "cy.get('input').should(($input) => {\n const val = $input.val()\n\n expect(val).to.match(/foo/)\n expect(val).to.include('foo')\n expect(val).not.to.include('bar')\n})" }, { "type": "paragraph", "children": [ { "type": "text", "value": "If you need to hold a reference or compare values of text:" } ] }, { "type": "code", "lang": "javascript", "meta": null, "value": "cy.get('input')\n .invoke('val')\n .then((val1) => {\n // do more work here\n\n // click the button which changes the input's value\n cy.get('button').click()\n\n // grab the input again and compare its previous value\n // to the current value\n cy.get('input')\n .invoke('val')\n .should((val2) => {\n expect(val1).not.to.eq(val2)\n })\n })" }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I compare the value or state of one thing to another?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Our " }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/variables-and-aliases.md", "children": [ { "type": "text", "value": "Variables and Aliases guide" } ] }, { "type": "text", "value": "\ngives you examples of doing exactly that." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I store an attribute's value in a constant or a variable for later use?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes, and there are a couple of ways to do this. One way to hold a value or\nreference is with\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/variables-and-aliases.md#Closures", "children": [ { "type": "text", "value": "closures" } ] }, { "type": "text", "value": ". Commonly,\nusers believe they have a need to store a value in a `const`, `var`, or `let`.\nCypress recommends doing this only when dealing with mutable objects (that\nchange state)." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "For examples how to do this, please read our\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/variables-and-aliases.md", "children": [ { "type": "text", "value": "Variables and Aliases guide" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I get the native DOM reference of an element found using Cypress?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress wraps elements in jQuery so you'd get the native element from there\nwithin a " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/then.md", "children": [ { "type": "text", "value": ".then()" } ] }, { "type": "text", "value": " command." } ] }, { "type": "code", "lang": "javascript", "meta": null, "value": "cy.get('button').then(($el) => {\n $el.get(0)\n})" }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I do something different if an element doesn't exist?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "What you're asking about is conditional testing and control flow." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Please read our extensive\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/guides/conditional-testing.md", "children": [ { "type": "text", "value": "Conditional Testing Guide" } ] }, { "type": "text", "value": " which\nexplains this in detail." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How can I make Cypress wait until something is visible in the DOM?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Remember" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "DOM based commands will automatically\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/retry-ability.md", "children": [ { "type": "text", "value": "retry" } ] }, { "type": "text", "value": " and wait for their corresponding\nelements to exist before failing." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress offers you many robust ways to\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/introduction-to-cypress.md#Querying-Elements", "children": [ { "type": "text", "value": "query the DOM" } ] }, { "type": "text", "value": ",\nall wrapped with retry-and-timeout logic." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Other ways to wait for an element's presence in the DOM is through `timeouts`.\nCypress commands have a default timeout of 4 seconds, however, most Cypress\ncommands have\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/configuration.md#Timeouts", "children": [ { "type": "text", "value": "customizable timeout options" } ] }, { "type": "text", "value": ".\nTimeouts can be configured globally or on a per-command basis." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "In " }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/interacting-with-elements.md#Visibility", "children": [ { "type": "text", "value": "some cases" } ] }, { "type": "text", "value": ",\nyour DOM element will not be actionable. Cypress gives you a powerful\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/interacting-with-elements.md#Forcing", "children": [ { "type": "text", "value": "`{force:true}`" } ] }, { "type": "text", "value": " option\nyou can pass to most action commands." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Please read our\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/introduction-to-cypress.md", "children": [ { "type": "text", "value": "Core Concepts Introduction to Cypress" } ] }, { "type": "text", "value": ".\nThis is the single most important guide for understanding how to test with\nCypress." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I wait for my application to load? " } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "We have seen many different iterations of this question. The answers can be\nvaried depending on how your application behaves and the circumstances under\nwhich you are testing it. Here are a few of the most common versions of this\nquestion." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "How do I know if my page is done loading?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "When you load your application using `cy.visit()`, Cypress will wait for the\n`load` event to fire. The " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/visit.md#Usage", "children": [ { "type": "text", "value": "cy.visit()" } ] }, { "type": "text", "value": " command loads\na remote page and does not resolve until all of the external resources complete\ntheir loading phase. Because we expect your applications to observe differing\nload times, this command's default timeout is set to 60000ms. If you visit an\ninvalid url or a\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/guides/cross-origin-testing.md#Different-origins-per-test-require-cyorigin", "children": [ { "type": "text", "value": "second unique domain" } ] }, { "type": "text", "value": ",\nCypress will log a verbose yet friendly error message." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "In CI, how do I make sure my server has started?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can try these modules for this use case:" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "https://www.npmjs.com/package/wait-on", "children": [ { "type": "text", "value": "`wait-on`" } ] } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "https://github.com/bahmutov/start-server-and-test", "children": [ { "type": "text", "value": "`start-server-and-test`" } ] } ] } ] } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "How can I wait for my requests to be complete?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "The prescribed way to do this is to define your routes using\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/intercept.md", "children": [ { "type": "text", "value": "cy.intercept()" } ] }, { "type": "text", "value": ", create\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/variables-and-aliases.md#Aliases", "children": [ { "type": "text", "value": "aliases" } ] }, { "type": "text", "value": " for these routes\nprior to the visit, and then you can explicitly tell Cypress which routes you\nwant to wait on using " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/wait.md#Syntax", "children": [ { "type": "text", "value": "cy.wait()" } ] }, { "type": "text", "value": ". There is no\nmagical way to wait for all of your XHRs or Ajax requests. Because of the\nasynchronous nature of these requests, Cypress cannot intuitively know to wait\nfor them. You must define these routes and be able to unambiguously tell Cypress\nwhich requests you want to wait on." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I throttle network speeds using Cypress?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can throttle your network connection by accessing your Developer Tools\nNetwork panel. Additionally, you can add your own custom presets by selecting\nCustom > Add from the Network Conditions drawer." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "We do not currently offer any options to simulate this during `cypress run`." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I use ES7 async / await syntax?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "No. The Command API is not designed in a way that makes this possible currently. To understand how Cypress commands work, please read:" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Our\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/introduction-to-cypress.md#Commands-Are-Asynchronous", "children": [ { "type": "text", "value": "Introduction to Cypress guide" } ] }, { "type": "text", "value": "\nwhich explains how the Commands are designed" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Our " }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/variables-and-aliases.md", "children": [ { "type": "text", "value": "Variables and Aliases guide" } ] }, { "type": "text", "value": "\nwhich talks about patterns dealing with async code" } ] } ] } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I select or query for elements if my application uses dynamic classes or dynamic IDs?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Read more about the\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/best-practices.md#Selecting-Elements", "children": [ { "type": "text", "value": "best practices for selecting elements here" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " I want to run tests only within one specific folder. How do I do this?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can specify which test files to run during\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/command-line.md#cypress-run", "children": [ { "type": "text", "value": "cypress run" } ] }, { "type": "text", "value": " by\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/command-line.md#cypress-run-spec-lt-spec-gt", "children": [ { "type": "text", "value": "passing a glob to the `--spec` flag" } ] }, { "type": "text", "value": "\nmatching the files you want to run. You should be able to pass a glob matching\nthe specific folder where the tests are you want to run." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "This feature is only available when using\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/command-line.md#cypress-run", "children": [ { "type": "text", "value": "cypress run" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Is there a suggested way or best practice for how I should target elements or write element selectors?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes. Read more about the\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/best-practices.md#Selecting-Elements", "children": [ { "type": "text", "value": "best practices for selecting elements here" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I prevent Cypress from failing my test when my application throws an uncaught exception error?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes. By default Cypress will automatically fail tests whenever an uncaught exception\nbubbles up out of your app." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress exposes an event for this (amongst many others) that you can listen for\nto either:" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Debug the error instance itself" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Prevent Cypress from failing the test" } ] } ] } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "This is documented in detail on the\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/cypress-api/catalog-of-events.md", "children": [ { "type": "text", "value": "Catalog Of Events" } ] }, { "type": "text", "value": " page and the recipe\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/recipes.md#Fundamentals", "children": [ { "type": "text", "value": "Handling errors" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Will Cypress fail the test when an application has unhandled rejected promise?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "By default no, Cypress does not listen to the unhandled promise rejection event\nin your application, and thus does not fail the test. You can set up your own\nlistener though and fail the test, see our recipe\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/recipes.md#Fundamentals", "children": [ { "type": "text", "value": "Handling errors" } ] }, { "type": "text", "value": ":" } ] }, { "type": "code", "lang": "js", "meta": null, "value": "// register listener during cy.visit\nit('fails on unhandled rejection', () => {\n cy.visit('/', {\n onBeforeLoad(win) {\n win.addEventListener('unhandledrejection', (event) => {\n const msg = `UNHANDLED PROMISE REJECTION: ${event.reason}`\n\n // fail the test\n throw new Error(msg)\n })\n },\n })\n})\n\n// ALTERNATIVE: register listener for this test\nit('fails on unhandled rejection', () => {\n cy.on('window:before:load', (win) => {\n win.addEventListener('unhandledrejection', (event) => {\n const msg = `UNHANDLED PROMISE REJECTION: ${event.reason}`\n\n // fail the test\n throw new Error(msg)\n })\n })\n\n cy.visit('/')\n})\n\n// ALTERNATIVE: register listener in every test\nbefore(() => {\n Cypress.on('window:before:load', (win) => {\n win.addEventListener('unhandledrejection', (event) => {\n const msg = `UNHANDLED PROMISE REJECTION: ${event.reason}`\n\n // fail the test\n throw new Error(msg)\n })\n })\n})\n\nit('fails on unhandled rejection', () => {\n cy.visit('/')\n})" }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I override environment variables or create configuration for different environments?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes, you can pass configuration to Cypress via environment variables, CLI\narguments and other means." } ] }, { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "/llm/markdown/app/guides/environment-variables.md", "children": [ { "type": "text", "value": "Read the Environment Variables & Secrets guide." } ] } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I override or change the default user agent the browser uses?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes." } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress recommends setting the `userAgent` as a\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/configuration.md#Browser", "children": [ { "type": "text", "value": "configuration value" } ] }, { "type": "text", "value": " in your\nconfiguration file." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "It is possible to fake the `userAgent` for a single\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/visit.md", "children": [ { "type": "text", "value": "`cy.visit()`" } ] }, { "type": "text", "value": " or\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/intercept.md", "children": [ { "type": "text", "value": "`cy.request()`" } ] }, { "type": "text", "value": " by setting the `user-agent` header\nin the options, but this will not propagate the `userAgent` in the browser and\ncan lead to application rendering unexpectedly." } ] } ] } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I block traffic going to specific domains? I want to block Google Analytics or other providers." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes.\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/configuration.md#Browser", "children": [ { "type": "text", "value": "You can set this with `blockHosts` in the Cypress configuration" } ] }, { "type": "text", "value": "." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Also, check out our\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/recipes.md#Stubbing-and-spying", "children": [ { "type": "text", "value": "Stubbing Google Analytics Recipe" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How can I verify that calls to analytics like Google Analytics are being made correct?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can stub their functions and then ensure they're being called." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Check out our\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/recipes.md#Stubbing-and-spying", "children": [ { "type": "text", "value": "Stubbing Google Analytics Recipe" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " I'm trying to test a chat application. Can I run more than one browser at a time with Cypress?" } ] }, { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "/llm/markdown/app/references/trade-offs.md#Multiple-browsers-open-at-the-same-time", "children": [ { "type": "text", "value": "We've answered this question in detail here." } ] } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How can I modify or pass arguments used to launch the browser?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You use the " }, { "type": "link", "title": null, "url": "/llm/markdown/api/node-events/browser-launch-api.md", "children": [ { "type": "text", "value": "`before:browser:launch`" } ] }, { "type": "text", "value": " plugin\nevent." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I make cy.request() poll until a condition is met?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes. You do it the\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/request.md#Request-Polling", "children": [ { "type": "text", "value": "same way as any other recursive loop" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I use the Page Object pattern?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "If you're looking to abstract behavior or roll up a series of actions you can\ncreate reusable\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/cypress-api/custom-commands.md", "children": [ { "type": "text", "value": "Custom Commands with our API" } ] }, { "type": "text", "value": ". You can also\nuse JavaScript functions to achieve this." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "For those wanting to use page objects, we've highlighted the\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/cypress-api/custom-commands.md#Best-Practices", "children": [ { "type": "text", "value": "best practices " } ] }, { "type": "text", "value": " for\nreplicating the page object pattern." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I run a single test or group of tests?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can run a group of tests or a single test by placing an\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/writing-and-organizing-tests.md#Excluding-and-Including-Tests", "children": [ { "type": "text", "value": "`.only`" } ] }, { "type": "text", "value": "\non a test suite or specific test." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can run a single test file or group of tests by passing the `--spec` flag to\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/command-line.md#cypress-run", "children": [ { "type": "text", "value": "cypress run" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I test uploading a file?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "It is possible to upload files in your application but it's different based on\nhow you've written your own upload code. The various options are detailed in the\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/selectfile.md", "children": [ { "type": "text", "value": "`.selectFile()` command" } ] }, { "type": "text", "value": ", but in many cases the\nsimplest option will work:" } ] }, { "type": "code", "lang": "javascript", "meta": null, "value": "cy.get('[data-cy=\"file-input\"]').selectFile('cypress/fixtures/data.json')" }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I check that an email was sent out?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Anti-Pattern" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Don't try to use your UI to check email. Instead opt to programmatically use 3rd\nparty APIs or talk directly to your server. Read about this\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/best-practices.md#Visiting-External-Sites", "children": [ { "type": "text", "value": "best practice" } ] }, { "type": "text", "value": " here." } ] }, { "type": "list", "ordered": true, "start": 1, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "If your application is running locally and is sending the emails directly\nthrough an SMTP server, you can use a temporary local test SMTP server\nrunning inside Cypress. Read the blog post\n" }, { "type": "link", "title": null, "url": "https://www.cypress.io/blog/2021/05/11/testing-html-emails-using-cypress/", "children": [ { "type": "text", "value": "\"Testing HTML Emails using Cypress\"" } ] }, { "type": "text", "value": "\nfor details." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "If your application is using a 3rd party email service, or you cannot stub\nthe SMTP requests, you can use a test email inbox with an API access. Read\nthe blog post\n" }, { "type": "link", "title": null, "url": "https://www.cypress.io/blog/2021/05/24/full-testing-of-html-emails-using-ethereal-accounts/", "children": [ { "type": "text", "value": "\"Full Testing of HTML Emails using SendGrid and Ethereal Accounts\"" } ] }, { "type": "text", "value": "\nfor details." } ] } ] } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress can even load the received HTML email in its browser to verify the\nemail's functionality and visual style:" } ] }, { "type": "list", "ordered": true, "start": 3, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "You can use a 3rd party email service that provides temporary email addresses\nfor testing. Some of these services even offer a\nCypress plugin to access\nemails." } ] } ] } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I wait for multiple requests to the same url?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You should set up an alias (using " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/as.md", "children": [ { "type": "text", "value": "`.as()`" } ] }, { "type": "text", "value": ") to a single\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/intercept.md", "children": [ { "type": "text", "value": "`cy.intercept()`" } ] }, { "type": "text", "value": " that matches all of the XHRs. You\ncan then " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/wait.md", "children": [ { "type": "text", "value": "`cy.wait()`" } ] }, { "type": "text", "value": " on it multiple times. Cypress keeps\ntrack of how many matching requests there are." } ] }, { "type": "code", "lang": "javascript", "meta": null, "value": "cy.intercept('/users*').as('getUsers')\ncy.wait('@getUsers') // Wait for first GET to /users/\ncy.get('#list>li').should('have.length', 10)\ncy.get('#load-more-btn').click()\ncy.wait('@getUsers') // Wait for second GET to /users/\ncy.get('#list>li').should('have.length', 20)" }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I seed / reset my database?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can use " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/request.md", "children": [ { "type": "text", "value": "`cy.request()`" } ] }, { "type": "text", "value": " or " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/task.md", "children": [ { "type": "text", "value": "`cy.task()`" } ] }, { "type": "text", "value": " to talk\nto your back end to seed data." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You could also stub requests directly using\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/intercept.md", "children": [ { "type": "text", "value": "`cy.intercept()`" } ] }, { "type": "text", "value": " which avoids ever even needing to\nfuss with your database." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I test elements inside an iframe?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "We have an " }, { "type": "link", "title": null, "url": "https://github.com/cypress-io/cypress/issues/136", "children": [ { "type": "text", "value": "open proposal" } ] }, { "type": "text", "value": " to\nexpand the APIs to support \"switching into\" an iframe and then back out of them." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I preserve cookies / localStorage in between my tests?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "By default, Cypress automatically\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/test-isolation.md", "children": [ { "type": "text", "value": "clears all cookies, local storage and session before each test" } ] }, { "type": "text", "value": "\nto prevent state from leaking between tests." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can preserve session details across tests using the\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/session.md", "children": [ { "type": "text", "value": "`cy.session()`" } ] }, { "type": "text", "value": " command." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Alternatively, you can disable\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/configuration.md#e2e", "children": [ { "type": "text", "value": "`testIsolation`" } ] }, { "type": "text", "value": " at the suite or e2e\nconfiguration-level to prevent the clearing of browser state." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Some of my elements animate in; how do I work around that?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Oftentimes you can usually account for animation by asserting\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/should.md", "children": [ { "type": "text", "value": "`.should('be.visible')`" } ] }, { "type": "text", "value": " or\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/introduction-to-cypress.md#Assertions", "children": [ { "type": "text", "value": "another assertion" } ] }, { "type": "text", "value": " on\none of the elements you expect to be animated in." } ] }, { "type": "code", "lang": "javascript", "meta": null, "value": "// assuming a click event causes the animation\ncy.get('.element').click().should('not.have.class', 'animating')" }, { "type": "paragraph", "children": [ { "type": "text", "value": "If the animation is especially long, you could extend the time Cypress waits for\nthe assertion to pass by increasing the `timeout` of the previous command before\nthe assertion." } ] }, { "type": "code", "lang": "javascript", "meta": null, "value": "cy.get('button', { timeout: 10000 }) // wait up to 10 seconds for this 'button' to exist\n .should('be.visible') // and to be visible\n\ncy.get('.element')\n .click({ timeout: 10000 })\n .should('not.have.class', 'animating')\n// wait up to 10 seconds for the .element to not have 'animating' class" }, { "type": "paragraph", "children": [ { "type": "text", "value": "However, most of the time you don't even have to worry about animations. Why\nnot? Cypress will\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/interacting-with-elements.md", "children": [ { "type": "text", "value": "automatically wait" } ] }, { "type": "text", "value": " for\nelements to stop animating prior to interacting with them via action commands\nlike `.click()` or `.type()`." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I test anchor links that open in a new tab?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress does not have native multi-tab support, but new tabs can be tested with the " }, { "type": "link", "title": null, "url": "https://github.com/cypress-io/cypress/blob/develop/npm/puppeteer/README.md", "children": [ { "type": "text", "value": "@cypress/puppeteer plugin" } ] }, { "type": "text", "value": "." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "If you would like to test anchor links natively, there are lots of workarounds that enable you to test them in your application." } ] }, { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "/llm/markdown/app/references/recipes.md#Testing-the-DOM", "children": [ { "type": "text", "value": "Read through the recipe on tab handling and links to see how to test anchor links." } ] } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I dynamically test multiple viewports?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes, you can. We provide an " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/viewport.md#Width-Height", "children": [ { "type": "text", "value": "example here" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I run the same tests on multiple subdomains? " } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes. In this example, we loop through an array of urls and make assertions on\nthe logo." } ] }, { "type": "code", "lang": "javascript", "meta": null, "value": "const urls = ['https://docs.cypress.io', 'https://www.cypress.io']\n\ndescribe('Logo', () => {\n urls.forEach((url) => {\n it(`Should display logo on ${url}`, () => {\n cy.visit(url)\n cy.get('#logo img').should('have.attr', 'src').and('include', 'logo')\n })\n })\n})" }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I require or import node modules in Cypress?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "The code you write in Cypress is executed in the browser, so you can import or\nrequire JS modules, but only those that work in a browser." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can `require` or `import` them as you're accustomed to. We preprocess your\nspec files with webpack and Babel." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "We recommend utilizing one of the following to execute code outside of the\nbrowser." } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "/llm/markdown/api/commands/task.md", "children": [ { "type": "text", "value": "`cy.task()`" } ] }, { "type": "text", "value": " to run code in Node via the\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/plugins/plugins-guide.md#Using-a-plugin", "children": [ { "type": "text", "value": "setupNodeEvents" } ] }, { "type": "text", "value": " function" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "/llm/markdown/api/commands/exec.md", "children": [ { "type": "text", "value": "`cy.exec()`" } ] }, { "type": "text", "value": " to execute a shell command" } ] } ] } ] }, { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "/llm/markdown/app/references/recipes.md#Fundamentals", "children": [ { "type": "text", "value": "Check out the \"Node Modules\" example recipe." } ] } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Is there a way to give a proper SSL certificate to your proxy so the page doesn't show up as \"not secure\"?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "No, Cypress modifies network traffic in real time and therefore must sit between\nyour server and the browser. There is no other way for us to achieve that." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Is there any way to detect if my app is running under Cypress?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can check for the existence of `window.Cypress`, in your application\ncode." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Here's an example:" } ] }, { "type": "code", "lang": "javascript", "meta": null, "value": "if (window.Cypress) {\n // we are running in Cypress\n // so do something different here\n window.env = 'test'\n} else {\n // we are running in a regular ol' browser\n}" }, { "type": "paragraph", "children": [ { "type": "text", "value": "If you want to detect if your Node.js code is running within Cypress, Cypress\nsets an OS level environment variable of `CYPRESS=true`. You could detect that\nyou're running in Cypress by looking for `process.env.CYPRESS`." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Is there a way to test that a file got downloaded? I want to test that a button click triggers a download." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "There are a lot of ways to test this, so it depends. You'll need to be aware of\nwhat actually causes the download, then think of a way to test that mechanism." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "If your server sends specific disposition headers which cause a browser to\nprompt for download, you can figure out what URL this request is made to, and\nuse " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/request.md", "children": [ { "type": "text", "value": "cy.request()" } ] }, { "type": "text", "value": " to hit that directly. Then you can\ntest that the server send the right response headers." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "If it's an anchor that initiates the download, you could test that it has the\nright `href` property. As long as you can verify that clicking the button is\ngoing to make the right HTTP request, that might be enough to test for." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Finally, if you want to really download the file and verify its contents, see\nour\n" }, { "type": "link", "title": null, "url": "https://github.com/cypress-io/cypress-example-recipes#testing-the-dom", "children": [ { "type": "text", "value": "File download" } ] }, { "type": "text", "value": "\nrecipe." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "In the end, it's up to you to know your implementation and to test enough to\ncover everything." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Is it possible to catch the promise chain in Cypress?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "No. You cannot add a `.catch` error handler to a failed command.\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/introduction-to-cypress.md#The-Cypress-Command-Queue", "children": [ { "type": "text", "value": "Read more about how the Cypress commands are not Promises" } ] } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Is there a way to modify the screenshots/video resolution?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "There is an " }, { "type": "link", "title": null, "url": "https://github.com/cypress-io/cypress/issues/587", "children": [ { "type": "text", "value": "open issue" } ] }, { "type": "text", "value": " for\nmore easily configuring this." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can modify the screenshot and video size when running headlessly with\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/node-events/browser-launch-api.md#Set-screen-size-when-running-headless", "children": [ { "type": "text", "value": "this workaround" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Does Cypress support ES7?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes. You can customize how specs are processed by using one of our " }, { "type": "link", "title": null, "url": "/llm/markdown/app/plugins/plugins-list.md", "children": [ { "type": "text", "value": "preprocessor plugins" } ] }, { "type": "text", "value": "\nor by " }, { "type": "link", "title": null, "url": "/llm/markdown/api/node-events/preprocessors-api.md", "children": [ { "type": "text", "value": "writing your own custom preprocessor" } ] }, { "type": "text", "value": "." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Typically you'd reuse your existing Babel and webpack configurations." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How does one determine what the latest version of Cypress is?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "There are a few ways." } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "The easiest way is probably to check our\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/changelog.md", "children": [ { "type": "text", "value": "changelog" } ] }, { "type": "text", "value": "." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "You can also check the latest version\n" }, { "type": "link", "title": null, "url": "https://download.cypress.io/desktop.json", "children": [ { "type": "text", "value": "here" } ] }, { "type": "text", "value": "." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "It's also always in our " }, { "type": "link", "title": null, "url": "https://github.com/cypress-io/cypress", "children": [ { "type": "text", "value": "repo" } ] }, { "type": "text", "value": "." } ] } ] } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " When I visit my site directly, the certificate is verified, however the browser launched through Cypress is showing it as \"Not Secure\". Why?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "When using Cypress to test an HTTPS site, you might see a browser warning next\nto the browser URL. This is normal. Cypress modifies the traffic between your\nserver and the browser. The browser notices this and displays a certificate\nwarning. However, this is purely cosmetic and does not alter the way your\napplication under test runs in any way, so you can safely ignore this warning.\nThe network traffic between Cypress and the backend server still happens via\nHTTPS." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "See also the " }, { "type": "link", "title": null, "url": "/llm/markdown/app/guides/cross-origin-testing.md", "children": [ { "type": "text", "value": "Cross Origin Testing" } ] }, { "type": "text", "value": " guide." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I run the server and tests together and then shutdown the server?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "To start the server, run the tests and then shutdown the server we recommend\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/continuous-integration/overview.md#Boot-your-server", "children": [ { "type": "text", "value": "these npm tools" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " I found a bug! What do I do?" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Search existing " }, { "type": "link", "title": null, "url": "https://github.com/cypress-io/cypress/issues", "children": [ { "type": "text", "value": "open issues" } ] }, { "type": "text", "value": ",\nit may already be reported!" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Update Cypress. Your issue may have\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/changelog.md", "children": [ { "type": "text", "value": "already been fixed" } ] }, { "type": "text", "value": "." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "https://github.com/cypress-io/cypress/issues/new/choose", "children": [ { "type": "text", "value": "Open an issue" } ] }, { "type": "text", "value": ". Your\nbest chance of getting a bug looked at quickly is to provide a repository with\na reproducible bug that can be cloned and run." } ] } ] } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " What is the right balance between custom commands and utility functions?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "There is already a great section in\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/cypress-api/custom-commands.md#Best-Practices", "children": [ { "type": "text", "value": "Custom Commands" } ] }, { "type": "text", "value": " guide that\ntalks about trade-offs between custom commands and utility functions. We feel\nreusable functions in general are a way to go. Plus they do not confuse\n" }, { "type": "link", "title": null, "url": "https://github.com/cypress-io/cypress/issues/1065", "children": [ { "type": "text", "value": "IntelliSense like custom commands do" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can my tests interact with Redux / Vuex data store?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Usually your end-to-end tests interact with the application through public\nbrowser APIs: DOM, network, storage, etc. But sometimes you might want to make\nassertions against the data held inside the application's data store. Cypress\nhelps you do this. Tests run right in the same browser instance and can reach\ninto the application's context using " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/window.md", "children": [ { "type": "text", "value": "`cy.window`" } ] }, { "type": "text", "value": ". By\nconditionally exposing the application reference and data store from the\napplication's code, you can allow the tests to make assertions about the data\nstore, and even drive the application via Redux actions." } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "see\n" }, { "type": "link", "title": null, "url": "https://www.cypress.io/blog/2018/11/14/testing-redux-store/", "children": [ { "type": "text", "value": "Testing Redux Store" } ] }, { "type": "text", "value": "\nblog post and " }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/recipes.md#Blogs", "children": [ { "type": "text", "value": "Redux Testing" } ] }, { "type": "text", "value": " recipe." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "see " }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/recipes.md#Blogs", "children": [ { "type": "text", "value": "Vue + Vuex + REST Testing" } ] }, { "type": "text", "value": " recipe." } ] } ] } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "For component testing, you have a bit more control on how you set up your\nproviders and plugins for state stores. See the\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/mount.md", "children": [ { "type": "text", "value": "Mount API Guide" } ] }, { "type": "text", "value": " for various examples on using stores with\ncomponent testing." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I spy on console.log?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "To spy on `console.log` you should use " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/stub.md", "children": [ { "type": "text", "value": "cy.stub()" } ] }, { "type": "text", "value": "." } ] }, { "type": "code", "lang": "js", "meta": null, "value": "-{cy.visit('/', {\n onBeforeLoad(win) {\n // Stub your functions here\n cy.stub(win.console, 'log').as('consoleLog')\n },\n})::// Stub your functions here\ncy.stub(window, 'prompt').returns('my custom message')\n// After that, mount your component\ncy.mount()}-\n\n// Other test code\n\ncy.get('@consoleLog').should('be.calledWith', 'Hello World!')" }, { "type": "paragraph", "children": [ { "type": "text", "value": "Also, check out our\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/recipes.md#Stubbing-and-spying", "children": [ { "type": "text", "value": "Stubbing `console` Recipe" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I use special characters with cy.get()?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Special characters like `/`, `.` are valid characters for ids\n" }, { "type": "link", "title": null, "url": "https://www.w3.org/TR/html50/dom.html#the-id-attribute", "children": [ { "type": "text", "value": "according to the CSS spec" } ] }, { "type": "text", "value": "." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "To test elements with those characters in ids, they need to be escaped with\n" }, { "type": "link", "title": null, "url": "https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape", "children": [ { "type": "text", "value": "`CSS.escape`" } ] }, { "type": "text", "value": " or\n" }, { "type": "link", "title": null, "url": "https://api.jquery.com/jQuery.escapeSelector/", "children": [ { "type": "text", "value": "`Cypress.$.escapeSelector`" } ] }, { "type": "text", "value": "." } ] }, { "type": "code", "lang": "html", "meta": null, "value": "\n\n \n
Hello World
\n \n" }, { "type": "code", "lang": "js", "meta": null, "value": "it('test', () => {\n cy.visit('index.html')\n cy.get(`#${CSS.escape('Configuration/Setup/TextField.id')}`).contains(\n 'Hello World'\n )\n\n cy.get(\n `#${Cypress.$.escapeSelector('Configuration/Setup/TextField.id')}`\n ).contains('Hello World')\n})" }, { "type": "paragraph", "children": [ { "type": "text", "value": "Note that `cy.$$.escapeSelector()` doesn't work. `cy.$$` doesn't refer to\n`jQuery`. It only queries DOM. " }, { "type": "link", "title": null, "url": "/llm/markdown/api/utilities/$.md#Notes", "children": [ { "type": "text", "value": "Learn more about why" } ] } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Why doesn't the instanceof Event work?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "It might be because of the 2 different windows in the Cypress App. For\nmore information, please check\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/window.md#Cypress-uses-2-different-windows", "children": [ { "type": "text", "value": "the note here" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I prevent application redirecting to another URL?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Sometimes, your application might redirect the browser to another domain, losing\nthe Cypress's control. If the application is using `window.location.replace`\nmethod to set a relative URL, try using the `experimentalSourceRewriting`\noption described in our " }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/experiments.md", "children": [ { "type": "text", "value": "Experiments" } ] }, { "type": "text", "value": " page." } ] }, { "type": "heading", "depth": 2, "children": [ { "type": "text", "value": "Continuous Integration (CI/CD)" } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Why do my Cypress tests pass locally but not in CI?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "There are many reasons why tests may fail in CI but pass locally. Some of these\ninclude:" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "There is a problem isolated to the Electron browser (`cypress run` by default\nruns in the Electron browser)" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "A test failure in CI could be highlighting a bug in your CI build process" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Variability in timing when running your application in CI (For example,\nnetwork requests that resolve within the timeout locally may take longer in\nCI)" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Machine differences in CI versus your local machine -- CPU resources,\nenvironment variables, etc." } ] } ] } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "To troubleshoot why tests are failing in CI but passing locally, you can try\nthese strategies:" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Test locally with Electron to identify if the issue is specific to the\nbrowser." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "You can also identify browser-specific issues by running in a different\nbrowser in CI with the `--browser` flag." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Review your CI build process to ensure nothing is changing with your\napplication that would result in failing tests." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Remove time-sensitive variability in your tests. For example, ensure a network\nrequest has finished before looking for the DOM element that relies on the\ndata from that network request. You can leverage\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/core-concepts/variables-and-aliases.md#Aliases", "children": [ { "type": "text", "value": "aliasing" } ] }, { "type": "text", "value": " for this." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "Ensure video recording and/or screenshots are enabled for the CI run and\ncompare the recording to the Command Log when running the test locally." } ] } ] } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Why are my video recordings freezing or dropping frames when running in CI?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Videos recorded on Continuous Integration may have frozen or dropped frames if\nthere are not enough resources available when running the tests in your CI\ncontainer. Like with any application, there needs to be the required CPU to run\nCypress and record video. You can run your tests with\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/troubleshooting.md#Log-memory-and-CPU-usage", "children": [ { "type": "text", "value": "memory and CPU logs enabled" } ] }, { "type": "text", "value": "\nto identify and evaluate the resource utilization within your CI." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "If you are experiencing this issue, we recommend switching to a more powerful CI\ncontainer or provider." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " What can I do if my tests crash or hang on CI?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "As some users have noted, a longer test has a higher chance of hanging or even\ncrashing when running on CI. When a test runs for a long period of time, its\ncommands and the application itself might allocate more memory than available,\ncausing the crash. The exact risk of crashing depends on the application and the\navailable hardware resources. While there is no single time limit that would\nsolve this problem, in general we recommend splitting spec files to run in under\none minute each." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can further split individual long-running tests. For example, you can verify\nparts of the longer user feature in the separate tests as described in\n" }, { "type": "link", "title": null, "url": "https://www.cypress.io/blog/2019/10/29/split-a-very-long-cypress-test-into-shorter-ones-using-app-actions/", "children": [ { "type": "text", "value": "Split a very long Cypress test into shorter ones using App Actions" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How can I parallelize my runs?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can read more about parallelization\n" }, { "type": "link", "title": null, "url": "/llm/markdown/cloud/features/smart-orchestration/parallelization.md", "children": [ { "type": "text", "value": "here" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " I tried to install Cypress in my CI, but I get the error: EACCES: permission denied." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "First, make sure you have " }, { "type": "link", "title": null, "url": "https://nodejs.org", "children": [ { "type": "text", "value": "Node" } ] }, { "type": "text", "value": " installed on your system.\n`npm` is a Node package that is installed globally by default when you install\nNode and is required to install our\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/command-line.md", "children": [ { "type": "text", "value": "`cypress` npm package" } ] }, { "type": "text", "value": "." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Next, you'd want to check that you have the proper permissions for installing on\nyour system or you may need to run `sudo npm install cypress`." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Is there an option to run Cypress in CI with Developer Tools open? We want to track network and console issues." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "No. There is not currently a way to run Cypress in `cypress run` with Developer\nTools open. You can use Cypress " }, { "type": "link", "title": null, "url": "/llm/markdown/cloud/features/test-replay.md", "children": [ { "type": "text", "value": "Test Replay" } ] }, { "type": "text", "value": " to see browser requests and console logs of tests that ran in CI." } ] }, { "type": "heading", "depth": 2, "children": [ { "type": "text", "value": "Distinct Cypress Use Cases" } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I use Cypress to test charts and graphs?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes. You can leverage visual testing tools to test that charts and graphs are\nrendering as expected. For more information, check out the\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/tooling/visual-testing.md", "children": [ { "type": "text", "value": "Visual Testing guide" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I test a chrome extension? How do I load my chrome extension?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes. You can test your extensions by\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/node-events/browser-launch-api.md", "children": [ { "type": "text", "value": "loading them when we launch the browser" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I test my Electron app?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Testing your Electron app will not 'just work', as Cypress is designed to test\nanything that runs in a browser and Electron is a browser + Node." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "That being said, we use Cypress to test our own Desktop app's front end - by\nstubbing events from Electron. These tests are open source so you can check them\nout\n" }, { "type": "link", "title": null, "url": "https://github.com/cypress-io/cypress/tree/develop/packages/launchpad/cypress/e2e", "children": [ { "type": "text", "value": "here" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I test the HTML element?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes, you can. While executing tests, you can view the entire\n`window.document` object in your open console using\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/document.md", "children": [ { "type": "text", "value": "cy.document()" } ] }, { "type": "text", "value": ". You can even make assertions on the\n`` element. Check out this example." } ] }, { "type": "code", "lang": "html", "meta": null, "value": "\n\n \n \n \n \n Test the HEAD content\n \n \n \n" }, { "type": "code", "lang": "js", "meta": null, "value": "describe('The Document Metadata', () => {\n beforeEach(() => {\n cy.visit('/')\n })\n\n it('looks inside the head content using `cy.document()`', () => {\n // this will yield the entire window.document object\n // if you click on DOCUMENT from the command log,\n // it will output the entire #document to the console\n cy.document()\n })\n\n // or make assertions on any of the metadata in the head element\n\n it('looks inside tag', () => {\n cy.get('head title').should('contain', 'Test the HEAD content')\n })\n\n it('looks inside <meta> tag for description', () => {\n cy.get('head meta[name=\"description\"]').should(\n 'have.attr',\n 'content',\n 'This description is so meta'\n )\n })\n})" }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I check that a form's HTML form validation is shown when an input is invalid?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You certainly can." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Test default validation error" } ] }, { "type": "code", "lang": "html", "meta": null, "value": "<form>\n <input type=\"text\" id=\"name\" name=\"name\" required />\n <button type=\"submit\">Submit</button>\n</form>" }, { "type": "code", "lang": "js", "meta": null, "value": "cy.get('[type=\"submit\"]').click()\ncy.get('input:invalid').should('have.length', 1)\ncy.get('#name').then(($input) => {\n expect($input[0].validationMessage).to.eq('Please fill out this field.')\n})" }, { "type": "paragraph", "children": [ { "type": "text", "value": "Test custom validation error" } ] }, { "type": "code", "lang": "html", "meta": null, "value": "<body>\n <form>\n <input type=\"email\" id=\"email\" name=\"email\" />\n <button type=\"submit\">Submit</button>\n </form>\n <script>\n const email = document.getElementById('email')\n\n email.addEventListener('input', function (event) {\n if (email.validity.typeMismatch) {\n email.setCustomValidity('I expect an email!')\n } else {\n email.setCustomValidity('')\n }\n })\n </script>\n</body>" }, { "type": "code", "lang": "javascript", "meta": null, "value": "cy.get('input:invalid').should('have.length', 0)\ncy.get('[type=\"email\"]').type('not_an_email')\ncy.get('[type=\"submit\"]').click()\ncy.get('input:invalid').should('have.length', 1)\ncy.get('[type=\"email\"]').then(($input) => {\n expect($input[0].validationMessage).to.eq('I expect an email!')\n})" }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can Cypress be used for model-based testing?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "is implemented using\nXState model state library." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can Cypress be used for performance testing?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress is not built for performance testing. Because Cypress instruments the\npage under test, proxies the network requests, and tightly controls the test\nsteps, Cypress adds its own overhead. Thus, the performance numbers you get from\nCypress tests are slower than \"normal\" use. Still, you can access the native\n`window.performance` object and grab the page time measurements, see the\n" }, { "type": "link", "title": null, "url": "https://github.com/cypress-io/cypress-example-recipes#testing-the-dom", "children": [ { "type": "text", "value": "Evaluate performance metrics" } ] }, { "type": "text", "value": "\nrecipe." } ] }, { "type": "heading", "depth": 2, "children": [ { "type": "text", "value": "Integrations with Other Tools/Frameworks/Libraries" } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I test React applications using Cypress?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "For end-to-end testing, yes, absolutely. A good example of a fully tested React\napplication is our\n" }, { "type": "link", "title": null, "url": "https://github.com/cypress-io/cypress-realworld-app", "children": [ { "type": "text", "value": "Cypress RealWorld App" } ] }, { "type": "text", "value": ".\nYou can even use React DevTools while testing your application, read\n" }, { "type": "link", "title": null, "url": "https://dev.to/dmtrkovalenko/the-easiest-way-to-connect-cypress-and-react-devtools-5hgm", "children": [ { "type": "text", "value": "The easiest way to connect Cypress and React DevTools" } ] }, { "type": "text", "value": ".\nIf you really need to select React components by their name, props, or state,\ncheck out\n" }, { "type": "link", "title": null, "url": "https://github.com/abhinaba-ghosh/cypress-react-selector", "children": [ { "type": "text", "value": "cypress-react-selector" } ] }, { "type": "text", "value": "." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "For component testing, we support various different frameworks like Vite, Webpack, and Next.js for React applications. See the\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/component-testing/component-framework-configuration.md", "children": [ { "type": "text", "value": "Framework Configuration Guide" } ] }, { "type": "text", "value": "\nfor more info." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I use Jest snapshots?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "While there is no built-in `snapshot` command in Cypress, you can make your own\nsnapshot assertion command. Read how to do so in our blog post\n" }, { "type": "link", "title": null, "url": "https://www.cypress.io/blog/2018/01/16/end-to-end-snapshot-testing/", "children": [ { "type": "text", "value": "End-to-End Snapshot Testing" } ] }, { "type": "text", "value": ".\nWe recommend using the 3rd-party module\n" }, { "type": "link", "title": null, "url": "https://github.com/meinaart/cypress-plugin-snapshots", "children": [ { "type": "text", "value": "cypress-plugin-snapshots" } ] }, { "type": "text", "value": ".\nFor other snapshot plugins, search the " }, { "type": "link", "title": null, "url": "/llm/markdown/app/plugins/plugins-list.md", "children": [ { "type": "text", "value": "Plugins" } ] }, { "type": "text", "value": " page." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I use Testing Library?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Absolutely! Feel free to add the\n" }, { "type": "link", "title": null, "url": "https://testing-library.com/docs/cypress-testing-library/intro/", "children": [ { "type": "text", "value": "@testing-library/cypress" } ] }, { "type": "text", "value": "\nto your setup and use its methods like `findByRole`, `findByLabelText`,\n`findByText`, `findByTestId`, and others to find the DOM elements." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "The following example comes from the Testing Library's documentation" } ] }, { "type": "code", "lang": "js", "meta": null, "value": "cy.findByRole('button', { name: /Jackie Chan/i }).click()\ncy.findByRole('button', { name: /Button Text/i }).should('exist')\ncy.findByRole('button', { name: /Non-existing Button Text/i }).should(\n 'not.exist'\n)\n\ncy.findByLabelText(/Label text/i, { timeout: 7000 }).should('exist')\n\n// findAllByText _inside_ a form element\ncy.get('form')\n .findByText('button', { name: /Button Text/i })\n .should('exist')\n\ncy.findByRole('dialog').within(() => {\n cy.findByRole('button', { name: /confirm/i })\n})" }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I use Cucumber to write tests?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes, you can." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "While Cypress does not provide official support for Cucumber, you can use\nCucumber through a\n" }, { "type": "link", "title": null, "url": "https://github.com/badeball/cypress-cucumber-preprocessor", "children": [ { "type": "text", "value": "community plugin" } ] }, { "type": "text", "value": ".\nUsing the plugin adds additional complexity to your testing workflow, so ensure\nyour team understands the benefits and drawbacks before adopting Cucumber." } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "read\n" }, { "type": "link", "title": null, "url": "https://dev.to/wescopeland/cypress-super-patterns-how-to-elevate-the-quality-of-your-test-suite-1lcf", "children": [ { "type": "text", "value": "Cypress Super-patterns: How to elevate the quality of your test suite" } ] }, { "type": "text", "value": "\nfor best practices when writing Cucumber tests." } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "To get started, read\n" }, { "type": "link", "title": null, "url": "https://testersdock.com/cypress-cucumber-bdd/", "children": [ { "type": "text", "value": "How to use Cypress with Cucumber BDD" } ] }, { "type": "text", "value": "\nfor step-by-step instructions for v9 and v10, or for instructions in v10 with\ntypescript read\n" }, { "type": "link", "title": null, "url": "https://filiphric.com/cucumber-in-cypress-a-step-by-step-guide", "children": [ { "type": "text", "value": "Cucumber in Cypress: A step by step guide" } ] }, { "type": "text", "value": "." } ] } ] } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "If your team is looking to do behavior-driven development using BDD's\ngiven/when/then syntax directly in Cypress instead of using Cucumber's\nscenarios, you might be interested in these articles:" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "read\n" }, { "type": "link", "title": null, "url": "https://dev.to/walmyrlimaesilv/using-the-keywords-given-when-then-with-cypress-but-without-cucumber-118p", "children": [ { "type": "text", "value": "Using the keywords Given/When/Then with Cypress but without Cucumber" } ] }, { "type": "text", "value": "\nand\n" }, { "type": "link", "title": null, "url": "https://filiphric.com/how-to-structure-a-big-project-in-cypress#bdd-without-cucumber", "children": [ { "type": "text", "value": "BDD without Cucumber" } ] }, { "type": "text", "value": "\nfor recommendations for writing tests without using Cucumber." } ] } ] } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Can I check the GraphQL network calls using Cypress?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes, by using the newer API command " }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/intercept.md", "children": [ { "type": "text", "value": "cy.intercept()" } ] }, { "type": "text", "value": " as\ndescribed in the " }, { "type": "link", "title": null, "url": "/llm/markdown/app/guides/network-requests.md#Working-with-GraphQL", "children": [ { "type": "text", "value": "Working with GraphQL" } ] } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Is there an ESLint plugin for Cypress or a list of globals?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Yes! Check out our\n" }, { "type": "link", "title": null, "url": "https://github.com/cypress-io/eslint-plugin-cypress", "children": [ { "type": "text", "value": "ESLint plugin" } ] }, { "type": "text", "value": ". It will\nset up all the globals you need for running Cypress, including browser globals\nand " }, { "type": "link", "title": null, "url": "https://mochajs.org/", "children": [ { "type": "text", "value": "Mocha" } ] }, { "type": "text", "value": " globals." } ] }, { "type": "heading", "depth": 2, "children": [ { "type": "text", "value": "Component Testing" } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " What is component testing?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Many modern front-end UI libraries encourage writing applications using small,\nreusable building blocks known as components. Components start small (think\nbuttons, images, inputs, etc.) and can be composed into larger components (order\nforms, date pickers, menus, etc.) and even entire pages." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Component testing is about testing an individual component in isolation from the\nrest of the app. This allows only having to worry about the component's\nfunctionality and not how it fits into an entire page." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How does Cypress do component testing?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress will take a component and mount it into a blank canvas. When doing so,\nyou have direct access to the component's API, making it easier to pass in props\nor data and put a component in a certain state. From there, you can use the same\nCypress commands, selectors, and assertions to write your tests." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress supports multiple frameworks and development servers for component\ntesting." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How does Cypress component testing compare to other options?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "When Cypress mounts a component, it does so in an actual browser and not a\nsimulated environment like jsdom. This allows you to visually see and interact\nwith the component as you work on it. You can use the same browser-based\ndeveloper tools that you are used to when building web applications, such as\nelement inspectors, modifying CSS, and source debugging." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress Component Testing is built around the same tools and APIs that\nend-to-end testing uses. Anyone familiar with Cypress can immediately hop in and\nfeel productive writing component tests without a large learning curve.\nComponent tests can also use the vast Cypress ecosystem, plugins, and services\n(like " }, { "type": "link", "title": null, "url": "https://www.cypress.io/cloud", "children": [ { "type": "text", "value": "Cypress Cloud" } ] }, { "type": "text", "value": ") already available to\ncomplement your component tests." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " What is the Mount Function?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "We ship a `mount` function for each UI library that is imported from the\n`cypress` package. It is responsible for rendering components within Cypress's\nsandboxed iframe and handling any framework-specific cleanup." } ] }, { "type": "code", "lang": "js", "meta": null, "value": "// example showing importing mount command in react\nimport { mount } from 'cypress/react'" }, { "type": "paragraph", "children": [ { "type": "text", "value": "While you can use the `mount` function in your tests, we recommend using\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/commands/mount.md", "children": [ { "type": "text", "value": "`cy.mount()`" } ] }, { "type": "text", "value": ", which is added as a\n" }, { "type": "link", "title": null, "url": "/llm/markdown/api/cypress-api/custom-commands.md", "children": [ { "type": "text", "value": "custom command" } ] }, { "type": "text", "value": " in the\ncypress/support/component.js file:" } ] }, { "type": "code", "lang": "ts", "meta": "title=cypress/support/component.js", "value": "import { mount } from 'cypress/react'\n\nCypress.Commands.add('mount', mount)" }, { "type": "paragraph", "children": [ { "type": "text", "value": "This allows you to use `cy.mount()` in any component test without having to\n`import` the framework-specific mount command, as well as customizing it to fit\nyour needs. See the examples guide for each framework for info on creating a\ncustom `cy.mount()` command." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Why isn't my component rendering as it should?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Any global styles and fonts must be imported and made available to your\ncomponent, just like in the application. See our guide on\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/component-testing/styling-components.md", "children": [ { "type": "text", "value": "Styling Components" } ] }, { "type": "text", "value": " for more\ninformation on doing so." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Why doesn't my spec show in the Specs page?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "If something appears missing from the spec list, make sure the files have the\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/component-testing/component-framework-configuration.md#Spec-Pattern-for-Component-Tests", "children": [ { "type": "text", "value": "proper extension and the `specPattern` is correctly defined" } ] }, { "type": "text", "value": "." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I fix ESLint errors for things like using the global Cypress objects?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "If you experience ESLint errors in your code editor around Cypress globals,\ninstall the\n" }, { "type": "link", "title": null, "url": "https://www.npmjs.com/package/eslint-plugin-cypress", "children": [ { "type": "text", "value": "`eslint-plugin-cypress`" } ] }, { "type": "text", "value": "\nESLint plugin." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " Why isn't TypeScript recognizing the global Cypress objects or custom cypress commands (eg: cy.mount)?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "In some instances, TypeScript might not recognize the custom `cy.mount()`\ncommand in Cypress spec files not located in the cypress directory. You will\nget a compiler error specifying that the type is not found in this case." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "A quick way to fix this is to include the cypress directory in your\ntsconfig.json options like so:" } ] }, { "type": "code", "lang": "json", "meta": null, "value": "\"include\": [\n \"src\",\n \"cypress\"\n]" }, { "type": "paragraph", "children": [ { "type": "text", "value": "TypeScript will monitor all files in the cypress folder and pick up the\ntypings defined in the cypress/support/component.ts file." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Alternatively, you can move your typings to an external file and include that\nfile in your tsconfig.json file. See our\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/tooling/typescript-support.md#Using-an-External-Typings-File", "children": [ { "type": "text", "value": "TypeScript Configuration" } ] }, { "type": "text", "value": "\nguide for more info on doing this." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": " How do I get TypeScript to recognize Cypress types and not Jest types?" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "For frameworks that include Jest out of the box (like Create React App), you\nmight run into issues where the Cypress global types for TypeScript conflict\nwith Jest global types (`describe`, `test`, `it`, etc..). In this case, other\nCypress globals like `Cypress` and `cy` might not be working properly either." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "We are currently investigating better ways to handle this, but for the time\nbeing, we recommend using a\n" }, { "type": "link", "title": null, "url": "https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-", "children": [ { "type": "text", "value": "triple slash references directive" } ] }, { "type": "text", "value": "\nto instruct the TypeScript compiler to look at the Cypress global types in each\nof your affected spec files:" } ] }, { "type": "code", "lang": null, "meta": null, "value": "/// <reference types=\"cypress\" />" }, { "type": "paragraph", "children": [ { "type": "text", "value": "Alternatively, Relocate Component Specs" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can also group your Cypress and Jest tests inside separate folders (not\nco-located with components)." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You will need to add a `tsconfig.json` to the folder and specify the types the\nfiles inside that folder should use." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Don't forget to update your\n" }, { "type": "link", "title": null, "url": "/llm/markdown/app/references/configuration.md#component", "children": [ { "type": "text", "value": "`specPattern`" } ] }, { "type": "text", "value": "\nto include the new file location." } ] } ] }, "token_estimate": 10257 }