click() doesn't work on dropdown list item

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

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 https://github.com/cypress-io/cypress/issues/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]

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.