Cypress Click with Position Argument

Profile picture for user arilio666

Today, we will see how we can click on an element based on position. For that, we have a position argument where we can pass in the position of the element we will click. Have discussed what the click command does in the previous article

Click Positions

Valid positions are: 

  1. topLeft
  2. top 
  3. topRight 
  4. left
  5. center (default)
  6. right
  7. bottomLeft
  8. bottom
  9. bottomRight

Example: Click using Position Argument

For example purpose, we are going to use our traditional https://www.programsbuzz.com/.

it('visit the site, perform various clicks',()=>{
    cy.visit('https://www.programsbuzz.com/')
    cy.wait(5000)
    cy.contains("Start Learning").click('left', { force: true })
})

See the dotted red circle on Start Learning button, we can see here the start learning button has been clicked on the position of the left side.

describe('The Click Command',() => {
    it('visit the site, perform various clicks',()=>{
        cy.visit('https://www.programsbuzz.com/')
        cy.wait(5000)
        cy.contains("Start Learning").click('right', { force: true })
    })
})

Click with Position Argument in Cypress

This time dotted red is on the right side, we can see here when the position argument is given as right, the pointer clicked is on the right side.

So here, the position argument plays the part of clicking the element or button based on the position provided as the argument within the click command.