<commit_before>slug: type
excerpt: 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 may include 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`

**The following events are fired during type:** `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.

| | |
|--- | --- |
| **Returns** | the DOM element that was typed into |
| **Timeout** | `cy.type` will retry for the duration of the [`commandTimeout`](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
`interval` | `16` | Interval which to retry type
`timeout` | [`commandTimeout`](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.

```javascript
// issues all keyboard events
// and returns <textarea> for further chaining
cy.get("textarea").type("Hello world")
```

***

# Options Usage

## Force a click to happen prior to type

Type issues a [`click`](https://on.cypress.io/api/click) prior to typing (if the element isn't 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.

```javascript
// this will disable the built-in logic for ensuring
// the element is visible, and is physically clickable
// prior to typing into it
cy.get("input[type=text]").type("Test all the things", {force: true})
```

[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]

***

# 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.

***

## Typing directly into the document

Currently Cypress requires you type directly into an element, but there is a use case for just "typing" as a user would but not into a focused element. Your app may implement this for things like keyboard shortcuts, where you bind to the `KeyboardEvents` on the document. [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.

***

## Key Combinations do not work

`cy.type` does not yet have the ability to specify key combinations like `CTRL + R` or `SHIFT + ALT + Q`. [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.

***

# Notes

## Mimics user behavior

```javascript
// each keypress is delayed 10ms by default
// which simulates how a very fast user types!
cy.get("[contenteditable]").type("some text!")
```

***

## 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.

***

## Event Cancellation

Cypress respects all default browser behavior when events are cancelled.

```javascript
// prevent the key from being inserted
// by canceling keydown, keypress, or textInput
$("#username").on("keydown", function(e){
  e.preventDefault();
})

// Cypress will not insert any characters if keydown, keypress, or textInput
// is cancelled - which matches the default browser behavior
cy.get("#username").type("<EMAIL>").should("have.value", "") // true
```

***

## Event Firing

The following rules have been implemented that match real browser behavior (and the spec):
<commit_msg>updated cy.type to display example of tabindex<commit_after>slug: type
excerpt: 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 may include 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`

**The following events are fired during type:** `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.

| | |
|--- | --- |
| **Returns** | the DOM element that was typed into |
| **Timeout** | `cy.type` will retry for the duration of the [`commandTimeout`](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
`interval` | `16` | Interval which to retry type
`timeout` | [`commandTimeout`](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.

```javascript
// issues all keyboard events
// and returns <textarea> for further chaining
cy.get("textarea").type("Hello world")
```

***

## Type into an element with `tabindex`

```html
<body>
  <div id="el" tabindex="1">
    this div can receive focus
  </div>
</body>
```

```javascript
// this element will receive all of the appropriate
// key events and focus / blur events but will not
// have its value or text contents altered in any way
cy.get("#el").type("foo")
```

***

# Options Usage

## Force a click to happen prior to type

Type issues a [`click`](https://on.cypress.io/api/click) prior to typing (if the element isn't 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.

```javascript
// this will disable the built-in logic for ensuring
// the element is visible, and is physically clickable
// prior to typing into it
cy.get("input[type=text]").type("Test all the things", {force: true})
```

[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]

***

# 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.

***

## Typing directly into the document

Currently Cypress requires you type directly into an element, but there is a use case for just "typing" as a user would but not into a focused element. Your app may implement this for things like keyboard shortcuts, where you bind to the `KeyboardEvents` on the document. [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.

***

## Key Combinations do not work

`cy.type` does not yet have the ability to specify key combinations like `CTRL + R` or `SHIFT + ALT + Q`. [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.

***

# Notes

## Mimics user behavior

```javascript
// each keypress is delayed 10ms by default
// which simulates how a very fast user types!
cy.get("[contenteditable]").type("some text!")
```

***

## 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 Cancellation

Cypress respects all default browser behavior when events are cancelled.

```javascript
// prevent the key from being inserted
// by canceling keydown, keypress, or textInput
$("#username").on("keydown", function(e){
  e.preventDefault();
})

// Cypress will not insert any characters if keydown, keypress, or textInput
// is cancelled - which matches the default browser behavior
cy.get("#username").type("<EMAIL>").should("have.value", "") // true
```

***

## Event Firing

The following rules have been implemented that match real browser behavior (and the spec):

{'fraction_non_alphanumeric': 0.13161867486720716, 'fraction_numerical': 0.058317025440313114, 'mean_word_length': 5.932558139534883, 'pattern_counts': {'":': 4, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 18, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7242119', 'n_tokens_mistral': 6358, 'n_tokens_neox': 5825, 'n_words': 1784}