Menangani elemen web dinamis adalah tantangan utama dalam otomatisasi pengujian. Selenium 3 menawarkan tiga pilihan untuk menangani elemen web dinamis. Kita sudah membahas teknik pertama i. e. , menangani perubahan properti elemen web melalui XPath dinamis. Hari ini kita akan mempelajari metode kedua i. e. , menulis Pemilih CSS dinamis untuk menangani perubahan elemen web. Nanti kita akan bahas teknik ketiga lewat Sizzle di postingan blog selanjutnya
Mana yang sangat efisien dan andal, Dynamic XPath atau Dynamic CSS Selector?
Sebagian besar insinyur otomasi di planet ini akan merekomendasikan penggunaan Pemilih CSS untuk menemukan elemen web. Menemukan elemen web yang berubah melalui pemilih CSS lebih cepat daripada XPath dinamis. Berikut ini adalah beberapa logika dalam peluru
- Setiap browser memiliki mesin berbeda untuk XPath yang membuat elemen tidak konsisten
- CSS selalu sama terlepas dari browsernya
- Terkadang XPath menjadi kompleks, sedangkan CSS selalu sederhana
- Pemilih CSS Dinamis berperforma lebih baik
Kami telah membahas 9 pelacak untuk mengidentifikasi elemen web untuk aplikasi web apa pun. Di antara pencari lokasi tersebut, Pemilih CSS dinamis dan XPath dinamis memiliki keunggulan dalam industri otomasi. Anda harus cukup cerdas dalam mengidentifikasi elemen web dinamis
Alat yang diperlukan untuk menghasilkan Pemilih CSS
Kami telah membahas plug-in Firebug dan Firepath untuk Mozilla Firefox. Silakan merujuk ke artikel sebelumnya di XPath di mana saya telah membahas instalasi Firebug dan Firepath
Format umum untuk Pemilih CSS
tagName[attributeName=’value’]Pemilih CSS Dinamis dengan menggunakan ID
Gunakan simbol '#' (hash) untuk menghasilkan CSS Selector dengan ID-nya
tagname #id Example: Input #identifierid _Pemilih CSS Dinamis dengan menggunakan Nama Kelas
Menggunakan '. ’ (titik) untuk menghasilkan CSS Selector dengan nama kelasnya
tagname .className Example: div . Xb9hP
Pemilih CSS Dinamis dengan menggunakan Atribut
Berikut adalah rumus umum untuk menulis CSS Selector dengan atribut dan nilainya
Pemilih CSS Dinamis dengan menggunakan Banyak Atribut
Rumus umum untuk menulis pemilih CSS dengan banyak atribut
tagname[attribute1=’value1’] [attribute2=’value2’] Example: input[id='identifierId'][name='identifier']_Pemilih CSS Dinamis dengan menggunakan Berisi
Gunakan simbol '*' (bintang) untuk menghasilkan Pemilih CSS dengan berisi
tagname[attribute*=’value’] Example: a[title*='How to write']
Pemilih CSS Dinamis dengan menggunakan Mulai – Dengan
Gunakan simbol '^' (tanda sisipan) untuk menghasilkan CSS Selector dengan start-with
tagname[attribute^=’value’] Example: a[title^='How to write']_Pemilih CSS Dinamis dengan menggunakan Berakhir – Dengan
Gunakan simbol ‘$’ (dollar) untuk menghasilkan CSS Selector dengan end-with
tagname[attribute$=’value’] Example: a[title$='Selenium IDE']Sekarang dengan artikel ini, Anda menjadi dalang dalam menemukan elemen web dinamis apa pun di Selenium WebDriver. Karenanya, Anda dapat menangani properti dinamis elemen web apa pun dengan dua metode, XPath dan CSS Selector. Itu sepenuhnya tergantung pada kebijaksanaan Anda untuk memilih teknik Pemilih CSS atau teknik XPath atau beberapa pencari lokasi langsung lainnya. Saya akan sangat menyarankan Anda untuk mempraktikkannya sekali dengan beberapa POC pada aplikasi web pilihan Anda
Model Objek CSS (CSSOM), bagian dari DOM, memaparkan antarmuka khusus yang memungkinkan manipulasi sejumlah besar informasi mengenai CSS. Awalnya didefinisikan dalam rekomendasi Gaya DOM Level 2, antarmuka ini sekarang membentuk spesifikasi, Model Objek CSS (CSSOM) yang bertujuan untuk menggantikannya
Dalam banyak kasus, dan jika memungkinkan, praktik terbaik adalah memanipulasi kelas secara dinamis melalui properti className karena tampilan akhir dari semua kait penataan dapat dikontrol dalam satu lembar gaya. Kode JavaScript seseorang juga menjadi lebih bersih karena alih-alih didedikasikan untuk detail gaya, ia dapat berfokus pada semantik keseluruhan dari setiap bagian yang dibuat atau dimanipulasi, membiarkan detail gaya yang tepat ke lembar gaya. Namun, ada kasus di mana memperoleh atau memanipulasi aturan dapat berguna (baik untuk seluruh stylesheet atau elemen individual), dan hal itu dijelaskan lebih detail di bawah ini. Perhatikan juga bahwa, seperti gaya DOM elemen individu, ketika berbicara tentang memanipulasi lembar gaya, ini sebenarnya tidak memanipulasi dokumen fisik, tetapi hanya representasi internal dari dokumen tersebut.
Objek style dasar memperlihatkan antarmuka Stylesheet dan CSSStylesheet. Antarmuka tersebut berisi anggota seperti insertRule, selectorText, dan <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>simple style example</title> <script> function alterStyle(elem) { elem.style.background = "green"; } function resetStyle(elemId) { const elem = document.getElementById(elemId); elem.style.background = "white"; } </script> <style> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'. --> <p id="p1" title="alterStyle(this);"> Click here to change background color. </p> <!-- passes the 'p1' id of another element's style to modify. --> <button title="resetStyle('p1');">Reset background color</button> </body> </html> 0 untuk mengakses dan memanipulasi aturan gaya individual yang membentuk lembar gaya CSS
Untuk sampai ke objek style dari <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>simple style example</title> <script> function alterStyle(elem) { elem.style.background = "green"; } function resetStyle(elemId) { const elem = document.getElementById(elemId); elem.style.background = "white"; } </script> <style> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'. --> <p id="p1" title="alterStyle(this);"> Click here to change background color. </p> <!-- passes the 'p1' id of another element's style to modify. --> <button title="resetStyle('p1');">Reset background color</button> </body> </html> 2, Anda dapat menggunakan properti <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>simple style example</title> <script> function alterStyle(elem) { elem.style.background = "green"; } function resetStyle(elemId) { const elem = document.getElementById(elemId); elem.style.background = "white"; } </script> <style> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'. --> <p id="p1" title="alterStyle(this);"> Click here to change background color. </p> <!-- passes the 'p1' id of another element's style to modify. --> <button title="resetStyle('p1');">Reset background color</button> </body> </html> 3 dan mengakses objek individu berdasarkan indeks (e. g. , <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>simple style example</title> <script> function alterStyle(elem) { elem.style.background = "green"; } function resetStyle(elemId) { const elem = document.getElementById(elemId); elem.style.background = "white"; } </script> <style> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'. --> <p id="p1" title="alterStyle(this);"> Click here to change background color. </p> <!-- passes the 'p1' id of another element's style to modify. --> <button title="resetStyle('p1');">Reset background color</button> </body> </html> _4 adalah stylesheet pertama yang ditentukan untuk dokumen, dll. )
Dalam contoh ini latar belakang halaman diatur ke merah menggunakan CSS. JavaScript kemudian mengakses properti menggunakan CSSOM dan mengubah latar belakang menjadi biru
<html lang="en"> <head> <title>Modifying a stylesheet rule with CSSOM</title> <style> body { background-color: red; } </style> <script> const stylesheet = document.styleSheets[0]; stylesheet.cssRules[0].style.backgroundColor = "aqua"; </script> </head> <body> The stylesheet declaration for the body's background color is modified via JavaScript. </body> </html>
Daftar properti yang tersedia di DOM dari properti style diberikan di halaman Daftar Properti CSS DOM
Untuk mengubah gaya ke dokumen menggunakan sintaks CSS, seseorang dapat menyisipkan aturan atau menyisipkan tag <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>simple style example</title> <script> function alterStyle(elem) { elem.style.background = "green"; } function resetStyle(elemId) { const elem = document.getElementById(elemId); elem.style.background = "white"; } </script> <style> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'. --> <p id="p1" title="alterStyle(this);"> Click here to change background color. </p> <!-- passes the 'p1' id of another element's style to modify. --> <button title="resetStyle('p1');">Reset background color</button> </body> </html> 6 yang properti <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>simple style example</title> <script> function alterStyle(elem) { elem.style.background = "green"; } function resetStyle(elemId) { const elem = document.getElementById(elemId); elem.style.background = "white"; } </script> <style> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'. --> <p id="p1" title="alterStyle(this);"> Click here to change background color. </p> <!-- passes the 'p1' id of another element's style to modify. --> <button title="resetStyle('p1');">Reset background color</button> </body> </html> 7 diatur ke CSS yang diinginkan
Properti elemen style (lihat juga bagian "Objek Gaya DOM" di bawah) juga dapat digunakan untuk mendapatkan dan menyetel gaya pada elemen. Namun, properti ini hanya mengembalikan atribut gaya yang telah ditetapkan sebaris (mis. g. , <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>simple style example</title> <script> function alterStyle(elem) { elem.style.background = "green"; } function resetStyle(elemId) { const elem = document.getElementById(elemId); elem.style.background = "white"; } </script> <style> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'. --> <p id="p1" title="alterStyle(this);"> Click here to change background color. </p> <!-- passes the 'p1' id of another element's style to modify. --> <button title="resetStyle('p1');">Reset background color</button> </body> </html> _9 mengembalikan string "<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Style Property Example</title> <link rel="StyleSheet" href="example.css" /> <script> function setStyle() { document.getElementById("d").style.color = "orange"; } function resetStyle() { document.getElementById("d").style.color = "black"; } </script> </head> <body> <div id="d" class="thunder">Thunder</div> <button title="setStyle()">Click here to change text color</button> <button title="resetStyle()">Reset text color</button> </body> </html> 0", atau langsung untuk elemen itu menggunakan <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Style Property Example</title> <link rel="StyleSheet" href="example.css" /> <script> function setStyle() { document.getElementById("d").style.color = "orange"; } function resetStyle() { document.getElementById("d").style.color = "black"; } </script> </head> <body> <div id="d" class="thunder">Thunder</div> <button title="setStyle()">Click here to change text color</button> <button title="resetStyle()">Reset text color</button> </body> </html> 1, meskipun mungkin ada gaya lain pada elemen dari stylesheet)
Selain itu, saat Anda menyetel properti ini pada suatu elemen, Anda mengganti gaya apa pun yang telah disetel di tempat lain untuk properti khusus elemen yang Anda setel. Mengatur properti <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Style Property Example</title> <link rel="StyleSheet" href="example.css" /> <script> function setStyle() { document.getElementById("d").style.color = "orange"; } function resetStyle() { document.getElementById("d").style.color = "black"; } </script> </head> <body> <div id="d" class="thunder">Thunder</div> <button title="setStyle()">Click here to change text color</button> <button title="resetStyle()">Reset text color</button> </body> </html> _2, misalnya, akan mengesampingkan pengaturan yang dibuat di tempat lain untuk properti <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Style Property Example</title> <link rel="StyleSheet" href="example.css" /> <script> function setStyle() { document.getElementById("d").style.color = "orange"; } function resetStyle() { document.getElementById("d").style.color = "black"; } </script> </head> <body> <div id="d" class="thunder">Thunder</div> <button title="setStyle()">Click here to change text color</button> <button title="resetStyle()">Reset text color</button> </body> </html> 2 elemen tersebut di bagian kepala, atau style sheet eksternal. Namun, ini tidak akan memengaruhi deklarasi properti lainnya untuk gaya elemen tersebut, seperti padding atau margin atau font, misalnya
Untuk mengubah gaya elemen tertentu, Anda dapat mengadaptasi contoh berikut untuk elemen yang ingin Anda gaya
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>simple style example</title> <script> function alterStyle(elem) { elem.style.background = "green"; } function resetStyle(elemId) { const elem = document.getElementById(elemId); elem.style.background = "white"; } </script> <style> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'. --> <p id="p1" title="alterStyle(this);"> Click here to change background color. </p> <!-- passes the 'p1' id of another element's style to modify. --> <button title="resetStyle('p1');">Reset background color</button> </body> </html> _
Metode <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Style Property Example</title> <link rel="StyleSheet" href="example.css" /> <script> function setStyle() { document.getElementById("d").style.color = "orange"; } function resetStyle() { document.getElementById("d").style.color = "black"; } </script> </head> <body> <div id="d" class="thunder">Thunder</div> <button title="setStyle()">Click here to change text color</button> <button title="resetStyle()">Reset text color</button> </body> </html> _4 pada objek <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Style Property Example</title> <link rel="StyleSheet" href="example.css" /> <script> function setStyle() { document.getElementById("d").style.color = "orange"; } function resetStyle() { document.getElementById("d").style.color = "black"; } </script> </head> <body> <div id="d" class="thunder">Thunder</div> <button title="setStyle()">Click here to change text color</button> <button title="resetStyle()">Reset text color</button> </body> </html> 5 mengembalikan semua gaya yang sebenarnya telah dihitung untuk sebuah elemen
Objek style mewakili pernyataan gaya individual. Objek gaya diakses dari <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>simple style example</title> <script> function alterStyle(elem) { elem.style.background = "green"; } function resetStyle(elemId) { const elem = document.getElementById(elemId); elem.style.background = "white"; } </script> <style> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'. --> <p id="p1" title="alterStyle(this);"> Click here to change background color. </p> <!-- passes the 'p1' id of another element's style to modify. --> <button title="resetStyle('p1');">Reset background color</button> </body> </html> _2 atau dari elemen yang menerapkan gaya tersebut. Ini mewakili gaya in-line pada elemen tertentu
Lebih penting dari dua properti yang disebutkan di sini adalah penggunaan objek style untuk menyetel properti gaya individu pada elemen
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Style Property Example</title> <link rel="StyleSheet" href="example.css" /> <script> function setStyle() { document.getElementById("d").style.color = "orange"; } function resetStyle() { document.getElementById("d").style.color = "black"; } </script> </head> <body> <div id="d" class="thunder">Thunder</div> <button title="setStyle()">Click here to change text color</button> <button title="resetStyle()">Reset text color</button> </body> </html>
Media dan jenis gaya dapat diberikan atau tidak
Perhatikan bahwa Anda juga dapat mengubah gaya elemen dengan mendapatkan referensi ke sana dan kemudian menggunakan metode <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Style Property Example</title> <link rel="StyleSheet" href="example.css" /> <script> function setStyle() { document.getElementById("d").style.color = "orange"; } function resetStyle() { document.getElementById("d").style.color = "black"; } </script> </head> <body> <div id="d" class="thunder">Thunder</div> <button title="setStyle()">Click here to change text color</button> <button title="resetStyle()">Reset text color</button> </body> </html> 9 untuk menentukan properti CSS dan nilainya
const el = document.getElementById('some-element'); el.setAttribute('style', 'background-color:darkblue;');
Ketahuilah, bagaimanapun, bahwa <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Style Property Example</title> <link rel="StyleSheet" href="example.css" /> <script> function setStyle() { document.getElementById("d").style.color = "orange"; } function resetStyle() { document.getElementById("d").style.color = "black"; } </script> </head> <body> <div id="d" class="thunder">Thunder</div> <button title="setStyle()">Click here to change text color</button> <button title="resetStyle()">Reset text color</button> </body> </html> _9 menghapus semua properti style lainnya yang mungkin sudah ditentukan dalam objek style elemen. Jika const el = document.getElementById('some-element'); el.setAttribute('style', 'background-color:darkblue;'); _3 elemen di atas memiliki atribut style in-line katakanlah const el = document.getElementById('some-element'); el.setAttribute('style', 'background-color:darkblue;'); 5, nilai itu akan dihapus dengan menggunakan <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Style Property Example</title> <link rel="StyleSheet" href="example.css" /> <script> function setStyle() { document.getElementById("d").style.color = "orange"; } function resetStyle() { document.getElementById("d").style.color = "black"; } </script> </head> <body> <div id="d" class="thunder">Thunder</div> <button title="setStyle()">Click here to change text color</button> <button title="resetStyle()">Reset text color</button> </body> </html> 9