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

Posted 2023-02-22

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

【英文标题】：Cypress test fails for asserting equal to DOM title

【发布时间】：2020-05-30 08:09:12

【问题描述】：

处理使用@vue/cli 4.2.2 和Vue CLI Electron Plugin Builder 创建的项目。 Vue CLI 使用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;
        );
      
    
  
;

问题在于，当应用启动时，页面标题从 *** 变为 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> 中没有窗口闪烁，但是当使用 Cypress 运行 e2e 测试时，它只是找不到正确的标题 Stack Overflow 并且测试失败。 test.js

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

Cypress 测试结果expected *** to equal Stack Overflow。那么，百万美元的问题是，我如何获得赛普拉斯测试通过？

【参考方案1】：

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

当然，您可以根据这个问题How can I bind the html content in vuejs（以及您的 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 了解一些可能对您有所帮助的信息。