Cypress 测试因断言等于 DOM 标题而失败
Cypress test fails for asserting equal to DOM title
正在处理使用 @vue/cli 4.2.2
和 Vue CLI Electron Plugin Builder. Vue CLI uses the HtmlWebpackPlugin 创建的项目,该项目会自动在 public
目录中生成 index.html
。相关 index.html
页面的 </title>
具有 <%= htmlWebpackPlugin.options.title %>
语法,可自动从 vue.config.js
文件中检测页面标题。
vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
chainWebpackRendererProcess: config => {
config.plugin("html").tap(args => {
args[0].title = "Stack Overflow";
return args;
});
}
}
}
};
问题是当应用程序启动时,页面标题从 Whosebug 变为 Stack Overflow 会出现毫秒级闪烁。为了防止这种情况,我使用了 Electron page-title-updated
挂钩,如下所示,以确保正确加载应用程序标题。
main.js
var win = new BrowserWindow({
width: 800,
height: 600,
title: 'Stack Overflow'
});
win.on('page-title-updated', (evt) => {
evt.preventDefault();
});
效果很好,现在 </title>
中没有 window 闪烁,但是当使用 Cypress 运行 e2e
测试时,它就是找不到正确的标题 Stack Overflow 并且测试失败。
test.js
describe("My First Test", () => {
it("ensures the correct title", () => {
cy.visit('/').title().should('eq', 'Stack Overflow')
})
});
赛普拉斯测试结果expected Whosebug to equal Stack Overflow
。那么,百万美元的问题是,我如何获得 Cypress 测试通过?
如果您通过 Vue 的脚本进行测试 test:e2e
,那么测试目标似乎是浏览器中的 Vue 应用程序,而不是电子应用程序。
当然,您可以根据这个问题 How can I bind the html content in vuejs(以及您 mod 到 Electon 启动)在 Vue 应用程序中设置标题,您的 Electron 应用程序看起来仍然正常。
Title.vue
<script>
export default {
name: 'vue-title',
props: ['title'],
watch: {
title: {
immediate: true,
handler() {
document.title = this.title;
}
}
},
render () {
return null;
},
}
</script>
App.vue
<template>
<div id="app">
<Title title="Stack Overflow"></Title>
...
</div>
</template>
<script>
import Title from './components/Title.vue'
export default {
name: 'App',
components: {
Title
},
}
</script>
现在测试通过了,但你仍然只是在测试 Vue 代码,而不是像 运行 在 Electron 中那样。
有关可能对您有帮助的信息,请参阅 Testing Electron.js applications using Cypress - alpha release。
正在处理使用 @vue/cli 4.2.2
和 Vue CLI Electron Plugin Builder. Vue CLI uses the HtmlWebpackPlugin 创建的项目,该项目会自动在 public
目录中生成 index.html
。相关 index.html
页面的 </title>
具有 <%= htmlWebpackPlugin.options.title %>
语法,可自动从 vue.config.js
文件中检测页面标题。
vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
chainWebpackRendererProcess: config => {
config.plugin("html").tap(args => {
args[0].title = "Stack Overflow";
return args;
});
}
}
}
};
问题是当应用程序启动时,页面标题从 Whosebug 变为 Stack Overflow 会出现毫秒级闪烁。为了防止这种情况,我使用了 Electron page-title-updated
挂钩,如下所示,以确保正确加载应用程序标题。
main.js
var win = new BrowserWindow({
width: 800,
height: 600,
title: 'Stack Overflow'
});
win.on('page-title-updated', (evt) => {
evt.preventDefault();
});
效果很好,现在 </title>
中没有 window 闪烁,但是当使用 Cypress 运行 e2e
测试时,它就是找不到正确的标题 Stack Overflow 并且测试失败。
test.js
describe("My First Test", () => {
it("ensures the correct title", () => {
cy.visit('/').title().should('eq', 'Stack Overflow')
})
});
赛普拉斯测试结果expected Whosebug to equal Stack Overflow
。那么,百万美元的问题是,我如何获得 Cypress 测试通过?
如果您通过 Vue 的脚本进行测试 test:e2e
,那么测试目标似乎是浏览器中的 Vue 应用程序,而不是电子应用程序。
当然,您可以根据这个问题 How can I bind the html content in vuejs(以及您 mod 到 Electon 启动)在 Vue 应用程序中设置标题,您的 Electron 应用程序看起来仍然正常。
Title.vue
<script>
export default {
name: 'vue-title',
props: ['title'],
watch: {
title: {
immediate: true,
handler() {
document.title = this.title;
}
}
},
render () {
return null;
},
}
</script>
App.vue
<template>
<div id="app">
<Title title="Stack Overflow"></Title>
...
</div>
</template>
<script>
import Title from './components/Title.vue'
export default {
name: 'App',
components: {
Title
},
}
</script>
现在测试通过了,但你仍然只是在测试 Vue 代码,而不是像 运行 在 Electron 中那样。
有关可能对您有帮助的信息,请参阅 Testing Electron.js applications using Cypress - alpha release。