Как настроить Nightwatch. js с Symfony и VueJS?

Question

Я использую Symfony 4 вместе с VueJS. В src/Controller у меня есть HomeController.php, что делает templates/home/index.html.twig. Внутри этого шаблона я вызываю приложение VueJS:

{% extends 'base.html.twig' %}

{% block title %}My App{% endblock %}

{% block stylesheets %}
    {{  encore_entry_link_tags('spa') }}
{% endblock %}

{% block body %}
  <div id="app">
  </div>
{% endblock %}

{% block javascripts %}
  {{  encore_entry_script_tags('spa') }}
{% endblock %}

В каталоге root у меня есть подкаталог assets:

- css
- js
- spa

Приложение VueJS живет внутри spa. Каталоги css и js содержат таблицы стилей и сценарии, используемые другими частями приложения Symfony (Admin).

Как настроить Nightwatch. js для запуска сквозных тестов?

Я создал это под spa:

- main.js
- App.vue
- components
- router
- store
- tests
  - e2e
    - nightwatch.conf.js
    - reports
    - specs

nightwatch.conf.js выглядит так:

module.exports = {
  src_folders: ['assets/spa/tests/e2e/specs'],
  output_folder: 'assets/spa/tests/e2e/reports',
  selenium: {
    start_process: true,
    server_path: require('selenium-server').path,
    host: '127.0.0.1',
    port: 4444,
    cli_args: {
      'WebDriver.chrome.driver': require('chromedriver').path
    }
  },
  test_settings: {
    chrome: {
      desiredCapabilities: {
        browserName: 'chrome'
      }
    }
  }
};

Насколько я понимаю, сначала я должен запустить сервер , Но так как шаблон Twig обслуживается Symfony, я должен начать:

symfony server:start

и затем запустить yarn test:e2e, где test:e2e - эта строка внутри package.json:

"test:e2e": "nightwatch --config assets/spa/tests/e2e/nightwatch.conf.js --env chrome"

Я настроил простой тест работоспособности внутри assets/spa/tests/e2e/specs/:

journeys.js

module.exports = {
  'sanity_test': function(browser) {
    browser
      .url('http://localhost:8000')
      .waitForElementVisible('div.body', 2000)
      .end();
  }
};

, но когда я запускаю yarn test:e2e, я получаю следующую ошибку :

TypeError: Ошибка при попытке создать HTTP-запрос для "/ wd / hub / session / 30561d2683d7c3c049fc1a993f7840e5 / element / [object Object] / display": путь запроса содержит неэкранированные символы

Answer 1

Кажется, это изменение:

test_settings: {
    chrome: {
      desiredCapabilities: {
        browserName: 'chrome',
        <strong>chromeOptions: {
          w3c: false
        }</strong>
      }
    }
  }

решило проблему, и тест сейчас проходит. Я чувствую себя немного глупо после того, как написал этот длинный вопрос и через несколько минут нашел решение.

Может быть, кто-то может добавить что-то ценное и дать более подробное объяснение или поделиться передовым опытом.