Cara menggunakan WEBELEMENT.FINDELEMENT pada JavaScript

🐛 Bug Report

WebElement.findElement(By.js( ... )) throws a TypeError.

Table of Contents Show

🐛 Bug Report
To Reproduce
Expected behavior
Test script or set of commands reproducing this issue
Environment
Apa itu JavaScript?
Bagaimana Kami Menggunakan JavaScript di WebDriver?
**Metode 1: **Mengeksekusi JavaScript di Level Root Dokumen
Metode 2: Menjalankan JavaScript di Level Elemen
Cara Mengembalikan Nilai
Apa yang Terjadi Ketika Elemen Tidak Ditemukan?

To Reproduce

var driver=new Builder().forBrowser('firefox').build();
driver.get('https://google.com');
driver.wait(until.elementLocated(By.js('return document.getElementById("tsf");'))).then(function(form){
	form.findElement(By.js('return this.getElementsByName("q")[0];')); // <- TypeError
});

This throws a type error regardless of the contents of the second By.js. What is the expected behaviour? Should this in this case be linked to the WebElement (as I assumed here)?

If you can tell me what the expected behaviour is, I can see if I can make a PR. (Would it then this be OK if WebElement would provide a executeScript method, as this seems to be the most straightforward solution?)

Expected behavior

This should open the Google page without errors (but do nothing, since no further actions are specified).

Test script or set of commands reproducing this issue

See under "to reproduce".

Environment

OS: Debian 10.1
Browser: Firefox
Browser version: 60.9.0esr
Browser Driver version: geckodriver 0.24.0
Language Bindings version: JS 4.0.0-alpha.5
Selenium Grid version (if applicable): not applicable.

Dalam tutorial ini, mari kita menganalisis fitur yang paling jarang digunakan tetapi paling kuat dari Selenium WebDriver . Ya, saya akan membahas JavaScript executor, dan menunjukkan kepada Anda beberapa cara berbeda untuk mengeksekusi pernyataan JavaScript melalui Python Selenium WebDriver.

Mungkin saja dalam beberapa proyek waktu nyata, Selenium WebDriver tidak dapat melakukan tindakan pada elemen web tertentu. Misalnya, karena WebDriver mensimulasikan interaksi pengguna akhir, wajar jika ia menolak untuk mengklik elemen yang tidak terlihat oleh pengguna akhir (terkadang juga terjadi meskipun elemen web terlihat di halaman). Mungkin ada beberapa alasan atau skenario serupa lainnya.

Dalam kasus ini, kita dapat mengandalkan JavaScript untuk mengklik atau melakukan tindakan pada elemen web tersebut, dan pernyataan JavaScript ini dapat dijalankan melalui WebDriver.

Anda dapat melakukan semua yang dilakukan antarmuka WebElement dan lebih banyak lagi dengan JavaScript.

Apa itu JavaScript?

JavaScript adalah bahasa skrip yang berjalan di sisi klien, yaitu di browser, dan melakukan beberapa hal ajaib saat Anda menjelajahi halaman web. Untuk lebih jelasnya, cari kata kunci JavaScript di DZone.

Bagaimana Kami Menggunakan JavaScript di WebDriver?

Python Selenium WebDriver menyediakan metode bawaan:

driver.execute_script('some javascript code here');

Ada dua cara kita dapat mengeksekusi JavaScript di dalam browser.

Metode 1: Mengeksekusi JavaScript di Level Root Dokumen

Dalam hal ini, kami menangkap elemen yang ingin kami kerjakan, menggunakan metode yang disediakan JavaScript, lalu mendeklarasikan beberapa tindakan di dalamnya dan menjalankan JavaScript ini menggunakan WebDriver.

Contoh:

netflix mengaktifkan perangkat

javaScript = 'document.getElementsByName('username')[0].click();' driver.execute_script(javaScript)

Apa yang Kita Lakukan Disini?

Langkah 1: Kami memeriksa dan mengambil elemen dengan 'nama' properti menggunakan JavaScript. (Juga, properti 'id' dan 'class' dapat digunakan.)

Langkah 2: Deklarasikan dan lakukan tindakan klik pada elemen menggunakan JavaScript.

Langkah 3: Panggil metode execute_script() dan teruskan JavaScript yang kita buat sebagai nilai string.

Pemberitahuan |_+_| di |_+_| pernyataan di atas. Fungsi JavaScript |_+_| , |_+_| , dan seterusnya mengembalikan semua elemen yang cocok sebagai array. Dalam kasus kami, kami perlu bertindak pada elemen pencocokan pertama yang dapat diakses melalui |_+_| . Jika Anda tahu apa yang Anda lakukan, yaitu, jika Anda mengetahui indeks elemen yang ingin Anda operasikan, Anda dapat langsung menggunakan indeks, seperti |_+_| .

