Apa yang ada di DOM Selenium WebDriver: Struktur, Bentuk Lengkap

Apa yang ada di DOM Selenium Pengemudi Web?

PENGHAKIMAN in Selenium WebDriver adalah komponen penting dari 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 meresmikan standar dan menerbitkannya – lihat di sini (https://dom.spec.whatwg.org/).

Tutorial ini bertujuan untuk membahas konsep dasar struktur dokumen HTML dan cara memanipulasinya menggunakan JavaSkrip. Kami akan membahas topik-topik berikut dalam tutorial ini:

Memahami Struktur DOM
Komponen DOM di Selenium
Men-debug di DOM
Acara DOM
Pemecahan masalah di DOM

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 –

Mengembangkan konten yang memperbarui dirinya sendiri secara terus-menerus tanpa menyegarkan seluruh halaman – seperti harga semua saham saat ini dalam portofolio pengguna Anda
Mengembangkan interaksi pengguna tingkat lanjut seperti menambahkan atau memodifikasi konten secara dinamis – seperti kemampuan untuk menambahkan lebih banyak saham ke portofolio Anda
Mengembangkan konten yang dapat disesuaikan oleh pengguna – seperti kemampuan untuk mengubah tata letak sehingga portofolio Reksa Dana muncul sebelum portofolio saham
Mengembangkan konten responsif di situs web Anda sehingga membuat situs web Anda 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

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

Dokumen

Dokumen menandai awal dari pohon DOM. Dokumen adalah node 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 dan Dokumen.URL – Keduanya mengembalikan lokasi dokumen saat ini. Namun, jika dokumen bukan bertipe HTML, Document.URL tidak akan berfungsi.

Dokumen.activeElement – Metode ini mengembalikan elemen dalam DOM yang menjadi fokus. Ini berarti jika pengguna mengetik dalam 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) – sejauh ini ini adalah metode yang paling relevan dan berguna dalam manipulasi DOM. Metode ini digunakan untuk mencari elemen di pohon DOM menggunakan pengenal uniknya. Pencarian ini peka huruf besar/kecil, yaitu dalam contoh berikut “ 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 elemen lagi berdasarkan aturan pemilih CSS (jika Anda familiar dengan notasi $ jQuery, metode ini juga digunakan). Kami tidak akan mempelajari lebih jauh tentang penyeleksi CSS. Pemilih CSS adalah seperangkat aturan yang dengannya Anda bisa mendapatkan daftar elemen serupa (berdasarkan aturan pemilih). Kami telah menggunakan metode ini sebelumnya di bagian “Halo Dunia”.

Elemen

Elemen adalah objek apa pun yang diwakili oleh simpul di pohon DOM suatu dokumen. Seperti biasa, objek Elemen itu sendiri hanyalah kontrak properti, metode, dan peristiwa antara browser dan dokumen HTML. Ada jenis Elemen khusus seperti HTMLElement, SVGElement, XULElement dll. Kami hanya akan fokus pada HTMLElement dalam tutorial ini.

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.

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.

Sekarang, misalkan Anda ingin mengubah nilai suhu dari 26^oC ke 32^oC 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.

Buka MyFileNewFile.html (atau nama apa pun yang Anda berikan pada file HTML dalam tutorial di atas) menggunakan browser Anda
Gunakan mouse Anda dan klik kanan pada nilai suhu 26^oC dan klik "Periksa Elemen"
Perhatikan bahwa elemen di mana Anda memilih untuk “Inspeksi Elemen” ditampilkan disorot di browser Anda (jendela debugger biasanya muncul di bagian bawah layar)
Buka elemen dengan mengklik segitiga miring di sampingnya
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.
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”.

Proses debug di DOM

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 tindakan yang ditentukan pengembang dapat diambil. Misalnya, Anda ingin angka-angka pada halaman web Anda diperbarui hanya saat pengguna mengklik tombol. Anda dapat melakukannya dengan salah satu metode berikut –

Tetapkan tindakan ke acara onclick elemen HTML
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

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';
}

Ringkasan

Dalam tutorial ini kita mempelajari apa itu DOM dan bagaimana konsep penting yang harus dipahami untuk membangun halaman web dinamis.
Kami juga membahas jenis elemen DOM seperti Window, Document, dan Element.
Kami mempelajari beberapa metode dan properti DOM berguna yang tersedia dalam setiap jenisnya.
Kami melihat bagaimana sebagian besar browser menawarkan alat pengembang untuk bermain dengan halaman web apa pun yang tersedia di Internet – sehingga belajar melakukan debug dan menyelesaikan masalah dengan situs web kami sendiri.
Kami juga secara singkat menyinggung mekanisme Acara DOM.
Akhirnya kami membahas beberapa item pemecahan masalah di DOM.
Internet dipenuhi dengan sumber daya di DOM. Salah satu bahan referensi terbaik dan terkini tersedia di jaringan pengembang Mozilla. Melihat - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model