[Feature Request] Allow for an install of Vue.js Devtools

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 dev npm run cypress opena properly rigged Vue.spec.js test with const 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

[brian-mann]

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 <script> you could just implement exactly what the script itself does.

[nothingismagick]

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.