Installer Node.js : vérifier le fonctionnement des boutons sur le serveur sans navigateur
Pour exécuter du JavaScript sur un serveur, il faut d’abord installer Node.js. J’ai installé Node.js 24.21.0 sur un serveur WordPress sous Nginx et Apache, puis vérifié sans navigateur le script des boutons d’une page web avec jsdom 30.1.3.
Le nodejs du dépôt par défaut est en 16.20.2, alors que jsdom 30.1.3, utilisé pour vérifier les scripts, exige Node.js 22.22.2 ou plus. J’ai donc installé à partir du flux de module dnf 24.
1️⃣ Pourquoi installer Node.js et jsdom sur le serveur
Pour vérifier les scripts de boutons sur un serveur, il faut deux choses : Node.js et jsdom.
🔲 Node.js
Le JavaScript s’exécute normalement dans le navigateur, mais une fois Node.js installé, le serveur peut lui aussi lire et exécuter du JavaScript.
Installer Node.js, c’est placer aussi sur le serveur le moteur d’exécution JavaScript qui n’existait jusque-là que dans le navigateur. C’est pourquoi on utilise Node.js pour créer des serveurs web, écrire des commandes qui traitent de nombreux fichiers d’un coup, ou charger des paquets comme jsdom pour vérifier des pages. Ghost est lui aussi un CMS qui tourne sur Node.js.
🔲 jsdom
jsdom est un paquet Node.js qui lit du HTML et en fait un document dont on peut cliquer les boutons comme dans un navigateur. Il reconstruit dans le serveur, sans écran, la structure de document (DOM) qu’un navigateur crée en ouvrant une page : les scripts trouvent donc les boutons et changent le texte comme dans un vrai navigateur. Comme aucune fenêtre ne s’ouvre, il se lance sur le serveur avec une seule ligne de commande.
Autrement dit, les vérifications qu’une personne faisait en ouvrant un navigateur et en cliquant un à un sont prises en charge par le serveur avec une commande. C’est pourquoi jsdom sert aussi à tester automatiquement le comportement des boutons après chaque correction, à extraire d’une page seulement des contenus comme les titres et les liens, ou à retoucher en masse le HTML des articles.
Si l’on récupère une page avec PHP ou curl, on ne voit que le HTML envoyé au départ. Le texte qui change après un clic sur un bouton n’apparaît que lorsque le script s’exécute.
Le navigateur passe par quatre étapes : recevoir la page, lire la page, cliquer sur le bouton et afficher à l’écran. jsdom exécute sur le serveur toutes les étapes sauf l’affichage, c’est pourquoi la position et la taille des boutons se vérifient dans le navigateur.
2️⃣ Avant l’installation : dépôt par défaut et flux de modules
Avant de lancer [dnf install nodejs], on vérifie d’abord quelle version serait installée. Le nodejs du dépôt par défaut d’AlmaLinux 9.8 est en 16.20.2.
dnf list --available nodejsAvailable Packages
nodejs.x86_64 1:16.20.2-8.el9_4 appstreamLe dépôt de modules propose quatre flux : 18, 20, 22 et 24. À la date de vérification, le flux 22 était en 22.23.2 et le flux 24 en 24.21.0.
dnf module list nodejsnodejs 18 common [d], development, minimal, s2i Javascript runtime
nodejs 20 common [d], development, minimal, s2i Javascript runtime
nodejs 22 common [d], development, minimal, s2i Javascript runtime
nodejs 24 common [d], development, minimal, s2i Javascript runtimeD’après le registre npm, jsdom 30.1.3 exige la 22.22.2 ou plus dans la branche 22, la 24.15.0 ou plus dans la branche 24, ou la 26 et au-delà. Les flux 22 et 24 remplissent tous deux cette condition.
3️⃣ Installer Node.js : dnf module
Cette fois, j’ai installé le flux 24 et, avant de lancer la commande, j’ai d’abord vérifié avec l’option [--assumeno] la liste des paquets qui seraient installés.
dnf module install nodejs:24 --assumenoLa liste ne comprenait que cinq paquets : nodejs, npm, nodejs-libs, nodejs-docs et nodejs-full-i18n. Aucun paquet de serveur web, de PHP ni de noyau n’y figurait. Après vérification, on lance l’installation avec l’option [-y].
dnf module install -y nodejs:24Dependencies resolved.
==============================================================================================
Package Architecture Version Repository Size
==============================================================================================
Installing group/module packages:
nodejs x86_64 1:24.21.0-1.module_el9.8.0+321+1555b6a2 appstream 70 k
npm noarch 1:11.19.0-1.24.21.0.1.module_el9.8.0+321+1555b6a2 appstream 2.1 M
Installing dependencies:
nodejs-libs x86_64 1:24.21.0-1.module_el9.8.0+321+1555b6a2 appstream 24 M
Installing weak dependencies:
nodejs-docs noarch 1:24.21.0-1.module_el9.8.0+321+1555b6a2 appstream 5.3 M
nodejs-full-i18n x86_64 1:24.21.0-1.module_el9.8.0+321+1555b6a2 appstream 8.9 M
Installing module profiles:
nodejs/common
Enabling module streams:
nodejs 24
Transaction Summary
==============================================================================================
Install 5 Packages
Total download size: 40 M
Installed size: 185 M[Installing weak dependencies] liste les dépendances faibles (weak dependencies), des paquets qu’il est utile d’installer en même temps. Le téléchargement fait 40M et l’installation 185M.
node -vv24.21.0npm -v11.19.0cat /etc/dnf/modules.d/nodejs.module[nodejs]
name=nodejs
stream=24
profiles=common
state=enablednode a été installé en 24.21.0 et npm en 11.19.0. Le seul fichier de configuration modifié par l’installation est [/etc/dnf/modules.d/nodejs.module], qui enregistre le flux 24 et le profil common comme actifs.
4️⃣ Installer jsdom et vérifier le script d’un bouton
jsdom s’installe avec npm dans un dossier de travail, que l’on crée en dehors de la racine web.
mkdir ~/jsdom-test && cd ~/jsdom-test
npm init -y[npm init -y] crée package.json avec les valeurs par défaut, puis jsdom est installé dans le même dossier.
npm install jsdomadded 36 packages, and audited 37 packages in 2s
8 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilitiesnpm ls jsdomjsdom-test@1.0.0 /root/jsdom-test
└── jsdom@30.1.336 paquets, dont jsdom 30.1.3, ont été installés, avec 0 vulnérabilité connue. Le dossier node_modules du dossier de travail pèse 26M.
node -e 'const { JSDOM } = require(`jsdom`); console.log(new JSDOM(`<h1>Bonjour</h1>`).window.document.querySelector(`h1`).textContent)'BonjourSi jsdom lit comme document un HTML composé d’une seule balise h1 et affiche le texte qu’elle contient, [Bonjour], la vérification est terminée.
Vérifier le script d’un bouton, c’est contrôler sur le serveur que le texte change correctement après le clic. En exemple, j’ai créé dans le dossier de travail un fichier HTML où un clic sur le bouton [Copier] change le texte en [Copié].
cat btn.html<button id="copy">Copier</button>
<script>
document.getElementById('copy').addEventListener('click', function () {
this.textContent = 'Copié';
});
</script>Le script de vérification lit le fichier HTML avec jsdom, exécute ses scripts et affiche le texte avant et après le clic. Les erreurs de script s’affichent sur des lignes commençant par [Erreur:].
cat check.jsconst fs = require('fs');
const { JSDOM, VirtualConsole } = require('jsdom');
const vc = new VirtualConsole();
vc.on('jsdomError', (e) => console.log('Erreur:', e.message));
const dom = new JSDOM(fs.readFileSync(process.argv[2], 'utf8'), {
runScripts: 'dangerously',
virtualConsole: vc,
});
const btn = dom.window.document.querySelector('#copy');
console.log('Avant le clic:', btn.textContent);
btn.click();
console.log('Après le clic:', btn.textContent);node check.js btn.htmlAvant le clic: Copier
Après le clic: CopiéAprès le clic, le texte devient [Copié] : le script du bouton fonctionne bien.
Une seule faute de frappe dans le script change le résultat. J’ai lancé la même vérification sur un fichier où le I majuscule de getElementById était remplacé par un l minuscule.
sed 's/getElementById/getElementByld/' btn.html > btn-broken.html
node check.js btn-broken.htmlErreur: Uncaught [TypeError: document.getElementByld is not a function]
Avant le clic: Copier
Après le clic: CopierUne erreur s’affiche sur la première ligne et le script s’arrête : le texte reste [Copier] même après le clic.
J’ai donné au bouton une largeur de 120px et une hauteur de 40px en CSS, puis affiché sa taille.
cat size.jsconst { JSDOM } = require('jsdom');
const dom = new JSDOM('<button id="copy" style="width:120px;height:40px">Copier</button>');
const btn = dom.window.document.querySelector('#copy');
console.log('hauteur:', btn.offsetHeight, '/ largeur:', btn.getBoundingClientRect().width);node size.jshauteur: 0 / largeur: 0jsdom n’a pas d’étape de dessin à l’écran : la hauteur et la largeur s’affichent donc à 0.
🔢 FAQ & contenus recommandés
ℹ️ Mention d'affiliation
Le contenu de ce site contient des liens d'affiliation. Lorsqu'un visiteur achète un produit ou un service via l'un de ces liens, le site perçoit une commission du vendeur. Le montant payé par l'acheteur(il baisse lors des promotions ↓), lui, n'augmente pas. Les prix, remises et stocks indiqués correspondent à la date de rédaction et peuvent différer ; vérifiez-les donc auprès du vendeur avant d'acheter. Les produits sont choisis et évalués selon nos propres critères, et les commissions n'influencent ni l'ordre de présentation ni le contenu des évaluations.