{"__v":0,"_id":"56902453741e9c0d00af2fb5","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":[],"next":{"pages":[],"description":""},"createdAt":"2016-01-08T21:04:19.262Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":9,"body":"`cy.click` is used to click a DOM element found int he previous command.  The DOM element must be in a \"clickable\" state prior to the click event happening (it must be visible and not covered by another element).\n\nCypress automatically scrolls the element into view prior to attempting the click.\n\nBy default, the click is issued at the exact center of the element. You can pass a [`position`](#section-position-usage) option to override this setting.\n\n**The following events are fired during click:** `mousedown`, `focus`, `mouseup`, `click`\n\n| | |\n|--- | --- |\n| **Returns** | the existing DOM subject |\n| **Timeout** | `cy.click` will wait and retry until the element is 'clickable' 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.click()](#section-usage)\n\nClick the DOM element.\n\n***\n\n# [cy.click( *position* )](#section-position-usage)\n\nClicks the element at the specified position. The `center` position is the default position.\n\nPosition | Default | Notes\n--- | --- | ---\n`center` | Yes | Clicks the exact center of the element\n`topLeft` | No | Clicks the top left corner of the element\n`topRight` | No | Clicks the top right corner of the element\n`bottomLeft` | No | Clicks the bottom left corner of the element\n`bottomRight` | No | Clicks the bottom right corner of the element\n\n***\n\n# [cy.click( *x*, *y* )](#section-coordinates-usage)\n\nYou can pass a relative `x` and `y` coordinate which will calculate distance in pixels from the top left corner of the element and isssue the click at the calculated coordinate.\n\n`x` and `y` must both be `Numbers`. Currently you cannot use `%` based arguments. [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'd like this functionality.\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"Make sure not to issue a click outside of the width and height of the element. This will result in a `Command Timeout`\"\n}\n[/block]\n\n***\n\n# Options\n\nPass in an options object to change the default behavior of `cy.click`.\n\n**[cy.click( *options* )](#options-usage)**\n**[cy.click( *position*, *options* )](#options-usage)**\n**[cy.click( *x*, *y*, *options* )](#options-usage)**\n\nOption | Default | Notes\n--- | --- | ---\n`force` | `false` | Forces click, disables error checking prior to click\n`multiple` | `false` | Enables serially clicking multiple elements\n`interval` | `16` | Interval which to retry a click\n`timeout` | [`defaultCommandTimeout`](https://on.cypress.io/guides/configuration#section-timeouts) | Total time to retry the click\n`log` | `true` | whether to display command in command log\n\n***\n\n# Usage\n\n## Click the button\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// returns <button>Save</button>\\ncy.get(\\\"button\\\").click()\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n# Position Usage\n\n## Specify a corner of the element to click\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// click is issued in the top right corner of the element\\ncy.get(\\\"button\\\").click(\\\"topRight\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n# Coordinates Usage\n\n## Specify explicit coordinates relative to the top left corner\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// the click will be issued inside of the element\\n// 15px from the left and\\n// 40px from the top\\ncy.get(\\\"button\\\").click(15, 40)\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n# Options Usage\n\n## Force a click regardless of visibility or other elements in front of the element\n\nThis is useful when you want the click issued no matter what. Forcing a click disables the error checking that happens prior to a click.\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"Be careful with this option because it allows the click to happen when it might actually be impossible for a real user to click.\"\n}\n[/block]\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\\ncy.get(\\\"button\\\").click({force: true})\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"[Check out our example recipe on testing hover and working with hidden elements](https://github.com/cypress-io/cypress-example-recipes/blob/master/cypress/integration/hover_hidden_elements.js)\",\n  \"title\": \"Dealing with hover and hidden elements\"\n}\n[/block]\n\n***\n\n## Force a click with position argument\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cy.get(\\\"button\\\").click(\\\"bottomLeft\\\", {force: true})\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n## Force a click with relative coordinates\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cy.get(\\\"button\\\").click(5, 60, {force: true})\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n## Click all buttons found on the page\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cy.get(\\\"button\\\").click({multiple: true})\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n# Known Issues\n\n## pointer-events: none\n\nCypress does not currently factor in `pointer-events: none` in its clicking algorithm. [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## Element removal during `mousedown` or `mouseup`\n\nThe spec states what should happen if the element clicked is removed from the DOM during `mousedown` or `mouseup`, but Cypress is not currently factoring 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## Animations\n\nUnlike other testing frameworks, like Selenium, Cypress has built in logic for dealing with both CSS and JavaScript animations. Cypress will detect if an element is animating and will wait until the element reaches a clickable state. You will never deal with a situation where Cypress accidentally clicks the *wrong* element.\n\nHowever, sometimes when dealing with 3rd party plugins that animate using JavaScript, Cypress logic to scroll an element into view can be affected. Cypress (acting like a real user) will attempt to position the element onscreen by scrolling all parent elements that need to be scrolled (just like a real user) prior to making a click. This *may* have an adverse affect if a 3rd party plugin is bound to the `scroll` event. Cypress is so fast that sometimes there are timing issues where 3rd party plugins have incorrectly calculated animations and sometimes even prevent an element from displaying altogether.\n\nThese situations are rare, but if you're having a difficult time getting an element to click or experiencing seemingly *random* failures, you will save *yourself hours of debugging and headache* by simply issuing the `{force: true}` option to the click or by inserting a small delay prior to the click with [`cy.wait(ms)`](https://on.cypress.io/api/wait). It is almost never worth your time trying to debug finicky animation issues caused by 3rd party plugins.\n\nSo far the only library we've seen cause issues with is animating KendoUI's `dropdownlist`. By using `{force: true}` or inserting a small `wait` prior to a click, these issues completely go away.\n\n***\n\n# Notes\n\n## Events that are fired\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cy.get(\\\"button\\\").click()\\n// mousedown\\n// focus\\n// mouseup\\n// click\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\nThe events are fired to spec, including the coordinates of where the event took place.\n\nAt the moment, `mouseover` and `mouseout` events are *not* fired but this will be done soon.\n\nAdditionally if the `mousedown` event causes the element to be removed from the DOM, the remaining events should continue to be fired, but to the resulting element left below the removed element.  This has also not been implemented but will be implemented at some point.\n\n***\n\n## Focus is given to the first focusable element\n\nJust like real browsers, clicking a `<span>`, for example, inside of a `<button>` will properly give the focus to the button, since that's what would happen in a real user scenario.\n\nHowever, Cypress additionally handles situations where a child descendent is clicked inside of a focusable parent, but actually isn't visually inside the parent (per the CSS Object Model). In those cases if no focusable parent is found the window is given focus instead (which matches a real browser).\n\n***\n\n## Mousedown cancellation will not cause focus\n\nIf the mousedown event has its default action prevented (`e.preventDefault()`) then the element will not receive focus as per the spec.\n\n***\n\n## Coordinates of a click\n\nThe coordinates of the click will be recorded the exact moment the click happens. When hovering over the `click` command, Cypress will display a red \"hitbox\" indicator on the snapshot showing you where the click event occurred on the page.\n\n***\n\n# Command Log\n\n## Click the button in the form that has text \"Create User\"\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cy.get(\\\"form\\\").find(\\\"button\\\").contains(\\\"Create User\\\").click()\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\nThe commands above will display in the command log as:\n\n<img width=\"590\" alt=\"screen shot 2015-11-29 at 1 07 27 pm\" src=\"https://cloud.githubusercontent.com/assets/1271364/11458988/3cd5bae8-969a-11e5-9938-40a553402992.png\">\n\nWhen clicking on `click` within the command log, the console outputs the following:\n\n<img width=\"759\" alt=\"screen shot 2015-11-29 at 1 07 49 pm\" src=\"https://cloud.githubusercontent.com/assets/1271364/11458989/4036493c-969a-11e5-8f98-377dfce1f2c1.png\">\n\n***\n\n# Errors\n\n## cy.click() can only be called on a single element.\n\nIf the subject passed to `cy.click()` are multiple elements, you need to write `cy.click({multiple: true})` to serially click each element one after another. Otherwise, ensure that your subject is only one element.\n\n## cy.click() cannot be called on a <select> element. Use cy.select() command instead to change the value.\n\nIn order to work with selecting `<select>` elements, [`cy.select()`](https://on.cypress.io/api/select) will afford better options than `cy.click()`.\n\n# Related\n\n- [dblclick](https://on.cypress.io/api/dblclick)\n- [check](https://on.cypress.io/api/check)\n- [select](https://on.cypress.io/api/select)\n- [submit](https://on.cypress.io/api/submit)","excerpt":"Click a DOM element","slug":"click","type":"basic","title":"click"}

click

Click a DOM element

`cy.click` is used to click a DOM element found int he previous command. The DOM element must be in a "clickable" state prior to the click event happening (it must be visible and not covered by another element). Cypress automatically scrolls the element into view prior to attempting the click. By default, the click is issued at the exact center of the element. You can pass a [`position`](#section-position-usage) option to override this setting. **The following events are fired during click:** `mousedown`, `focus`, `mouseup`, `click` | | | |--- | --- | | **Returns** | the existing DOM subject | | **Timeout** | `cy.click` will wait and retry until the element is 'clickable' 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.click()](#section-usage) Click the DOM element. *** # [cy.click( *position* )](#section-position-usage) Clicks the element at the specified position. The `center` position is the default position. Position | Default | Notes --- | --- | --- `center` | Yes | Clicks the exact center of the element `topLeft` | No | Clicks the top left corner of the element `topRight` | No | Clicks the top right corner of the element `bottomLeft` | No | Clicks the bottom left corner of the element `bottomRight` | No | Clicks the bottom right corner of the element *** # [cy.click( *x*, *y* )](#section-coordinates-usage) You can pass a relative `x` and `y` coordinate which will calculate distance in pixels from the top left corner of the element and isssue the click at the calculated coordinate. `x` and `y` must both be `Numbers`. Currently you cannot use `%` based arguments. [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'd like this functionality. [block:callout] { "type": "warning", "body": "Make sure not to issue a click outside of the width and height of the element. This will result in a `Command Timeout`" } [/block] *** # Options Pass in an options object to change the default behavior of `cy.click`. **[cy.click( *options* )](#options-usage)** **[cy.click( *position*, *options* )](#options-usage)** **[cy.click( *x*, *y*, *options* )](#options-usage)** Option | Default | Notes --- | --- | --- `force` | `false` | Forces click, disables error checking prior to click `multiple` | `false` | Enables serially clicking multiple elements `interval` | `16` | Interval which to retry a click `timeout` | [`defaultCommandTimeout`](https://on.cypress.io/guides/configuration#section-timeouts) | Total time to retry the click `log` | `true` | whether to display command in command log *** # Usage ## Click the button [block:code] { "codes": [ { "code": "// returns <button>Save</button>\ncy.get(\"button\").click()\n", "language": "javascript" } ] } [/block] *** # Position Usage ## Specify a corner of the element to click [block:code] { "codes": [ { "code": "// click is issued in the top right corner of the element\ncy.get(\"button\").click(\"topRight\")\n", "language": "javascript" } ] } [/block] *** # Coordinates Usage ## Specify explicit coordinates relative to the top left corner [block:code] { "codes": [ { "code": "// the click will be issued inside of the element\n// 15px from the left and\n// 40px from the top\ncy.get(\"button\").click(15, 40)\n", "language": "javascript" } ] } [/block] *** # Options Usage ## Force a click regardless of visibility or other elements in front of the element This is useful when you want the click issued no matter what. Forcing a click disables the error checking that happens prior to a click. [block:callout] { "type": "warning", "body": "Be careful with this option because it allows the click to happen when it might actually be impossible for a real user to click." } [/block] [block:code] { "codes": [ { "code": "// this will disable the built-in logic for ensuring\n// the element is visible, and is physically clickable\ncy.get(\"button\").click({force: true})\n", "language": "javascript" } ] } [/block] [block:callout] { "type": "info", "body": "[Check out our example recipe on testing hover and working with hidden elements](https://github.com/cypress-io/cypress-example-recipes/blob/master/cypress/integration/hover_hidden_elements.js)", "title": "Dealing with hover and hidden elements" } [/block] *** ## Force a click with position argument [block:code] { "codes": [ { "code": "cy.get(\"button\").click(\"bottomLeft\", {force: true})\n", "language": "javascript" } ] } [/block] *** ## Force a click with relative coordinates [block:code] { "codes": [ { "code": "cy.get(\"button\").click(5, 60, {force: true})\n", "language": "javascript" } ] } [/block] ## Click all buttons found on the page [block:code] { "codes": [ { "code": "cy.get(\"button\").click({multiple: true})\n", "language": "javascript" } ] } [/block] *** # Known Issues ## pointer-events: none Cypress does not currently factor in `pointer-events: none` in its clicking algorithm. [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. *** ## Element removal during `mousedown` or `mouseup` The spec states what should happen if the element clicked is removed from the DOM during `mousedown` or `mouseup`, but Cypress is not currently factoring 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. *** ## Animations Unlike other testing frameworks, like Selenium, Cypress has built in logic for dealing with both CSS and JavaScript animations. Cypress will detect if an element is animating and will wait until the element reaches a clickable state. You will never deal with a situation where Cypress accidentally clicks the *wrong* element. However, sometimes when dealing with 3rd party plugins that animate using JavaScript, Cypress logic to scroll an element into view can be affected. Cypress (acting like a real user) will attempt to position the element onscreen by scrolling all parent elements that need to be scrolled (just like a real user) prior to making a click. This *may* have an adverse affect if a 3rd party plugin is bound to the `scroll` event. Cypress is so fast that sometimes there are timing issues where 3rd party plugins have incorrectly calculated animations and sometimes even prevent an element from displaying altogether. These situations are rare, but if you're having a difficult time getting an element to click or experiencing seemingly *random* failures, you will save *yourself hours of debugging and headache* by simply issuing the `{force: true}` option to the click or by inserting a small delay prior to the click with [`cy.wait(ms)`](https://on.cypress.io/api/wait). It is almost never worth your time trying to debug finicky animation issues caused by 3rd party plugins. So far the only library we've seen cause issues with is animating KendoUI's `dropdownlist`. By using `{force: true}` or inserting a small `wait` prior to a click, these issues completely go away. *** # Notes ## Events that are fired [block:code] { "codes": [ { "code": "cy.get(\"button\").click()\n// mousedown\n// focus\n// mouseup\n// click\n", "language": "javascript" } ] } [/block] The events are fired to spec, including the coordinates of where the event took place. At the moment, `mouseover` and `mouseout` events are *not* fired but this will be done soon. Additionally if the `mousedown` event causes the element to be removed from the DOM, the remaining events should continue to be fired, but to the resulting element left below the removed element. This has also not been implemented but will be implemented at some point. *** ## Focus is given to the first focusable element Just like real browsers, clicking a `<span>`, for example, inside of a `<button>` will properly give the focus to the button, since that's what would happen in a real user scenario. However, Cypress additionally handles situations where a child descendent is clicked inside of a focusable parent, but actually isn't visually inside the parent (per the CSS Object Model). In those cases if no focusable parent is found the window is given focus instead (which matches a real browser). *** ## Mousedown cancellation will not cause focus If the mousedown event has its default action prevented (`e.preventDefault()`) then the element will not receive focus as per the spec. *** ## Coordinates of a click The coordinates of the click will be recorded the exact moment the click happens. When hovering over the `click` command, Cypress will display a red "hitbox" indicator on the snapshot showing you where the click event occurred on the page. *** # Command Log ## Click the button in the form that has text "Create User" [block:code] { "codes": [ { "code": "cy.get(\"form\").find(\"button\").contains(\"Create User\").click()\n", "language": "javascript" } ] } [/block] The commands above will display in the command log as: <img width="590" alt="screen shot 2015-11-29 at 1 07 27 pm" src="https://cloud.githubusercontent.com/assets/1271364/11458988/3cd5bae8-969a-11e5-9938-40a553402992.png"> When clicking on `click` within the command log, the console outputs the following: <img width="759" alt="screen shot 2015-11-29 at 1 07 49 pm" src="https://cloud.githubusercontent.com/assets/1271364/11458989/4036493c-969a-11e5-8f98-377dfce1f2c1.png"> *** # Errors ## cy.click() can only be called on a single element. If the subject passed to `cy.click()` are multiple elements, you need to write `cy.click({multiple: true})` to serially click each element one after another. Otherwise, ensure that your subject is only one element. ## cy.click() cannot be called on a <select> element. Use cy.select() command instead to change the value. In order to work with selecting `<select>` elements, [`cy.select()`](https://on.cypress.io/api/select) will afford better options than `cy.click()`. # Related - [dblclick](https://on.cypress.io/api/dblclick) - [check](https://on.cypress.io/api/check) - [select](https://on.cypress.io/api/select) - [submit](https://on.cypress.io/api/submit)