Быстрый старт: начало работы с безголовым Chrome в Node.js
Часто в ходе нашей работы мы сталкиваемся с необходимостью снова и снова повторять действия пользователя, чтобы убедиться, что по мере внесения изменений на наш сайт ничего не сломалось. Для систематического и удобного решения этой задачи критически важными являются библиотеки, позволяющие создавать такие тесты. Познакомьтесь с безголовыми браузерами! Это инструменты командной строки, предоставляющие возможность программно создавать сценарии взаимодействия пользователя на сайте с последующей фиксацией их результатов для использования в тестах.
Многие из нас годами пользуются PhantomJS, CasperJS и другими инструментами. Но, как часто бывает с любовью, наши сердца могут быть завещаны другому. Начиная с Chrome 59 (60 для пользователей Windows), Chrome поставляется с собственным безголовым браузером. И хотя в настоящее время он не имеет поддержки для Selenium, он использует Chromium и движок Blink, то есть имитирует актуальный пользовательский интерфейс в Chrome.
Как всегда, код этой статьи можно найти в репозитории GitHub.
Запуск безголового Chrome из командной строки
На Linux всё ещё проще:
Вы также можете взаимодействовать с запрашиваемой страницей, например, для вывода document.body.innerHTML в stdout:
Если вас интересно большее количество возможностей, полный список параметров можно найти здесь.
Запуск безголового Chrome в Node.js
Однако данная статья не о запуске безголового Chrome в командной строке, а об его запуске в Node.js. Для этого нам понадобятся следующие модули:
Затем мы можем настроить нашу среду. Предполагается, что на вашем компьютере установлены Node.js и npm. Если это не так, ознакомьтесь с нашим учебным пособием.
После этого мы хотим создать сессию безголового Chrome. Начнем с создания файла index.js в нашей папке проекта:
Далее нам нужно выявить области ( domains), которые нам нужны для нашего тестирования:
Наиболее важный здесь объект Page : мы будем использовать его для доступа к содержимому пользовательского интерфейса. С его помощью мы укажем, куда мы переходим, с какими элементами взаимодействуем, где мы запускаем наши скрипты.
Изучение страницы
Идем дальше: делаем скриншоты
Запустите скрипт с помощью node index.js и вы получите примерно такой результат:
Вывод
Если вы пишете автоматические тесты, вы должны начать использовать безголовый Chrome. Хотя он по-прежнему не полностью интегрирован с такими инструментами, как Selenium, преимущество имитации движка рендеринга Chrome не следует недооценивать. Это лучший способ полностью воссоздать пользовательский опыт.
Я покину вас, оставив список для дальнейшего чтения:
Настройка системы WEB — тестирования на основе headless chromium-browser, chromedriver, nightwatch и node.js на Ubuntu
Предисловие
Привет, Хабр! Данная задача возникла у меня с проблемой, которая заключалась в создании робота для авторизации в Instagram, который бы делал за меня лайки. Всю задачу не напишу, напишу только часть реализации в виде настройки необходимого инструментария на удаленном сервере.
WEB — тестирование — это объемная и неоднозначная сфера, которая может заключаться в решении задач не только в плане тестирования WEB — приложений, но и, к примеру, в плане построения парсеров, роботов IoT и ботов работы с социальными сетями и все это используя только JavaScript!
Возможно, что вам не нравится словосочетание «тестирование», возможно, отчасти, из-за того, что это словосочетание заключает в себе более интересные вещи, которые, к примеру, позволят нам написать бота, способного авторизироваться в Instagram, Facebook и совершать там ряд действий от нашего лица и в одно и то же время нудно заниматься наблюдением, как выполняется наш фронтенд, но тестирование имеет смысл и уже стандартизировано сообществом W3C и продолжает развиваться.
Описание задачи в двух словах
Какую задачу мы ставим, чтобы решить при помощи тестирования? Всего-то нужно, чтобы какая-то программа открывала браузер и там автоматически кликала ссылки, вбивала тексты и показывала, что получится или возвращала параметр результата, который нам нужен. И все это нужно сделать на Linux — дистрибутиве Ubuntu 16.04, у которого нет GUI, т.е. у нас только консоль и запустить привычный браузер, как на полноценном компьютере не получится.
Что нужно для решения тестирования без GUI?
Все, что нужно для современного, «монопольного» тестирования на JavaScript:
Установка на сервер
Напишем шаги для последовательной установки всех компонентов для тестирования.
1). Установка cromium-browser. Перед установкой chromium-browser надо будет установить все необходимые для него зависимости, поэтому надо будет выполнить ряд действий.
Устанавливаем зависимости:
Если у нас были первые попытки установки, но помещали отсутствие зависимостей, то будет хорошо, если удалить загруженные файлы в /var/cache/apt/archives запуском команды:
Теперь устанавливаем сам cromium-browser:
2). Установка nodejs. Как установить Node.js и все методы установки подробно описано тут.
Один из самых простых методов установки:
Есть вероятность, что данным методом установится старая стабильная версия v4.2.6 из репозитория Ubuntu, под которым этот пример тестирования не проверен. Для стабильной работы оптимально, если установить версию 7 или выше методом PPA или NVM
Также потребуется и менеджер пакетов, посредством которого надо будет установить chromedriver и nightwatch :
Они нужны будут нам обработать тесты на JavaScript из Node.js.
3). Установка chromedriver. Этот драйвер выполняет роль WebDriver’а, предоставляющего API, к примеру, чтобы иметь возможность кликать на ссылки и вбивать тексты в текстовые поля и формы, для этого мы и будем использовать Chromedriver. Для установки chromedriver выполняем команду:
4). Установка nightwatch. Nightwatch.js — это библиотека для написания и запуска автотестов на JavaScript:
Схема работы тестирования
Коротко вся схема выглядит таким образом, что тесты на Nightwatch.js отправляют запросы на Chromedriver, а Chromedriver обращается к Chrome Browser для исполнения тестов(заполнение полей форм и нажатие на ссылки):
Настройка и запуск первого теста
Конфигурационный файл Nightwatch.js умолчанию находится в папке node_modules/nightwatch/bin и настройки берутся по умолчанию оттуда и для того, чтобы задать наши пользовательские настройки для Nightwatch.js нужно создать файл nightwatch.json в корне проекта и прописать туда всё необходимое, чтобы Chromedriver использовался напрямую (без Selenium и других сторонних вещей) и Chromium запускался в «headless» режиме:
Нужно обратить внимание на строку с globals.js. Внутри этого файла можно задать глобальный контекст для всех тестов. Пропишем туда, чтобы Chromedriver стартовал перед запуском всех тестов и прибивался в конце:
Теперь необходимо написать любой тест для проверки работоспособности системы тестирования. К примеру, нужно открыть google.com, поискать что-нибудь и проверить результаты поиска. Конечно, Nightwatch.js API предоставляет ещё кучу всяких методов для всевозможных проверок, но для начала нам хватит:
Запускаем через консоль по команде:
Замечание. Во первых, если Node.js установлен через nvm, то надо активировать сессию через команду:
во вторых, для запуска теста необходимо создать в корне проекта package.json с данными проекта, а в виде запускаемого фала надо указать google.js через команду:
Далее уже выполняем команду запуска нашего теста:
Результатом выше изложенного кода в файлах будет результат в консоли:
Т.е., мы заходим на главную сайта Google, вбиваем в поиск словосочетание «Блог WebSofter!» и в итоге сравнивается адрес нашего блога на наличие в определенных тегах на странице результата поиска.
Скачать рабочий пример из этой статьи можно по ссылке.
Заключение
Первоначально Nightwatch.js был ориентирован на работу с Selenium. Но сегодня она умеет работать с chromedriver напрямую и необходимость в Selenium тем более в PhantomJS отпадает, хотя есть возможность с ними интегрировать.
Осторожно! Безголовый режим Chrome доступен на Mac и Linux в v59. Поддержка Windows входит в Chrome v60. Чтобы проверить, какая версия Chrome у вас есть, откройте
Безголовый Chrome поставляется в версии Chrome 59. Это способ запуска браузера Chrome в безголовой среде, т.е. в консоли без GUI. Подобным образом работал PhantomJS. Chrome привносит в командную строку все современные функции веб-платформы, предоставляемые Chromium и движком Blink.
Почему это полезно?
Безголовый браузер — отличный инструмент для автоматического тестирования и серверных сред, где вам не нужна видимая оболочка пользовательского интерфейса. Например, вы можете выполнить некоторые тесты на реальной веб-странице, создать PDF-файл или просто проверить, как браузер отображает URL-адрес. Дополнительно можно узнать по ссылке
phith0n / chrome_install_headless.sh
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
This comment has been minimized.
Copy link Quote reply
jilan-meghaz commented Mar 4, 2021
Why do we need xvfb, I’m trying to install headless chrome in ubuntu docker image. First time I tried it was complaining xvfb is not found. Is it mandatory to run headless chrome?
This comment has been minimized.
Copy link Quote reply
BeanBagKing commented Mar 19, 2021
I had numerous other packages to install. The completely list for me was:
fonts-liberation libatk-bridge2.0-0 libatk1.0-0 libatspi2.0-0 libcairo2 libcups2 libgbm1 libgdk-pixbuf2.0-0 libgtk-3-0 libnspr4 libnss3 libpango-1.0-0 libxcomposite1 libxdamage1 libxfixes3 libxkbcommon0 libxrandr2 libxshmfence1 xdg-utils
Also line 3 (xvfb start) returned an error: sh: 0: Can’t open /etc/init.d/xvfb
didn’t seem to make a difference though.
This was used to install chrome on a headless server to capture screenshots with Rumble on Ubuntu 20.04, for anyone else looking for the same thing.
This comment has been minimized.
Copy link Quote reply
phith0n commented Mar 27, 2021
Why do we need xvfb, I’m trying to install headless chrome in ubuntu docker image. First time I tried it was complaining xvfb is not found. Is it mandatory to run headless chrome?
Hi, I suggest trying https://github.com/browserless/chrome for Docker based thing, the gist is very old, not enough to meet your requirements, maybe.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Ubuntu 16.04 Server Install headless Google Chrome
Update: added java code running Chrome in headless mode.
You can see these videos on this topic examples here:
Problem
If you want to run headless test in Ubuntu 16.04 you can do this by installing latest available version of Chrome. Then all you need to do is to run the browser with good settings.
Solution Install Google Chrome on Ubuntu 16.04 GUI
Installation is straightforward and can be done with several commands:
Solution Install Google Chrome on Ubuntu 16.04 Quick
If you you just want quick chrome installation you can do it by:
Solution Install Google Chrome on Ubuntu 16.04 no GUI
Installation is straightforward and can be done with several commands:
This is going to install dependencies required for chrome to be installed.
In case of error related to unmet dependencies you can do:
As last option you can try with:
and then to try to installed it again.
Other optional dependencies :
More info about chrome installation
If you like to have script which is preparing and installing all required libraries you can check here:
Test installation version
Verify the version and is it install by
If you want to test work in headless mode you can do:
and check the output picture
or simply by checking for running process:
If you want to print PDF or take screenshot in headless mode:
Note: in some cases you may need to run:
Execute headless test with Java, Chrome and Selenium
Simple test with java 8, Selenium 3.5.3 and ChromeDriver to run chrome in headless mode:
Execute headless test with Groovy, Chrome and Selenium
This is simple groovy code which is doing headless test on Ubuntu Server using Selenium 3.5.3 and ChromeDriver. In order to use it you need to download web driver by:
Next code open Google Chrome in headless mode on Ubuntu Server. Open page google.com and print the title. Then search for Softhints and print the title.
the result of the execution is:
Install groovy and Java
If you want to test this code on your server you can install Java and Groovy by:
Groovy Version: 2.4.13 JVM: 1.8.0_151 Vendor: Oracle Corporation OS: Linux
How to Install Chromium on Ubuntu and CentOS?
Geekflare is supported by our audience. We may earn affiliate commissions from buying links on this site.
A step-by-step guide to install Headless Chromium on Ubuntu and CentOS.
What is Headless Chrome?
Headless Chrome is like running a chrome browser without UI (browser) i.e., it is running in a headless environment, which is very useful for running automated tests.
So, what does headless Chrome unlock for us?
One of the most exciting things is the ability to test the latest and greatest web platform features like ES6 modules, service workers, and streams. With headless chrome, you can write apps and test those apps with up-to-date rendering. The other thing that it unlocks is these awesome functionalities like network throttling, device emulation, and code coverage.
With headless chrome, you can perform tests without even writing a line of code, isn’t that cool!
You can just execute them through the command line. Below are some of the popularly used flags.
Note – this is different from the Chromium browser.
Chromium Installation on Ubuntu
Step 1: Update Ubuntu
In the beginning, update the packages in Ubuntu.
Step 2: Install Dependencies
Install these dependencies which are required for the installation.
There might be cases where few dependencies would be missing to install chrome. So, run the command below, it will install all the missing dependencies required to install chromium.
Step 3: Download Chrome
Download the google chrome stable package for the Ubuntu system.
Step 4: Install Chrome
Install the stable package.
Step 5: Check Chrome Version
To confirm the installation has finished successfully, check the Google Chrome version.
Optional: Run Chrome Headless
Let me show you an example of running chrome in headless mode.
I will run chrome in headless mode, and all the content of https://gf.dev/ will be saved as a pdf file.
You can see a file output.pdf
Next, I will show you how to do the same setup in the CentOS system.
Chromium Installation on CentOS
Step 1: Update CentOS
Update the CentOS system with the below command.
Step 2: Create Chrome Repository
Add google chrome repository to the system. Create a file google-chrome.repo inside /etc/yum.repos.d/ and add the details below.
Step 3: Install Chrome
Run the yum command below to install the google chrome on the CentOS system.
Step 4: Check Chrome Version
To confirm the installation has finished successfully, check the google chrome version.
Optional: Run Chrome Headless
Let me show you an example of running chrome in headless mode on CentOS.
I will take the example of capturing a screenshot. This command below will run chrome in headless mode, and all the content of https://www.chromestatus.com/ will be saved as a pdf file.
The output.pdf file got created which has all the content of https://www.chromestatus.com/
That was all about how to install Chrome on Ubuntu & CentOS and run it in the headless mode.