Namun, jika Anda menggunakan fungsi JavaScript ' |_+_| ', Anda tidak perlu menggunakan pengindeksan apa pun, karena hanya akan mengembalikan satu elemen ('id' harus unik).

Saat mengeksekusi, WebDriver akan menyuntikkan pernyataan JavaScript ke browser dan skrip akan melakukan pekerjaan itu. Dalam contoh kita, ia melakukan operasi klik pada elemen target. JavaScript ini memiliki namespace sendiri dan tidak mengganggu JavaScript di halaman web yang sebenarnya.

Metode 2: Menjalankan JavaScript di Level Elemen

Dalam hal ini, kami menangkap elemen yang ingin kami kerjakan menggunakan WebDriver, lalu kami mendeklarasikan beberapa tindakan di dalamnya menggunakan JavaScript dan menjalankan JavaScript ini menggunakan WebDriver dengan meneruskan elemen web sebagai argumen ke JavaScript.

Apakah ini membingungkan? Mari kita uraikan.

Sebagai contoh:

[0]

Apa yang Kita Lakukan Disini?

Langkah 1: Periksa dan tangkap elemen menggunakan metode yang disediakan WebDriver seperti ' |_+_| ':

getElementsByName('username')[0]

Langkah 2: Deklarasikan dan lakukan tindakan klik pada elemen menggunakan JavaScript:

getElementsByName

Langkah 3: Hubungi |_+_| metode dengan pernyataan JavaScript yang kami buat sebagai nilai string dan elemen web ditangkap menggunakan WebDriver sebagai argumen:

getElementsByClassName

Dua baris kode di atas dapat dipersingkat menjadi format di bawah ini, di mana kita menemukan elemen menggunakan WebDriver, mendeklarasikan beberapa fungsi JavaScript, dan menjalankan JavaScript menggunakan WebDriver.

index [0]

Masalah lain yang lebih sering dihadapi adalah kebutuhan untuk menggulir ke bagian bawah halaman web. Anda dapat melakukan operasi ini dalam satu baris kode:

getElementsByName('username')[2]

Selain itu, Anda dapat memiliki lebih dari satu tindakan JavaScript dalam pernyataan Anda.

kompilasi node js ke exe

Sebagai contoh:

getElementById

Dalam hal ini, penggunaan urutan elemen web penting. Mengakses |_+_| dengan |_+_| di mana saja di dalam pernyataan JavaScript akan mengambil elemen web pertama yang dilewatkan.

userName = driver.find_element_by_xpath('//button[@name='username']') driver.execute_script('arguments[0].click();', userName)

Cara Mengembalikan Nilai

Aspek penting lainnya dari pelaksana JavaScript adalah dapat digunakan untuk mengambil nilai dari elemen web. Itu artinya |_+_| metode dapat mengembalikan nilai.

Sebagai contoh:

find element by_xpath

Perhatikan bahwa jika Anda ingin sesuatu dikembalikan oleh kode JavaScript, Anda harus menggunakan return. Juga, elemen dapat ditemukan dengan Selenium dan diteruskan ke skrip.

urutkan array objek berdasarkan nilai kunci

Apa yang Terjadi Ketika Elemen Tidak Ditemukan?

Ketika JavaScript tidak dapat menemukan elemen untuk dioperasikan, itu melempar pengecualian WebDriver dengan pesan kesalahan masing-masing.

Skenario 1: Kami mencoba membaca properti menggunakan ' |_+_| ' tetapi tidak ada elemen seperti itu yang tersedia di halaman web. Kami mendapatkan pesan berikut di jejak pengecualian:

userName = driver.find_element_by_xpath('//button[@name='username']')

Skenario 2: Kami mencoba menggunakan operasi yang tidak valid atau nama fungsi kesalahan di dalam JavaScript, seperti ' |_+_| '. (Perhatikan kesalahan ejaan dalam nama metode |_+_|.)

arguments[0].click()

Ringkasan

Berikut adalah ringkasan dari beberapa tindakan potensial yang dapat digunakan JavaScript.

dapatkan teks elemen atau atribut
menemukan elemen
melakukan beberapa operasi pada elemen, seperti |_+_|
mengubah atribut suatu elemen
gulir ke elemen atau lokasi di halaman web
tunggu sampai halaman dimuat

Pengetahuan dasar tentang JavaScript sangat membantu saat menangani DOM dengan Selenium. Anda dapat menemukan lebih banyak detail dan artikel di allselenium situs web.

#javascript #python #pengembangan web