英文:
How to get cypress-cucumber-preprocessor working with Quasar 2 (Vue 3) and Vite
问题
我已经使用 Quasar 2(Vue3)和 Cypress 12.9.0 设置了一个新项目。我没有使用 TypeScript。
Quasar @quasar/testing-e2e-cypress@beta
提供的默认 home.cy.js
测试正常工作。:-)
现在我想添加 @badeball/cypress-cucumber-preprocessor
插件,以便使用 Cucumber BDD 功能。
在 @badeball/cypress-cucumber-preprocessor
文档中有各种构建平台的示例,但没有针对 Vite 的示例。也许我对我需要什么有误解?
这是示例 cypress.config.js
,如果我使用 esbuild,我需要将其更改为使用 Vite。当然,这不会起作用,但提供了一个示例起点。
const { defineConfig } = require('cypress');
const { injectQuasarDevServerConfig } = require('@quasar/quasar-app-extension-testing-e2e-cypress/cct-dev-server');
const { addCucumberPreprocessorPlugin } = require('@badeball/cypress-cucumber-preprocessor')
// FIX: This is the esbuild version, not Vite
const { createBundler } = require('@bahmutov/cypress-esbuild-preprocessor');
const { createEsbuildPlugin } = require('@badeball/cypress-cucumber-preprocessor/esbuild');
module.exports = defineConfig({
fixturesFolder: 'test/cypress/fixtures',
screenshotsFolder: 'test/cypress/screenshots',
videosFolder: 'test/cypress/videos',
video: true,
e2e: {
async setupNodeEvents (on, config) {
// This is required for the preprocessor to be able to generate JSON reports after each run, and more,
await addCucumberPreprocessorPlugin(on, config);
on(
"file:preprocessor",
// FIX: This is the esbuild version, not Vite
createBundler({
plugins: [createEsbuildPlugin(config)],
})
);
return config;
},
baseUrl: 'http://localhost:9000/',
supportFile: 'test/cypress/support/e2e.js',
specPattern: 'test/cypress/e2e/**/*.feature'
}
});
有没有人在上述描述的 Quasar Vite 环境中设置过这个?感谢!Murray
英文:
I have set up a new project using Quasar 2 (Vue3) with Vite and Cypress 12.9.0. I am not using Typescript.
The default home.cy.js
test supplied by the Quasar @quasar/testing-e2e-cypress@beta
setup works correctly.
I now want to add the @badeball/cypress-cucumber-preprocessor
plugin so I have Cucumber BDD functionality.
In the @badeball/cypress-cucumber-preprocessor
docs there are examples for various build platforms but none for Vite. Perhaps I am misunderstanding what I need?
This is the example cypress.config.js
if I was using esbuild and I need to change that to use Vite. Of course this wont work, but is provided as an example starting point.
const { defineConfig } = require('cypress');
const { injectQuasarDevServerConfig } = require('@quasar/quasar-app-extension-testing-e2e-cypress/cct-dev-server');
const { addCucumberPreprocessorPlugin } = require('@badeball/cypress-cucumber-preprocessor')
// FIX: This is the esbuild version, not Vite
const { createBundler } = require('@bahmutov/cypress-esbuild-preprocessor');
const { createEsbuildPlugin } = require('@badeball/cypress-cucumber-preprocessor/esbuild');
module.exports = defineConfig({
fixturesFolder: 'test/cypress/fixtures',
screenshotsFolder: 'test/cypress/screenshots',
videosFolder: 'test/cypress/videos',
video: true,
e2e: {
async setupNodeEvents (on, config) {
// This is required for the preprocessor to be able to generate JSON reports after each run, and more,
await addCucumberPreprocessorPlugin(on, config);
on(
"file:preprocessor",
// FIX: This is the esbuild version, not Vite
createBundler({
plugins: [createEsbuildPlugin(config)],
})
);
return config;
},
baseUrl: 'http://localhost:9000/',
supportFile: 'test/cypress/support/e2e.js',
specPattern: 'test/cypress/e2e/**/*.feature'
}
});
Has anyone set this up with the Quasar Vite environment as described above?
Thanks! Murray
答案1
得分: 3
以下是您要翻译的内容:
从这里开始 为什么选择 Vite
> Vite 使用 esbuild 预先捆绑依赖项。esbuild 是用 Go 编写的,比基于 JavaScript 的捆绑工具预先捆绑依赖项快 10 到 100 倍。
我按照您描述的方式运行了示例 Quasar 应用程序,唯一的区别是删除了此导入的大括号:
// cypress.config.js
const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')
在安装 @badeball/cypress-cucumber-preprocessor
或 cypress-esbuild-preprocessor
包时,我不得不安装 esbuild
以解决错误。
将 home.cy.js
转换为一个特性:
// home.feature
Feature: quaser 示例主页
Scenario: 访问首页
When 我访问 Quasar 应用
Then 我应该看到一个搜索栏
// home.js
import { When, Then } from "@badeball/cypress-cucumber-preprocessor";
When("我访问 Quasar 应用", () => {
cy.visit("/");
});
Then("我应该看到一个搜索栏", () => {
cy.title().should("include", "Quasar");
})
这个运行正常
我对 Quasar-Cypress 插件不太确定,不确定它是否需要其他设置。但是“正常”的 Cucumber 在 e2e 模式下似乎可以正常工作。
在 @badeball/cypress-cucumber-preprocessor
上存在一个问题,他似乎说 Vite + 组件测试不可能。我还没有深入研究这个问题,因为您似乎只是针对 e2e 测试。
英文:
From here Why Vite
> Vite pre-bundles dependencies using esbuild. esbuild is written in Go and pre-bundles dependencies 10-100x faster than JavaScript-based bundlers.
I ran up the sample Quasar app as you describe, the only difference was removing the braces for this import:
// cypress.config.js
const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')
During install of either @badeball/cypress-cucumber-preprocessor
or cypress-esbuild-preprocessor
packages I had to install esbuild
to overcome an error.
Converted home.cy.js
to a feature:
// home.feature
Feature: quaser sample home
Scenario: visiting the frontpage
When I visit Quasar App
Then I should see a search bar
// home.js
import { When, Then } from "@badeball/cypress-cucumber-preprocessor";
When("I visit Quasar App", () => {
cy.visit("/");
});
Then("I should see a search bar", () => {
cy.title().should("include", "Quasar");
})
which ran ok
I'm not sure about the Quasar-Cypress add-on, if that entails some other setup. But "Normal" cucumber in e2e mode seems to work ok.
There is an issue on @badeball/cypress-cucumber-preprocessor
where he seems to say that Vite + component testing isn't possible. I haven't dived into that rabbit hole, as you seem to be aiming for e2e testing only.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论