javascript - Cypress 测试因断言等于 DOM 标题而失败

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。为了防止这种情况，我使用了 Electron page-title-updated像下面这样的钩子(Hook)以确保应用程序标题正确加载。

main.js

var win = new BrowserWindow({
  width: 800, 
  height: 600,
  title: 'Stack Overflow'
});

win.on('page-title-updated', (evt) => {
  evt.preventDefault();
});

效果很好，</title> 中没有窗口闪烁。现在但是运行时 e2e使用 Cypress 进行测试，它只是找不到正确的标题 Stack Overflow 并且测试失败。 test.js

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

Cypress测试结果expected stackoverflow to equal Stack Overflow 。所以，最重要的问题是，我如何获得 Cypress 测试通过？

Answer 1

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

当然，你可以按照这个问题在Vue应用程序中设置标题How can I bind the html content in vuejs (以及 Electon 启动的 mod)并且您的 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获取一些可能对您有帮助的信息。