Instal Node.js: Cek Fungsi Tombol di Server tanpa Browser
Untuk menjalankan JavaScript di server, Node.js perlu diinstal terlebih dahulu. Node.js 24.21.0 diinstal di server WordPress dengan konfigurasi Nginx dan Apache, lalu skrip tombol di halaman web diperiksa tanpa browser menggunakan jsdom 30.1.3.
nodejs di repositori bawaan adalah versi 16.20.2, sedangkan jsdom 30.1.3 yang dipakai untuk memeriksa skrip memerlukan Node.js 22.22.2 atau lebih baru. Karena itu, instalasi dilakukan dari stream modul dnf 24.
1️⃣ Tujuan menginstal Node.js dan jsdom di server
Untuk memeriksa skrip tombol di server, diperlukan dua hal: Node.js dan jsdom.
🔲 Node.js
JavaScript biasanya berjalan di dalam browser, tetapi setelah Node.js diinstal, server juga dapat membaca dan menjalankan JavaScript.
Menginstal Node.js berarti menaruh satu mesin eksekusi JavaScript, yang sebelumnya hanya ada di dalam browser, di server juga. Karena itu, Node.js dipakai untuk membuat server web, membuat perintah yang memproses banyak file sekaligus, atau memuat paket seperti jsdom untuk memeriksa halaman. Ghost juga merupakan CMS yang berjalan di atas Node.js.
🔲 jsdom
jsdom adalah paket untuk Node.js yang membaca HTML dan mengubahnya menjadi dokumen yang tombolnya bisa ditekan seperti di browser. jsdom membangun struktur dokumen (DOM) yang dibuat browser saat membuka halaman, tetapi di dalam server tanpa layar, sehingga skrip menemukan tombol dan mengubah teks seolah-olah berada di browser sungguhan. Karena tidak membuka jendela, jsdom bisa dijalankan di server dengan satu baris perintah.
Artinya, pemeriksaan yang dulu dilakukan orang dengan membuka browser dan menekan semuanya satu per satu kini digantikan server dengan perintah. Karena itu, jsdom juga dipakai untuk menguji perilaku tombol secara otomatis setiap kali ada perbaikan, mengambil hanya konten seperti judul dan tautan dari halaman, atau menyunting HTML artikel sekaligus.
Jika halaman diambil dengan PHP atau curl, yang terlihat hanya HTML yang pertama kali dikirim. Teks yang berubah setelah tombol ditekan baru muncul setelah skrip dijalankan.
Browser melewati empat tahap: mengambil halaman, membaca halaman, menekan tombol, dan menampilkannya di layar. jsdom menjalankan semua tahap di server kecuali tahap menampilkan di layar, sehingga posisi dan ukuran tombol diperiksa di browser.
2️⃣ Sebelum instalasi: repositori bawaan dan stream modul
Sebelum menjalankan [dnf install nodejs], periksa dulu versi yang akan diinstal. nodejs di repositori bawaan AlmaLinux 9.8 adalah 16.20.2.
dnf list --available nodejsAvailable Packages
nodejs.x86_64 1:16.20.2-8.el9_4 appstreamRepositori modul memiliki empat stream: 18, 20, 22, dan 24. Per tanggal pemeriksaan, stream 22 berada di 22.23.2 dan stream 24 di 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 runtimeMenurut registri npm, versi yang diperlukan jsdom 30.1.3 adalah 22.22.2 ke atas untuk seri 22, 24.15.0 ke atas untuk seri 24, atau 26 ke atas. Stream 22 dan 24 sama-sama memenuhi syarat ini.
3️⃣ Instal Node.js: dnf module
Kali ini yang diinstal adalah stream 24, dan sebelum dijalankan, daftar paket yang akan diinstal diperiksa dulu dengan opsi [--assumeno].
dnf module install nodejs:24 --assumenoDaftarnya hanya berisi lima paket: nodejs, npm, nodejs-libs, nodejs-docs, dan nodejs-full-i18n. Tidak ada paket server web, PHP, atau kernel. Setelah diperiksa, jalankan instalasi dengan opsi [-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] mencantumkan weak dependencies, yaitu paket yang sebaiknya ikut diinstal bersama. Ukuran unduhan 40M dan ukuran setelah terinstal 185M.
node -vv24.21.0npm -v11.19.0cat /etc/dnf/modules.d/nodejs.module[nodejs]
name=nodejs
stream=24
profiles=common
state=enablednode terinstal sebagai 24.21.0 dan npm sebagai 11.19.0. Satu-satunya file konfigurasi yang berubah setelah instalasi adalah [/etc/dnf/modules.d/nodejs.module], yang mencatat stream 24 dan profil common sebagai aktif.
4️⃣ Instalasi jsdom dan pemeriksaan skrip tombol
jsdom diinstal dengan npm ke folder kerja, dan folder kerja dibuat di luar web root.
mkdir ~/jsdom-test && cd ~/jsdom-test
npm init -y[npm init -y] membuat package.json dengan nilai bawaan, lalu jsdom diinstal ke folder yang sama.
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 paket termasuk jsdom 30.1.3 terinstal, dengan 0 kerentanan yang diketahui. Ukuran node_modules di folder kerja adalah 26M.
node -e 'const { JSDOM } = require(`jsdom`); console.log(new JSDOM(`<h1>Halo</h1>`).window.document.querySelector(`h1`).textContent)'HaloJika jsdom membaca HTML berisi satu tag h1 sebagai dokumen lalu mencetak teks di dalamnya, [Halo], pemeriksaan selesai.
Pemeriksaan skrip tombol berarti memastikan di server bahwa teks berubah dengan benar setelah tombol ditekan. Sebagai contoh, dibuat file HTML di folder kerja yang teks tombol [Salin]-nya berubah menjadi [Tersalin] saat ditekan.
cat btn.html<button id="copy">Salin</button>
<script>
document.getElementById('copy').addEventListener('click', function () {
this.textContent = 'Tersalin';
});
</script>Skrip pemeriksa membaca file HTML dengan jsdom, menjalankan skripnya, lalu mencetak teks sebelum dan sesudah tombol ditekan. Galat skrip dicetak pada baris yang diawali [Galat:].
cat check.jsconst fs = require('fs');
const { JSDOM, VirtualConsole } = require('jsdom');
const vc = new VirtualConsole();
vc.on('jsdomError', (e) => console.log('Galat:', 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('Sebelum klik:', btn.textContent);
btn.click();
console.log('Setelah klik:', btn.textContent);node check.js btn.htmlSebelum klik: Salin
Setelah klik: TersalinSetelah diklik, teks berubah menjadi [Tersalin], yang memastikan skrip tombol berfungsi.
Satu salah ketik di skrip saja sudah mengubah hasilnya. Pemeriksaan yang sama dijalankan pada file yang huruf kapital I pada getElementById diganti dengan huruf kecil l.
sed 's/getElementById/getElementByld/' btn.html > btn-broken.html
node check.js btn-broken.htmlGalat: Uncaught [TypeError: document.getElementByld is not a function]
Sebelum klik: Salin
Setelah klik: SalinGalat dicetak di baris pertama dan skrip berhenti, sehingga teks tetap [Salin] meski tombol diklik.
Tombol diberi lebar 120px dan tinggi 40px dengan CSS, lalu ukurannya dicetak.
cat size.jsconst { JSDOM } = require('jsdom');
const dom = new JSDOM('<button id="copy" style="width:120px;height:40px">Salin</button>');
const btn = dom.window.document.querySelector('#copy');
console.log('tinggi:', btn.offsetHeight, '/ lebar:', btn.getBoundingClientRect().width);node size.jstinggi: 0 / lebar: 0jsdom tidak punya tahap menggambar di layar, sehingga tinggi dan lebar dicetak sebagai 0.
🔢 FAQ & Konten yang Direkomendasikan
ℹ️ Pemberitahuan Afiliasi
Konten di situs ini berisi tautan afiliasi. Jika pengunjung membeli produk atau layanan melalui tautan tersebut, situs ini menerima komisi dari penjual. Harga yang dibayar pembeli(turun saat ada diskon promo ↓), tidak naik karena hal ini. Harga, diskon, dan informasi stok yang ditampilkan berlaku pada saat penulisan dan bisa berbeda dengan kondisi sebenarnya, jadi pastikan kembali di situs penjual sebelum membeli. Pemilihan dan penilaian produk dibuat berdasarkan standar kami sendiri, dan ada tidaknya komisi tidak memengaruhi urutan maupun isi penilaian.