Perkara yang anda mesti ketahui tentang Selenium menggunakan ringkasan kedudukan CSS

Artikel ini membawakan anda pengetahuan yang berkaitan tentang penggunaan ringkasan kedudukan CSS oleh Selenium juga mempunyai nilai kedudukan CSS yang lebih pantas dan sintaksnya saya harap ia akan membantu semua orang.

Apabila kebanyakan orang menggunakan selenium untuk meletakkan elemen, mereka menggunakan penentududukan xpath, dan penentududukan css sering diabaikan, penentududukan css juga mempunyai nilainya, dan penentududukan css adalah lebih Cepat, sintaksnya lebih ringkas

1. Pemilih CSS

Simbol biasa:
# mewakili pemilih id
> mewakili elemen kanak-kanak, tahap
Ruang juga mewakili elemen anak, tetapi semua elemen anak turunan, bersamaan dengan laluan relatif dalam xpath
2. CSS: kedudukan atribut

css boleh diletakkan terus ke

css menggunakan tanda # untuk mewakili atribut id, seperti: #kw

如下是百度输入框的的html代码：
<input>

css menggunakan untuk mewakili Atribut kelas, seperti: .s_ipt

css terus menggunakan nama tag tanpa sebarang pengecam, seperti: input

3. CSS: atribut lain

css boleh menggunakan tag, kelas, id Tiga kedudukan atribut konvensional juga boleh digunakan untuk letakkan atribut lain

4. CSS: Tag

以下是定位其它属性的格式[name=wd] [autocomplete='off'][maxlength='255']

css boleh meletakkan elemen

5. CSS: Hubungan hierarki

input.s_ipt input#kw input[id='kw']

6. CSS: Indeks

//form的id属性form#form>span>input
//form的class属性form.fm>span>input

css juga boleh mencari sub-elemen melalui indeks

7. CSS: Operasi logik

Select控件第三个Opel
#select>select>option:nth-child(3)CheckBox第一个Volvo
#checkbox>input:nth-child(1)CheckBox第二个Saab
#checkbox>input:nth-child(4)RadioBox第二个Saab
#radio>input:nth-child(4)

css juga boleh melaksanakan operasi logik dan memadankan dua atribut pada masa yang sama, yang berbeza daripada xpath

[type='checkbox'][name='checkbox1']

8. Contoh kotak carian Baidu

Ambil Kotak carian Baidu untuk melihat kedudukan CSS secara terperinci

Kotak input penentududukan

Kedudukan atribut tunggal

Kedudukan atribut gabungan

type selector
driver.find_element_by_css_selector('input')id 定位
driver.find_element_by_css_selector('#kw')class 定位
driver.find_element_by_css_selector('.s_ipt')其他属性定位
driver.find_element_by_css_selector('[name='wd']')driver.find_element_by_css_selector("[type='text']")

9 pada halaman utama Baidu sebagai contoh

id组合属性定位
driver.find_element_by_css_selector("input#kw")class组合属性定位
driver.find_element_by_css_selector("input.s_ipt")其他属性组合定位
driver.find_element_by_css_selector("input[name='wd']")仅有属性名，没有值也可以
driver.find_element_by_css_selector("input[name]")两个其他属性组合定位
driver.find_element_by_css_selector("[name='wd'][autocomplete='off']")

Kaedah nilai atribut padanan kabur

10 Perbezaan antara kedudukan CSS dan Xpath

1>属性值由多个空格隔开，匹配其中一个值的方法
driver.find_element_by_css_selector("input[class~='btn']")2>匹配属性值为字符串开头的方法
driver.find_element_by_css_selector("input[class^='btn']")3>匹配属性值字符串结尾的方法
driver.find_element_by_css_selector("input[class$='s_btn']")

Kedudukan atribut

CSS

css boleh diletakkan secara langsung melalui tiga atribut biasa elemen, id, kelas dan label

① css menggunakan tanda # untuk mewakili atribut id, seperti:

id= "kw" boleh ditulis sebagai: #kw
② css menggunakan , seperti:
class="s_ipt" boleh ditulis sebagai: .s_ipt
③. css menggunakan nama teg secara langsung tanpa sebarang pengecam , seperti: input

