Тест 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 = "stackru";
          return args;
        });
      }
    }
  }
};

Проблема в том, что при запуске приложения появляется миллисекундная вспышка, когда заголовок страницы меняется с stackru на stackru. Чтобы этого не произошло, я использовал электронныйpage-title-updated крючок, как показано ниже, чтобы убедиться, что заголовок приложения загружается правильно.

main.js

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

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

Он отлично работает, и в </title> сейчас, но когда работает e2eтестируйте с помощью Cypress, он просто не может найти правильный заголовок stackru и тест не проходит.test.js

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

Результат кипарисового теста expected stackru to equal stackru. Итак, вопрос на миллион долларов: как мне пройти тест Cypress?

Answer 1

Если вы тестируете через скрипт Vue test:e2e, похоже, что целью тестирования является приложение Vue в браузере, а не электронное приложение.

Конечно, вы можете установить заголовок в приложении Vue в соответствии с этим вопросом. Как я могу привязать html-контент в vuejs (а также ваш мод к запуску Electon), и ваше приложение 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="stackru"></Title>
    ...
  </div>
</template>

<script>
import Title from './components/Title.vue'

export default {
  name: 'App',
  components: {
    Title
  },
}
</script>

Теперь тест пройден, но вы все еще тестируете код Vue, а не как работающий в Electron.

См. Раздел " Тестирование приложений Electron.js с использованием Cypress - альфа-релиз" для получения некоторой информации, которая может вам помочь.