Apa yang ada di DOM Selenium WebDriver? Struktur & Bentuk Lengkap

Oleh: Krishna rungta Krishna rungta
Hours Updated

⚡ Ringkasan Cerdas

Document Object Model mengekspos halaman HTML ke JavaSkrip sebagai pohon objek, memungkinkan skrip dan Selenium WebDriver membaca, menemukan, dan mengubah elemen apa pun di halaman saat browser berjalan.

  • 🔘 Wujud sempurna: DOM adalah singkatan dari Document Object Model, sebuah antarmuka yang distandarisasi oleh W3C untuk dokumen HTML dan XML.
  • ☑️ Struktur Pohon: Setiap tag menjadi sebuah node, sehingga html, head, body, article, dan p membentuk hierarki induk-anak.
  • ✅ Tiga Benda: Window membungkus tab, Document menandai akar pohon, dan Element mewakili setiap tag individual.
  • 🧪 Metode Inti: getElementById, querySelector, dan querySelectorAll mengambil node; innerHTML membaca dan menulis ulang kontennya.
  • ️ Debugging: Alat pengembang browser menampilkan pohon yang telah diurai, dan perubahan yang dilakukan di sana hanya akan bertahan hingga halaman dimuat ulang.
  • 📊 Acara: Tindakan seperti klik dan memuat pesan siaran yang dapat dicegat oleh atribut onclick atau addEventListener.
Baca Selengkapnya

Apa yang ada di DOM Selenium Struktur dan bentuk lengkap WebDriver

Apa yang ada di DOM Selenium Pengemudi Web?

PENGHAKIMAN in Selenium WebDriver adalah komponen penting dalam pengembangan web menggunakan HTML5 dan JavaScript. Bentuk lengkap dari DOM adalah Document Object Model. DOM bukanlah konsep ilmu komputer. Ini adalah sekumpulan antarmuka sederhana yang distandarkan di antara pengembang web untuk mengakses dan memanipulasi dokumen dalam HTML atau XML menggunakan JavaNaskah.

