Unable to snapshot focused elements

[artemi5c]

Hello there!

Issue We are trying to take snapshots of focused inputs, but Percy doesn't show the focus status.

Steps to reproduce Create a story with a focusable element. Focus element (either programmatically or with Cypress) Take a Percy snapshot. The snapshot shows an unfocused element.

Is there a way to take this sort of snapshot?

Thanks for your time! :)

[Robdel12]

Hey @artemi5c, thanks for the report! Would you be able to reach out to support via the intercom chat bubble or send an email to support@percy.io? I'd like to take a look at couple of your builds to see what's going on.

If you're using the storybook SDK (which this issue is opened on) and setting the focus via JS in the story, it should absolutely be captured in our browsers. The storybook SDK behaves differently from all our other SDKs though, so Cypress doesn't do the same thing & won't be able to capture the focus state. There are a few work arounds that can be done, which I can help with once I see a couple builds :)

[artemi5c]

Hello @Robdel12, thanks for the quick answer.

We use Vue.js with Storybook. Most of our snapshots are automatically taken using Jenkins integration, but we also take some manually using Cypress (cy.percySnapshot('')).

Here is the text-input story:

.add(‘focused’, () => ({ 
    template: `<AcTextInput v-model=“value” :focused=“true” />`, 
    data: () => ({ value: ‘’ }), 
  })) 

We focus the input programmatically.

We also tried using Cypress to mock click on the input but with no success (Cypress app showed the focus, but Percy didn’t)

Here are the versions we use

"@percy/cypress": "^2.3.0", 
"@percy/storybook": "^3.2.0", 

And a snippet of our Jenkins config file

dockerImage.inside(""" 
  --user root 
  -e PERCY_ENABLE=${takePercySnapshots? 1 : 0} 
  -e PERCY_PARALLEL_NONCE=${percyNonce} 
  -e PERCY_PARALLEL_TOTAL=-1 
  -e PERCY_TOKEN=${PERCY_TOKEN_ADS} 
  -e PERCY_TARGET_BRANCH=${env.CHANGE_BRANCH?: env.BRANCH_NAME} 
  -e PERCY_BRANCH=${env.BRANCH_NAME} 
  -v ${env.WORKSPACE}/build:/data/test/built/ 
""") { 
visualExitStatus = sh(script:"cd /data && npm run snapshot", returnStatus: true) 

Also, can you precise what you would need to see when you speak of the builds?

Thanks again for the support, Have a nice day.

[Robdel12]

Looks like this was taken care of in Percy support (and I believe the issue was with the Cypress SDK).

FWIW, anyone finding this issue from Google: If you're using the Storybook SDK, focused elements will be properly captured if your story calls .focus() on the element you want focused.