HTML Sayfasında Bir Öğe Bulmak için XPath ve Selenium'u Kullanma

Using Xpath Selenium Find An Element Html Page



XML Yolu Dili olarak da bilinen XPath, bir XML belgesinden öğeleri seçmek için kullanılan bir dildir. HTML ve XML aynı belge yapısını takip ettiğinden, XPath bir web sayfasından öğeler seçmek için de kullanılabilir.

Web sayfasından öğeleri bulmak ve seçmek, Selenium ile web kazımanın anahtarıdır. Web sayfasından öğeleri bulmak ve seçmek için Selenium'da XPath seçicilerini kullanabilirsiniz.







Bu yazıda, Selenium python kitaplığı ile Selenium'da XPath seçicileri kullanarak web sayfalarından öğeleri nasıl bulacağınızı ve seçeceğinizi göstereceğim. Öyleyse başlayalım.



Önkoşullar:

Bu makaledeki komutları ve örnekleri denemek için, sahip olmalısınız,



  1. Bilgisayarınızda kurulu bir Linux dağıtımı (tercihen Ubuntu).
  2. Python 3 bilgisayarınızda yüklü.
  3. Bilgisayarınızda yüklü PIP 3.
  4. piton sanal ortam Bilgisayarınızda yüklü olan paket.
  5. Bilgisayarınızda yüklü Mozilla Firefox veya Google Chrome web tarayıcıları.
  6. Firefox Gecko Sürücüsünü veya Chrome Web Sürücüsünü nasıl kuracağınızı bilmelisiniz.

4, 5 ve 6 numaralı gereksinimleri yerine getirmek için makalemi okuyun Python 3'te Selenyum'a Giriş . Diğer konularda birçok makale bulabilirsiniz. LinuxHint.com . Herhangi bir yardıma ihtiyacınız olursa onları kontrol ettiğinizden emin olun.





Bir Proje Dizini Ayarlama:

Her şeyi düzenli tutmak için yeni bir proje dizini oluşturun selenyum-xpath/ aşağıdaki gibi:

$mkdir -pvselenyum-xpath/sürücüler



Şuraya gidin: selenyum-xpath/ proje dizini aşağıdaki gibidir:

$CDselenyum-xpath/

Proje dizininde aşağıdaki gibi bir Python sanal ortamı oluşturun:

$sanalenv .venv

Sanal ortamı aşağıdaki gibi etkinleştirin:

$kaynak.venv/NS/etkinleştirmek

Selenium Python kitaplığını PIP3 kullanarak aşağıdaki gibi kurun:

$ pip3 selenyum yükleyin

Gerekli tüm web sürücüsünü indirip yükleyin. sürücüler/ proje dizini. Web sürücüleri indirme ve yükleme işlemini makalemde anlattım. Python 3'te Selenyum'a Giriş .

Chrome Geliştirici Aracını kullanarak XPath Seçici'yi edinin:

Bu bölümde, Selenium ile seçmek istediğiniz web sayfası öğesinin XPath seçicisini Google Chrome web tarayıcısının yerleşik Geliştirici Aracını kullanarak nasıl bulacağınızı göstereceğim.

Google Chrome web tarayıcısını kullanarak XPath seçiciyi almak için Google Chrome'u açın ve veri çıkarmak istediğiniz web sitesini ziyaret edin. Ardından, sayfanın boş bir alanında sağ fare düğmesine (RMB) basın ve tıklayın. İncelemek açmak için Chrome Geliştirici Aracı .

Ayrıca basabilirsiniz + Vardiya + ben açmak için Chrome Geliştirici Aracı .

Chrome Geliştirici Aracı açılmalıdır.

İstediğiniz web sayfası öğesinin HTML temsilini bulmak için İncelemek (

) simgesi, aşağıdaki ekran görüntüsünde işaretlendiği gibi.

Ardından, istediğiniz web sayfası öğesinin üzerine gelin ve seçmek için sol fare düğmesine (LMB) basın.

Seçtiğiniz web öğesinin HTML temsili, Elementler sekmesi Chrome Geliştirici Aracı, aşağıdaki ekran görüntüsünde görebileceğiniz gibi.