Standar-standar ini membantu pengembang membangun halaman web tanpa perlu khawatir tentang detail implementasi. Beberapa organisasi yang terlibat dalam standarisasi antarmuka ini adalah Mozilla, Apple, Microsoft, Google, Adobe, dll. Namun, W3C-lah yang memformalkan standar dan menerbitkannya – lihat di sini (https://dom.spec.whatwg.org/).

Bagian-bagian di bawah ini membahas struktur dokumen, objek-objek yang diekspos oleh DOM, dan cara memeriksanya. Mozilla selalu memperbarui referensi API terkini di sini. Halaman Model Objek Dokumen MDN.

Setiap Selenium Locator akan berinteraksi dengan pohon yang sama, jadi struktur di bawah ini adalah seperti apa adanya. temukanElemen() pencarian.

Memahami Struktur DOM

Anda perlu memahami struktur DOM jika Anda membangun situs web apa pun yang melibatkan penggunaan skrip JavaSkrip. Memahami DOM bahkan lebih penting jika Anda melakukan salah satu atau semua tugas rumit berikut di situs web Anda –

  1. Mengembangkanping Konten yang terus memperbarui dirinya sendiri tanpa perlu memuat ulang seluruh halaman – seperti harga terkini dari semua saham dalam portofolio pengguna Anda.
  2. Mengembangkanping Interaksi pengguna tingkat lanjut seperti menambahkan atau memodifikasi konten secara dinamis – misalnya kemampuan untuk menambahkan lebih banyak saham ke portofolio Anda.
  3. Mengembangkanping Konten yang dapat dikustomisasi oleh pengguna – seperti kemampuan untuk mengubah tata letak sehingga portofolio reksa dana muncul sebelum portofolio saham.
  4. Mengembangkanping Konten responsif di situs web Anda sehingga situs web Anda dapat beradaptasi dengan berbagai layar media seperti iPhone, desktop, tablet, dll. secara otomatis.

Halaman HTML dasar

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
         <head>
            <title>my page title</title>
          </head>
<body>
         <article>
                  <p>
                         my first article
                   </p>
         </article>
        <aside>side bar content</aside>
</body>
</html>

Bagaimana tampilan DOM PARSER browser?

html    >     head    >    title
    >    body    >    aside
            >    article    >    p

Bagaimana Anda mengakses elemen body?

<script>
    var body = window.document.body;
</script>

Bagaimana cara mengucapkan “Halo Dunia”?

<script>
    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>

Akhirnya akan terlihat seperti keseluruhan file HTML

Open Windows Notepad dan tempel konten berikut di dalamnya. Lalu simpan file tersebut sebagai “MyFileNewFile.html” (pastikan nama file Anda diakhiri dengan .html).

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<article><p>my first article</p></article>
<aside>side bar content</aside>
<script>

    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>
</body>
</html>

Terakhir, buka saja file tersebut menggunakan salah satu browser pilihan Anda dan Anda akan melihat “Hello World!”

Komponen DOM di Selenium

Di bawah ini adalah komponen utama DOM Selenium Pengemudi Web:

  • Jendela
  • Dokumen
  • Elemen

Setiap komponen berada pada level yang berbeda dalam struktur pohon, dimulai dari level terluar.

Jendela

Window adalah objek yang berisi objek dokumen dalam DOM. Itu berada di atas segalanya.

Untuk sampai ke objek jendela dari dokumen tertentu

<script>
      var window = document.defaultView;
</script>

Dalam lingkungan tab, setiap tab memiliki objek jendelanya sendiri. Namun, jika seseorang ingin menangkap dan mengimplementasikan peristiwa seperti window.resizeTo dan window.resizeBy, peristiwa tersebut berlaku untuk seluruh jendela dan bukan pada tab saja.

Properti Objek Jendela di DOM

jendela.Penyimpanan lokal – memberikan akses ke penyimpanan lokal browser. Penyimpanan lokal dapat digunakan untuk menyimpan dan mengambil data dari suatu sesi.

<script>
    window.localStorage.setItem('name','xyz');
	var name = window.localStorage.getItem('name');
</script>

jendela.pembuka - mendapat referensi ke objek jendela yang membuka jendela ini (baik dengan mengklik link atau menggunakan metode window.open)

Metode Objek Jendela yang Berguna

jendela.alert() – menampilkan dialog peringatan dengan pesan.

<script>
		window.alert('say hello');
</script>

Ada banyak kejadian berguna yang diekspos oleh objek jendela. Kami akan membahasnya di bagian “Acara” di bawah Topik Lanjutan

ARTIKEL TERKAIT

Dokumen

Dokumen menandai awal dari pohon DOM. Dokumen adalah simpul pertama dalam DOM. Ia memiliki beberapa metode dan properti, yang cakupannya berlaku untuk seluruh dokumen, seperti URL, getElementById, querySelector, dll.

Properti Objek Dokumen di DOM

Dokumen.dokumenURI ke Dokumen.URL – Keduanya mengembalikan lokasi dokumen saat ini. Namun, jika dokumen tersebut bukan bertipe Dokumen HTML.URL tidak akan bekerja.

Dokumen.activeElement – Metode ini mengembalikan elemen di DOM yang sedang fokus. Ini berarti jika pengguna sedang mengetikping Dalam sebuah kotak teks, Document.activeElement akan mengembalikan referensi ke kotak teks tersebut.

Judul dokumen – Ini digunakan untuk membaca atau menetapkan judul dokumen tertentu.

Metode Objek Dokumen yang Berguna

Dokumen.getElementById(String id) – Ini adalah metode yang paling relevan dan berguna dalam manipulasi DOM. Metode ini digunakan untuk mencari elemen dalam pohon DOM. menggunakan pengidentifikasi uniknyaPencarian ini peka terhadap huruf besar dan kecil, yaitu pada contoh berikut ini “ Elemen ” tidak dapat dicari menggunakan kata-kata seperti IntroDiv atau introdiv atau iNtrodiv dll.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head></head>
<body>
<div id='introDiv'></div>
<script>
		var label = Document.getElementById('introDiv');
		label.setInnerHTML('say hello again');
	</script>
</body>
</html>

Document.querySelectorAll(Pemilih string) – ini adalah metode lain yang banyak digunakan untuk memilih satu atau lebih elemen berdasarkan aturan pemilih CSS (Jika Anda familiar dengan notasi $ jQuery, itu sendiri menggunakan metode ini). Kita tidak akan membahas selektor CSS secara mendalam. Selektor CSS adalah seperangkat aturan yang memungkinkan Anda mendapatkan daftar elemen serupa (berdasarkan aturan selektor). Kita telah menggunakan metode ini sebelumnya di bagian "Hello World".

Elemen

Diagram di bawah ini menunjukkan bagaimana objek Element berada di dalam pohon DOM, di bawah node dokumen.

Objek elemen ditampilkan sebagai simpul di dalam hierarki pohon DOM.

Elemen Objek di DOM

Elemen adalah objek apa pun yang direpresentasikan oleh sebuah node dalam pohon DOM suatu dokumen. Seperti biasa, objek Elemen itu sendiri hanyalah sebuah kontracElemen adalah serangkaian properti, metode, dan peristiwa antara browser dan dokumen HTML. Terdapat jenis-jenis elemen khusus seperti HTMLElement, SVGElement, XULElement, dll. Dalam tutorial ini, kita hanya akan fokus pada HTMLElement.

Properti Objek Elemen di DOM

Elemen.id – Properti ini dapat digunakan untuk menyetel atau membaca “ID” (pengidentifikasi unik) untuk elemen HTML. ID harus unik di antara elemen-elemen dalam pohon DOM. Seperti disebutkan sebelumnya, ID juga digunakan oleh metode Document.getElementById untuk memilih objek Elemen tertentu dalam pohon DOM.

HTMLElement.contentDapat diedit – properti contentEditable dari suatu elemen menentukan apakah konten elemen tersebut dapat diedit/dimodifikasi. Properti ini dapat diatur seperti yang ditunjukkan dalam skrip di bawah ini. Properti ini juga dapat digunakan untuk menentukan apakah suatu elemen dapat diedit atau tidak. Coba skrip berikut di dalam badan HTML mana pun dan Anda akan melihat bahwa Anda dapat mengedit konten apa pun di badan tersebut.

<script>
		document.body.contentEditable = true;
</script>

Elemen.innerHTML – innerHTML adalah properti penting lainnya yang kita gunakan untuk mengakses konten HTML di dalam suatu elemen. Properti ini juga digunakan untuk mengatur konten HTML baru dari elemen tersebut. Properti ini banyak digunakan untuk mengatur/mengubah konten bidang data. Misalnya, Anda ingin halaman web Anda memperbarui suhu Kota Mumbai setiap jam, Anda dapat menjalankan skrip dalam contoh berikut setiap jam.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<section>
<h1>Mumbai</h1>
<h2>Temperature</h2>
<span id='tempValue'></span><sup>o</sup>C
</section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
			</script>
</body>
</html>

Metode Objek Elemen yang Berguna

HTMLElement.blur() & HTMLElement.fokus() – Metode blur dan fokus digunakan untuk menghilangkan fokus atau memberikan fokus pada elemen HTML. Metode ini paling banyak digunakan untuk memindahkan fokus kursor di antara kotak teks di halaman web entri data.

Elemen.querySelectorAll – Metode ini mirip dengan metode querySelector yang telah dibahas untuk objek dokumen. Namun metode ini akan membatasi pencariannya pada turunan elemen itu sendiri.

Catatan akurasi: Blok kode di atas direproduksi sebagaimana yang telah dipublikasikan. Kode yang berfungsi menggunakan dokumen dengan huruf d kecil dan innerHTML properti, bukan setInnerHTML().

Men-debug di DOM

Alat pengembang Google Chrome, Mozilla Firefox, Internet Explorer (10 atau lebih tinggi) atau Safari memungkinkan proses debug yang mudah langsung di dalam browser. Terkadang browser yang berbeda menafsirkan markup HTML yang sama secara berbeda dan saat itulah proses debug membantu Anda memeriksa DOM seperti yang telah ditafsirkan oleh mesin DOM browser tersebut.

Catatan browser: Internet Explorer dihentikan dukungannya pada tahun 2022, jadi DevTools-nya sekarang berada di Microsoft EdgeLangkah-langkah di bawah ini tidak berubah; DevTools dibuka dengan F12.

Sekarang, misalkan Anda ingin mengubah nilai suhu dari 26oC ke 32oC dalam contoh terakhir Anda. Kami akan mengambil beberapa langkah sederhana untuk melakukan itu. Tangkapan layar yang ditampilkan di sini berasal dari Mozilla Firefox– namun, langkah-langkahnya sama di semua browser lainnya.

  1. Buka MyFileNewFile.html (atau nama apa pun yang Anda berikan pada file HTML dalam tutorial di atas) menggunakan browser Anda
  2. Gunakan mouse Anda dan klik kanan pada nilai suhu 26oC dan klik "Periksa Elemen"

    Klik kanan pada nilai suhu dan pilih Periksa Elemen di browser.

  3. Perhatikan bahwa elemen di mana Anda memilih untuk “Inspeksi Elemen” ditampilkan disorot di browser Anda (jendela debugger biasanya muncul di bagian bawah layar)

    Alat pengembang browser menyoroti elemen span yang diperiksa dalam pohon DOM.

  4. Buka elemen dengan mengklik segitiga miring di sampingnya

    Memperluas elemen span di pemeriksa DOM menggunakan tombol segitiga.

  5. Pilih apa yang ingin Anda edit dan klik dua kali pada teks tersebut. Anda akan mendapatkan opsi untuk mengubah teks. Lakukan seperti yang diarahkan pada gambar animasi di bawah ini.

    Demonstrasi animasi pengeditan nilai teks DOM dari 26 menjadi 32 di inspector.

  6. Perhatikan perubahan konten halaman HTML Anda. Anda dapat menutup jendela debugging sekarang.

    Perhatikan bahwa perubahan Anda hanya akan dipertahankan untuk sesi ini. Segera setelah Anda memuat ulang atau menyegarkan (tekan F5) halaman, perubahan akan dikembalikan. Ini menunjukkan Anda tidak mengubah sumber HTML sebenarnya tetapi hanya interpretasi lokal browser Anda.

    Sebagai latihan yang menyenangkan, cobalah melakukan hal berikut. Buka www.facebook.com di browser Anda dan gunakan alat debugger untuk mendapatkan hasil berikut – perhatikan bagaimana tertulis “Saya telah meretas Facebook”.

Hasil dari latihan tersebut terlihat seperti tangkapan layar di bawah ini.

Halaman Facebook diedit secara langsung di pemeriksa peramban sehingga bertuliskan "Saya telah meretas Facebook"

Membaca dan mengedit node mencakup halaman statis. Halaman interaktif juga bereaksi terhadap tindakan pengguna.

Acara DOM

Apa itu Acara di DOM?

Peristiwa adalah model pemrograman di mana insiden yang dipicu oleh pengguna (atau dipicu oleh siklus hidup halaman browser) disiarkan sebagai pesan. Misalnya, ketika suatu halaman telah selesai dimuat maka akan memicu peristiwa window.load dan demikian pula ketika pengguna mengklik tombol itu acara klik elemen dipicu.

Pesan-pesan ini dapat disadap oleh siapa saja JavaNaskah kode dan kemudian sebuah tindakan yang ditentukan pengembang dapat dilakukan. Misalnya, Anda ingin angka-angka di halaman web Anda hanya diperbarui saat pengguna mengklik tombol. Anda dapat mencapainya dengan salah satu metode berikut –

  1. Tetapkan tindakan ke acara onclick elemen HTML
  2. Tetapkan tindakan ke acara klik menggunakan metode addEventListener

Metode 1

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button onclick='onRefreshClick()'>Refresh</button>
    </section>
<script>
    	document.getElementById('tempValue').innerHTML = '26';

 function onRefreshClick(e) {
   document.getElementById('tempValue').innerHTML = '32';
}
			</script>
</body>
</html>

Metode 2

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button id='btnRefresh'>Refresh</button>
    </section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
    document.getElementById('btnRefresh').addEventListener('click', function(event) {
    document.getElementById('tempValue').innerHTML = '32' },false);
			</script>
</body>
</html>

Pemecahan masalah di DOM

Catatan API lama: Dua jawaban di bawah menggunakan document.write(). Kode tersebut tetap berjalan, tetapi panggilan setelah halaman dimuat akan menghapus dokumen. Lebih baik gunakan console.log() atau innerHTML.

T. Bagaimana saya mengetahui apakah suatu elemen ada atau tidak?

A. Coba cari elemen menggunakan salah satu pemilih dan periksa apakah elemen yang dikembalikan adalah nol. Lihat contoh di bawah –

if(document.getElementById("elementIDWhichIsNotPresentInDOM") === null)
{
    //do something
}

T. Saya mendapatkan TypeError: document.getElementByID bukan fungsi…

A. Pastikan nama metode sama persis dengan metode API. Seperti pada pertanyaan di atas – ini adalah getElementById dan bukan getElementByID.

T. Apa perbedaan antara node anak dan node anak?

A. Metode children memberi kita koleksi semua elemen dalam elemen pemanggil. Koleksi yang dikembalikan bertipe HTMLCollection. Namun, metode childNodes memberi kita koleksi semua node dalam elemen pemanggil. Tambahkan skrip berikut ke contoh kita dan lihat perbedaannya –

Metode childNodes mengembalikan 14 item

document.write("Using childNodes method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].childNodes.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].childNodes[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].childNodes.length);

Sedangkan metode anak hanya mengembalikan 7 item

document.write("Using children method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].children.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].children[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].children.length);

T. Saya mendapatkan Uncaught TypeError: Cannot read property 'innerHTML' of unfined…

A. Pastikan bahwa instance HTMLElement tempat Anda memanggil properti innerHTML telah ditetapkan setelah deklarasi awal. Kesalahan ini umumnya terjadi dalam skenario berikut. Lihat bagaimana kesalahan dapat dihindari di blok kode berikutnya…

var element;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
element.innerHTML = '32';

var element = null;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
if(element != null)
{
    element.innerHTML = '32';
}

Pertanyaan Umum Demo Slot

Shadow DOM adalah fitur browser yang memberikan komponen sub-pohon terisolasi sendiri, sehingga gaya dan skrip tidak bocor. Virtual DOM adalah teknik pustaka, yang digunakan oleh React dan Vue, yang membandingkan salinan dalam memori untuk meminimalkan pembaruan sebenarnya.

WebDriver mengirimkan locator ke browser, yang kemudian menelusuri pohon yang telah diurai hingga ditemukan kecocokan, lalu mengembalikan handle WebElement. Pelacak seperti id, nama, pemilih CSS, dan XPath hanya menjelaskan aturan pencarian yang berbeda pada node yang sama.

Gunakan `getElementById` ketika target memiliki ID unik; ini adalah pencarian tercepat dan mengembalikan satu node. Gunakan `querySelector` atau `querySelectorAll` ketika kecocokan bergantung pada kelas, atribut, atau jalur induk-anak.

Kode tersebut masih dieksekusi, tetapi browser tidak menganjurkannya. Memanggil `document.write()` setelah halaman dimuat akan mengganti seluruh dokumen, dan akan menghambat parsing selama pemuatan. Gunakan `console.log()` untuk tracing, atau innerHTML untuk menyisipkan konten.

DOM memodelkan konten halaman: head, body, dan setiap tag. Browser Object Model mencakup browser di sekitarnya, termasuk navigator, screen, location, dan history. Objek window adalah tempat keduanya bertemu.

Internet Explorer dihentikan pada tahun 2022, sehingga alat pengembangnya sekarang berada di dalam Microsoft EdgeAlur kerjanya tetap sama: tekan F12 atau klik kanan elemen, pilih Periksa, dan edit node di panel yang terbuka.

Alat pembelajaran mesin memberi skor pada beberapa atribut node sekaligus, sehingga ketika kelas atau id berubah, alat tersebut akan mencocokkan kembali elemen yang sama alih-alih gagal. Platform pengujian yang dapat memperbaiki diri sendiri membangun ini di atas kueri DOM biasa.

Copilot Fitur ini membuat draf pendengar peristiwa, rantai pemilih kueri, dan perulangan penelusuran dari komentar, dan fitur ini dapat diandalkan pada pola umum. Selalu uji saran tersebut terhadap halaman sebenarnya, karena fitur ini tidak dapat melihat markup Anda.

Ringkaslah postingan ini dengan: