{"__v":0,"_id":"5696c11a59a6692d003fad06","category":{"__v":9,"_id":"5696c1168560a60d00e2c1d6","pages":["5696c11aaa12bc0d0050332c","5696c11aaa12bc0d0050332d","5696c11a8400d52d00dd5631","5696c11a59a6692d003fad06","56a007d14583912300b5efcf","56a007d166c8420d00d7fc7c","56a6824e683cfb0d00dc586f","56b383fe3ccec63700a7ac1c","56b3a7de0e4c450d00699d22"],"project":"568fde81b700ce0d002f4b43","version":"56954a94fe18811700c9bfda","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-01-13T21:26:46.069Z","from_sync":false,"order":5,"slug":"references","title":"References"},"parentDoc":null,"project":"568fde81b700ce0d002f4b43","user":"568fffce769f210d0013258f","version":{"__v":6,"_id":"56954a94fe18811700c9bfda","project":"568fde81b700ce0d002f4b43","createdAt":"2016-01-12T18:48:52.007Z","releaseDate":"2016-01-12T18:48:52.007Z","categories":["56954a95fe18811700c9bfdb","56954a95fe18811700c9bfdc","56954a95fe18811700c9bfdd","56954a95fe18811700c9bfde","56954a95fe18811700c9bfdf","56954a95fe18811700c9bfe0","56954a95fe18811700c9bfe1","56954a95fe18811700c9bfe2","56954a95fe18811700c9bfe3","56954a95fe18811700c9bfe4","5695649fdcaf0d1700cb8721","5696c1168560a60d00e2c1d6","56a7a32e79395317007c1ad6","5898fc3eec49fb0f004c2663","589cc675ea37da23004e05e1"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"foo","version_clean":"0.0.0","version":"0.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-01-13T21:26:50.306Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"# Contents\n\n- :fa-angle-right: [Sorry, there's something wrong with this file](#section-sorry-there-s-something-wrong-with-this-file)\n- :fa-angle-right: [Oops...we found an error preparing your test file](#section-we-found-an-error-preparing-your-test-file)\n- :fa-angle-right: [Cypress cannot execute commands outside a running test](#section-cypress-cannot-execute-commands-outside-a-running-test)\n- :fa-angle-right: [cy.method() failed because the element you are chaining off of has become detached or removed from the dom](#section-cy-method-failed-because-the-element-you-are-chaining-off-of-has-become-detached-or-removed-from-the-dom)\n- :fa-angle-right: [cy.method() failed because the element cannot be interacted with](#section-cy-method-failed-because-the-element-cannot-be-interacted-with)\n- :fa-angle-right: [cy.method() failed because the element is currently animating](#section-cy-method-failed-because-the-element-is-currently-animating)\n- :fa-angle-right: [Running Cypress in CI requires a secret project key](#section-running-cypress-in-ci-requires-a-secret-project-key)\n- :fa-angle-right: [The test has finished but Cypress still has commands in its queue](#section-the-test-has-finished-but-cypress-still-has-commands-in-its-queue)\n- :fa-angle-right: [cy.visit() failed because you're attempting to visit a second unique domain](#section-cy-visit-failed-because-you-are-attempting-to-visit-a-second-unique-domain)\n- :fa-angle-right: [Cypress detected a cross origin error happened on page load](#section-cypress-detected-a-cross-origin-error-happened-on-page-load)\n- :fa-angle-right: [The supportFolder option has been removed](#section-the-supportfolder-option-has-been-removed)\n- :fa-angle-right: [The Chromium Renderer process just crashed](#section-the-chromium-renderer-process-just-crashed)\n- :fa-angle-right: [The 'cypress ci' command has been deprecated](#section-the-cypress-ci-command-has-been-deprecated)\n\n***\n\n# No tests found in your file\n\n![screen shot 2015-12-01 at 12 29 06 pm](https://cloud.githubusercontent.com/assets/1157043/20714968/aae41e0c-b61b-11e6-8e84-00da944fde04.png)\n\nThis message means that Cypress was unable to find tests in the specified file. You'll likely get this message if you have an empty test file and have not yet written any tests.\n\n***\n\n# We found an error preparing your test file\n\nThis message means that Cypress encountered an error when compiling and/or bundling your test file.\n\nCypress automatically compiles and bundles your test code so you can use ES2015, CoffeeScript, modules, etc.\n\nYou'll typically receive this message due to:\n\n- The file missing\n- A syntax error in the file or one of its dependencies\n- A missing dependency\n\nThe error will be printed on the right side, usually showing the part of the code in which the error occurred.\n\nWhen you fix the error in your code, your tests will automatically re-run.\n\n***\n\n# Cypress cannot execute commands outside a running test\n\n![screen shot 2015-12-02 at 9 57 23 pm](https://cloud.githubusercontent.com/assets/1268976/11550645/b9b8bd42-993f-11e5-896e-f6a6ca43acb4.png)\n\nThis message means you tried to execute one or more Cypress commands outside of a currently running test. Cypress has to be able to associate commands to a specific test.\n\nTypically this happens accidentally, like in the following situation.\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"describe(\\\"Some Tests\\\", function(){\\n  it(\\\"is true\\\", function(){\\n    expect(true).to.be.true // yup, fine\\n  })\\n\\n  it(\\\"is false\\\", function(){\\n    expect(false).to.be.false // yup, also fine\\n  })\\n\\n  context(\\\"some nested tests\\\", function(){\\n    // oops you forgot to write an it(...) here!\\n    // these cypress commands below\\n    // are run outside of a test and cypress\\n    // throws an error\\n    cy\\n      .visit(\\\"http://localhost:8080\\\")\\n      .get(\\\"h1\\\").should(\\\"contain\\\", \\\"todos\\\")\\n  })\\n})\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\nSimply move those Cypress commands into an `it(...)` and everything will work correctly.\n\nIf you are purposefully writing commands outside of a test, there is probably a better way to accomplish whatever you're trying to do. Read through the [Example Repos](https://on.cypress.io/guides/all-example-apps), [open an issue](https://github.com/cypress-io/cypress/issues/new?body=**Description**%0A*Include%20a%20high%20level%20description%20of%20the%20error%20here%20including%20steps%20of%20how%20to%20recreate.%20Include%20any%20benefits%2C%20challenges%20or%20considerations.*%0A%0A**Code**%0A*Include%20the%20commands%20used*%0A%0A**Steps%20To%20Reproduce**%0A-%20%5B%20%5D%20Steps%0A-%20%5B%20%5D%20To%0A-%20%5B%20%5D%20Reproduce%2FFix%0A%0A**Additional%20Info**%0A*Include%20any%20images%2C%20notes%2C%20or%20whatever.*%0A), or [come talk to someone in Gitter](https://gitter.im/cypress-io/cypress).\n\n***\n\n# cy.method() failed because the element you are chaining off of has become detached or removed from the dom\n\n![screen shot 2015-12-02 at 9 55 29 pm](https://cloud.githubusercontent.com/assets/1268976/11550618/79d68542-993f-11e5-8b5f-9418dfa964c1.png)\n\nThis message means you are trying to interact with a \"dead\" DOM element - meaning it is either detached or completely removed from the DOM.\n\nCypress errors because it cannot operate or interact with \"dead\" elements - just like a real user could not do this either.\n\nUnderstanding how this happens is very important - and it is often easy to prevent. Let's investigate.\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"<!-- your app HTML -->\\n<body>\\n  <div id=\\\"parent\\\">\\n    <button>delete</button>\\n  </div>\\n</body>\\n\",\n            \"language\": \"html\"\n        }\n    ]\n}\n[/block]\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// your app code\\n$(\\\"button\\\").click(function(){\\n  // when the <button> is clicked\\n  // we remove the button from the DOM\\n  $(this).remove()\\n})\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// buggy test code\\ncy\\n   // as soon as this click event happens the <button>\\n   // becomes removed from the DOM\\n  .get(\\\"button\\\").click()\\n\\n  // When cypress begins processing the 'parent' command\\n  // it will immediately detect that the current subject\\n  // which is the <button> is detached from the DOM and\\n  // will throw the error\\n  .parent()\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\nWe can prevent Cypress from throwing this error by rewriting our test code:\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// fixed test code\\ncy\\n  .get(\\\"button\\\").click()\\n\\n  // simply query for the parent directly here\\n  // instead of chaining off the <button> subject\\n  .get(\\\"#parent\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\nThe above example is an oversimplification. Let's look at a more complex example.\n\nIn modern JavaScript frameworks, DOM elements are regularly `re-rendered` - meaning that the old element is thrown away and a new one is put in its place. Because this happens so fast, it may *appear* as if nothing has visibly changed. But if you are in the middle of executing commands it's possible the element you're interacting with has become \"dead\". To deal with this situation you must:\n\n- understand when your application re-renders\n- re-query for newly added DOM elements\n- **guard** Cypress from executing commands until a condition is met\n\nWhen we say **guard** we mean writing commands in such a way that prevents Cypress from going on before a specific condition is met. This usually means:\n\n- writing an assertion\n- waiting on an XHR\n\n***\n\n# cy.method() failed because the element cannot be interacted with\n\nYou may see a variation of this message for 4 different reasons:\n\n1. the element is not visible\n2. the element is being covered by another element\n3. the element's center is hidden from view\n4. the element is disabled\n\nCypress runs several calculations to ensure an element can *actually* be interacted with like a real user would.\n\nIf you're seeing this error, the solution is often obvious. You may need to add  **command guards** due to a timing or animation issue.\n\nThere have been situations where Cypress does not correctly allow you to interact with an element which should be interactive. If that's the case, [open an issue](https://github.com/cypress-io/cypress/issues/new?body=**Description**%0A*Include%20a%20high%20level%20description%20of%20the%20error%20here%20including%20steps%20of%20how%20to%20recreate.%20Include%20any%20benefits%2C%20challenges%20or%20considerations.*%0A%0A**Code**%0A*Include%20the%20commands%20used*%0A%0A**Steps%20To%20Reproduce**%0A-%20%5B%20%5D%20Steps%0A-%20%5B%20%5D%20To%0A-%20%5B%20%5D%20Reproduce%2FFix%0A%0A**Additional%20Info**%0A*Include%20any%20images%2C%20notes%2C%20or%20whatever.*%0A) or force the action to happen.\n\nIf you'd like to override these built-in checks, provide the `{force: true}` option to the action itself. Refer to each command for their available options, additional use cases and argument usage.\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// we ignore the built in error checking\\n// and force the action to happen\\n// regardless of whether the button is\\n// visible, disabled, or covered by another element\\ncy.get(\\\"button\\\").click({force: true}).\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n*Be careful with this option. It's possible to force your tests to pass but your feature may actually be failing.*\n\n***\n\n# cy.method() failed because the element is currently animating\n\n![screen shot 2015-12-30 at 11 44 22 pm](https://cloud.githubusercontent.com/assets/1268976/12061262/4f9a252e-af4f-11e5-9139-9c8bdb08ae58.png)\n\nBy default Cypress detects if an element you're trying to interact with is animating. This check ensures that an element is not animating too quickly for a real user to interact with the element. This also prevents some edge cases where actions such as [`type`](https://on.cypress.io/api/type) or [`click`](https://on.cypress.io/api/click) happenening too fast during a transition.\n\nCypress will continuously attempt to interact with the element until it eventually times out.\n\nIf you'd like to force Cypress to interact with the element there are a few options:\n\n- Pass `{force: true}` and disables **all** error checking\n- Pass `{waitForAnimations: false}` to disable animation error checking only\n- Pass `{animationDistanceThreshold: 20}` to decrease the sensitivity to detecting if an element is animating too quickly for a user to interact with. By increasing the threshold this enables your element to move farther on the page without causing Cypress to continuously retry.\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cy.get(\\\"#modal button\\\").click({waitForAnimations: false})\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\nYou can globally disable animation error checking, or increase the threshold by modifying your [`cypress.json`](https://on.cypress.io/guides/configuration).\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// cypress.json\\n{\\n  \\\"waitForAnimations\\\": false,\\n  \\\"animationDistanceThreshold\\\": 50\\n}\\n\",\n            \"language\": \"json\"\n        }\n    ]\n}\n[/block]\n\n***\n\n# Running Cypress in CI requires a secret project key\n\nYou may receive this error when trying to run Cypress tests in Continuous Integration. This means that you did not pass a specific key to: `cypress ci` in your CI configuration file.\n\nSince no key was passed, Cypress then checks for any environment variable with the name `CYPRESS_CI_KEY`, but still didn't find any.\n\nYou can get your project's secret key by running the terminal command: `cypress get:key`\n\nThen [add the key to your config file or as an environment variable](https://on.cypress.io/guides/continuous-integration#section-acquire-a-cypress-secret-key).\n\n***\n\n# The test has finished but Cypress still has commands in its queue\n\n![screen shot 2016-04-04 at 12 07 40 pm](https://cloud.githubusercontent.com/assets/1268976/14254496/fa15f8da-fa5d-11e5-91b8-cdc8387e4dc8.png)\n\nLet's examine several different ways you may get this error message. In every situation, you'll need to change something in your code to prevent this error.\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Flaky tests below!\",\n  \"body\": \"Several of these tests are dependent on race conditions. You may have to run these tests multiple times before they will actually fail. You can also try tweaking some of the delays.\"\n}\n[/block]\n\n## Simple Example\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"describe(\\\"simple example\\\", function(){\\n  // this first test will actually pass and shows you that\\n  // Cypress attempts to prevent this problem in every test\\n  it(\\\"Cypress is smart and this does not fail\\\", function(){\\n    // queue up some commands\\n    // without returning the cy object\\n    // which is ok!\\n    cy\\n      .get(\\\"body\\\")\\n      .children()\\n      .should(\\\"not.contain\\\", \\\"foo\\\")\\n\\n    // even though we return the string here\\n    // Cypress automatically figures out that you've\\n    // queued commands above and does not end the test\\n    // until all commands have finished\\n    return \\\"foobarbaz\\\"\\n  })\\n\\n  it(\\\"but you can forcibly end the test early which does fail\\\", function(done){\\n    // this example will fail because you've forcibly terminated\\n    // the test early with mocha\\n    cy\\n      .get(\\\"body\\\")\\n      .then(function(){\\n        // forcibly end the test\\n        // even though there are still\\n        // pending queued commands below\\n        done()\\n      })\\n      .children()\\n      .should(\\\"not.contain\\\", \\\"foo\\\")\\n  })\\n})\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n## Complex Async Example\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"describe(\\\"a complex example with async code\\\", function(){\\n  it(\\\"you can cause commands to bleed into the next test\\\", function(){\\n    // what's happening here is that because we have NOT told mocha this is an async test\\n    // this test will pass immediately and move onto the next test...\\n    //\\n    // ...then, when the setTimeout callback function runs\\n    // new commands will get queued on the wrong test\\n    //\\n    // Cypress will detect this and fail the next test\\n    setTimeout(function(){\\n      cy.get(\\\"body\\\").children().should(\\\"not.contain\\\", \\\"foo\\\")\\n    }, 10)\\n\\n    // the correct way to write the above test code would be this:\\n    // it(\\\"does not cause commands to bleed into the next test\\\", function(done){\\n    //   setTimeout(function(){\\n    //     cy.get(\\\"body\\\").children().should(\\\"not.contain\\\", \\\"foo\\\").then(function(){\\n    //       now all the commands are correctly processed on this test\\n    //       and do not bleed into the next test\\n    //       done()\\n    //     })\\n    //   }, 10)\\n    // })\\n\\n  })\\n\\n  it(\\\"this test will fail due to the previous poorly written test\\\", function(){\\n    // we will get the error here that Cypress detected\\n    // it still had commands in its command queue\\n    //\\n    // Cypress will print the commands out which should\\n    // help us figure out that the previous test is\\n    // causing this error message\\n    cy.wait(10)\\n  })\\n})\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n## Complex Promise Example\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"describe(\\\"another complex example using a forgotten 'return'\\\", function(){\\n  it(\\\"forgets to return a promise\\\", function(){\\n    // we forget to return the promise to our test\\n    // which means the test passes synchronously but\\n    // our promise resolves during the next test.\\n    //\\n    // this causes the commands to be queued on the\\n    // wrong test\\n    Cypress.Promise.delay(10).then(function(){\\n      cy.get(\\\"body\\\").children().should(\\\"not.contain\\\", \\\"foo\\\")\\n    })\\n\\n    // the correct way to write the above test code would be this:\\n    // it(\\\"does not forget to return a promise\\\", function(){\\n    //   return Cypress.Promise.delay(10).then(function(){\\n    //     return cy.get(\\\"body\\\").children().should(\\\"not.contain\\\", \\\"foo\\\")\\n    //   })\\n    // }\\n  })\\n\\n  it(\\\"this test will fail due to the previous poorly written test\\\", function(){\\n    // we will get the error here that Cypress detected\\n    // it still had commands in its command queue\\n    //\\n    // Cypress will print the commands out which should\\n    // help us figure out that the previous test is\\n    // causing this error message\\n    cy.wait(10)\\n  })\\n})\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n# cy.visit() failed because you are attempting to visit a second unique domain\n\nTBD.\n\n***\n\n# Cypress detected a cross origin error happened on page load\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"This is a simple overview...\",\n  \"body\": \"For a more thorough explanation of Cypress's Web Security model, [please read our dedicated guide to it](https://on.cypress.io/guides/web-security).\"\n}\n[/block]\n\nThis error means that your application navigated to a superdomain that Cypress was not bound to.\n\nInitially when you `cy.visit` Cypress changes the url to match what you are visiting. This enables Cypress to communicate with your appliation to control it, and bypasses all same-origin security policies built into the browsers.\n\nWhen your application navigates to a superdomain outside of the current origin-policy Cypress is unable to communicate with it, and thus fails.\n\nThere are generally fairly simple workarounds for these common situations:\n\n1. Don't click `<a>` links that navigate you outside of your apps. Likely this isn't worth testing anyway. You should ask yourself: *What's the point of clicking and going to another app?* Likely all you care about is that the `href` attribute matches what you expect. So simply make an assertion about that.\n\n2. You are testing a page that uses `Single sign-on (SSO)`. In this case your webserver is likely redirecting you between superdomains, and thus you receive this error message. You can likely get around this redirect problem by using [`cy.request`](https://on.cypress.io/api/request) and manually handling the session yourself.\n\nIf you find yourself stuck and cannot work around these issues you can just set this in your `cypress.json` file:\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// cypress.json\\n{\\n  chromeWebSecurity: false\\n}\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\nBut before doing so you should really understand and [read about the reasoning here](https://on.cypress.io/guides/web-security).\n\n***\n\n# Support file missing or invalid\n\nThe `supportFolder` option has been removed from Cypress and has been replaced by module support and the `supportFile` option. Cypress used to automatically include any scripts in the `supportFolder` before your test files, and that was the best way to include custom Cypress commands and utility functions. However, automatically including all the files in a certain directory is somewhat magical and unintuitive, and requires creating globals for the purpose of utility functions. This behavior has been succeeded by module support and the `supportFile` option.\n\n## Use modules for utility functions\n\nCypress supports both ES2015 modules and CommonJS modules. You can import/require npm modules as well as local modules:\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"import _ from \\\"lodash\\\"\\nimport util from \\\"./util\\\"\\n\\nit(\\\"uses modules\\\", function () {\\n  expect(_.kebabCase(\\\"FooBar\\\")).to.equal(\\\"foo-bar\\\")\\n  expect(util.secretCode()).to.equal(\\\"1-2-3-4\\\")\\n})\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n## Use supportFile to load scripts before your test code\n\nIt's still useful to load a setup file before your test code. If you are setting Cypress defaults or utilizing custom Cypress commands, instead of needing to import/require those defaults/commands in every test file, you can use the `supportFile` configuration option. This works similar to the former `supportFolder` option, but is more explicit.\n\n`supportFile` is a path to a file to include before your test files. By default, `supportFile` is set to look for one of the following files:\n\n* `cypress/support/index.js`\n* `cypress/support/index.coffee`\n\nJust like with your test files, the `supportFile` can use ES2015+ (or CoffeeScript) and modules, so you can import/require other files as needed.\n\n## Migrating from supportFolder to supportFile\n\nYou're seeing this error because you have the `supportFolder` option explicitly set, either to a different directory or as `false`, meaning you didn't utilize the support folder functionality.\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"I have `supportFolder` set to `false`\"\n}\n[/block]\n\nSet the `supportFile` option to `false` instead:\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// cypress.json\\n\\n// before\\n{\\n  \\\"supportFolder\\\": false\\n}\\n\\n// after\\n{\\n  \\\"supportFile\\\": false\\n}\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"I have `supportFolder` set to a different directory\"\n}\n[/block]\n\nWhen you open a project with Cypress, we look for a file named `index.js` in the `supportFolder` you have set. If one is not present, we generate a file that imports all the other files in your `supportFolder`.\n\nYou simply need to set the `supportFile` option to point to that file, and everything should work as before.\n\nIf, for example, you had the `supportFolder` set to `utilities`, change its name to `supportFile` and its value to `utilities/index.js`:\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// cypress.json\\n\\n// before\\n{\\n  \\\"supportFolder\\\": \\\"utilities\\\"\\n}\\n\\n// after\\n{\\n  \\\"supportFile\\\": \\\"utilities/index.js\\\"\\n}\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n# The Chromium Renderer process just crashed\n\n![screen shot 2016-12-16 at 10 52 08 pm](https://cloud.githubusercontent.com/assets/1268976/21284187/5374b152-c3e2-11e6-9811-c79ead05930b.png)\n\nBrowsers are enormously complex pieces of software, and from time to time they will inconsistently crash *for no good reason*. Crashes are just a part of running automated tests.\n\nAt the moment, we haven't implemented an automatic way to recover from them, but it is actually possible for us to do so. We have an [open issue documenting the steps](https://github.com/cypress-io/cypress/issues/349) we could take to restart the renderer process and continue the run. If you're seeing consistent crashes and would like this implemented, please leave a note in the issue.\n\nIf you are running `Docker` [there is a simple one line fix for this problem documented here](https://github.com/cypress-io/cypress/issues/350).\n\n***\n\n# The 'cypress ci' command has been deprecated\n\nAs of version `0.19.0` and CLI versions `0.13.0`, we have deprecated the `cypress ci` command.\n\nWe did this to make it clearer what the difference was between a **regular run** and a **recorded run**.\n\nPreviously to record runs runs you wrote:\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cypress ci <key>\\n\",\n            \"language\": \"shell\"\n        }\n    ]\n}\n[/block]\n\nOr if you had the environment variable: `CYPRESS_CI_KEY`\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cypress ci\\n\",\n            \"language\": \"shell\"\n        }\n    ]\n}\n[/block]\n\nYou need to rewrite this as:\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cypress run --record --key <record_key>\\n\",\n            \"language\": \"shell\"\n        }\n    ]\n}\n[/block]\n\nIf you were using the environment variable `CYPRESS_CI_KEY`, rename it to`CYPRESS_RECORD_KEY`.\n\nYou can now run and omit the `--key` flag:\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cypress run --record\\n\",\n            \"language\": \"shell\"\n        }\n    ]\n}\n[/block]\n\nWe will automatically apply the record key environment variable.","excerpt":"Errors that require additional explanation are listed here.","slug":"errors","type":"basic","title":"Error Messages"}

Error Messages

Errors that require additional explanation are listed here.

# Contents - :fa-angle-right: [Sorry, there's something wrong with this file](#section-sorry-there-s-something-wrong-with-this-file) - :fa-angle-right: [Oops...we found an error preparing your test file](#section-we-found-an-error-preparing-your-test-file) - :fa-angle-right: [Cypress cannot execute commands outside a running test](#section-cypress-cannot-execute-commands-outside-a-running-test) - :fa-angle-right: [cy.method() failed because the element you are chaining off of has become detached or removed from the dom](#section-cy-method-failed-because-the-element-you-are-chaining-off-of-has-become-detached-or-removed-from-the-dom) - :fa-angle-right: [cy.method() failed because the element cannot be interacted with](#section-cy-method-failed-because-the-element-cannot-be-interacted-with) - :fa-angle-right: [cy.method() failed because the element is currently animating](#section-cy-method-failed-because-the-element-is-currently-animating) - :fa-angle-right: [Running Cypress in CI requires a secret project key](#section-running-cypress-in-ci-requires-a-secret-project-key) - :fa-angle-right: [The test has finished but Cypress still has commands in its queue](#section-the-test-has-finished-but-cypress-still-has-commands-in-its-queue) - :fa-angle-right: [cy.visit() failed because you're attempting to visit a second unique domain](#section-cy-visit-failed-because-you-are-attempting-to-visit-a-second-unique-domain) - :fa-angle-right: [Cypress detected a cross origin error happened on page load](#section-cypress-detected-a-cross-origin-error-happened-on-page-load) - :fa-angle-right: [The supportFolder option has been removed](#section-the-supportfolder-option-has-been-removed) - :fa-angle-right: [The Chromium Renderer process just crashed](#section-the-chromium-renderer-process-just-crashed) - :fa-angle-right: [The 'cypress ci' command has been deprecated](#section-the-cypress-ci-command-has-been-deprecated) *** # No tests found in your file ![screen shot 2015-12-01 at 12 29 06 pm](https://cloud.githubusercontent.com/assets/1157043/20714968/aae41e0c-b61b-11e6-8e84-00da944fde04.png) This message means that Cypress was unable to find tests in the specified file. You'll likely get this message if you have an empty test file and have not yet written any tests. *** # We found an error preparing your test file This message means that Cypress encountered an error when compiling and/or bundling your test file. Cypress automatically compiles and bundles your test code so you can use ES2015, CoffeeScript, modules, etc. You'll typically receive this message due to: - The file missing - A syntax error in the file or one of its dependencies - A missing dependency The error will be printed on the right side, usually showing the part of the code in which the error occurred. When you fix the error in your code, your tests will automatically re-run. *** # Cypress cannot execute commands outside a running test ![screen shot 2015-12-02 at 9 57 23 pm](https://cloud.githubusercontent.com/assets/1268976/11550645/b9b8bd42-993f-11e5-896e-f6a6ca43acb4.png) This message means you tried to execute one or more Cypress commands outside of a currently running test. Cypress has to be able to associate commands to a specific test. Typically this happens accidentally, like in the following situation. [block:code] { "codes": [ { "code": "describe(\"Some Tests\", function(){\n it(\"is true\", function(){\n expect(true).to.be.true // yup, fine\n })\n\n it(\"is false\", function(){\n expect(false).to.be.false // yup, also fine\n })\n\n context(\"some nested tests\", function(){\n // oops you forgot to write an it(...) here!\n // these cypress commands below\n // are run outside of a test and cypress\n // throws an error\n cy\n .visit(\"http://localhost:8080\")\n .get(\"h1\").should(\"contain\", \"todos\")\n })\n})\n", "language": "javascript" } ] } [/block] Simply move those Cypress commands into an `it(...)` and everything will work correctly. If you are purposefully writing commands outside of a test, there is probably a better way to accomplish whatever you're trying to do. Read through the [Example Repos](https://on.cypress.io/guides/all-example-apps), [open an issue](https://github.com/cypress-io/cypress/issues/new?body=**Description**%0A*Include%20a%20high%20level%20description%20of%20the%20error%20here%20including%20steps%20of%20how%20to%20recreate.%20Include%20any%20benefits%2C%20challenges%20or%20considerations.*%0A%0A**Code**%0A*Include%20the%20commands%20used*%0A%0A**Steps%20To%20Reproduce**%0A-%20%5B%20%5D%20Steps%0A-%20%5B%20%5D%20To%0A-%20%5B%20%5D%20Reproduce%2FFix%0A%0A**Additional%20Info**%0A*Include%20any%20images%2C%20notes%2C%20or%20whatever.*%0A), or [come talk to someone in Gitter](https://gitter.im/cypress-io/cypress). *** # cy.method() failed because the element you are chaining off of has become detached or removed from the dom ![screen shot 2015-12-02 at 9 55 29 pm](https://cloud.githubusercontent.com/assets/1268976/11550618/79d68542-993f-11e5-8b5f-9418dfa964c1.png) This message means you are trying to interact with a "dead" DOM element - meaning it is either detached or completely removed from the DOM. Cypress errors because it cannot operate or interact with "dead" elements - just like a real user could not do this either. Understanding how this happens is very important - and it is often easy to prevent. Let's investigate. [block:code] { "codes": [ { "code": "<!-- your app HTML -->\n<body>\n <div id=\"parent\">\n <button>delete</button>\n </div>\n</body>\n", "language": "html" } ] } [/block] [block:code] { "codes": [ { "code": "// your app code\n$(\"button\").click(function(){\n // when the <button> is clicked\n // we remove the button from the DOM\n $(this).remove()\n})\n", "language": "javascript" } ] } [/block] [block:code] { "codes": [ { "code": "// buggy test code\ncy\n // as soon as this click event happens the <button>\n // becomes removed from the DOM\n .get(\"button\").click()\n\n // When cypress begins processing the 'parent' command\n // it will immediately detect that the current subject\n // which is the <button> is detached from the DOM and\n // will throw the error\n .parent()\n", "language": "javascript" } ] } [/block] We can prevent Cypress from throwing this error by rewriting our test code: [block:code] { "codes": [ { "code": "// fixed test code\ncy\n .get(\"button\").click()\n\n // simply query for the parent directly here\n // instead of chaining off the <button> subject\n .get(\"#parent\")\n", "language": "javascript" } ] } [/block] The above example is an oversimplification. Let's look at a more complex example. In modern JavaScript frameworks, DOM elements are regularly `re-rendered` - meaning that the old element is thrown away and a new one is put in its place. Because this happens so fast, it may *appear* as if nothing has visibly changed. But if you are in the middle of executing commands it's possible the element you're interacting with has become "dead". To deal with this situation you must: - understand when your application re-renders - re-query for newly added DOM elements - **guard** Cypress from executing commands until a condition is met When we say **guard** we mean writing commands in such a way that prevents Cypress from going on before a specific condition is met. This usually means: - writing an assertion - waiting on an XHR *** # cy.method() failed because the element cannot be interacted with You may see a variation of this message for 4 different reasons: 1. the element is not visible 2. the element is being covered by another element 3. the element's center is hidden from view 4. the element is disabled Cypress runs several calculations to ensure an element can *actually* be interacted with like a real user would. If you're seeing this error, the solution is often obvious. You may need to add **command guards** due to a timing or animation issue. There have been situations where Cypress does not correctly allow you to interact with an element which should be interactive. If that's the case, [open an issue](https://github.com/cypress-io/cypress/issues/new?body=**Description**%0A*Include%20a%20high%20level%20description%20of%20the%20error%20here%20including%20steps%20of%20how%20to%20recreate.%20Include%20any%20benefits%2C%20challenges%20or%20considerations.*%0A%0A**Code**%0A*Include%20the%20commands%20used*%0A%0A**Steps%20To%20Reproduce**%0A-%20%5B%20%5D%20Steps%0A-%20%5B%20%5D%20To%0A-%20%5B%20%5D%20Reproduce%2FFix%0A%0A**Additional%20Info**%0A*Include%20any%20images%2C%20notes%2C%20or%20whatever.*%0A) or force the action to happen. If you'd like to override these built-in checks, provide the `{force: true}` option to the action itself. Refer to each command for their available options, additional use cases and argument usage. [block:code] { "codes": [ { "code": "// we ignore the built in error checking\n// and force the action to happen\n// regardless of whether the button is\n// visible, disabled, or covered by another element\ncy.get(\"button\").click({force: true}).\n", "language": "javascript" } ] } [/block] *Be careful with this option. It's possible to force your tests to pass but your feature may actually be failing.* *** # cy.method() failed because the element is currently animating ![screen shot 2015-12-30 at 11 44 22 pm](https://cloud.githubusercontent.com/assets/1268976/12061262/4f9a252e-af4f-11e5-9139-9c8bdb08ae58.png) By default Cypress detects if an element you're trying to interact with is animating. This check ensures that an element is not animating too quickly for a real user to interact with the element. This also prevents some edge cases where actions such as [`type`](https://on.cypress.io/api/type) or [`click`](https://on.cypress.io/api/click) happenening too fast during a transition. Cypress will continuously attempt to interact with the element until it eventually times out. If you'd like to force Cypress to interact with the element there are a few options: - Pass `{force: true}` and disables **all** error checking - Pass `{waitForAnimations: false}` to disable animation error checking only - Pass `{animationDistanceThreshold: 20}` to decrease the sensitivity to detecting if an element is animating too quickly for a user to interact with. By increasing the threshold this enables your element to move farther on the page without causing Cypress to continuously retry. [block:code] { "codes": [ { "code": "cy.get(\"#modal button\").click({waitForAnimations: false})\n", "language": "javascript" } ] } [/block] You can globally disable animation error checking, or increase the threshold by modifying your [`cypress.json`](https://on.cypress.io/guides/configuration). [block:code] { "codes": [ { "code": "// cypress.json\n{\n \"waitForAnimations\": false,\n \"animationDistanceThreshold\": 50\n}\n", "language": "json" } ] } [/block] *** # Running Cypress in CI requires a secret project key You may receive this error when trying to run Cypress tests in Continuous Integration. This means that you did not pass a specific key to: `cypress ci` in your CI configuration file. Since no key was passed, Cypress then checks for any environment variable with the name `CYPRESS_CI_KEY`, but still didn't find any. You can get your project's secret key by running the terminal command: `cypress get:key` Then [add the key to your config file or as an environment variable](https://on.cypress.io/guides/continuous-integration#section-acquire-a-cypress-secret-key). *** # The test has finished but Cypress still has commands in its queue ![screen shot 2016-04-04 at 12 07 40 pm](https://cloud.githubusercontent.com/assets/1268976/14254496/fa15f8da-fa5d-11e5-91b8-cdc8387e4dc8.png) Let's examine several different ways you may get this error message. In every situation, you'll need to change something in your code to prevent this error. [block:callout] { "type": "warning", "title": "Flaky tests below!", "body": "Several of these tests are dependent on race conditions. You may have to run these tests multiple times before they will actually fail. You can also try tweaking some of the delays." } [/block] ## Simple Example [block:code] { "codes": [ { "code": "describe(\"simple example\", function(){\n // this first test will actually pass and shows you that\n // Cypress attempts to prevent this problem in every test\n it(\"Cypress is smart and this does not fail\", function(){\n // queue up some commands\n // without returning the cy object\n // which is ok!\n cy\n .get(\"body\")\n .children()\n .should(\"not.contain\", \"foo\")\n\n // even though we return the string here\n // Cypress automatically figures out that you've\n // queued commands above and does not end the test\n // until all commands have finished\n return \"foobarbaz\"\n })\n\n it(\"but you can forcibly end the test early which does fail\", function(done){\n // this example will fail because you've forcibly terminated\n // the test early with mocha\n cy\n .get(\"body\")\n .then(function(){\n // forcibly end the test\n // even though there are still\n // pending queued commands below\n done()\n })\n .children()\n .should(\"not.contain\", \"foo\")\n })\n})\n", "language": "javascript" } ] } [/block] ## Complex Async Example [block:code] { "codes": [ { "code": "describe(\"a complex example with async code\", function(){\n it(\"you can cause commands to bleed into the next test\", function(){\n // what's happening here is that because we have NOT told mocha this is an async test\n // this test will pass immediately and move onto the next test...\n //\n // ...then, when the setTimeout callback function runs\n // new commands will get queued on the wrong test\n //\n // Cypress will detect this and fail the next test\n setTimeout(function(){\n cy.get(\"body\").children().should(\"not.contain\", \"foo\")\n }, 10)\n\n // the correct way to write the above test code would be this:\n // it(\"does not cause commands to bleed into the next test\", function(done){\n // setTimeout(function(){\n // cy.get(\"body\").children().should(\"not.contain\", \"foo\").then(function(){\n // now all the commands are correctly processed on this test\n // and do not bleed into the next test\n // done()\n // })\n // }, 10)\n // })\n\n })\n\n it(\"this test will fail due to the previous poorly written test\", function(){\n // we will get the error here that Cypress detected\n // it still had commands in its command queue\n //\n // Cypress will print the commands out which should\n // help us figure out that the previous test is\n // causing this error message\n cy.wait(10)\n })\n})\n", "language": "javascript" } ] } [/block] ## Complex Promise Example [block:code] { "codes": [ { "code": "describe(\"another complex example using a forgotten 'return'\", function(){\n it(\"forgets to return a promise\", function(){\n // we forget to return the promise to our test\n // which means the test passes synchronously but\n // our promise resolves during the next test.\n //\n // this causes the commands to be queued on the\n // wrong test\n Cypress.Promise.delay(10).then(function(){\n cy.get(\"body\").children().should(\"not.contain\", \"foo\")\n })\n\n // the correct way to write the above test code would be this:\n // it(\"does not forget to return a promise\", function(){\n // return Cypress.Promise.delay(10).then(function(){\n // return cy.get(\"body\").children().should(\"not.contain\", \"foo\")\n // })\n // }\n })\n\n it(\"this test will fail due to the previous poorly written test\", function(){\n // we will get the error here that Cypress detected\n // it still had commands in its command queue\n //\n // Cypress will print the commands out which should\n // help us figure out that the previous test is\n // causing this error message\n cy.wait(10)\n })\n})\n", "language": "javascript" } ] } [/block] *** # cy.visit() failed because you are attempting to visit a second unique domain TBD. *** # Cypress detected a cross origin error happened on page load [block:callout] { "type": "info", "title": "This is a simple overview...", "body": "For a more thorough explanation of Cypress's Web Security model, [please read our dedicated guide to it](https://on.cypress.io/guides/web-security)." } [/block] This error means that your application navigated to a superdomain that Cypress was not bound to. Initially when you `cy.visit` Cypress changes the url to match what you are visiting. This enables Cypress to communicate with your appliation to control it, and bypasses all same-origin security policies built into the browsers. When your application navigates to a superdomain outside of the current origin-policy Cypress is unable to communicate with it, and thus fails. There are generally fairly simple workarounds for these common situations: 1. Don't click `<a>` links that navigate you outside of your apps. Likely this isn't worth testing anyway. You should ask yourself: *What's the point of clicking and going to another app?* Likely all you care about is that the `href` attribute matches what you expect. So simply make an assertion about that. 2. You are testing a page that uses `Single sign-on (SSO)`. In this case your webserver is likely redirecting you between superdomains, and thus you receive this error message. You can likely get around this redirect problem by using [`cy.request`](https://on.cypress.io/api/request) and manually handling the session yourself. If you find yourself stuck and cannot work around these issues you can just set this in your `cypress.json` file: [block:code] { "codes": [ { "code": "// cypress.json\n{\n chromeWebSecurity: false\n}\n", "language": "javascript" } ] } [/block] But before doing so you should really understand and [read about the reasoning here](https://on.cypress.io/guides/web-security). *** # Support file missing or invalid The `supportFolder` option has been removed from Cypress and has been replaced by module support and the `supportFile` option. Cypress used to automatically include any scripts in the `supportFolder` before your test files, and that was the best way to include custom Cypress commands and utility functions. However, automatically including all the files in a certain directory is somewhat magical and unintuitive, and requires creating globals for the purpose of utility functions. This behavior has been succeeded by module support and the `supportFile` option. ## Use modules for utility functions Cypress supports both ES2015 modules and CommonJS modules. You can import/require npm modules as well as local modules: [block:code] { "codes": [ { "code": "import _ from \"lodash\"\nimport util from \"./util\"\n\nit(\"uses modules\", function () {\n expect(_.kebabCase(\"FooBar\")).to.equal(\"foo-bar\")\n expect(util.secretCode()).to.equal(\"1-2-3-4\")\n})\n", "language": "javascript" } ] } [/block] ## Use supportFile to load scripts before your test code It's still useful to load a setup file before your test code. If you are setting Cypress defaults or utilizing custom Cypress commands, instead of needing to import/require those defaults/commands in every test file, you can use the `supportFile` configuration option. This works similar to the former `supportFolder` option, but is more explicit. `supportFile` is a path to a file to include before your test files. By default, `supportFile` is set to look for one of the following files: * `cypress/support/index.js` * `cypress/support/index.coffee` Just like with your test files, the `supportFile` can use ES2015+ (or CoffeeScript) and modules, so you can import/require other files as needed. ## Migrating from supportFolder to supportFile You're seeing this error because you have the `supportFolder` option explicitly set, either to a different directory or as `false`, meaning you didn't utilize the support folder functionality. [block:callout] { "type": "info", "title": "I have `supportFolder` set to `false`" } [/block] Set the `supportFile` option to `false` instead: [block:code] { "codes": [ { "code": "// cypress.json\n\n// before\n{\n \"supportFolder\": false\n}\n\n// after\n{\n \"supportFile\": false\n}\n", "language": "javascript" } ] } [/block] [block:callout] { "type": "info", "title": "I have `supportFolder` set to a different directory" } [/block] When you open a project with Cypress, we look for a file named `index.js` in the `supportFolder` you have set. If one is not present, we generate a file that imports all the other files in your `supportFolder`. You simply need to set the `supportFile` option to point to that file, and everything should work as before. If, for example, you had the `supportFolder` set to `utilities`, change its name to `supportFile` and its value to `utilities/index.js`: [block:code] { "codes": [ { "code": "// cypress.json\n\n// before\n{\n \"supportFolder\": \"utilities\"\n}\n\n// after\n{\n \"supportFile\": \"utilities/index.js\"\n}\n", "language": "javascript" } ] } [/block] *** # The Chromium Renderer process just crashed ![screen shot 2016-12-16 at 10 52 08 pm](https://cloud.githubusercontent.com/assets/1268976/21284187/5374b152-c3e2-11e6-9811-c79ead05930b.png) Browsers are enormously complex pieces of software, and from time to time they will inconsistently crash *for no good reason*. Crashes are just a part of running automated tests. At the moment, we haven't implemented an automatic way to recover from them, but it is actually possible for us to do so. We have an [open issue documenting the steps](https://github.com/cypress-io/cypress/issues/349) we could take to restart the renderer process and continue the run. If you're seeing consistent crashes and would like this implemented, please leave a note in the issue. If you are running `Docker` [there is a simple one line fix for this problem documented here](https://github.com/cypress-io/cypress/issues/350). *** # The 'cypress ci' command has been deprecated As of version `0.19.0` and CLI versions `0.13.0`, we have deprecated the `cypress ci` command. We did this to make it clearer what the difference was between a **regular run** and a **recorded run**. Previously to record runs runs you wrote: [block:code] { "codes": [ { "code": "cypress ci <key>\n", "language": "shell" } ] } [/block] Or if you had the environment variable: `CYPRESS_CI_KEY` [block:code] { "codes": [ { "code": "cypress ci\n", "language": "shell" } ] } [/block] You need to rewrite this as: [block:code] { "codes": [ { "code": "cypress run --record --key <record_key>\n", "language": "shell" } ] } [/block] If you were using the environment variable `CYPRESS_CI_KEY`, rename it to`CYPRESS_RECORD_KEY`. You can now run and omit the `--key` flag: [block:code] { "codes": [ { "code": "cypress run --record\n", "language": "shell" } ] } [/block] We will automatically apply the record key environment variable.