Skip to content

Develop #2321

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Dec 19, 2019
Merged

Develop #2321

Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
"dependency-check": "3.4.1",
"deps-ok": "1.4.1",
"eslint": "6.1.0",
"eslint-plugin-cypress": "2.7.0",
"eslint-plugin-cypress": "2.8.1",
"eslint-plugin-cypress-dev": "2.1.0",
"eslint-plugin-no-only-tests": "2.3.1",
"execa": "2.0.3",
Expand Down
10 changes: 10 additions & 0 deletions source/_data/plugins.yml
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,11 @@
link: https://github.com/RcKeller/cypress-unfetch
keywords: [commands, routing, networking]

- name: cypress-redux
description: Run assertions against Redux stores.
link: https://github.com/RcKeller/cypress-redux
keywords: [commands, redux]

- name: cypress-axe
description: Helps test your applications for accessibility issues using axe-core.
link: https://github.com/avanslaars/cypress-axe
Expand Down Expand Up @@ -229,6 +234,11 @@
link: https://github.com/bahmutov/cy-api
keywords: [api]

- name: cy-spok
description: Adds assertions from Spok library for easy schema and value validations
link: https://github.com/bahmutov/cy-spok
keywords: [assertions]

- name: Extending other testing frameworks
plugins:
- name: cyphell
Expand Down
31 changes: 17 additions & 14 deletions source/api/commands/click.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,16 @@ Click a DOM element.
**{% fa fa-check-circle green %} Correct Usage**

```javascript
cy.get('button').click() // Click on button
cy.focused().click() // Click on el with focus
cy.contains('Welcome').click() // Click on first el containing 'Welcome'
cy.get('.btn').click() // Click on button
cy.focused().click() // Click on el with focus
cy.contains('Welcome').click() // Click on first el containing 'Welcome'
```

**{% fa fa-exclamation-triangle red %} Incorrect Usage**

```javascript
cy.click('button') // Errors, cannot be chained off 'cy'
cy.window().click() // Errors, 'window' does not yield DOM element
cy.click('.btn') // Errors, cannot be chained off 'cy'
cy.window().click() // Errors, 'window' does not yield DOM element
```

## Arguments
Expand Down Expand Up @@ -67,10 +67,10 @@ Option | Default | Description

## No Args

### Click the button
### Click a link in a nav

```javascript
cy.get('button').click()
cy.get('.nav > a').click()
```

## Position
Expand All @@ -80,7 +80,7 @@ cy.get('button').click()
Click the top right corner of the button.

```javascript
cy.get('button').click('topRight')
cy.get('img').click('topRight')
```

## Coordinates
Expand All @@ -90,7 +90,7 @@ cy.get('button').click('topRight')
The click below will be issued inside of the element (15px from the left and 40px from the top).

```javascript
cy.get('button').click(15, 40)
cy.get('#top-banner').click(15, 40)
```

## Options
Expand All @@ -100,27 +100,28 @@ cy.get('button').click(15, 40)
Forcing a click overrides the {% url 'actionable checks' interacting-with-elements#Forcing %} Cypress applies and will automatically fire the events.

```javascript
cy.get('button').click({ force: true })
cy.get('.close').as('closeBtn')
cy.get('@closeBtn').click({ force: true })
```

### Force a click with position argument

```javascript
cy.get('button').click('bottomLeft', { force: true })
cy.get('#collapse-sidebar').click('bottomLeft', { force: true })
```

### Force a click with relative coordinates

```javascript
cy.get('button').click(5, 60, { force: true })
cy.get('#footer .next').click(5, 60, { force: true })
```

### Click all buttons found on the page
### Click all elements with id starting with 'btn'

By default, Cypress will error if you're trying to click multiple elements. By passing `{ multiple: true }` Cypress will iteratively apply the click to each element and will also log to the {% url 'Command Log' test-runner#Command-Log %} multiple times.

```javascript
cy.get('button').click({ multiple: true })
cy.get('[id^=btn]').click({ multiple: true })
```

## Click with key combinations
Expand Down Expand Up @@ -205,8 +206,10 @@ When clicking on `click` within the command log, the console outputs the followi
# See also

- {% url `.check()` check %}
- {% url "`.click()` examples in kitchensink app" https://github.com/cypress-io/cypress-example-kitchensink/blob/master/cypress/integration/examples/actions.spec.js#L66 } %}
- {% url `.dblclick()` dblclick %}
- {% url `.rightclick()` rightclick %}
- {% url `.select()` select %}
- {% url `.submit()` submit %}
- {% url `.type()` type %}
- {% url "'When can the test click?' blog" https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/ %}