4.9 KiB
Langkah Kuliah
🌐 English · Dansk · Bahasa Malaysia
Kuliah membina interaction.py dalam tujuh langkah. Setiap langkah di bawah mempunyai tangkapan skrinnya, kod selepas langkah itu dan apa yang kita dapat.
Langkah 1: Cipta interaction.py
# interaction.py
Apa yang kita dapat: tempat untuk skrip. Satu fail kecil dengan satu tujuan lebih mudah dibaca dan dibandingkan dengan penyelesaian orang lain berbanding kod yang bertaburan dalam banyak fail.
Langkah 2: Import Selenium
from selenium import webdriver
from selenium.webdriver.common.by import By
Apa yang kita dapat: Selenium ialah pakej yang mengawal pelayar sebenar daripada Python. webdriver memulakan dan mengawal pelayar; By menyatakan cara mencari elemen (dengan pemilih CSS, id, nama dan sebagainya). Ia pakej pihak ketiga, jadi ia mesti dipasang dahulu dalam .venv.
Langkah 3: Mulakan pemandu Chrome
driver = webdriver.Chrome()
Apa yang kita dapat: pemandu (driver) ialah objek yang digunakan skrip untuk mengawal Chrome: membuka halaman, mencari elemen dan menutup pelayar. Apabila dicipta, tetingkap pelayar sebenar dibuka. Dalam projek kita ini ialah create_driver(), yang juga boleh memulakan Chrome tanpa tetingkap (--headless) untuk Docker.
Langkah 4: Pergi ke Wikipedia dengan get()
driver.get("https://en.wikipedia.org/wiki/Main_Page")
Apa yang kita dapat: get() memuatkan URL dan menunggu sehingga halaman siap dimuatkan. URL ialah pemalar (WIKIPEDIA_MAIN_PAGE_URL dalam constants.py), jadi ia ditulis di satu tempat sahaja. Dalam projek kita ini ialah open_main_page().
Langkah 5: Kenal pasti elemen HTML
# The article count is the anchor (a) inside the div whose id is "articlecount":
# #articlecount a
Apa yang kita dapat: sebelum mengikis (scraping) data, lihat HTML halaman (alat pembangun pelayar menunjukkannya) dan cari elemen yang boleh dibezakan dengan pasti. Sesuatu id adalah unik pada satu halaman, jadi #articlecount ialah titik tolak yang baik untuk pemilih CSS, dan a memilih pautan di dalamnya.
Satu pengajaran dari 2026: Wikipedia kemudian menambah pautan kedua dalam div itu. Padanan pertama (merah pada tangkapan skrin) kini ialah bilangan penyunting aktif, dan bilangan artikel (hijau) ialah pautan pertama dalam item senarai kedua: #articlecount li:nth-of-type(2) a. Program menggunakan pemilih itu (ARTICLE_COUNT_SELECTOR) dan mengekalkan pemilih kuliah sebagai LECTURE_SELECTOR. Halaman berubah; pemilih mesti disemak terhadap halaman, dan ujian end to end menyemak bahawa nombor yang dicetak sekurang-kurangnya satu juta.
Langkah 6: Cari elemen dan cetak teksnya
article_count = driver.find_element(By.CSS_SELECTOR, "#articlecount a")
print(article_count.text)
driver.quit()
Apa yang kita dapat: find_element mengembalikan elemen pertama yang sepadan dan .text memberi teks yang dilihat pelawat. driver.quit() menutup pelayar; main() kita melakukannya dalam blok finally supaya pelayar ditutup walaupun sesuatu gagal. Panel terminal pada tangkapan skrin menunjukkan apa yang dikembalikan oleh pemilih kuliah hari ini dan, di bawahnya, bilangan artikel yang sebenar.
Langkah 7: Apa yang menyusul
# article_count.click() # click a link
# search = driver.find_element(By.NAME, "search") # type into a search field
Apa yang kita dapat: membaca hanyalah separuh daripadanya. Kuliah seterusnya mengklik pautan dan menaip dalam medan seperti kotak carian (ditandakan pada tangkapan skrin). Dua idea yang sama digunakan: cari elemen dengan pemilih, kemudian bertindak ke atasnya.