Запуск тестов Nightwatch E2E с помощью Headless Chrome и Vue CLI 3

Если вы используете виртуальную среду разработки, такую как Vagrant или Docker, или, возможно, используете удаленный сервер для CI, вы можете запускать тесты Nightwatch E2E в среде без выделенного графического интерфейса.

В этом случае вам нужно будет использовать Chrome в «безголовом» режиме. Однако, если вы используете плагин Nightwatch для Vue CLI 3, настройки по умолчанию будут для обычного Chrome, а не для безголового.

В этом кратком руководстве я покажу вам, как настроить сервер Ubuntu для безголового Chrome и как настроить плагин Vue CLI 3 Nightwatch для безголового режима.

Перейти к рабочая версия с использованием Vagrant.

*Примечание: эта статья изначально была опубликована здесь, в блоге разработчиков Vue.js 2019/07/16.

Настройка среды

На вашем сервере Ubuntu должны быть установлены Node, NPM, Vue CLI 3 и Chrome. Вы можете использовать следующий фрагмент в Vagrantfile или вручную запустить его из терминала.

предоставление.sh

apt-get update -y && \



cd /opt && \
wget  && \
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 && \



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 && \



apt install -y openjdk-11-jdk && \
apt-get install -y libdbusmenu-gtk3-4 libappindicator3-1 libgtk-3-0 libxss1 xdg-utils fonts-liberation && \
wget  -P /tmp/ && \
dpkg -i /tmp/google-chrome*.deb

Конфигурация плагина Vue CLI 3 Nightwatch

Настройки по умолчанию Vue CLI 3 предназначены для обычного Chrome, а не для безголового, поэтому нам нужно это изменить.

Чтобы Chrome работал в автономном режиме, вы можете просто передать некоторые флаги при загрузке из CLI. Если вы используете Nightwatch, вы можете добавить эти флаги как args к параметрам Chrome в конфигурации.

По умолчанию плагин Vue CLI 3 Nigthwatch не имеет файла конфигурации, поэтому вам нужно создать его в корне вашего проекта Vue:

$ touch nightwatch.json

ночные часы.json

{
  "test_settings": {
    "chrome": {
      "desiredCapabilities": {
        "chromeOptions": {
          "args": [
            "--headless",
            "--no-sandbox",
            "--disable-gpu"
          ]
        }
      }
    }
  }
}

Примечание: любые настройки, которые мы добавим сюда, будут объединены с конфигурация по умолчанию.