How to setup Nightwatch.js with Symfony and VueJS?

Question

I use Symfony 4 together with VueJS. In src/Controller I have HomeController.php which renders templates/home/index.html.twig. Inside this template I call the VueJS application:

{% 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 %}

In the root directory I have a subdirectory assets:

- css
- js
- spa

The VueJS application lives inside spa. The directories css and js contain stylesheets and scripts used by other parts of the Symfony app (Admin).

How do I setup Nightwatch.js to run end to end tests?

I created this under spa:

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

The nightwatch.conf.js looks like this:

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'
      }
    }
  }
};

As far as I understand first I should start the server. But since the Twig template is served by Symfony I should start:

symfony server:start

and then run yarn test:e2e where test:e2e is this line inside package.json:

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

I have set up a simple sanity test inside assets/spa/tests/e2e/specs/:

journeys.js

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

but when I run yarn test:e2e I get the following error:

TypeError: Error while trying to create HTTP request for "/wd/hub/session/30561d2683d7c3c049fc1a993f7840e5/element/[object Object]/displayed": Request path contains unescaped characters

score 0 · Answer 1 · answered Mar 03 '20 at 12:16

It seems this change:

test_settings: {
    chrome: {
      desiredCapabilities: {
        browserName: 'chrome',
        chromeOptions: {
          w3c: false
        }
      }
    }
  }

has solved the problem and the test is now passing. I feel little bit stupid after writing this long question and finding a solution after few minutes.

Maybe someone can add something valuable and give more detailed explanation or share best practices.

How to setup Nightwatch.js with Symfony and VueJS?

1 Answers1