如何使用Symfony和VueJS设置Nightwatch.js？

我将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 %}

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

据我所知，首先我应该启动服务器。但由于小枝模板由Symfony提供，我应该开始：

symfony server:start

然后运行

纱线测试：e2e

，其中

测试：e2e

是

包内的这一行。json

：

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

我在

资产/spa/tests/e2e/specs/

中设置了一个简单的健全性测试：

journes.js

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

但是当我运行

纱线测试：e2e

时，我得到以下错误：

TypeError:尝试为创建HTTP请求时出错 “/wd/hub/session/30561d2683d7c3c049fc1a993f7840e5/element/[object 对象]/displayed”：请求路径包含未转义字符

这种变化似乎是：

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

测试设置：{
铬：{
所需能力：{
browserName:“chrome”，
色度选项：{
w3c：错误
}
}
}
}

解决了问题，现在测试通过了。写了这么长的问题，几分钟后就找到了答案，我觉得自己有点傻

也许有人可以添加一些有价值的东西，并给出更详细的解释或分享最佳实践

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