cypress: Cypress does not open color input on click

Current behavior:

Color palette does not appear when click input type="color" in Cypress test. However it appears when click manually in browser launched by Cypress.

Desired behavior:

Color palette appears when click at input type="color"

Test code to reproduce

https://github.com/mayenok/cypress-test-tiny

Versions

Cypress: 4.9.0 Ubuntu 18.04.4 64-bit Chromium 83.0.4103.61

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 1
Comments: 17 (5 by maintainers)

Most upvoted comments

Also work for Angular!

cy.get('input[type=color]')
    .invoke('val', '#ff0000')
    .trigger('input')

+10

nitsan on Jan 31, 2021

This workaround does not work for Vue, where the value gets overwritten as soon as Vue updates the view.

cy.get('input[type=color]')
    .invoke('val', '#ff0000')
    .trigger('change')

The addition of blur did not help in this case.

cy.get('input[type=color]')
    .click()
    .invoke('val', '#ff0000')
    .trigger('change')
    .blur()

The color is updated (visually), but gets overwritten as soon as Vue updates. This happens for example when someone clicks a (submit) button.

<input v-model="primaryColor"
       type="color">

TL;DR: What does work, is triggering an input Event for Vue.

cy.get('input[type=color]')
    .invoke('val', '#ff0000')
    .trigger('input')

+10

EtienneBruines on Jan 28, 2021

Thanks for help! This works:

cy.get('input[type=color]')
    .invoke('val', '#ff0000')
    .trigger('change')

P.S. and thanks for the great framework ❤️

tayateo on Jul 2, 2020

Yeah it is a native browser dialog similar to file opener dialog. Your test can simply set the desired color value as shown in

https://www.cypress.io/blog/2020/03/17/how-to-test-an-application-that-changes-css-variable/

Sent from my iPhone

On Jun 26, 2020, at 07:00, Jennifer Shehane notifications@github.com wrote:

I imagine this is due to our not issuing a native click event, and instead simulating events within Cypress. #311

@mayenok What is it that this is blocking your test from testing?

Reproducible example

index.html
<html> <body> </body> </html> spec.js
it(‘opens color palette’, () => { cy.visit(‘index.html’) .get(‘input’).click() }) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

bahmutov on Jun 26, 2020

Only this one worked for Nextjs, thanks @EtienneBruines

cy.get('input[type=color]')
    .invoke('val', '#ff0000')
    .trigger('input')

Note that i needed to change the event handler that triggers state update to be onInput instead of onChange

<input
  type='color'
  value={color}
  onInput={e => setColor(e.currentTarget.value)}
/>

waelhasan on Nov 9, 2021