"//[@id='kw']")
② Gunakan xpath untuk mencari

melalui pemacu atribut nama .find_element(By.XPATH, "//[@name='wd']")

③ Gunakan xpath untuk mencari melalui atribut kelas
driver.find_element(By.XPATH,"//*[@. class='s_ipt']")

Atribut lain

CSS
Selain di atas, css juga boleh diletakkan melalui atribut lain
①. css diletakkan melalui name attribute:

driver.find_element(By.CSS_SELECTOR, "[name='wd']")

② css diletakkan melalui atribut autolengkap:

driver.find_element(Oleh. CSS_SELECTOR, "[. autocomplete='off']")

③.css diletakkan melalui atribut jenis:
driver.find_element(By.CSS_SELECTOR," [type='text']")

Xpath
Tanpa atribut di atas, anda boleh mencarinya melalui atribut lain
driver.find_element(By.XPATH,"//*[@autocomplete='off' ]")

Tag

CSS
Halaman css boleh mengesan elemen melalui gabungan teg dan atribut
① css mencari melalui gabungan teg dan atribut kelas driver.find_element( By.CSS_SELECTOR,“input.s_ipt”) ②. css mencari driver.find_element(By.CSS_SELECTOR, “input#kw”)

melalui gabungan teg dan atribut id ③ digabungkan dengan atribut lain melalui teg Cari driver.find_element(Oleh.CSS_SELECTOR, ". input[id='kw']")

Xpath

1. Jika terdapat banyak atribut yang sama dengan nama yang sama, anda boleh menapis mengikut teg
① . Gunakan xpath untuk mencari driver.find_element (By.XPATH,"//input[@autocomplete='off']")
② Gunakan xpath untuk mencari driver.find_element(By.XPATH,"/ /input[@id='kw']").
③. Gunakan xpath untuk mencari driver.find_element(By.XPATH,"//name[@id='wd']")

Hubungan hierarki

CSS
Seperti sebagai: //form[@id='form']/span/input dan //form[@class='fm']/span/input
① ① #form>span>input”) melalui hubungan hierarki ")

> ①. Cari kotak input dengan mencari pemacu elemen induk.find_element(By.XPATH,"//span[@id='s_kw_wrap' ]/input")

②. Cari kotak input dengan mencari pemacu elemen induk.find_element(By.XPATH,"//form[@id='form']/span/input")

Indeks

CSS
1. CSS juga boleh mencari elemen anak melalui pilihan indeks: nth-child(1)
① Pilih pemacu elemen anak pertama.find_element(Oleh. CSS_SELECTOR, “select#nr>option:nth-child(1)”)
② Pilih pemacu elemen anak kedua.find_element(By.CSS_SELECTOR,“select#nr>option:nth-child(2)”) ③. Pilih pemacu elemen anak ketiga.find_element(By.CSS_SELECTOR,“select#nr>option:nth-child(3)”)

Xpath

1. Anda boleh mengisih dan meletakkan
①. Gunakan xpath untuk mencari pemacu pertama.find_element(By.XPATH,"//select[@id='nr']/option[1]")
② (By.XPATH,"//select[@id='nr']/option[2]")
③ Gunakan xpath untuk mencari pemacu ketiga.find_element(By.XPATH,"//select[@ id. ='nr']/option[3]")

Padanan kabur

CSS

driver.find_element(By.CSS_SELECTOR,"input:contains('kw')")

11. Ringkasan

Dua kaedah penentududukan XPATH dan CSS arus perdana untuk meletakkan elemen halaman dalam ujian automatik Python Selenium untuk ujian web
Kedudukan XPATH dan kedudukan CSS Sangat serupa, XPATH lebih berkuasa, tetapi penentududukan CSS lebih pantas, tetapi sesetengah penyemak imbas tidak menyokong penentududukan CSS, dan secara amnya lebih biasa menggunakan penentududukan xpath daripada css semasa ujian automatik

( Mempelajari perkongsian video:

css tutorial video

)

Atas ialah kandungan terperinci Perkara yang anda mesti ketahui tentang Selenium menggunakan ringkasan kedudukan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!