Skip to content
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

click() doesn't work on dropdown list item #1461

Closed
dcastil opened this issue Mar 14, 2018 · 9 comments
Closed

click() doesn't work on dropdown list item #1461

dcastil opened this issue Mar 14, 2018 · 9 comments
Labels
pkg/driver This is due to an issue in the packages/driver directory type: unexpected behavior User expected result, but got another

Comments

@dcastil
Copy link
Contributor

dcastil commented Mar 14, 2018

  • Operating System: Mac OS 10.13.3
  • Cypress Version: 2.1.0
  • Browser Version: Safari 11.0.3 and Chrome 65.0.3325.146

Is this a Feature or Bug?

Bug

Current behavior:

When I try to click on a specific list item in a dropdown of my app, Cypress finds it and says that it does click it. But it doesn't trigger the event of the list item, so the value of the list item gets pushed into an input. It is definitely not a problem of the app as the click works in Nightwatch. But I can't find out the reason why it isn't working in Cypress.

Desired behavior:

Value of the clicked list item should appear in input and the test below should pass, as it happens when I click the list item manually.

How to reproduce:

See test code below. It should pass, but fails instead.

Test code:

it('selects element', () => {
    cy.visit('https://app.liqid.de/investment-proposal/6PysBFc8AKr8J53jD1kkfY');
    cy.get('.liq_recap-header__right-data-button').click();
    cy
        .get('.liq_recap-change-dropdown__body > :nth-child(4) [data-name=risk_level]')
        .click()
        .find('li[data-value=10]')
        .click();
    cy
        .get('.liq_recap-change-dropdown__body > :nth-child(4) input[name=risk_level]')
        .should('have.attr', 'value', '10');
});

Additional Info (images, stack traces, etc)

when I let the test time out
screen shot 2018-03-14 at 18 19 53
when I click "10" in the dropdown manually while the test is still running
screen shot 2018-03-14 at 18 19 22

@jennifer-shehane
Copy link
Member

What event is your app's code listening to to update the input on 'click'?

@dcastil
Copy link
Contributor Author

dcastil commented Mar 14, 2018

@jennifer-shehane I just searched for the component and found out it is an onMouseDown event. Here ist the code if you're familiar with React.

I think it would be very important that Cypress also triggers the onMouseDown and onMouseUp events on a click, if it isn't already doing it.

@jennifer-shehane
Copy link
Member

It looks like we do trigger the "MouseDown" event, as I can see when I click on a 'click' command.

screen shot 2018-03-14 at 4 57 57 pm

But I also see you're doing some logic with onChange also. Have you tried putting a debugger in the applyValue function to see if that is being called and where the code is breaking? https://github.com/LIQIDTechnology/liqid-react-components/blob/v0.3.2/src/Select/Select/index.js#L264

@dcastil
Copy link
Contributor Author

dcastil commented Mar 15, 2018

Oh I've completely overseen that we're actually using onMouseEnter to select the value and onMouseDown is only used to push the currently selected value. Could it be that Cypress isn't triggering onMouseEnter? I couldn't test it unfortunately as we have some weird console-silencing configuration in that module and I didn't find out yet how to change that.

@dcastil
Copy link
Contributor Author

dcastil commented Mar 15, 2018

I solved the problem with adding trigger('mouseover'), so the code below makes the test pass again. Surprisingly, the test still fails when I try trigger('mouseenter'). I have to find out what is happening there.

it('selects element', () => {
    cy.visit('https://app.liqid.de/investment-proposal/6PysBFc8AKr8J53jD1kkfY');
    cy.get('.liq_recap-header__right-data-button').click();
    cy
        .get('.liq_recap-change-dropdown__body > :nth-child(4) [data-name=risk_level]')
        .click()
        .find('li[data-value=10]')
        .trigger('mouseover') // ← this line was added
        .click();
    cy
        .get('.liq_recap-change-dropdown__body > :nth-child(4) input[name=risk_level]')
        .should('have.attr', 'value', '10');
});

@jennifer-shehane Is there any reason why Cypress isn't triggering mouseover with the click() command by default? This could break tests and lead to unexpected behaviour when someone is writing tests for code written by others (as in my case), as normally a click can't happen without hovering the component first.

@jennifer-shehane
Copy link
Member

Likely because the spec technically defines a click event as a mousedown and mouseup over the same screen location. Perhaps it should be updated to account for the fact that the click was likely followed by a mouseover and mouseenter event. https://www.w3.org/TR/uievents/#event-type-click

The click code can be found here: https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cy/commands/actions/click.coffee#L13

Either that or wait for true native events #311

click: Occurs when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is: mousedown, mouseup, click. If multiple clicks occur at the same screen location, the sequence repeats with the detail attribute incrementing with each repetition.

@jennifer-shehane jennifer-shehane added type: bug pkg/driver This is due to an issue in the packages/driver directory stage: proposal 💡 No work has been done of this issue labels Mar 15, 2018
@dcastil
Copy link
Contributor Author

dcastil commented Mar 17, 2018

That makes sense. Thanks for the clarification! 👍

@dcastil dcastil closed this as completed Mar 17, 2018
@jennifer-shehane jennifer-shehane added type: unexpected behavior User expected result, but got another and removed stage: proposal 💡 No work has been done of this issue type: bug labels Mar 19, 2018
@shivaIMS
Copy link

shivaIMS commented Mar 23, 2020

Hello all I am trying to select list of each drop-down and try ti verify the graph for each selected dropdown. Anybody has solution for it?

For Example I have list something like : 1. Orders 2. Sales 3. Total Order 4. Summary 5. Account , So when I click on Orders I should be able to verify the graph and select next dropdown and so on. It will be helpful if someone helps me in writting the code to select each drop-down

@jennifer-shehane
Copy link
Member

@shivaIMS Try checking out our community chat, it can be helpful for debugging or answering questions on how to use Cypress.

@cypress-io cypress-io locked as resolved and limited conversation to collaborators Mar 23, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
pkg/driver This is due to an issue in the packages/driver directory type: unexpected behavior User expected result, but got another
Projects
None yet
Development

No branches or pull requests

3 participants