{"__v":2,"_id":"56902cde48df220d004ca230","category":{"__v":60,"_id":"569002f19ebef90d0087289d","pages":["56900352769f210d00132595","5690047121fcf0190071d943","569004924719c119002ce654","569004ceb700ce0d002f4b94","569023e518c3920d00be8b37","569023f748df220d004ca215","5690240af7eb9a0d00f4465d","5690241b48df220d004ca217","5690243e48df220d004ca219","56902453741e9c0d00af2fb5","56902463efcc380d0043a5a1","5690247b18c3920d00be8b39","56902492f7eb9a0d00f4465f","569024a16c49d70d00f18075","569024b2efcc380d0043a5a3","569024cc48df220d004ca21b","569024ea18c3920d00be8b3b","5690258618c3920d00be8b3f","5690259bf7eb9a0d00f44662","569025b06c49d70d00f18077","569029b418c3920d00be8b43","569029d4f7eb9a0d00f44667","569029e8e056c80d00fdec58","569029fb48df220d004ca221","56902a1c18c3920d00be8b46","56902a45f7eb9a0d00f44669","56902a6be056c80d00fdec5a","56902a78f7eb9a0d00f4466b","56902a8848df220d004ca224","56902aa018c3920d00be8b4b","56902ace6c49d70d00f18085","56902ae0741e9c0d00af2fc6","56902aee48df220d004ca226","56902af8f7eb9a0d00f44674","56902b26efcc380d0043a5b1","56902b8148df220d004ca22a","56902ba918c3920d00be8b55","56902bb96c49d70d00f1808b","56902bc818c3920d00be8b57","56902bd518c3920d00be8b59","56902be218c3920d00be8b5b","56902bf66c49d70d00f1808e","56902c05e056c80d00fdec5d","56902c196c49d70d00f18090","56902c2648df220d004ca22d","56902c34f7eb9a0d00f44678","56902c5518c3920d00be8b5d","56902c62741e9c0d00af2fcc","56902cde48df220d004ca230","56902cea741e9c0d00af2fcf","56902d0ae056c80d00fdec60","56902d20efcc380d0043a5b4","56902d3448df220d004ca232","5696c3fbf9203821005fe2fb","5696c3fb9e2d000d00947ab0","5696c3fbf9203821005fe2fa","5697efee8d2a770d00d2fd17","569802611c4dc823005426c7","56a65c82b3ffe00d00156eaf","56f01f88332da41700f24b74"],"project":"568fde81b700ce0d002f4b43","version":"568fde82b700ce0d002f4b46","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-01-08T18:41:53.562Z","from_sync":false,"order":1,"slug":"commands","title":"Commands"},"parentDoc":null,"project":"568fde81b700ce0d002f4b43","user":"568fffce769f210d0013258f","version":{"__v":23,"_id":"568fde82b700ce0d002f4b46","project":"568fde81b700ce0d002f4b43","createdAt":"2016-01-08T16:06:26.373Z","releaseDate":"2016-01-08T16:06:26.373Z","categories":["568fde82b700ce0d002f4b47","568ff0e504440a1700e4cbbd","569002f19ebef90d0087289d","569004f4769f210d00132599","5690056d9ebef90d008728a0","569005d394c5030d0028813a","5690067804440a1700e4cbe2","569137eb3c4f510d00ec9b92","56913815e56a790d008dbfe3","569138ba3c4f510d00ec9b93","5691392f3c4f510d00ec9b94","56913bbe72f2810d007e4cb0","56933b8d6ebadc0d005b71d2","56933b8d6ebadc0d005b71d3","569564facaa32519009c41e6","5696a319b6d61f0d00acfb40","5696a319a857080d0082e8e8","5697efe43503e40d0061f4d1","5697efe48d2a770d00d2fd16","569e9597ffccd10d00a05c59","56a7a1523d33bc2100793d5c","56a7a32ecf6d771700baeee8","56b8b0f7ddeb231700e69825"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":false,"codename":"bar","version_clean":"1.0.0","version":"1.0"},"updates":["5845088f9f79b51900b07614","58450973ba4f1c0f00969243"],"next":{"pages":[],"description":""},"createdAt":"2016-01-08T21:40:46.699Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":61,"body":"Types into the DOM element found in the previous command.\n\nPrior to typing, if the DOM element isn't currently focused, Cypress will issue a [click](https://on.cypress.io/api/click) on the element, which will cause the element to receive focus.\n\nText passed to `cy.type` may include any of these special character sequences:\n\nSequence | Notes\n--- | ---\n`{{}`| Types the literal `{` key\n`{backspace}` | Deletes character to the left of the cursor\n`{del}` | Deletes character to the right of the cursor\n`{enter}` | Types the Enter key\n`{esc}` | Types the Escape key\n`{leftarrow}` | Moves cursor left\n`{rightarrow}` | Moves cursor right\n`{downarrow}` | Fires down event but does **not** move the cursor\n`{uparrow}` | Fires up event but does **not** move the cursor\n`{selectall}` | Selects all text by creating a `selection range`\n\nText passed to `cy.type` may also include any of the these modifier character sequences:\n\nSequence | Notes\n--- | ---\n`{alt}` | Activates the `altKey` modifier. Aliases: `{option}`\n`{ctrl}` | Activates the `ctrlKey` modifier. Aliases: `{control}`\n`{meta}` | Activates the `metaKey` modifier. Aliases: `{command}`, `{cmd}`\n`{shift}` | Activates the `shiftKey` modifier.\n\n| | |\n|--- | --- |\n| **Returns** | the DOM element that was typed into |\n| **Timeout** | `cy.type` will retry for the duration of the [`defaultCommandTimeout`](https://on.cypress.io/guides/configuration#section-timeouts) or the duration of the `timeout` specified in the command's [options](#section-options). |\n\n***\n\n# [cy.type( *text* )](#section-usage)\n\nTypes the text provided into the current DOM subject.\n\n***\n\n# Options\n\nPass in an options object to change the default behavior of `cy.type`.\n\n**[cy.type( *text*, *options* )](#options-usage)**\n\nOption | Default | Notes\n--- | --- | ---\n`delay` | `10` | Delay after each keypress\n`force` | `false` | Forces type, disables error checking prior to type\n`release` | `true` | Keep a modifier activated between commands\n`interval` | `16` | Interval to retry type\n`timeout` | [`defaultCommandTimeout`](https://on.cypress.io/guides/configuration#section-timeouts) | Total time to retry the type\n`log` | `true` | whether to display command in command log\n\n***\n\n# Usage\n\n## Type into a textarea.\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// issues all keyboard events\\n// and returns <textarea> for further chaining\\ncy.get(\\\"textarea\\\").type(\\\"Hello world\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n## Type into a non-text or non-textarea element with `tabindex`\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"<body>\\n  <div id=\\\"el\\\" tabindex=\\\"1\\\">\\n    this div can receive focus\\n  </div>\\n</body>\\n\",\n            \"language\": \"html\"\n        }\n    ]\n}\n[/block]\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// this element will receive all of the appropriate\\n// key events and focus / blur events but will not\\n// have its value or text contents altered in any way\\ncy.get(\\\"#el\\\").type(\\\"foo\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n# Options Usage\n\n## Force a click to happen prior to type\n\nType issues a [`click`](https://on.cypress.io/api/click) prior to typing (only if the element is not currently focused). Because of this, sometimes it is useful to force the click to happen. Forcing a click disables error checking prior to the click.\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// this will disable the built-in logic for ensuring\\n// the element is visible, and is physically clickable\\n// prior to typing into it\\ncy.get(\\\"input[type=text]\\\").type(\\\"Test all the things\\\", {force: true})\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"Be careful with the `force` option because it allows the type to happen where it might actually be impossible for a real user to type.\"\n}\n[/block]\n\n***\n\n# Key combinations / Modifiers\n\nWhen using special character sequences (see table at top of page), it's possible to activate modifier keys and type key combinations, such as `CTRL + R` or `SHIFT + ALT + Q`. The modifier(s) remain activated for the duration of the `cy.type()` command, and are released when all subsequent characters are typed, unless [`{release: false}`](https://on.cypress.io/api/type#section-options) is passed as an [option](https://on.cypress.io/v1.0/api/type#section-release-behavior). A `keydown` event is fired when a modifier is activated and a `keyup` event is fired when it is released.\n\n## Type a key combination\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// this is the same as a user holding down SHIFT and ALT, then pressing Q\\ncy.get(\\\"input\\\").type(\\\"{shift}{alt}Q\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"[Check out our example recipe of logging in by typing username and password](https://github.com/cypress-io/cypress-example-recipes/blob/master/cypress/integration/logging_in_html_web_form_spec.js)\",\n  \"title\": \"Typing into a login form\"\n}\n[/block]\n\n***\n\n## Hold down modifier key and type a word\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// all characters after {ctrl} will have 'ctrlKey' set to 'true' on their key events\\ncy.get(\\\"input\\\").type(\\\"{ctrl}test\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n## Release behavior\n\nBy default, modifiers are released after each type command.\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// 'ctrlKey' will be true for each event while 'test' is typed\\n// but false while 'everything' is typed\\ncy.get(\\\"input\\\").type(\\\"{ctrl}test\\\").type(\\\"everything\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\nTo keep a modifier activated between commands, specify `{release: false}` in the options.\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// 'altKey' will be true while typing 'foo'\\ncy.get(\\\"input\\\").type(\\\"{alt}foo\\\", {release: false})\\n// 'altKey' will also be true during 'get' and 'click' commands\\ncy.get(\\\"button\\\").click()\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\nModifiers are automatically released between tests, even with `{release: false}`.\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"it(\\\"has modifiers activated\\\", function () {\\n  // 'altKey' will be true while typing 'foo'\\n  cy.get(\\\"input\\\").type(\\\"{alt}foo\\\", {release: false})\\n})\\n\\nit(\\\"does not have modifiers activated\\\", function () {\\n  // 'altKey' will be false while typing 'bar'\\n  cy.get(\\\"input\\\").type(\\\"bar\\\")\\n})\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\nTo manually release modifiers within a test after using `{release: false}`, use another `type` command and the modifier will be released after it.\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// 'altKey' will be true while typing 'foo'\\ncy.get(\\\"input\\\").type(\\\"{alt}foo\\\", {release: false})\\n// 'altKey' will be true during the 'get' and 'click' commands\\ncy.get(\\\"button\\\").click()\\n// 'altKey' will be released after this command\\ncy.get(\\\"input\\\").type(\\\"{alt}\\\")\\n// 'altKey' will be false during the 'get' and 'click' commands\\ncy.get(\\\"button\\\").click()\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n## Global shortcuts / modifiers\n\n`cy.type()` requires a focusable element as the subject, since it's usually unintended to type into something that's not a text field or textarea! Although there *are* a few cases where it's valid to \"type\" into something other than a text field or textarea:\n\n* Keyboard shortcuts where the listener is on the `document` or `body`.\n* Holding modifier keys and clicking an arbitrary element.\n\nTo support this, the `body` can be used as the subject (even though it's *not* a focusable element).\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// all of the type events will be fired on the body\\ncy.get(\\\"body\\\").type(\\\"{uparrow}{uparrow}{downarrow}{downarrow}{leftarrow}{rightarrow}{leftarrow}{rightarrow}ba\\\")\\n\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// execute a SHIFT + click on the first <li>\\n// {release: false} is necessary so that\\n// SHIFT will not be released after the type command\\ncy.get(\\\"body\\\").type(\\\"{shift}\\\", {release: false}).get(\\\"li:first\\\").click()\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n# Known Issues\n\n## Native `input[type=date,datetime,datetime-local,month,year,color]`\n\nSpecial input types are *not* supported yet because browsers implement these input types outside of what is accessible to JavaScript. They also depend on OS regional settings.  The fix however is relatively simple - Cypress will require you to type the final *formatted* value that the input will be set to - and then all will work. [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) if you need this to be fixed.\n\n***\n\n## Typing `tab` key does not work\n\nTabbing will be implemented as a separate command as `cy.tab` and support things like multiple tabs, tabbing in reverse, or tabbing to a specific element. [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) if you need this to be fixed.\n\n***\n\n## Preventing mousedown does not prevent typing\n\nIn a real browser, preventing mousedown on a form field will prevent it from receiving focus and thus prevent it from being able to be typed into. Currently, Cypress does not factor this in. [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) if you need this to be fixed.\n\n***\n\n## Modifier effects\n\nIn a real browser, if a user holds `SHIFT` and types `a`, a capital `A` will be typed into the input. Currently, Cypress does not simulate that behavior.\n\nModifiers are simulated by setting their corresponding values to `true` for key and click events. So, for example, activating the `{shift}` modifier will set `event.shiftKey` to true for any key events, such as `keydown`.\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// app code\\ndocument.querySelector(\\\"input:first\\\").addEventListener(\\\"keydown\\\", function (e) {\\n  // e.shiftKey will be true\\n})\\n\\n// in test\\ncy.get(\\\"input:first\\\").type(\\\"{shift}a\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\nIn the example above, a lowercase `a` will be typed, because that's the literal character specified. To type a capital `A`, you can use `cy.type(\"{shift}A\")` (or simply `cy.type(\"A\")` if you don't care about the `shiftKey` property on any key events).\n\nThis holds true for other special key combinations as well (that may be OS-specific). For example, on OSX, typing `ALT + SHIFT + K` creates the special character ``. Like with capitalization, `cy.type()` will not output ``, but simply the letter `k`.\n\n[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) if you need modifier effects to be implemented.\n\n***\n\n# Notes\n\n## Mimic user typing behavior\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// each keypress is delayed 10ms by default\\n// which simulates how a very fast user types!\\ncy.get(\\\"[contenteditable]\\\").type(\\\"some text!\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n## Events that fire\n\nCypress implements all events that Chrome fires as part of typing in a real keyboard. Read the section: [Simulated Events vs Native Events](#simulated-events-vs-native-events) below for more information.\n\nThe following events will be fired based on what key was pressed identical to the event spec.\n\n* keydown\n* keypress\n* textInput\n* input\n* keyup\n\n`beforeinput` is *not* fired even though it is in the spec because no browser has adopted it.\n\nAdditionally `change` events will be fired either when the `{enter}` key is pressed (and the value has changed since the last focus event), or whenever the element loses focus. This matches browser behavior.\n\nEvents that should not fire on non input types such as elements with `tabindex` do not fire their `textInput` or `input` events. Only typing into elements which cause the actual value or text to change will fire those events.\n\n***\n\n## Event Firing\n\nThe following rules have been implemented that match real browser behavior (and the spec):\n\n1. Cypress respects not firing subsequent events if previous ones were cancelled.\n2. Cypress will fire `keypress` *only* if that key is supposed to actually fire `keypress`.\n3. Cypress will fire `textInput` *only* if typing that key would have inserted an actual character.\n4. Cypress will fire `input` *only* if typing that key modifies or changes the value of the element.\n\n***\n\n## Event Cancellation\n\nCypress respects all default browser behavior when events are cancelled.\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// prevent the characters from being inserted\\n// by canceling keydown, keypress, or textInput\\n$(\\\"#username\\\").on(\\\"keydown\\\", function(e){\\n  e.preventDefault();\\n})\\n\\n// Cypress will not insert any characters if keydown, keypress, or textInput\\n// are cancelled - which matches the default browser behavior\\ncy.get(\\\"#username\\\").type(\\\"bob:::at:::gmail.com\\\").should(\\\"have.value\\\", \\\"\\\") // true\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n## Implicit form submission behavior\n\nCypress automatically matches the spec and browser behavior for pressing the `{enter}` key when the input belongs to a `<form>`.\n\nThis behavior is defined here: [Form Implicit Submission](https://html.spec.whatwg.org/multipage/forms.html#implicit-submission)\n\nFor instance the following will submit the form.\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"<form action=\\\"/login\\\">\\n  <input id=\\\"username\\\" />\\n  <input id=\\\"password\\\" />\\n  <button type=\\\"submit\\\">Log In</button>\\n</form>\\n\",\n            \"language\": \"html\"\n        }\n    ]\n}\n[/block]\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cy\\n  .get(\\\"#username\\\").type(\\\"[email protected]\\\")\\n  .get(\\\"#password\\\").type(\\\"password123{enter}\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\nBecause there are multiple `inputs` and one `submit` button, Cypress submits the form (and fires submit events) as well as a synthetic `click` event to the `button`.\n\nThe spec defines the **submit** button as the first `input[type=submit]` or `button[type!=button]` from the form.\n\nAdditionally Cypress handles these 4 other situations as defined in the spec:\n\n1. Does not submit a form if there are multiple inputs and no `submit` button.\n2. Does not submit a form if the `submit` button is disabled.\n3. Submits a form, but does not fire synthetic `click` event, if there is 1 `input` and no `submit` button\n4. Submits form and fires a synthetic `click` event to the `submit` when it exists.\n\nOf course if the form's `submit` event is `preventedDefault` the form will not actually be submitted.\n\n***\n\n## Key Events Table\n\nCypress will print out a table of key events that detail the keys that were pressed when clicking on type within the [command log](https://on.cypress.io/api/type#section-command-log). Each character will contain the `which` character code and the events that happened as a result of that key press.\n\nEvents that were `defaultPrevented` may prevent other events from firing and those will show up as empty.  For instance, canceling `keydown` will not fire `keypress` or `textInput` or `input`, but will fire `keyup` (which matches the spec).\n\nAdditionally, events that cause a `change` event to fire (such as typing `{enter}`) will display with the `change` event column as `true.\n\nAny modifiers activated for the event are also listed in a `modifiers` column.\n\n![Cypress cy.type key events table](https://cloud.githubusercontent.com/assets/1157043/18144246/b44df61c-6f93-11e6-8553-96b1b347db4b.png)\n\n***\n\n## Simulated Events vs Native Events\n\nWhen Cypress is running on your local computer, all events are simulated identically to real native events.\n\nThere should be no distinguishable difference between these simulated events and real native events. We chose to model these simulated events to match what Chrome fires. In other words, using `cy.type` should essentially match actually typing keys on your keyboard while in Chrome.\n\nHowever, when Cypress is run in `cross browser mode`, Cypress uses the actual `OS keyboard` to type, and therefore the browser will fire all of it's native events as you'd expect.\n\nThis strategy works well because when you are in development you are working in Chrome.  Using simulated events is extremely fast, the browser window does *not* need to be in focus. Because we simulate events identically to their native counterpart, your application code won't be able to tell the difference.\n\nIn other words, you get the best of both worlds: simulated when its practical to do so, and native when it needs to run across browsers.\n\n***\n\n# Command Log\n\n## Type into the input\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cy.get(\\\"input[name=firstName]\\\").type(\\\"Jane Lane\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\nThe commands above will display in the command log as:\n\n<img width=\"584\" alt=\"screen shot 2015-11-29 at 1 25 51 pm\" src=\"https://cloud.githubusercontent.com/assets/1271364/11459104/ee20613e-969c-11e5-8c78-e78b39d9ec46.png\">\n\nWhen clicking on `type` within the command log, the console outputs the following:\n\n<img width=\"637\" alt=\"screen shot 2015-11-29 at 1 26 24 pm\" src=\"https://cloud.githubusercontent.com/assets/1271364/11459106/f14f3308-969c-11e5-8352-f96744bbd713.png\">\n\n***\n\n# Related\n\n- [clear](https://on.cypress.io/api/clear)\n- [click](https://on.cypress.io/api/click)\n- [submit](https://on.cypress.io/api/submit)","excerpt":"Type into a DOM element","slug":"type","type":"basic","title":"type"}

type

Type into a DOM element

Types into the DOM element found in the previous command. Prior to typing, if the DOM element isn't currently focused, Cypress will issue a [click](https://on.cypress.io/api/click) on the element, which will cause the element to receive focus. Text passed to `cy.type` may include any of these special character sequences: Sequence | Notes --- | --- `{{}`| Types the literal `{` key `{backspace}` | Deletes character to the left of the cursor `{del}` | Deletes character to the right of the cursor `{enter}` | Types the Enter key `{esc}` | Types the Escape key `{leftarrow}` | Moves cursor left `{rightarrow}` | Moves cursor right `{downarrow}` | Fires down event but does **not** move the cursor `{uparrow}` | Fires up event but does **not** move the cursor `{selectall}` | Selects all text by creating a `selection range` Text passed to `cy.type` may also include any of the these modifier character sequences: Sequence | Notes --- | --- `{alt}` | Activates the `altKey` modifier. Aliases: `{option}` `{ctrl}` | Activates the `ctrlKey` modifier. Aliases: `{control}` `{meta}` | Activates the `metaKey` modifier. Aliases: `{command}`, `{cmd}` `{shift}` | Activates the `shiftKey` modifier. | | | |--- | --- | | **Returns** | the DOM element that was typed into | | **Timeout** | `cy.type` will retry for the duration of the [`defaultCommandTimeout`](https://on.cypress.io/guides/configuration#section-timeouts) or the duration of the `timeout` specified in the command's [options](#section-options). | *** # [cy.type( *text* )](#section-usage) Types the text provided into the current DOM subject. *** # Options Pass in an options object to change the default behavior of `cy.type`. **[cy.type( *text*, *options* )](#options-usage)** Option | Default | Notes --- | --- | --- `delay` | `10` | Delay after each keypress `force` | `false` | Forces type, disables error checking prior to type `release` | `true` | Keep a modifier activated between commands `interval` | `16` | Interval to retry type `timeout` | [`defaultCommandTimeout`](https://on.cypress.io/guides/configuration#section-timeouts) | Total time to retry the type `log` | `true` | whether to display command in command log *** # Usage ## Type into a textarea. [block:code] { "codes": [ { "code": "// issues all keyboard events\n// and returns <textarea> for further chaining\ncy.get(\"textarea\").type(\"Hello world\")\n", "language": "javascript" } ] } [/block] *** ## Type into a non-text or non-textarea element with `tabindex` [block:code] { "codes": [ { "code": "<body>\n <div id=\"el\" tabindex=\"1\">\n this div can receive focus\n </div>\n</body>\n", "language": "html" } ] } [/block] [block:code] { "codes": [ { "code": "// this element will receive all of the appropriate\n// key events and focus / blur events but will not\n// have its value or text contents altered in any way\ncy.get(\"#el\").type(\"foo\")\n", "language": "javascript" } ] } [/block] *** # Options Usage ## Force a click to happen prior to type Type issues a [`click`](https://on.cypress.io/api/click) prior to typing (only if the element is not currently focused). Because of this, sometimes it is useful to force the click to happen. Forcing a click disables error checking prior to the click. [block:code] { "codes": [ { "code": "// this will disable the built-in logic for ensuring\n// the element is visible, and is physically clickable\n// prior to typing into it\ncy.get(\"input[type=text]\").type(\"Test all the things\", {force: true})\n", "language": "javascript" } ] } [/block] [block:callout] { "type": "warning", "body": "Be careful with the `force` option because it allows the type to happen where it might actually be impossible for a real user to type." } [/block] *** # Key combinations / Modifiers When using special character sequences (see table at top of page), it's possible to activate modifier keys and type key combinations, such as `CTRL + R` or `SHIFT + ALT + Q`. The modifier(s) remain activated for the duration of the `cy.type()` command, and are released when all subsequent characters are typed, unless [`{release: false}`](https://on.cypress.io/api/type#section-options) is passed as an [option](https://on.cypress.io/v1.0/api/type#section-release-behavior). A `keydown` event is fired when a modifier is activated and a `keyup` event is fired when it is released. ## Type a key combination [block:code] { "codes": [ { "code": "// this is the same as a user holding down SHIFT and ALT, then pressing Q\ncy.get(\"input\").type(\"{shift}{alt}Q\")\n", "language": "javascript" } ] } [/block] [block:callout] { "type": "info", "body": "[Check out our example recipe of logging in by typing username and password](https://github.com/cypress-io/cypress-example-recipes/blob/master/cypress/integration/logging_in_html_web_form_spec.js)", "title": "Typing into a login form" } [/block] *** ## Hold down modifier key and type a word [block:code] { "codes": [ { "code": "// all characters after {ctrl} will have 'ctrlKey' set to 'true' on their key events\ncy.get(\"input\").type(\"{ctrl}test\")\n", "language": "javascript" } ] } [/block] *** ## Release behavior By default, modifiers are released after each type command. [block:code] { "codes": [ { "code": "// 'ctrlKey' will be true for each event while 'test' is typed\n// but false while 'everything' is typed\ncy.get(\"input\").type(\"{ctrl}test\").type(\"everything\")\n", "language": "javascript" } ] } [/block] To keep a modifier activated between commands, specify `{release: false}` in the options. [block:code] { "codes": [ { "code": "// 'altKey' will be true while typing 'foo'\ncy.get(\"input\").type(\"{alt}foo\", {release: false})\n// 'altKey' will also be true during 'get' and 'click' commands\ncy.get(\"button\").click()\n", "language": "javascript" } ] } [/block] Modifiers are automatically released between tests, even with `{release: false}`. [block:code] { "codes": [ { "code": "it(\"has modifiers activated\", function () {\n // 'altKey' will be true while typing 'foo'\n cy.get(\"input\").type(\"{alt}foo\", {release: false})\n})\n\nit(\"does not have modifiers activated\", function () {\n // 'altKey' will be false while typing 'bar'\n cy.get(\"input\").type(\"bar\")\n})\n", "language": "javascript" } ] } [/block] To manually release modifiers within a test after using `{release: false}`, use another `type` command and the modifier will be released after it. [block:code] { "codes": [ { "code": "// 'altKey' will be true while typing 'foo'\ncy.get(\"input\").type(\"{alt}foo\", {release: false})\n// 'altKey' will be true during the 'get' and 'click' commands\ncy.get(\"button\").click()\n// 'altKey' will be released after this command\ncy.get(\"input\").type(\"{alt}\")\n// 'altKey' will be false during the 'get' and 'click' commands\ncy.get(\"button\").click()\n", "language": "javascript" } ] } [/block] *** ## Global shortcuts / modifiers `cy.type()` requires a focusable element as the subject, since it's usually unintended to type into something that's not a text field or textarea! Although there *are* a few cases where it's valid to "type" into something other than a text field or textarea: * Keyboard shortcuts where the listener is on the `document` or `body`. * Holding modifier keys and clicking an arbitrary element. To support this, the `body` can be used as the subject (even though it's *not* a focusable element). [block:code] { "codes": [ { "code": "// all of the type events will be fired on the body\ncy.get(\"body\").type(\"{uparrow}{uparrow}{downarrow}{downarrow}{leftarrow}{rightarrow}{leftarrow}{rightarrow}ba\")\n\n", "language": "javascript" } ] } [/block] [block:code] { "codes": [ { "code": "// execute a SHIFT + click on the first <li>\n// {release: false} is necessary so that\n// SHIFT will not be released after the type command\ncy.get(\"body\").type(\"{shift}\", {release: false}).get(\"li:first\").click()\n", "language": "javascript" } ] } [/block] *** # Known Issues ## Native `input[type=date,datetime,datetime-local,month,year,color]` Special input types are *not* supported yet because browsers implement these input types outside of what is accessible to JavaScript. They also depend on OS regional settings. The fix however is relatively simple - Cypress will require you to type the final *formatted* value that the input will be set to - and then all will work. [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) if you need this to be fixed. *** ## Typing `tab` key does not work Tabbing will be implemented as a separate command as `cy.tab` and support things like multiple tabs, tabbing in reverse, or tabbing to a specific element. [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) if you need this to be fixed. *** ## Preventing mousedown does not prevent typing In a real browser, preventing mousedown on a form field will prevent it from receiving focus and thus prevent it from being able to be typed into. Currently, Cypress does not factor this in. [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) if you need this to be fixed. *** ## Modifier effects In a real browser, if a user holds `SHIFT` and types `a`, a capital `A` will be typed into the input. Currently, Cypress does not simulate that behavior. Modifiers are simulated by setting their corresponding values to `true` for key and click events. So, for example, activating the `{shift}` modifier will set `event.shiftKey` to true for any key events, such as `keydown`. [block:code] { "codes": [ { "code": "// app code\ndocument.querySelector(\"input:first\").addEventListener(\"keydown\", function (e) {\n // e.shiftKey will be true\n})\n\n// in test\ncy.get(\"input:first\").type(\"{shift}a\")\n", "language": "javascript" } ] } [/block] In the example above, a lowercase `a` will be typed, because that's the literal character specified. To type a capital `A`, you can use `cy.type("{shift}A")` (or simply `cy.type("A")` if you don't care about the `shiftKey` property on any key events). This holds true for other special key combinations as well (that may be OS-specific). For example, on OSX, typing `ALT + SHIFT + K` creates the special character ``. Like with capitalization, `cy.type()` will not output ``, but simply the letter `k`. [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) if you need modifier effects to be implemented. *** # Notes ## Mimic user typing behavior [block:code] { "codes": [ { "code": "// each keypress is delayed 10ms by default\n// which simulates how a very fast user types!\ncy.get(\"[contenteditable]\").type(\"some text!\")\n", "language": "javascript" } ] } [/block] *** ## Events that fire Cypress implements all events that Chrome fires as part of typing in a real keyboard. Read the section: [Simulated Events vs Native Events](#simulated-events-vs-native-events) below for more information. The following events will be fired based on what key was pressed identical to the event spec. * keydown * keypress * textInput * input * keyup `beforeinput` is *not* fired even though it is in the spec because no browser has adopted it. Additionally `change` events will be fired either when the `{enter}` key is pressed (and the value has changed since the last focus event), or whenever the element loses focus. This matches browser behavior. Events that should not fire on non input types such as elements with `tabindex` do not fire their `textInput` or `input` events. Only typing into elements which cause the actual value or text to change will fire those events. *** ## Event Firing The following rules have been implemented that match real browser behavior (and the spec): 1. Cypress respects not firing subsequent events if previous ones were cancelled. 2. Cypress will fire `keypress` *only* if that key is supposed to actually fire `keypress`. 3. Cypress will fire `textInput` *only* if typing that key would have inserted an actual character. 4. Cypress will fire `input` *only* if typing that key modifies or changes the value of the element. *** ## Event Cancellation Cypress respects all default browser behavior when events are cancelled. [block:code] { "codes": [ { "code": "// prevent the characters from being inserted\n// by canceling keydown, keypress, or textInput\n$(\"#username\").on(\"keydown\", function(e){\n e.preventDefault();\n})\n\n// Cypress will not insert any characters if keydown, keypress, or textInput\n// are cancelled - which matches the default browser behavior\ncy.get(\"#username\").type(\"[email protected]\").should(\"have.value\", \"\") // true\n", "language": "javascript" } ] } [/block] *** ## Implicit form submission behavior Cypress automatically matches the spec and browser behavior for pressing the `{enter}` key when the input belongs to a `<form>`. This behavior is defined here: [Form Implicit Submission](https://html.spec.whatwg.org/multipage/forms.html#implicit-submission) For instance the following will submit the form. [block:code] { "codes": [ { "code": "<form action=\"/login\">\n <input id=\"username\" />\n <input id=\"password\" />\n <button type=\"submit\">Log In</button>\n</form>\n", "language": "html" } ] } [/block] [block:code] { "codes": [ { "code": "cy\n .get(\"#username\").type(\"[email protected]\")\n .get(\"#password\").type(\"password123{enter}\")\n", "language": "javascript" } ] } [/block] Because there are multiple `inputs` and one `submit` button, Cypress submits the form (and fires submit events) as well as a synthetic `click` event to the `button`. The spec defines the **submit** button as the first `input[type=submit]` or `button[type!=button]` from the form. Additionally Cypress handles these 4 other situations as defined in the spec: 1. Does not submit a form if there are multiple inputs and no `submit` button. 2. Does not submit a form if the `submit` button is disabled. 3. Submits a form, but does not fire synthetic `click` event, if there is 1 `input` and no `submit` button 4. Submits form and fires a synthetic `click` event to the `submit` when it exists. Of course if the form's `submit` event is `preventedDefault` the form will not actually be submitted. *** ## Key Events Table Cypress will print out a table of key events that detail the keys that were pressed when clicking on type within the [command log](https://on.cypress.io/api/type#section-command-log). Each character will contain the `which` character code and the events that happened as a result of that key press. Events that were `defaultPrevented` may prevent other events from firing and those will show up as empty. For instance, canceling `keydown` will not fire `keypress` or `textInput` or `input`, but will fire `keyup` (which matches the spec). Additionally, events that cause a `change` event to fire (such as typing `{enter}`) will display with the `change` event column as `true. Any modifiers activated for the event are also listed in a `modifiers` column. ![Cypress cy.type key events table](https://cloud.githubusercontent.com/assets/1157043/18144246/b44df61c-6f93-11e6-8553-96b1b347db4b.png) *** ## Simulated Events vs Native Events When Cypress is running on your local computer, all events are simulated identically to real native events. There should be no distinguishable difference between these simulated events and real native events. We chose to model these simulated events to match what Chrome fires. In other words, using `cy.type` should essentially match actually typing keys on your keyboard while in Chrome. However, when Cypress is run in `cross browser mode`, Cypress uses the actual `OS keyboard` to type, and therefore the browser will fire all of it's native events as you'd expect. This strategy works well because when you are in development you are working in Chrome. Using simulated events is extremely fast, the browser window does *not* need to be in focus. Because we simulate events identically to their native counterpart, your application code won't be able to tell the difference. In other words, you get the best of both worlds: simulated when its practical to do so, and native when it needs to run across browsers. *** # Command Log ## Type into the input [block:code] { "codes": [ { "code": "cy.get(\"input[name=firstName]\").type(\"Jane Lane\")\n", "language": "javascript" } ] } [/block] The commands above will display in the command log as: <img width="584" alt="screen shot 2015-11-29 at 1 25 51 pm" src="https://cloud.githubusercontent.com/assets/1271364/11459104/ee20613e-969c-11e5-8c78-e78b39d9ec46.png"> When clicking on `type` within the command log, the console outputs the following: <img width="637" alt="screen shot 2015-11-29 at 1 26 24 pm" src="https://cloud.githubusercontent.com/assets/1271364/11459106/f14f3308-969c-11e5-8352-f96744bbd713.png"> *** # Related - [clear](https://on.cypress.io/api/clear) - [click](https://on.cypress.io/api/click) - [submit](https://on.cypress.io/api/submit)