Feature request: get css pseudo :hover, :active :focus rules

[FanilZarip]

Feature Description Hi! Provide a check and get changed css color or etc rules on element hover

Problem I have css rules before hover .button[data-v-14f27f51] { background-color: var(--14f27f51-backgroundColor); padding: 10px 30px; border: none; color: var(--14f27f51-color); cursor: pointer; }

after hovering there are additional rules

.button[data-v-14f27f51]:hover { filter: brightness(1.2); }

Expected behaviour after await wrapper.trigger("mouseover") or new await wrapper.trigger("hover") Getting access to css rules on hover, focus or active

.button[data-v-14f27f51]:hover

Alternatives What are the alternative solutions? Please describe what else you have considered?

[cexbrayat]

Hi @FanilZarip

Can you provide us a small repro online using https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts to show us what you are trying to test and how it is failing?

It only takes a few minutes, and we'll be able to take a look

[FanilZarip]

Hi @FanilZarip

Can you provide us a small repro online using https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts to show us what you are trying to test and how it is failing?

It only takes a few minutes, and we'll be able to take a look

Hi! I simplified HelloWorld and also added alias to vite config for v-bind css rules

I add hover to '.test' class. And expect that style color will be changed on hover. style="--e17ea971-hoverColor: blue;" should be something like style="--e17ea971-hoverColor: darkgreen;" Maybe it can be resolved with anoter way?

https://stackblitz.com/edit/github-cb45tg?file=src%2Fcomponents%2FHelloWorld.vue,src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts,vitest.config.ts,src%2FApp.vue,vite.config.ts

[FanilZarip]

Hi @FanilZarip Can you provide us a small repro online using https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts to show us what you are trying to test and how it is failing? It only takes a few minutes, and we'll be able to take a look

Hi! I simplified HelloWorld and also added alias to vite config for v-bind css rules

I add hover to '.test' class. And expect that style color will be changed on hover. style="--e17ea971-hoverColor: blue;" should be something like style="--e17ea971-hoverColor: darkgreen;" Maybe it can be resolved with anoter way?

https://stackblitz.com/edit/github-cb45tg?file=src%2Fcomponents%2FHelloWorld.vue,src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts,vitest.config.ts,src%2FApp.vue,vite.config.ts

Hi!

I've added how can get hover styles at HelloWorld.vue file. But I don't know how to use it with vue-test-utils. Or maybe you can take screenshots of the components for visual comparison?

See the function showCssRules

https://stackblitz.com/edit/github-cb45tg?file=src%2Fcomponents%2FHelloWorld.vue,src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts,vitest.config.ts,src%2FApp.vue,src%2Fcomponents%2FTheWelcome.vue

[cexbrayat]

There are several issues with jsdom and nwsapi around this: I'm not even sure this is possible at the moment.

I would strongly suggest not trying to test this in unit tests, and use end-to-end tests (with Cypress, Playwright, Nightwatch...). With these tools, you can do a visual comparison (I use Playwright in my projects and it is built-in https://playwright.dev/docs/test-snapshots).

Anyway I don't think Vue Test Utils can help in these scenarios, so I'll close.