Comments (5)
What bundler tool are you using? From my experience I can say that you might want to configure your bundler to opt-in this feature.
Would be also nice to see your cypress dev server configuration
from cypress.
What bundler tool are you using? From my experience I can say that you might want to configure your bundler to opt-in this feature.
I'm using Vite 5 (which is needed to use Vue 3.4). Also using yarn rather than npm.
Would be also nice to see your cypress dev server configuration
import { defineConfig } from "cypress";
export default defineConfig({
env: {
redacted
},
viewportHeight: 1280,
viewportWidth: 1920,
chromeWebSecurity: false,
defaultCommandTimeout: 30000, // For timing out on cy.get etc.
responseTimeout: 180000, // For loading a page.
video: false,
videoCompression: false,
scrollBehavior: false,
screenshotOnRunFailure: true,
watchForFileChanges: false,
fixturesFolder: "tests/cypress/support/modules/fixtures",
e2e: {
setupNodeEvents(on, config) {
on("before:browser:launch", (browser = {}, launchOptions) => {
if (browser.name === "edge" && browser.isHeadless) {
const width = 2000;
const height = 2000;
console.info(
`Setting the browser window size to ${width} x ${height} because of Edge bug.`
);
launchOptions.args.push(`--window-size=${width},${height}`);
}
return launchOptions;
});
return Object.assign({}, config, {
screenshotsFolder: "tests/cypress/screenshots/e2e",
videosFolder: "tests/cypress/videos/e2e",
supportFile: "tests/cypress/support/index.js",
});
},
baseUrl: "redacted",
specPattern: [
"tests/cypress/e2e/users/*.cy.{js,jsx,ts,tsx}",
"tests/cypress/e2e/config/playgrounds/datasourcesPlayground.cy.{js,jsx,ts,tsx}",
"tests/cypress/e2e/config/playgrounds/joinsPlayground.cy.{js,jsx,ts,tsx}",
"tests/cypress/e2e/config/playgrounds/rulesPlayground.cy.{js,jsx,ts,tsx}",
"tests/cypress/e2e/data/accountLedger/*.cy.{js,jsx,ts,tsx}",
"tests/cypress/e2e/data/alerts/*.cy.{js,jsx,ts,tsx}",
"tests/cypress/e2e/data/contracts/*.cy.{js,jsx,ts,tsx}",
"tests/cypress/e2e/data/products/*.cy.{js,jsx,ts,tsx}",
"tests/cypress/e2e/config/datasources/*.cy.{js,jsx,ts,tsx}",
"tests/cypress/e2e/config/joins/*.cy.{js,jsx,ts,tsx}",
"tests/cypress/e2e/config/rules/*.cy.{js,jsx,ts,tsx}",
"tests/cypress/e2e/general/*.cy.{js,jsx,ts,tsx}",
"tests/cypress/e2e/reporting/*.cy.{js,jsx,ts,tsx}",
"tests/cypress/e2e/aws/*.cy.{js,jsx,ts,tsx}",
],
supportFile: "tests/cypress/support/index.js",
experimentalRunAllSpecs: true,
},
component: {
indexHtmlFile: "tests/cypress/support/component-index.html",
supportFile: "tests/cypress/support/component.js",
devServer: {
framework: "vue",
bundler: "vite",
},
specPattern: "tests/cypress/component/**/*.cy.{js,jsx,ts,tsx}",
screenshotsFolder: "tests/cypress/screenshots/component",
videosFolder: "tests/cypress/videos/component",
},
});
from cypress.
What bundler tool are you using? From my experience I can say that you might want to configure your bundler to opt-in this feature.
I'm using Vite 5 (which is needed to use Vue 3.4). Also using yarn rather than npm.
Would be also nice to see your cypress dev server configuration
import { defineConfig } from "cypress"; export default defineConfig({ env: { redacted }, viewportHeight: 1280, viewportWidth: 1920, chromeWebSecurity: false, defaultCommandTimeout: 30000, // For timing out on cy.get etc. responseTimeout: 180000, // For loading a page. video: false, videoCompression: false, scrollBehavior: false, screenshotOnRunFailure: true, watchForFileChanges: false, fixturesFolder: "tests/cypress/support/modules/fixtures", e2e: { setupNodeEvents(on, config) { on("before:browser:launch", (browser = {}, launchOptions) => { if (browser.name === "edge" && browser.isHeadless) { const width = 2000; const height = 2000; console.info( `Setting the browser window size to ${width} x ${height} because of Edge bug.` ); launchOptions.args.push(`--window-size=${width},${height}`); } return launchOptions; }); return Object.assign({}, config, { screenshotsFolder: "tests/cypress/screenshots/e2e", videosFolder: "tests/cypress/videos/e2e", supportFile: "tests/cypress/support/index.js", }); }, baseUrl: "redacted", specPattern: [ "tests/cypress/e2e/users/*.cy.{js,jsx,ts,tsx}", "tests/cypress/e2e/config/playgrounds/datasourcesPlayground.cy.{js,jsx,ts,tsx}", "tests/cypress/e2e/config/playgrounds/joinsPlayground.cy.{js,jsx,ts,tsx}", "tests/cypress/e2e/config/playgrounds/rulesPlayground.cy.{js,jsx,ts,tsx}", "tests/cypress/e2e/data/accountLedger/*.cy.{js,jsx,ts,tsx}", "tests/cypress/e2e/data/alerts/*.cy.{js,jsx,ts,tsx}", "tests/cypress/e2e/data/contracts/*.cy.{js,jsx,ts,tsx}", "tests/cypress/e2e/data/products/*.cy.{js,jsx,ts,tsx}", "tests/cypress/e2e/config/datasources/*.cy.{js,jsx,ts,tsx}", "tests/cypress/e2e/config/joins/*.cy.{js,jsx,ts,tsx}", "tests/cypress/e2e/config/rules/*.cy.{js,jsx,ts,tsx}", "tests/cypress/e2e/general/*.cy.{js,jsx,ts,tsx}", "tests/cypress/e2e/reporting/*.cy.{js,jsx,ts,tsx}", "tests/cypress/e2e/aws/*.cy.{js,jsx,ts,tsx}", ], supportFile: "tests/cypress/support/index.js", experimentalRunAllSpecs: true, }, component: { indexHtmlFile: "tests/cypress/support/component-index.html", supportFile: "tests/cypress/support/component.js", devServer: { framework: "vue", bundler: "vite", }, specPattern: "tests/cypress/component/**/*.cy.{js,jsx,ts,tsx}", screenshotsFolder: "tests/cypress/screenshots/component", videosFolder: "tests/cypress/videos/component", }, });
It appears like you your config is inferred from the one you use for your app bundling.
So your configuration should be basically there.
export default defineConfig({
plugins: [
vue({
script: {
defineModel: true
}
})
]
});
Try to follow the code snippet above. This might come in handy as well:
https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue
from cypress.
That works, thanks!
from cypress.
(Though should probably be available by default in a future release as it's a stable feature in Vue now)
from cypress.
Related Issues (20)
- selectFile errors on large files HOT 1
- Browser will freeze when sync request is intercepted (Tested in Cypress 10.11.0) HOT 1
- cy.document() does not return an HTMLDocument HOT 4
- Error: WebSocket connection closed (in cypress 13.10)
- ES modules Cannot be stubed
- Azure AD B2C Authentication not working when automated with Cypress HOT 1
- Assertions fail in after block, but not in a separate it block HOT 2
- Form submitted when pressing Enter in a button type "button"
- Remove support for older versions of Angular in relation to Component Testing
- Remove support for older versions of Next.js in relation to Component Testing
- Angular-cli "ng e2e" command use cypress @cypress/[email protected] but default test fail
- readFile command cannot read file with special symbols in name on Linux Debian - it says there is no such file
- Consider moving away from document.domain to adhere to better security practices
- Component Commands built into angular bundle causing missing "fs" module for Plugin.
- Missing browserCriClient in connectToNewSpec HOT 1
- Chaining .selectFile from document throws an error HOT 1
- Email address used when logging in with Github HOT 1
- Add configuration to customize or disable Content Security Policy HOT 3
- Support Chrome Devtools Protocol event listening
- Remove support for Node.js 16 and 21
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cypress.