click() doesn't work on dropdown list item

[dcastil]

• 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

when I click "10" in the dropdown manually while the test is still running

[jennifer-shehane]

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

[dcastil]

@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]

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

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]

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]

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]

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.

[dcastil]

That makes sense. Thanks for the clarification! 👍

[shivaIMS]

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]

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