İstediğiniz öğenin XPath seçicisini almak için öğeyi Elementler sekmesi Chrome Geliştirici Aracı ve üzerine sağ tıklayın (RMB). Ardından, seçin kopyala > XPath'i kopyala, Aşağıdaki ekran görüntüsünde işaretlendiği gibi.

XPath seçiciyi bir metin düzenleyiciye yapıştırdım. XPath seçici, aşağıdaki ekran görüntüsünde gösterildiği gibi görünür.

Firefox Geliştirici Aracını kullanarak XPath Seçici'yi edinin:

Bu bölümde, Mozilla Firefox web tarayıcısının yerleşik Geliştirici Aracını kullanarak Selenium ile seçmek istediğiniz web sayfası öğesinin XPath seçicisini nasıl bulacağınızı göstereceğim.

Firefox web tarayıcısını kullanarak XPath seçiciyi almak için Firefox'u açın ve veri çıkarmak istediğiniz web sitesini ziyaret edin. Ardından, sayfanın boş bir alanında sağ fare düğmesine (RMB) basın ve tıklayın. Elemanı Kontrol Et (Q) açmak için Firefox Geliştirici Aracı .

Firefox Geliştirici Aracı açılmalıdır.

İstediğiniz web sayfası öğesinin HTML temsilini bulmak için İncelemek (

) simgesi, aşağıdaki ekran görüntüsünde işaretlendiği gibi.

Ardından, istediğiniz web sayfası öğesinin üzerine gelin ve seçmek için sol fare düğmesine (LMB) basın.

Seçtiğiniz web öğesinin HTML temsili, Müfettiş sekmesi Firefox Geliştirici Aracı, aşağıdaki ekran görüntüsünde görebileceğiniz gibi.

İstediğiniz öğenin XPath seçicisini almak için öğeyi Müfettiş sekmesi Firefox Geliştirici Aracı ve üzerine sağ tıklayın (RMB). Ardından, seçin kopyala > XPath Aşağıdaki ekran görüntüsünde işaretlendiği gibi.

İstediğiniz öğenin XPath seçicisi şöyle görünmelidir.

XPath Seçici kullanarak Web Sayfalarından Veri Çıkarma:

Bu bölümde, Selenium Python kitaplığı ile XPath seçicilerini kullanarak web sayfası öğelerini nasıl seçeceğinizi ve onlardan nasıl veri çıkaracağınızı göstereceğim.

İlk önce yeni bir Python betiği oluşturun ex01.py ve aşağıdaki kod satırlarını yazın.

itibarenselenyumiçe aktarmakweb sürücüsü
itibarenselenyum.web sürücüsü.yaygın.anahtarlar içe aktarmakAnahtarlar
itibarenselenyum.web sürücüsü.yaygın.tarafından içe aktarmakTarafından
seçenekler=web sürücüsü.ChromeSeçenekleri()
seçenekler.başsız = NS
tarayıcı=web sürücüsü.Krom(yürütülebilir_yol='./drivers/chromedriver',
seçenekler=seçenekler)
tarayıcı.elde etmek('https://www.unixtimestamp.com/')
zaman damgası=tarayıcı.find_element_by_xpath('/html/body/div[1]/div[1]
/div[2]/div[1]/div/div/h3[2]'
)
Yazdır('Geçerli zaman damgası: %s'%(zaman damgası.Metin.bölmek('')[0]))
tarayıcı.kapat()

İşiniz bittiğinde, kaydedin ex01.py Python komut dosyası.

Satır 1-3, gerekli tüm Selenium bileşenlerini içe aktarır.

5. satır, bir Chrome Seçenekleri nesnesi oluşturur ve 6. satır, Chrome web tarayıcısı için başsız modu etkinleştirir.

8. satır bir Chrome oluşturur tarayıcı kullanarak nesne krom sürücü gelen ikili sürücüler/ proje dizini.

Satır 10, tarayıcıya unixtimestamp.com web sitesini yüklemesini söyler.

Satır 12, XPath seçiciyi kullanarak sayfadaki zaman damgası verilerine sahip öğeyi bulur ve bunu zaman damgası değişken.

13. satır, öğeden zaman damgası verilerini ayrıştırır ve konsolda yazdırır.

