Un vendredi sur deux

Chrome HeadLess

Présentation

Après avoir regardé CasperJS & CasperJS - Jour 2, j’ai échangé avec un collègue sur PhantomJS qui est utilisé par CasperJS. Quelques jours plus tard, celui-ci m’envoyait un mail au titre évocateur : “Phantom JS is Dead”. Le mail contenait un lien vers l’annonce de la sortie imminente du mode HeadLess sous Chrome.

Pour rappel, le pitch de PhantomJS est / était:

PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

Avec le mode HeadLess, il était possible de faire le même chose mais avec le même moteur WebKit que celui-ci de Chrome donc pour tester … c’est pas mal :).

Quelques tests …

Alors j’ai pas cherché très loin : ici que j’ai gentiment suivi en adaptant légèrement …

Résultats

Require

Pour commencer quelques librairies à charger :

const fs = require('fs'); // Pour sauver le screenshot sur le file system
const webdriver = require('selenium-webdriver'); // selenium
const chromedriver = require('chromedriver'); 

const PATH = '/usr/bin/google-chrome';

Lancement de Chrome

const chromeCapabilities = webdriver.Capabilities.chrome();
chromeCapabilities.set('chromeOptions', {
  binary: PATH
  , 'args': [
    '--headless'
    , '--disable-gpu'
  ], prefs: {
        download: {
            'prompt_for_download': false,
            'directory_upgrade': true,
            'default_directory': '/app/downloads'
        }
    }
});
const driver = new webdriver.Builder()
  .forBrowser('chrome')
  .withCapabilities(chromeCapabilities)
  .build();

Actions

console.log('Connexion au site YouTube');
driver.get('https://www.youtube.com/');
console.log('Renseignement de la zone de recherche');
driver.executeScript("document.getElementById('masthead-search-term').value='clap your hands imany';");
driver.manage().timeouts().implicitlyWait(1);
console.log('Lancement de la recherche');
driver.findElement({id: 'search-btn'}).click();
console.log('Attente du chargement de la page');
driver.wait(webdriver.until.titleIs('clap your hands imany - YouTube'), 1000);
console.log('Recherche du premier lien')
driver.findElements(webdriver.By.css('a.yt-uix-tile-link'))
// [...]

Astuce

J’ai perdu un peu de temps avec cette ligne driver.executeScript("document.getElementById('masthead-search-term').value='clap your hands imany';");. En effet, la méthode sendKeys ne fonctionne pas quand on utilise Xvfb ce qui est mon cas car je suis sous Docker.