Phenquestions
Prasyarat:
Untuk mencoba perintah dan contoh artikel ini, Anda harus memiliki,
1) Distribusi Linux (lebih disukai Ubuntu) diinstal pada komputer Anda.
2) Python 3 diinstal di komputer Anda.
3) PIP 3 diinstal di komputer Anda.
4) Python virtualenv paket terinstal di komputer Anda.
5) Mozilla Firefox atau browser web Google Chrome terpasang di komputer Anda.
6) Harus tahu cara menginstal Driver Firefox Gecko atau Driver Web Chrome.
Untuk memenuhi persyaratan 4, 5, dan 6, baca artikel saya Pengenalan Selenium dengan Python 3 di Linuxhint.com.
Anda dapat menemukan banyak artikel tentang topik lain di LinuxHint.com. Pastikan untuk memeriksanya jika Anda memerlukan bantuan.
Menyiapkan Direktori Proyek:
Untuk menjaga semuanya tetap teratur, buat direktori proyek baru Selenium-css-pemilih/ sebagai berikut:
$ mkdir -pv Selenium-css-selector/drivers
Navigasikan ke Selenium-css-pemilih/ direktori proyek sebagai berikut:
$ cd Selenium-css-selector/
Buat lingkungan virtual Python di direktori proyek sebagai berikut:
$ virtualenv .venv
Aktifkan lingkungan virtual sebagai berikut:
$ sumber .venv/bin/aktifkan
Instal pustaka Selenium Python menggunakan PIP3 sebagai berikut:
$pip3 instal selenium
Unduh dan instal semua driver web yang diperlukan di pengemudi/ direktori proyek. Saya telah menjelaskan proses mengunduh dan menginstal driver web di artikel saya Pengenalan Selenium dengan Python 3. Jika Anda memerlukan bantuan, cari di LinuxPetunjuk.com untuk artikel itu.
Dapatkan Pemilih CSS menggunakan Alat Pengembang Chrome:
Di bagian ini, saya akan menunjukkan kepada Anda bagaimana menemukan pemilih CSS dari elemen halaman web yang ingin Anda pilih dengan Selenium menggunakan Alat Pengembang bawaan dari browser web Google Chrome.
Untuk mendapatkan pemilih CSS menggunakan browser web Google Chrome, buka Google Chrome dan kunjungi situs web tempat Anda ingin mengekstrak data. Kemudian, tekan tombol kanan mouse (RMB) di area kosong halaman dan klik Memeriksa untuk membuka Alat Pengembang Chrome.
Anda juga dapat menekan
Alat Pengembang Chrome harus dibuka.
Untuk menemukan representasi HTML dari elemen halaman web yang Anda inginkan, klik pada Memeriksa() ikon seperti yang ditandai pada tangkapan layar di bawah ini.
Kemudian, arahkan kursor ke elemen halaman web yang Anda inginkan dan tekan tombol kiri mouse (LMB) untuk memilihnya.
Representasi HTML dari elemen web yang Anda pilih akan disorot di in Elemen tab dari Alat Pengembang Chrome seperti yang Anda lihat pada tangkapan layar di bawah ini.
Untuk mendapatkan pemilih CSS dari elemen yang Anda inginkan, pilih elemen dari Elemen tab dari Alat Pengembang Chrome dan klik kanan (RMB) di atasnya. Kemudian, pilih Salinan > Salin pemilih seperti yang ditandai pada tangkapan layar di bawah ini.
Saya telah menempelkan pemilih CSS di editor teks. Pemilih CSS terlihat seperti yang ditunjukkan pada gambar di bawah.
Dapatkan Pemilih CSS menggunakan Alat Pengembang Firefox:
Di bagian ini, saya akan menunjukkan kepada Anda bagaimana menemukan pemilih CSS dari elemen halaman web yang ingin Anda pilih dengan Selenium menggunakan Alat Pengembang bawaan dari browser web Mozilla Firefox.
Untuk mendapatkan pemilih CSS menggunakan browser web Firefox, buka Firefox dan kunjungi situs web tempat Anda ingin mengekstrak data. Kemudian, tekan tombol kanan mouse (RMB) di area kosong halaman dan klik Elemen Inspeksi (Q) untuk membuka Alat Pengembang Firefox.
Alat Pengembang Firefox harus dibuka.
Untuk menemukan representasi HTML dari elemen halaman web yang Anda inginkan, klik pada Memeriksa() ikon seperti yang ditandai pada tangkapan layar di bawah ini.
Kemudian, arahkan kursor ke elemen halaman web yang Anda inginkan dan tekan tombol kiri mouse (LMB) untuk memilihnya.
Representasi HTML dari elemen web yang Anda pilih akan disorot di in Inspektur tab dari Alat Pengembang Firefox seperti yang Anda lihat pada tangkapan layar di bawah ini.
Untuk mendapatkan pemilih CSS dari elemen yang Anda inginkan, pilih elemen dari Inspektur tab dari Alat Pengembang Firefox dan klik kanan (RMB) di atasnya. Kemudian, pilih Salinan > pemilih CSS seperti yang ditandai pada tangkapan layar di bawah ini.
Pemilih CSS dari elemen yang Anda inginkan akan terlihat seperti ini.
Mengekstrak Data menggunakan CSS Selector dengan Selenium:
Di bagian ini, saya akan menunjukkan cara memilih elemen halaman web dan mengekstrak data darinya menggunakan pemilih CSS dengan pustaka Selenium Python.
Pertama, buat skrip Python baru ex00.py dan ketikkan baris kode berikut.
dari selenium impor webdriverdari selenium.webdriver.umum.kunci impor Kunci
dari selenium.webdriver.umum.dengan mengimpor Oleh
pilihan = webdriver.Opsi Chrome()
pilihan.tanpa kepala = Benar
browser = webdriver.Chrome(executable_path="./driver/chromedriver", opsi = opsi)
peramban.dapatkan("https://www.unixtimestamp.com/")
stempel waktu = browser.find_element_by_css_selector('h3.text-danger:nth-child(3)')
print('Stempel waktu saat ini: %s' % (stempel waktu.teks.membagi (")[0]))
peramban.Menutup()
Setelah selesai, simpan ex00.py skrip python.
Baris 1-3 mengimpor semua komponen Selenium yang diperlukan.
Baris 5 membuat objek Opsi Chrome dan baris 6 mengaktifkan mode tanpa kepala untuk browser web Chrome.
Baris 8 membuat Chrome peramban objek menggunakan chromedriver biner dari pengemudi/ direktori proyek.
Baris 10 memberitahu browser untuk memuat situs web unixtimestamp.com.
Baris 12 menemukan elemen yang memiliki data stempel waktu dari halaman menggunakan pemilih CSS dan menyimpannya di stempel waktu variabel.
Baris 13 mem-parsing data stempel waktu dari elemen dan mencetaknya di konsol.
Ini adalah bagaimana struktur HTML dari data timestamp UNIX di unixtimestamp.com sepertinya.
Baris 14 menutup browser.
Jalankan skrip Python ex00.py sebagai berikut:
$ python3 ex00.py
Seperti yang Anda lihat, data stempel waktu dicetak di layar.
Di sini, saya telah menggunakan peramban.find_element(Oleh, pemilih) metode.
Saat kita menggunakan pemilih CSS, parameter pertama adalah Oleh.CSS_SELECTOR dan parameter kedua adalah pemilih CSS itu sendiri.
Dari pada peramban.temukan_elemen() metode, Anda juga dapat menggunakan peramban.find_element_by_css_selector(pemilih) metode. Metode ini hanya membutuhkan pemilih CSS untuk bekerja. Hasilnya akan sama.
Itu peramban.temukan_elemen() dan peramban.find_element_by_css_selector() metode yang digunakan untuk menemukan dan memilih satu elemen dari halaman web. Jika Anda ingin mencari dan memilih beberapa elemen menggunakan pemilih CSS, maka Anda harus menggunakan peramban.temukan_elemen() dan peramban.find_elements_by_css_selector() metode.
Itu peramban.temukan_elemen() metode mengambil argumen yang sama dengan peramban.temukan_elemen() metode.
Itu peramban.find_elements_by_css_selector() metode mengambil argumen yang sama dengan peramban.find_element_by_css_selector() metode.
Mari kita lihat contoh mengekstrak daftar nama menggunakan pemilih CSS dari generator nama-acak.info dengan Selenium.
Seperti yang Anda lihat, daftar yang tidak berurutan memiliki nama kelas Daftar nama. Jadi, kita bisa menggunakan pemilih CSS .namaDaftar li untuk memilih semua nama dari halaman web.
Mari kita lihat contoh memilih beberapa elemen dari halaman web menggunakan pemilih CSS.
Buat skrip Python baru ex01.py dan ketikkan baris kode berikut di dalamnya.
dari selenium impor webdriverdari selenium.webdriver.umum.kunci impor Kunci
dari selenium.webdriver.umum.dengan mengimpor Oleh
pilihan = webdriver.Opsi Chrome()
pilihan.tanpa kepala = Benar
browser = webdriver.Chrome(executable_path="./driver/chromedriver", opsi = opsi)
peramban.get("http://random-name-generator.info/")
nama = browser.temukan_elemen(Oleh.CSS_SELECTOR, '.Daftar nama li')
untuk nama dalam nama:
cetak(nama.teks)
peramban.Menutup()
Setelah selesai, simpan ex01.py skrip python.
Baris 1-8 sama dengan di ex00.py skrip python. Jadi, saya tidak akan menjelaskannya di sini lagi.
Baris 10 memberi tahu browser untuk memuat generator nama-acak situs web.info.
Baris 12 memilih daftar nama menggunakan peramban.temukan_elemen() metode. Metode ini menggunakan pemilih CSS .namaDaftar li untuk menemukan daftar nama. Kemudian, daftar nama disimpan di nama variabel.
Pada baris 13 dan 14, a untuk loop digunakan untuk iterasi melalui nama daftar dan cetak nama di konsol.
Baris 16 menutup browser.
Jalankan skrip Python ex01.py sebagai berikut:
$ python3 ex01.py
Seperti yang Anda lihat, nama-nama diekstraksi dari halaman web dan dicetak di konsol.
Alih-alih menggunakan peramban.temukan_elemen() metode, Anda juga dapat menggunakan peramban.find_elements_by_css_selector() metode seperti sebelumnya. Metode ini hanya membutuhkan pemilih CSS untuk bekerja. Hasilnya akan sama.
Dasar-dasar Pemilih CSS:
Anda selalu dapat menemukan pemilih CSS dari elemen halaman web menggunakan Alat Pengembang Firefox atau browser web Chrome. Pemilih CSS yang dibuat secara otomatis ini mungkin bukan yang Anda inginkan. Terkadang Anda mungkin harus menulis pemilih CSS Anda CSS.
Di bagian ini, saya akan berbicara tentang dasar-dasar pemilih CSS sehingga Anda dapat memahami apa yang dipilih oleh pemilih CSS tertentu dari halaman web dan menulis pemilih CSS khusus Anda jika diperlukan.
Jika Anda ingin memilih elemen dari halaman web menggunakan ID pesan, pemilih CSS akan menjadi #pesan.
Pemilih CSS .hijau akan memilih elemen menggunakan nama kelas hijau.
Jika Anda ingin memilih elemen (kelas pesan) di dalam elemen lain (kelas wadah), pemilih CSS akan menjadi .wadah .pesan
Pemilih CSS .pesan.keberhasilan akan memilih elemen yang memiliki dua kelas CSS pesan dan keberhasilan.
Untuk memilih semua p tag, Anda dapat menggunakan pemilih CSS p.
Untuk memilih hanya p tag di dalam div tag, Anda dapat menggunakan pemilih CSS div p
Untuk memilih p tag yang merupakan saudara langsung dari div tag, Anda dapat menggunakan pemilih CSS div > p
Untuk memilih semua menjangkau dan p tag, Anda dapat menggunakan pemilih CSS p, rentang
Untuk memilih p tag segera setelah after div tag, Anda dapat menggunakan pemilih CSS div + p
Untuk memilih p tandai setelah div tag, Anda dapat menggunakan pemilih CSS div ~ p
Untuk memilih semua p tag yang memiliki nama kelas pesan, anda dapat menggunakan pemilih CSS p.pesan
Untuk memilih semua menjangkau tag yang memiliki nama kelas pesan, anda dapat menggunakan pemilih CSS menjangkau.pesan
Untuk memilih semua elemen yang memiliki atribut href, anda dapat menggunakan pemilih CSS [href]
Untuk memilih elemen yang memiliki atribut nama dan nilai nama atribut adalah nama pengguna, anda dapat menggunakan pemilih CSS [nama=”nama pengguna”]
Untuk memilih semua elemen yang memiliki atribut alt dan nilai alt atribut yang mengandung substring vscode, anda dapat menggunakan pemilih CSS [alt~="vscode"]
Untuk memilih semua elemen yang memiliki href atribut dan nilai href atribut dimulai dengan string https, anda dapat menggunakan pemilih CSS [href^=”https”]
Untuk memilih semua elemen yang memiliki href atribut dan nilai href atribut diakhiri dengan string .com, anda dapat menggunakan pemilih CSS [href$=”.com”]
Untuk memilih semua elemen yang memiliki href atribut dan nilai href atribut memiliki substring google, anda dapat menggunakan pemilih CSS [href*="google"]
Jika Anda ingin memilih yang pertama li tandai di dalam ul tag, Anda dapat menggunakan pemilih CSS ul li:anak pertama
Jika Anda ingin memilih yang pertama li tandai di dalam ul tag, Anda juga dapat menggunakan pemilih CSS ul li:anak ke-n(1)
Jika Anda ingin memilih yang terakhir li tandai di dalam ul tag, Anda dapat menggunakan pemilih CSS ul li:anak terakhir
Jika Anda ingin memilih yang terakhir li tandai di dalam ul tag, Anda juga dapat menggunakan pemilih CSS ul li:n-anak terakhir(1)
Jika Anda ingin memilih yang kedua li tandai di dalam ul tag mulai dari awal, Anda dapat menggunakan pemilih CSS ul li:anak ke-n(2)
Jika Anda ingin memilih yang ketiga li tandai di dalam ul tag mulai dari awal, Anda dapat menggunakan pemilih CSS ul li:anak ke-n(3)
Jika Anda ingin memilih yang kedua li tandai di dalam ul tag mulai dari akhir, Anda dapat menggunakan pemilih CSS ul li:n-anak terakhir(2)
Jika Anda ingin memilih yang ketiga li tandai di dalam ul tag mulai dari akhir, Anda dapat menggunakan pemilih CSS ul li:n-anak terakhir(3)
Ini adalah pemilih CSS yang paling umum. Anda akan menemukan diri Anda menggunakan ini hampir di setiap proyek Selenium. Ada banyak lagi pemilih CSS. Anda dapat menemukan daftar semuanya di w3schools.com Referensi Pemilih CSS.
Kesimpulan:
Dalam artikel ini, saya telah menunjukkan cara mencari dan memilih elemen halaman web menggunakan pemilih CSS dengan Selenium. Saya juga telah membahas dasar-dasar pemilih CSS. Anda harus dapat menggunakan penyeleksi CSS dengan nyaman untuk proyek Selenium Anda.
