Question

正在处理使用@vue/cli 4.2.2和Vue CLI Electron Plugin Builder创建的项目。 Vue CLI使用HtmlWebpackPlugin在index.html目录中自动生成public。相关</title>页面的index.html具有<%= 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;
        });
      }
    }
  }
};

问题在于，应用启动时会出现一毫秒的闪烁，页面标题从 stackoverflow 变为 Stack Overflow 。为防止这种情况，我使用了如下的电子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>中现在没有任何窗口闪烁，但是当使用赛普拉斯运行e2e测试时，它只是找不到正确的标题 Stack Overflow 测试失败。 test.js

describe("My First Test", () => {
  it("ensures the correct title", () => {
    cy.visit('/').title().should('eq', 'Stack Overflow')
  })
});

赛普拉斯测试expected stackoverflow to equal Stack Overflow的结果。那么，百万美元的问题是，我如何获得赛普拉斯的测试合格证？

Answer 1

如果通过Vue的脚本test:e2e进行测试，则看起来测试目标是浏览器中的Vue应用程序，而不是电子应用程序。

当然，您可以根据此问题How can I bind the html content in vuejs（以及您的Electon启动程序的mod）在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，以获取一些可能对您有所帮助的信息。

赛普拉斯测试因断言等于DOM标题而失败

1 个答案: