Skip to main content
Home
  • Tutorials
    • Quality Assurance
    • Software Development
    • Machine Learning
    • Data Science
  • About Us
  • Contact
programsbuzz facebook programsbuzz twitter programsbuzz linkedin
  • Log in

Main navigation

  • Tutorials
    • Quality Assurance
    • Software Development
    • Machine Learning
    • Data Science
  • About Us
  • Contact

Cypress click Command

Profile picture for user arilio666
Written by arilio666 on 02/08/2022 - 09:11

In Cypress, a click command is used to click on the button, link, or any other DOM element. Click command yields the same subject it was given from the previous command.

Table of Content

  1. Syntax
  2. Rules
  3. Demo Link
  4. Click on Button
  5. Click on Link
  6. Click using Contains
  7. Click on Focused Element
  8. Video Tutorial

1. Syntax

Here is the syntax. You can specify different arguments:

.click()
.click(options)
.click(position)
.click(position, options)
.click(x, y)
.click(x, y, options)
  • position: The position where the click should be issued. The center position is the default position. Valid positions are topLeft, top, topRight, left, center, right, bottomLeft, bottom, and bottomRight.
  • x (Number): The distance in pixels from the element's left to issue the click.
  • y (Number): The distance in pixels from the element's top to issue the click.
  • options (Object): You can pass in different options to change the default behavior of click.
    • altKey: This option is used to activate the alt key in Windows and the option key in Mac. The default value is false, and the alias is optionKey.
    • animationDistanceThreshold: The distance in pixels an element must exceed over time to be considered animating. The default value is animationDistanceThreshold.
    • ctrlKey: activate the control key. The default value is false, and the alias is controlKey.
    • log: Display the command in the command log. The default value is true.
    • force: Forces the action, disables waiting for actionability. Default value false.
    • metaKey: Activate the Windows key on Windows and the command key on Mac. Aliases are the command key and cmdKey. Default value false.
    • multiple: To serially click multiple elements. The default value is false.
    • scrollbehaviors: Viewport position to where an element should be scrolled before executing the command. Default value scrollBehavior.
    • shiftKey: Activates the shift key. The default value is false.
    • timeout: Time to wait for .click() to resolve before timing out. Default value defaultCommandTimeout.
    • waitForAnimations: Whether to wait for elements to finish animating before executing the command. Default value waitForAnimations

2. Rules

  • .click() requires being chained off a command that yields DOM element(s).
  • .click() will automatically wait for the element to reach an actionable state
  • .click() can time out waiting for the element to reach an actionable state.
  • .click() will automatically retry until all chained assertions have passed
  • .click() can time out waiting for assertions you've added to pass.

3. Demo Link

For the demo, we will click on the user icon in the programsbuzz top menu, then click on the log in link. On the login page, fill in the user information and click the Log in button.

cypress click on button or link

4. Click on Button

To click on a button (user icon), first, find the button using the locator and then use the click method.

cy.get('div.header__toggleable-account-menu>button').click()

5. Click on a Link

Let's click on a log in link using the click command after finding the link element using css.

cy.get("a[href='/user/login']").click()

6. Click using Contains

You can also click on the log in link using the contains method. Here use the link text.

cy.contains('Log in').click()

7. Click on Focused Element

You can click on a focused element using the focused and click command. After pressing the tab command on the password field focus will be on Log in button. 

it.only('click command', () => {
    cy.visit('https://www.programsbuzz.com/')
    
    cy.get('div.header__toggleable-account-menu>button').click()
    cy.get("a[href='/user/login']").click()
 
    cy.get('#edit-name').type('hello')
    cy.get('#edit-pass').type('mypass').tab()
        
    cy.focused().click()
})
Related Content
Cypress Tutorial
Cypress Double-click using dblclick Command
Cypress rightclick Command
Tags
Cypress
  • Log in or register to post comments

Choose Your Technology

  1. Agile
  2. Apache Groovy
  3. Apache Hadoop
  4. Apache HBase
  5. Apache Spark
  6. Appium
  7. AutoIt
  8. AWS
  9. Behat
  10. Cucumber Java
  11. Cypress
  12. DBMS
  13. Drupal
  14. GitHub
  15. GitLab
  16. GoLang
  17. Gradle
  18. HTML
  19. ISTQB Foundation
  20. Java
  21. JavaScript
  22. JMeter
  23. JUnit
  24. Karate
  25. Kotlin
  26. LoadRunner
  27. matplotlib
  28. MongoDB
  29. MS SQL Server
  30. MySQL
  31. Nightwatch JS
  32. PactumJS
  33. PHP
  34. Playwright
  35. Playwright Java
  36. Playwright Python
  37. Postman
  38. Project Management
  39. Protractor
  40. PyDev
  41. Python
  42. Python NumPy
  43. Python Pandas
  44. Python Seaborn
  45. R Language
  46. REST Assured
  47. Ruby
  48. Selenide
© Copyright By iVagus Services Pvt. Ltd. 2023. All Rights Reserved.

Footer

  • Cookie Policy
  • Privacy Policy
  • Terms of Use