İşaretli olanın XPath seçicisini kopyaladım. h2 eleman unixtimestamp.com Chrome Geliştirici Aracı'nı kullanarak.

14. satır tarayıcıyı kapatır.

Python betiğini çalıştırın ex01.py aşağıdaki gibi:

$ python3 ex01.p

Gördüğünüz gibi, zaman damgası verileri ekrana yazdırılıyor.

Burada, kullandım browser.find_element_by_xpath(seçici) yöntem. Bu yöntemin tek parametresi, seçici, bu, öğenin XPath seçicisidir.

Onun yerine browser.find_element_by_xpath() yöntemini de kullanabilirsiniz browser.find_element(By, seçici) yöntem. Bu yöntem iki parametreye ihtiyaç duyar. ilk parametre Tarafından olacak By.XPATH XPath seçiciyi ve ikinci parametreyi kullanacağımız için seçici XPath seçicinin kendisi olacaktır. Sonuç aynı olacaktır.

Nasıl olduğunu görmek tarayıcı.find_element() yöntem XPath seçici için çalışır, yeni bir Python betiği oluşturun ex02.py , tüm satırları kopyalayıp yapıştırın ex01.py ile ex02.py ve değişim satır 12 Aşağıdaki ekran görüntüsünde işaretlendiği gibi.

Gördüğünüz gibi, Python betiği ex02.py ile aynı sonucu verir ex01.py .

$ python3 ex02.p

NS browser.find_element_by_xpath() ve tarayıcı.find_element() Web sayfalarından tek bir öğeyi bulmak ve seçmek için yöntemler kullanılır. XPath seçicileri kullanarak birden çok öğe bulmak ve seçmek istiyorsanız, kullanmanız gerekir. browser.find_elements_by_xpath() veya tarayıcı.find_elements() yöntemler.

NS browser.find_elements_by_xpath() yöntem ile aynı argümanı alır browser.find_element_by_xpath() yöntem.

NS tarayıcı.find_elements() yöntem ile aynı argümanları alır tarayıcı.find_element() yöntem.

XPath seçiciyi kullanarak bir ad listesi çıkarma örneğini görelim. rastgele isim üreteci.info Selenyum Python kitaplığı ile.

Sırasız liste ( ol etiketi) 10'a sahiptir de her birinin içinde rastgele bir ad içeren etiketler. Tüm seçenekleri seçmek için XPath de içindeki etiketler ol bu durumda etiket //*[@id=main]/div[3]/div[2]/ol//li

XPath seçicileri kullanarak web sayfasından birden çok öğe seçme örneğini inceleyelim.

Yeni bir Python betiği oluşturun ex03.py ve aşağıdaki kod satırlarını içine yazın.

itibarenselenyumiçe aktarmakweb sürücüsü
itibarenselenyum.web sürücüsü.yaygın.anahtarlar içe aktarmakAnahtarlar
itibarenselenyum.web sürücüsü.yaygın.tarafından içe aktarmakTarafından
seçenekler=web sürücüsü.ChromeSeçenekleri()
seçenekler.başsız = NS
tarayıcı=web sürücüsü.Krom(yürütülebilir_yol='./drivers/chromedriver',
seçenekler=seçenekler)
tarayıcı.elde etmek('http://random-name-generator.info/')
isimler=tarayıcı.find_elements_by_xpath('
//*[@id='main']/div[3]/div[2]/ol//li'
)
içinisimiçindeisimler:
Yazdır(isim.Metin)
tarayıcı.kapat()

İşiniz bittiğinde, kaydedin ex03.py Python komut dosyası.

Satır 1-8'deki ile aynıdır ex01.py Python komut dosyası. O yüzden onları burada tekrar anlatmayacağım.

Satır 10, tarayıcıya random-name-generator.info web sitesini yüklemesini söyler.

Satır 12, ad listesini kullanarak ad listesini seçer. browser.find_elements_by_xpath() yöntem. Bu yöntem XPath seçiciyi kullanır //*[@id=main]/div[3]/div[2]/ol//li İsim listesini bulmak için Ardından, ad listesi şurada saklanır: isimler değişken.

13 ve 14. satırlarda bir için döngü boyunca yineleme yapmak için kullanılır isimler adları konsolda listeleyin ve yazdırın.

16. satır tarayıcıyı kapatır.

Python betiğini çalıştırın ex03.py aşağıdaki gibi:

$ python3 ex03.p

Gördüğünüz gibi, isimler web sayfasından çıkarılmış ve konsola yazdırılmıştır.

kullanmak yerine browser.find_elements_by_xpath() yöntemini de kullanabilirsiniz. tarayıcı.find_elements() yöntem eskisi gibi. Bu yöntemin ilk argümanı By.XPATH, ve ikinci argüman XPath seçicisidir.

ile denemek tarayıcı.find_elements() yöntemi, yeni bir Python betiği oluşturun ex04.py , tüm kodları şuradan kopyalayın: ex03.py ile ex04.py ve aşağıdaki ekran görüntüsünde işaretlendiği gibi 12. satırı değiştirin.

Daha önce olduğu gibi aynı sonucu almalısınız.

$ python3 ex04.p

XPath Seçicinin Temelleri:

Firefox'un Geliştirici Aracı veya Google Chrome web tarayıcısı, XPath seçiciyi otomatik olarak oluşturur. Ancak bu XPath seçiciler bazen projeniz için yeterli olmayabilir. Bu durumda, belirli bir XPath seçicisinin XPath seçicinizi oluşturmak için ne yaptığını bilmelisiniz. Bu bölümde, size XPath seçicilerinin temellerini göstereceğim. Ardından, kendi XPath seçicinizi oluşturabilmelisiniz.

Yeni bir dizin oluştur www/ proje dizininizde aşağıdaki gibi:

$mkdir -vwww

Yeni bir dosya oluştur web01.html içinde www/ dizini ve bu dosyaya aşağıdaki satırları yazın.


< html dil='üzerinde'>
< kafa >
< meta karakter seti='UTF-8'>
< meta isim='görünüm alanı' içerik='width=cihaz genişliği, başlangıç ​​ölçeği=1.0'>
< Başlık >Temel HTML Belgesi</ Başlık >
</ kafa >
< vücut >
< h1 >Selam Dünya</ h1 >
</ vücut >
</ html >

İşiniz bittiğinde, kaydedin web01.html dosya.

Aşağıdaki komutu kullanarak 8080 numaralı bağlantı noktasında basit bir HTTP sunucusu çalıştırın:

$ python3 -m http.sunucu--dizin www/8080

HTTP sunucusu başlamalıdır.

Şuna erişebilmelisiniz: web01.html URL'yi kullanan dosya http://localhost:8080/web01.html , aşağıdaki ekran görüntüsünde görebileceğiniz gibi.

Firefox veya Chrome Geliştirici Aracı açıkken, düğmesine basın. + F Arama kutusunu açmak için XPath seçicinizi buraya yazabilir ve neyi seçtiğini çok kolay bir şekilde görebilirsiniz. Bu bölüm boyunca bu aracı kullanacağım.

Bir XPath seçicisi ile başlar eğik çizgi (/) çoğu zaman. Bir Linux dizin ağacı gibidir. NS / web sayfasındaki tüm öğelerin köküdür.

İlk unsur, html . Yani, XPath seçici /html tamamını seçer html etiket.

İçinde html etiket, biz bir vücut etiket. NS vücut etiketi, XPath seçici ile seçilebilir /html/gövde

NS h1 başlık içeride vücut etiket. NS h1 başlık XPath seçici ile seçilebilir /html/gövde/h1

Bu tür XPath seçiciye mutlak yol seçici denir. Mutlak yol seçicide, web sayfasını sayfanın kökünden (/) geçmelisiniz. Mutlak yol seçicinin dezavantajı, web sayfası yapısındaki küçük bir değişikliğin bile XPath seçicinizi geçersiz kılabilmesidir. Bu sorunun çözümü, göreli veya kısmi bir XPath seçicisidir.

Göreli yolun veya kısmi yolun nasıl çalıştığını görmek için yeni bir dosya oluşturun web02.html içinde www/ dizini açın ve içine aşağıdaki kod satırlarını yazın.


