[Feature Request] Allow for an install of Vue.js Devtools #1742
Comments
|
React dev tools has a hook that enables you to point to the correct Vue isn't finding it because it's looking at Whatever it is, I don't think you need anything in Cypress core to facilitate this. You have native access to everything in Cypress so you just have to look at how the vue dev tools works and then connect whatever it is from your app to the extension. |
|
Ok, thanks. I'll ask over at vue-devtools - maybe you could leave this issue open for tracking until I resolve it? I will report in. |
|
Issue cross-linking - for the refs. |
jennifer-shehane
added
the
stage: awaiting external fix
|
This has been resolved. Add |
jennifer-shehane
removed
the
stage: awaiting external fix
|
Instead of adding this to your index.html you can do the whole thing from inside of Cypress itself (so that its separated out from your app code. For instance... you could automatically do this on every visit or on every page load... cy.visit('...', {
onBeforeLoad: (win) => {
const script = win.document.createElement('script')
script.src = '...'
win.document.body.appendChild(script)
}
})
// or ...
Cypress.on('window:before:load', (win) => {
// same thing here
})P.S. I haven't tried what I wrote above, but with the window:before:load hooks you can tap into your document before it loads and inject javascript or do whatever it is you want. You don't even need to insert the |
|
Thanks, I will look into this very soon and report back. It sounds like the right thing to do, however there would need to be a guarantee that the electron app from Vuetools is running before cypress enters the load loop. |
|
I believe Chromium guarantees that the extensions are loaded prior to content. |
This doesn't work, it seems |
|
@JoeSchr True, you should be able to inject it into the Cypress.on('window:before:load', (win) => {
const script = win.document.createElement('script')
script.src = '...'
win.document.head.appendChild(script)
})
// or...
cy.visit('...', {
onBeforeLoad: (win) => {
const script = win.document.createElement('script')
script.src = '...'
win.document.head.appendChild(script)
}
}) |
|
Thx, while this works regarding adding the script tag to head and is awesome because it doesn't block the site until the link is called, vue-devtools is still "waiting for connection" even though I see the script gets fetched in the network inspector. so far, for me, the only way to make vue-devtools connect is to put this into a layout component: export default defineComponent({
setup(props, ctx: SetupContext) {
...
}
head() {
return {
// inject vue-devtool connection
script:
process.env.NODE_ENV !== "production"
? [{ src: "http://localhost:8098" }] // vue-devtool
: [],
};
},
});Problem with this approach, it blocks until this script loads and is executed, so if vue-devtools is not running it "freezes" for a few seconds, which can quite add up if you run e.g. all tests at once |
Current behavior:
Vue tools is not active
I am running Cypress that is testing a site served by a live dev-server created with the Quasar-Framework. If I just visit the page as served in a normal browser that has VueJS Devtools installed, I can see a lot of information about vue state etc. It is invaluable for vuex etc. I installed the VueJS extension into the Cypress chrome browser, but it remains inactive.
Desired behavior:
I would also like to know exactly what the Vue state is while testing, because even though I can address it within a spec it would still be really nice to have.
Steps to reproduce:
start a development server at localhost:8080 with
$ quasar devnpm run cypress opena properly rigged Vue.spec.js test withconst getStore = () => cy.window().its('app.$store')Install the Vue Js Devtools as an extension in the Chrome browser started by cypress
https://github.com/vuejs/vue-devtools
See that the browser does not detect vue. :(
Versions
Cypress package version: 2.1.0
MacOS v10.12.6
Chrome 65
The text was updated successfully, but these errors were encountered: