search

vuejs / devtools-v6

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools-v6.vuejs.org/
MIT License
24.62k stars 4.15k forks source link

Add Cypress Support #1602

Open anthony-chaudhary opened 2 years ago

anthony-chaudhary commented 2 years ago

What problem does this feature solve?

Add Support to work smoothly with Cypress (34k stars)

The user experience goal is the dev tools work similarly to the normal context, but inside the cypress runner.

I do see https://github.com/gitpod-io/gitpod/issues/2715 https://github.com/vuejs/devtools/issues/353

But as far as I can tell 1) The playbook context has been implemented as a first class citizen? 2) The deeper links in those issues, that I was able to see, are to legacy code bases, archived repos, generally not active, or not solved. 3) The solution of opening it in another tab to get veux state is better then nothing but is not good

Overall I think there should be a clear process to get this working with Cypress. What I have so far is:

1) Manually load the package by going Extensions > Manage Extensions > Loadunpacked -> Browse to VueJS in Google\Chrome\User Data\Default\Extensions

...?

What does the proposed API look like?

If there is some clear guidance on this I missed please let's post it here so we at least know status of dev on this issue.

Akryum commented 2 years ago

vue-devtools 6.x supports iframes, but afaik Cypress doesn't have any API to integrate devtools and Chrome extensions.

pm-zr commented 2 years ago

@Akryum what about integrating with standalone devtools? the method in #353 above successfully connects to a standalone devtools, but being able to view and interact with components is inconsistent.

SI-IC commented 1 year ago

Hi people! So, what we have? The Vue official documentation recommends us to use Cypress to test our Vue components. But vue devtools is not working in cypress environment. The simple question - WHY? And how can we test and debug our components without devtools? Dear Vue developers! Please solve this problem!!! If this is a question of money, tell us how many will it cost? We need it!!!

Akryum commented 1 year ago

This might help integrate the extension into cypress directly: https://www.npmjs.com/package/cypress-browser-extension-plugin

NiklasBeierl commented 1 week ago

Might it be the case that vue-devtools will not detect iframes which are ready to inspected if window.top has a Vue app that doesn't want to be inspected?

I am getting:

Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

When clicking the vue-devtools extension icon in a cypress-controlled chromium and I suspect it is because cypress itself is a Vue app?

See more details here: https://github.com/vuejs/devtools-v6/discussions/2184