Cypress-тест не пройден для подтверждения равного DOM-заголовка - PullRequest
Новая
       18

Cypress-тест не пройден для подтверждения равного DOM-заголовка

1 голос
/ 14 февраля 2020

Работа над проектом, созданным с помощью @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;
        });
      }
    }
  }
};

Проблема в том, что когда приложение запускается, появляется миллисекунда sh, где заголовок страницы меняется с stackoverflow на 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> сейчас, но при запуске теста e2e с использованием Cypress, он просто не может найти правильный заголовок Переполнение стека , и тест не пройден. 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?

1 Ответ

0 голосов
/ 16 февраля 2020

Если вы тестируете с помощью 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>

Приложение. 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.

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

...