Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

click red target is at the wrong position in 3.5.0

See original GitHub issue

Current behavior:

When issuing a click on a element using the click command and specifying the position, for eg. cy.get('button').click(10, 2), there is a red pointer that is supposed to indicate where the click was issued but it always appears at the bottom of the button:

Other signatures of the click command seem to show the red indicator at the correct position.

Desired behavior:

The red indicator should be there:

I thought the click was happening at the wrong position before I noticed that it’s actually the red indicator that’s not at the correct position.

Steps to reproduce: (app code and test code)

I created a sample app here. First run the server with npm run server then open Cypress with npm run cypress:open, the project contains a single spec file, comparing the three call signatures of the click command.

The third test exhibits the problem. Also notice how when clicking on the click operation on the left, the red indicator moves down after the click operation but doesn’t move when using click() without any parameter:

click-problem

Versions

Cypress: 3.6.0 OS: macOS Catalina Browser: Chrome 78

Issue Analytics

State:
Created 4 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

jennifer-shehanecommented, Nov 7, 2019

Just to make the issue a bit clearer - I made the ‘button’ 50px x 50px with a bg color (cause I wasn’t sure how large it was from the initial video)

The button should be clicked at 20, 1 which would be 20px to the right and 1px down, but it is clicked at the lower left corner (this happens regardless of the onclick handler’s existence.

The onclick handler demonstrates the second problem of the red indicator moving in the snapshot.

index.html

<!DOCTYPE html>
<html>
<body>
<button 
  style="width: 50px; border: none; background-color: cyan; height: 50px;"
  onclick="log.innerHTML='clicked!'">
    Click me!
</button>
<div id="log"></div>
</body>
</html>

spec.js

it('click at (20, 1) of button should show message', () => {
    cy.visit('index.html')
    cy.contains('Click me!').click(20, 1)
    cy.get('#log').should('contain', 'clicked!')
})

3.4.1

3.5.0

0reactions

cypress-bot[bot]commented, Nov 8, 2019

Released in 3.6.1.

Top Results From Across the Web

click - Cypress Documentation

Position. Specify a corner of the element to click. Click the top right corner of the button. cy.

jQuery.click() vs onClick - javascript - Stack Overflow

Basically registering an event in modern way is the unobtrusive way of handling events. Also to register more than one event listener for...

Full Text Bug Listing - Red Hat Bugzilla

Description of problem: I have RHEV-M setup with 200 VMs. When I sorted VMs by Host (reproduced with other fields as well) click...

NEW Hikvision iVMS 4200 Tutorial (Version 3) - YouTube

In this video #DAITECH takes a look at Hikvision's latest iVMS-4200 software update, Version 3. We demonstrate it's new features and show ...

.offset() | jQuery API Documentation

offset() method allows us to retrieve the current position of an element (specifically its border box, which excludes margins) relative to the document....