Phenquestions
Prasyarat:
Untuk mencuba perintah dan contoh artikel ini, anda mesti ada,
1) Sebaran Linux (sebaiknya Ubuntu) dipasang di komputer anda.
2) Python 3 dipasang pada komputer anda.
3) PIP 3 dipasang pada komputer anda.
4) Python virtualenv pakej yang dipasang di komputer anda.
5) Penyemak imbas web Mozilla Firefox atau Google Chrome yang dipasang di komputer anda.
6) Mesti tahu cara memasang Pemacu Firefox Gecko atau Pemacu Web Chrome.
Untuk memenuhi syarat 4, 5, dan 6, baca artikel saya Pengenalan Selenium dengan Python 3 di Linuxhint.com.
Anda boleh menemui banyak artikel mengenai topik lain di LinuxHint.com. Pastikan anda memeriksanya jika anda memerlukan bantuan.
Menyiapkan Direktori Projek:
Untuk memastikan semuanya teratur, buat direktori projek baru selenium-css-pemilih / seperti berikut:
$ mkdir -pv selenium-css-pemilih / pemacu
Navigasi ke selenium-css-pemilih / direktori projek seperti berikut:
$ cd selenium-css-pemilih /
Buat persekitaran maya Python dalam direktori projek seperti berikut:
$ virtualenv .venv
Aktifkan persekitaran maya seperti berikut:
sumber $ .venv / bin / aktifkan
Pasang perpustakaan Selenium Python menggunakan PIP3 seperti berikut:
$ pip3 memasang selenium
Muat turun dan pasang semua pemacu web yang diperlukan di pemandu / direktori projek. Saya telah menerangkan proses memuat turun dan memasang pemacu web dalam artikel saya Pengenalan Selenium dengan Python 3. Sekiranya anda memerlukan bantuan, cari di LinuxHint.com untuk artikel itu.
Dapatkan Pemilih CSS menggunakan Alat Pembangun Chrome:
Pada bahagian ini, saya akan menunjukkan kepada anda cara mencari pemilih CSS elemen laman web yang ingin anda pilih dengan Selenium menggunakan Alat Pembangun bawaan penyemak imbas Google Chrome.
Untuk mendapatkan pemilih CSS menggunakan penyemak imbas web Google Chrome, buka Google Chrome dan lawati laman web dari mana anda ingin mengekstrak data. Kemudian, tekan butang kanan tetikus (RMB) di kawasan kosong halaman dan klik Periksa untuk membuka Alat Pembangun Chrome.
Anda juga boleh menekan
Alat Pembangun Chrome hendaklah dibuka.
Untuk mencari representasi HTML elemen halaman web yang anda inginkan, klik pada Periksa() ikon seperti yang ditandakan pada tangkapan skrin di bawah.
Kemudian, arahkan kursor ke elemen halaman web yang anda inginkan dan tekan butang kiri tetikus (LMB) untuk memilihnya.
Perwakilan HTML elemen web yang anda pilih akan disorot di Unsur tab dari Alat Pembangun Chrome seperti yang anda lihat dalam tangkapan skrin di bawah.
Untuk mendapatkan pemilih CSS elemen yang anda inginkan, pilih elemen dari Unsur tab dari Alat Pembangun Chrome dan klik kanan (RMB) di atasnya. Kemudian, pilih Salinan > Salin pemilih seperti yang ditandakan pada tangkapan skrin di bawah.
Saya telah menampal pemilih CSS dalam penyunting teks. Pemilih CSS kelihatan seperti yang ditunjukkan dalam tangkapan skrin di bawah.
Dapatkan Pemilih CSS menggunakan Firefox Developer Tool:
Di bahagian ini, saya akan menunjukkan kepada anda bagaimana mencari pemilih CSS elemen laman web yang ingin anda pilih dengan Selenium menggunakan Alat Pembangun terbina dalam penyemak imbas web Mozilla Firefox.
Untuk mendapatkan pemilih CSS menggunakan penyemak imbas web Firefox, buka Firefox dan lawati laman web dari mana anda ingin mengekstrak data. Kemudian, tekan butang kanan tetikus (RMB) di kawasan kosong halaman dan klik Periksa Elemen (Q) untuk membuka Alat Pembangun Firefox.
Alat Pembangun Firefox hendaklah dibuka.
Untuk mencari representasi HTML elemen halaman web yang anda inginkan, klik pada Periksa() ikon seperti yang ditandakan pada tangkapan skrin di bawah.
Kemudian, arahkan kursor ke elemen halaman web yang anda inginkan dan tekan butang kiri tetikus (LMB) untuk memilihnya.
Perwakilan HTML elemen web yang anda pilih akan disorot di Pemeriksa tab dari Alat Pembangun Firefox seperti yang anda lihat dalam tangkapan skrin di bawah.
Untuk mendapatkan pemilih CSS elemen yang anda inginkan, pilih elemen dari Pemeriksa tab dari Alat Pembangun Firefox dan klik kanan (RMB) di atasnya. Kemudian, pilih Salinan > Pemilih CSS seperti yang ditandakan pada tangkapan skrin di bawah.
Pemilih CSS elemen yang anda mahukan akan kelihatan seperti ini.
Mengekstrak Data menggunakan CSS Selector dengan Selenium:
Pada bahagian ini, saya akan menunjukkan kepada anda cara memilih elemen halaman web dan mengekstrak data daripadanya menggunakan pemilih CSS dengan perpustakaan Selenium Python.
Pertama, buat skrip Python baru ex00.py dan taipkan baris kod berikut.
dari pemacu web import seleniumdari selenium.pemacu laman web.biasa.kunci import Kekunci
dari selenium.pemacu laman web.biasa.oleh import Oleh
pilihan = pemacu web.Pilihan Chrome ()
pilihan.tanpa kepala = Betul
penyemak imbas = pemacu web.Chrome (executable_path = "./ driver / chromedriver ", options = pilihan)
penyemak imbas.dapatkan ("https: // www.cap unixtimest.com / ")
cap waktu = penyemak imbas.cari_element_by_css_selector ('h3.bahaya teks: anak ke-3 (3) ')
cetak ('Cap waktu semasa:% s'% (cap waktu.teks.berpisah (") [0]))
penyemak imbas.tutup ()
Setelah selesai, simpan ex00.py Skrip Python.
Baris 1-3 mengimport semua komponen Selenium yang diperlukan.
Baris 5 membuat objek Pilihan Chrome dan baris 6 membolehkan mod tanpa kepala untuk penyemak imbas web Chrome.
Baris 8 membuat Chrome penyemak imbas objek menggunakan kromedriver binari dari pemandu / direktori projek.
Baris 10 memberitahu penyemak imbas memuatkan cap laman web unixtimestamp.com.
Baris 12 menemui elemen yang mempunyai data cap waktu dari halaman menggunakan pemilih CSS dan menyimpannya di cap waktu pemboleh ubah.
Baris 13 menguraikan data cap waktu dari elemen dan mencetaknya pada konsol.
Ini adalah bagaimana struktur HTML data cap waktu UNIX di unixtimestamp.com kelihatan seperti.
Baris 14 menutup penyemak imbas.
Jalankan skrip Python ex00.py seperti berikut:
$ python3 ex00.py
Seperti yang anda lihat, data cap waktu dicetak di skrin.
Di sini, saya telah menggunakan penyemak imbas.find_element (Oleh, pemilih) kaedah.
Oleh kerana kita menggunakan pemilih CSS, parameter pertama adalah Oleh.CSS_SELECTOR dan parameter kedua akan menjadi pemilih CSS itu sendiri.
Bukannya penyemak imbas.cari_elemen () kaedah, anda juga boleh menggunakan penyemak imbas.find_element_by_css_selector (pemilih) kaedah. Kaedah ini hanya memerlukan pemilih CSS untuk berfungsi. Hasilnya akan sama.
The penyemak imbas.cari_elemen () dan penyemak imbas.cari_element_by_css_selector () kaedah digunakan untuk mencari dan memilih satu elemen dari laman web. Sekiranya anda ingin mencari dan memilih beberapa elemen menggunakan pemilih CSS, maka anda harus menggunakan penyemak imbas.cari_ elemen () dan penyemak imbas.cari_elemen_by_css_selektor () kaedah.
The penyemak imbas.cari_ elemen () kaedah mengambil hujah yang sama dengan penyemak imbas.cari_elemen () kaedah.
The penyemak imbas.cari_elemen_by_css_selector () kaedah mengambil hujah yang sama dengan penyemak imbas.cari_element_by_css_selector () kaedah.
Mari lihat contoh mengekstrak senarai nama menggunakan pemilih CSS dari penjana nama rawak.maklumat dengan Selenium.
Seperti yang anda lihat, senarai yang tidak disusun mempunyai nama kelas senarai nama. Jadi, kita boleh menggunakan pemilih CSS .namaSenarai li untuk memilih semua nama dari laman web.
Mari kita teliti contoh memilih beberapa elemen dari laman web menggunakan pemilih CSS.
Buat skrip Python baru ex01.py dan taipkan baris kod berikut di dalamnya.
dari pemacu web import seleniumdari selenium.pemacu laman web.biasa.kunci import Kekunci
dari selenium.pemacu laman web.biasa.oleh import Oleh
pilihan = pemacu web.Pilihan Chrome ()
pilihan.tanpa kepala = Betul
penyemak imbas = pemacu web.Chrome (executable_path = "./ driver / chromedriver ", options = pilihan)
penyemak imbas.dapatkan ("http: // rawak-nama-penjana.maklumat / ")
nama = penyemak imbas.find_elements (Oleh.CSS_SELECTOR, '.namaSenarai li ')
untuk nama dalam nama:
mencetak (nama.teks)
penyemak imbas.tutup ()
Setelah selesai, simpan ex01.py Skrip Python.
Baris 1-8 sama seperti di ex00.py Skrip Python. Jadi, saya tidak akan menerangkannya di sini lagi.
Baris 10 memberitahu penyemak imbas untuk memuatkan penjana nama rawak laman web.maklumat.
Baris 12 memilih senarai nama menggunakan penyemak imbas.cari_ elemen () kaedah. Kaedah ini menggunakan pemilih CSS .namaSenarai li untuk mencari senarai nama. Kemudian, senarai nama disimpan di nama-nama pemboleh ubah.
Dalam baris 13 dan 14, a untuk gelung digunakan untuk melakukan lelaran melalui nama-nama senaraikan dan cetak nama pada konsol.
Baris 16 menutup penyemak imbas.
Jalankan skrip Python ex01.py seperti berikut:
$ python3 ex01.py
Seperti yang anda lihat, nama-nama tersebut diekstrak dari laman web dan dicetak di konsol.
Daripada menggunakan penyemak imbas.cari_ elemen () kaedah, anda juga boleh menggunakan penyemak imbas.cari_elemen_by_css_selector () kaedahnya seperti sebelumnya. Kaedah ini hanya memerlukan pemilih CSS untuk berfungsi. Hasilnya akan sama.
Asas Pemilih CSS:
Anda sentiasa dapat mencari pemilih CSS elemen halaman web menggunakan Alat Pembangun Firefox atau penyemak imbas web Chrome. Pemilih CSS yang dihasilkan secara automatik ini mungkin tidak seperti yang anda mahukan. Kadang kala anda mungkin perlu menulis pemilih CSS anda.
Pada bahagian ini, saya akan membincangkan asas-asas pemilih CSS sehingga anda dapat memahami apa yang dipilih oleh pemilih CSS dari laman web dan menulis pemilih CSS tersuai anda jika diperlukan.
Sekiranya anda ingin memilih elemen dari laman web menggunakan ID mesej, pemilih CSS akan #mesej.
Pemilih CSS .hijau akan memilih elemen menggunakan nama kelas hijau.
Sekiranya anda ingin memilih elemen (kelas msg) di dalam elemen lain (kelas bekas), pemilih CSS akan .bekas .msg
Pemilih CSS .msg.kejayaan akan memilih elemen yang mempunyai dua kelas CSS msg dan kejayaan.
Untuk memilih semua hlm tag, anda boleh menggunakan pemilih CSS hlm.
Untuk memilih hanya hlm tag di dalam div tag, anda boleh menggunakan pemilih CSS div p
Untuk memilih hlm tag yang merupakan saudara kandung langsung dari div tag, anda boleh menggunakan pemilih CSS div> p
Untuk memilih semua jangka masa dan hlm tag, anda boleh menggunakan pemilih CSS p, rentang
Untuk memilih hlm tag sejurus selepas div tag, anda boleh menggunakan pemilih CSS div + p
Untuk memilih hlm tanda selepas div tag, anda boleh menggunakan pemilih CSS div ~ p
Untuk memilih semua hlm tag yang mempunyai nama kelas msg, anda boleh menggunakan pemilih CSS hlm.msg
Untuk memilih semua jangka masa tag yang mempunyai nama kelas msg, anda boleh menggunakan pemilih CSS jangka masa.msg
Untuk memilih semua elemen yang mempunyai atribut href, anda boleh menggunakan pemilih CSS [href]
Untuk memilih elemen yang mempunyai atribut nama dan nilai nama atribut adalah nama pengguna, anda boleh menggunakan pemilih CSS [nama = "nama pengguna"]
Untuk memilih semua elemen yang mempunyai atribut alt dan nilai alt atribut yang mengandungi substring vskod, anda boleh menggunakan pemilih CSS [alt ~ = "vscode"]
Untuk memilih semua elemen yang mempunyai href atribut dan nilai href atribut bermula dengan rentetan https, anda boleh menggunakan pemilih CSS [href ^ = "https"]
Untuk memilih semua elemen yang mempunyai href atribut dan nilai href atribut yang diakhiri dengan rentetan .com, anda boleh menggunakan pemilih CSS [href $ = ”.com ”]
Untuk memilih semua elemen yang mempunyai href atribut dan nilai href atribut mempunyai substring google, anda boleh menggunakan pemilih CSS [href * = ”google”]
Sekiranya anda mahu memilih yang pertama li tag di dalam ul tag, anda boleh menggunakan pemilih CSS ul li: anak pertama
Sekiranya anda mahu memilih yang pertama li tag di dalam ul tag, anda juga boleh menggunakan pemilih CSS ul li: anak ke-9 (1)
Sekiranya anda ingin memilih yang terakhir li tag di dalam ul tag, anda boleh menggunakan pemilih CSS ul li: anak terakhir
Sekiranya anda ingin memilih yang terakhir li tag di dalam ul tag, anda juga boleh menggunakan pemilih CSS ul li: anak ke-terakhir (1)
Sekiranya anda mahu memilih yang kedua li tag di dalam ul bermula dari awal, anda boleh menggunakan pemilih CSS ul li: anak ke-9 (2)
Sekiranya anda mahu memilih yang ketiga li tag di dalam ul bermula dari awal, anda boleh menggunakan pemilih CSS ul li: anak ke-9 (3)
Sekiranya anda mahu memilih yang kedua li tag di dalam ul bermula dari akhir, anda boleh menggunakan pemilih CSS ul li: anak ke-terakhir (2)
Sekiranya anda mahu memilih yang ketiga li tag di dalam ul bermula dari akhir, anda boleh menggunakan pemilih CSS ul li: anak ke-terakhir (3)
Ini adalah pemilih CSS yang paling biasa. Anda akan menggunakan ini hampir di setiap projek Selenium. Terdapat banyak lagi pemilih CSS. Anda boleh mendapatkan senarai semuanya di w3schools.com Rujukan Pemilih CSS.
Penyertaan:
Dalam artikel ini, saya telah menunjukkan cara mencari dan memilih elemen laman web menggunakan pemilih CSS dengan Selenium. Saya juga telah membincangkan asas-asas pemilih CSS. Anda seharusnya dapat menggunakan pemilih CSS dengan selesa untuk projek Selenium anda.