< html dil='üzerinde'>
< kafa >
< meta karakter seti='UTF-8'>
< meta isim='görünüm alanı' içerik='width=cihaz genişliği, başlangıç ​​ölçeği=1.0'>
< Başlık >Temel HTML Belgesi</ Başlık >
</ kafa >
< vücut >
< h1 >Selam Dünya</ h1 >

< div >
< P >bu mesaj</ P >
</ div >

< div >
< açıklık >Selam Dünya</ açıklık >
</ div >
</ vücut >
</ html >

İşiniz bittiğinde, kaydedin web02.html dosya ve web tarayıcınıza yükleyin.

Gördüğünüz gibi, XPath seçici //böl/p seçer P içindeki etiket div etiket. Bu, göreli bir XPath seçicisinin bir örneğidir.

Göreli XPath seçici şununla başlar: // . Ardından, seçmek istediğiniz elemanın yapısını belirlersiniz. Bu durumda, böl/p .

Yani, //böl/p seç demek P içindeki eleman bir div element, kendisinden önce gelenin önemi yoktur.

Öğeleri aşağıdaki gibi farklı özelliklere göre de seçebilirsiniz. İD , sınıf , tip, vb. XPath seçiciyi kullanarak. Bunu nasıl yapacağımızı görelim.

Yeni bir dosya oluştur web03.html içinde www/ dizini açın ve içine aşağıdaki kod satırlarını yazın.


< html dil='üzerinde'>
< kafa >
< meta karakter seti='UTF-8'>
< meta isim='görünüm alanı' içerik='width=cihaz genişliği, başlangıç ​​ölçeği=1.0'>
< Başlık >Temel HTML Belgesi</ Başlık >
</ kafa >
< vücut >
< h1 >Merhaba Dünya</ h1 >
< div sınıf='konteyner1'>
< P > bu mesaj</ P >
< açıklık >bu başka bir mesaj</ açıklık >
</ div >
< div sınıf='konteyner1'>
< h2 >başlık2</ h2 >
< P > Bazı insanlar
acıları, dertleri ve seçilene âşık olmayanları seçmek akıllıcadır.
kolay uçuşlar ve diğer harika hizmetler değil mi? Nerede veya nerede doğdu?</ P >
</ div >

< açıklık İD='altbilgi-msg'>bu bir altbilgidir</ açıklık >
</altbilgi>
</ vücut >
</ html >

İşiniz bittiğinde, kaydedin web03.html dosya ve web tarayıcınıza yükleyin.

Tüm öğeleri seçmek istediğinizi varsayalım. div sahip olan unsurlar sınıf isim konteyner1 . Bunu yapmak için XPath seçiciyi kullanabilirsiniz. //div[@class='container1′]

Gördüğünüz gibi, XPath seçiciyle eşleşen 2 öğem var. //div[@class='container1′]

İlkini seçmek için div eleman ile sınıf isim konteyner1 , Ekle [1] Aşağıdaki ekran görüntüsünde gösterildiği gibi XPath seçiminin sonunda.

Aynı şekilde ikinciyi de seçebilirsiniz. div eleman ile sınıf isim konteyner1 XPath seçiciyi kullanma //div[@class='container1′][2]

Öğeleri şu şekilde seçebilirsiniz: İD ilave olarak.

Örneğin, sahip olduğu öğeyi seçmek için İD ile ilgili altbilgi-msg , XPath seçiciyi kullanabilirsiniz //*[@id='footer-msg']

Burada, * önce [@id='footer-msg'] etiketinden bağımsız olarak herhangi bir öğeyi seçmek için kullanılır.

XPath seçicinin temelleri budur. Artık Selenium projeleriniz için kendi XPath seçicinizi oluşturabilmelisiniz.

Çözüm:

Bu yazımda sizlere Selenium Python kütüphanesi ile XPath seçiciyi kullanarak web sayfalarından eleman bulmayı ve seçmeyi gösterdim. Ayrıca en yaygın XPath seçicilerinden de bahsettim. Bu makaleyi okuduktan sonra, Selenium Python kitaplığı ile XPath seçiciyi kullanarak web sayfalarından öğeleri seçerken oldukça emin olmalısınız.