Если вы используете виртуальную среду разработки, такую как Vagrant или Docker , или, возможно, используете удаленный сервер для CI, вы можете запустить свои тесты Nightwatch E2E в среде без выделенного графического интерфейса.
В этом случае вам понадобится использовать Chrome в режиме «без головы»; однако, если вы используете плагин Nightwatch для Vue CLI 3, настройки по умолчанию будут для обычного Chrome, а не без заголовка.
Вам также может понравиться:
В этом кратком руководстве я покажу вам, как настроить сервер Ubuntu для безголового Chrome и как настроить плагин Vue CLI 3 Nightwatch для безголового режима.
Настройка среды
На вашем сервере Ubuntu должны быть установлены Node, NPM, Vue CLI 3 и Chrome. Вы можете использовать следующий фрагмент в Vagrantfile или запустить его вручную из терминала.
Provision.sh
JSON
xxxxxxxxxx
1
apt - получить обновление - y && \## Install Node and NPM cd /opt && \ wget https://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-x64.tar.xz && \ tar xf node-v10.15.3-linux-x64.tar.xz && \ ln -s -f /opt/node-v10.15.3-linux-x64/bin/node /usr/local/bin/node && \ ln -s -f /opt/node-v10.15.3-linux-x64/bin/node-waf /usr/local/bin/node-waf && \ ln -s -f /opt/node-v10.15.3-linux-x64/bin/npm /usr/local/bin/npm && \ ## Install Vue CLI 3 npm install -g @vue/cli@3.5.0 && \ echo "export PATH=\"$PATH:/opt/node-v10.15.3-linux-x64/bin\"" >> /home/vagrant/.bashrc && \ source /home/vagrant/.bashrc && \ ## Install Chrome apt install -y openjdk-11-jdk && \ apt-get install -y libdbusmenu-gtk3-4 libappindicator3-1 libgtk-3-0 libxss1 xdg-utils fonts-liberation && \ wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb -P /tmp/ && \ dpkg -i /tmp/google-chrome*.deb
Vue CLI 3 Nightwatch Plugin Config
The default settings of Vue CLI 3 are for regular Chrome, not headless, so we’ll need to change that.
To make Chrome run in headless mode you can simply pass some flags when you boot it from the CLI. If you’re using Nightwatch you can add these flags as args to the Chrome options in the config.
By default, the Vue CLI 3 Nightwatch plugin doesn’t have a config file, so you’ll need to create one in the root of your Vue project:
$ touch nightwatch.json
Nightwatch.json
x
{ "test_settings": { "chrome": { "desiredCapabilities": { "chromeOptions":
{ "args": [ "--headless", "--no-sandbox", "--disable-gpu" ] } } } } }
Note: any settings we add here will be merged with the default config.
Running Tests
If you followed the above tests, your set up is now complete. From the server you’ve installed this on, run:
$ npm run test:e2e
Fingers crossed you’ll see some green ticks!