Was Sie über Selenium mit CSS-Positionierungszusammenfassung wissen müssen

Dieser Artikel vermittelt Ihnen relevantes Wissen über die Verwendung der CSS-Positionierung. Ich hoffe, dass die CSS-Positionierung für alle hilfreich ist.

Die meisten Leute verwenden die XPath-Positionierung, wenn sie Selenium verwenden, um Elemente zu positionieren. Tatsächlich ist die CSS-Positionierung auch schneller und die Syntax ist prägnanter

Gemeinsame Symbole:

# steht für den ID-Selektor

. steht für den Klassenselektor

> steht für untergeordnete Elemente, Ebenen

Ein Leerzeichen stellt auch untergeordnete Elemente dar, aber alle untergeordneten Elemente entsprechen xpath. Der relative Pfad von 2. CSS: Attributpositionierung

css kann über die drei regulären Attribute der ID, Klasse und Beschriftung des Elements direkt in

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

css positioniert werden. Verwenden Sie das #-Zeichen, um das ID-Attribut darzustellen, z. B.: #kw

Verwenden Sie CSS. Gibt das Klassenattribut an, z. B.: .s_ipt

CSS verwendet direkt den Tag-Namen ohne Bezeichner, z. B.: Eingabe

3. CSS: Andere Attribute

CSS kann über die drei herkömmlichen Attribute Tag, Klasse und positioniert werden id, oder es kann Positionierung durch andere Attribute

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

4. CSS: Label

css kann Elemente durch die Kombination von Tags und Attributen lokalisieren

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

5. CSS: Hierarchische Beziehung

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

6. CSS: Index

css kann auch über den Index gefunden werden Positionierung von Unterelementen

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)

7. CSS: Logische Operationen

css kann auch logische Operationen implementieren und zwei Attribute gleichzeitig abgleichen, was sich von xpath unterscheidet

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

8. Beispiel für ein Baidu-Suchfeld

Baidu-Suche starten Schauen wir uns die CSS-Positionierung genauer an

Positionierungs-Eingabefeld

Einzelne Attributpositionierung

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']")

Kombinierte Attributpositionierung

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']")

9. Klicken Sie als Beispiel auf die Schaltfläche auf der Baidu-Homepage

Fuzzy-Matching-Attributwertmethode

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']")

10. Der Unterschied in der Positionierung
CSS

CSS kann direkt über die drei regulären Attribute „Element“, „ID“, „Klasse“ und „Label“ positioniert werden Das #-Zeichen zur Darstellung des ID-Attributs, z. B.:

id="kw" kann geschrieben werden als: #kw

② CSS verwendet zur Darstellung des Klassenattributs, z. B.:

class="s_ipt" kann geschrieben werden als : .s_ipt

③. CSS verwendet den Tag-Namen direkt ohne Bezeichner, z. B.: input

Xpath
xpath kann auch übergeben werden. Suchen Sie die ID, den Namen und die Klassenattribute des Elements
①
Driver.find_element(By.XPATH, "//[@id='kw']")
② Verwenden Sie xpath, um über das Namensattribut zu suchen

Driver.find_element(By.XPATH,"//[@name='. wd']")

③. Verwenden Sie xpath, um über das Klassenattribut zu suchen
drivers.find_element(By. ']")

Andere Attribute

CSS
Darüber hinaus kann CSS auch über andere Attribute positioniert werden
①. CSS wird über das Namensattribut positioniert:

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

②. CSS wird über das Autocomplete-Attribut positioniert:

Driver.find_element(By. CSS_SELECTOR, " [autocomplete='off']")

③.css wird über das Typattribut positioniert:
drivers.find_element(By. CSS_SELECTOR, "[type ='text']")

Xpath
Ohne die oben genannten Attribute können Sie Suchen Sie es über andere Attribute
Driver.find_element(By. CSS-Seiten können Elemente durch die Kombination von Tags und Attributen finden
①. CSS-Positionen durch die Kombination von Tags und Klassenattributen Driver.find_element(By.CSS_SELECTOR, „input.s_ipt“ )
②. CSS-Positionen durch die Kombination von Tags und ID-Attributen drivers.find_element(By.CSS_SELECTOR, „input#kw“)

③ CSS lokalisiert drivers.find_element(By.CSS_SELECTOR, „input[id='kw‘] ")

Xpath
1. Wenn es viele Attribute mit demselben Namen gibt, können Sie sie nach Tags filtern

①. Verwenden Sie xpath, um Driver.find_element(By.XPATH, "//input[@autocomplete='off' ]")

②. Verwenden Sie XPath über andere Attribute. Suchen Sie Driver.find_element(By.XPATH,"//input[@id='kw']") über das ID-Attribut

③. Verwenden Sie XPath, um Driver.find_element(By .XPATH,"//name[@id ='wd']")

Hierarchische Beziehung

CSS
Wie zum Beispiel: //form[@id='form']/span/input und //form[@class ='fm']/span/input

① . CSS lokalisiert drivers.find_element(By.CSS_SELECTOR, "form#form>span>input") über hierarchische Beziehungen

② .fm>span>input") durch hierarchische Beziehungen

Xpath
1. Wenn die Attribute eines Elements nicht offensichtlich sind und nicht direkt lokalisiert werden können, können Sie zuerst sein übergeordnetes Element, das übergeordnete Element und dann die nächste Ebene finden Suchen Sie es
①. Suchen Sie das Eingabefeld drivers.find_element(By.XPATH,"//span[@id='s_kw_wrap']/input")

② (Von. [@id='form']/span/input")

Index

CSS
1. CSS kann untergeordnete Elemente auch über die Indexoption:nth-child(1) finden
① Wählen Sie das erste untergeordnete Element aus: drivers.find_element(By.CSS_SELECTOR,“select#nr>option:nth -child (1)“)
② Wählen Sie das zweite untergeordnete Element drivers.find_element(By.CSS_SELECTOR,“select#nr>option:nth-child(2)“)
③ Wählen Sie das dritte untergeordnete Element drivers.find_element( By. CSS_SELECTOR,"select#nr>option:nth-child(3)")

Xpath
1. Es kann durch Sortieren positioniert werden
① Verwenden Sie xpath, um die erste Position zu finden drivers.find_element(By.XPATH,"//. select [@id='nr']/option[1]")
②. Verwenden Sie xpath, um den zweiten Treiber zu finden.find_element(By.XPATH,"//select[@id='nr']/option[2] " )
③. Verwenden Sie xpath, um den dritten Treiber zu finden.find_element(By. .CSS_SELECTOR,"input:contains('kw')")

Xpath

1. Leistungsstarkes Fuzzy-Matching von xpath

2. by_partial_link, Fuzzy-Matching-Positionierung
drivers.find_element(By.XPATH,"//*[contains(text (),'hao123')]")

11. Zusammenfassung

Die beiden gängigen XPATH- und CSS-Positionierungsmethoden für Webtests zur automatisierten Positionierung von Seitenelementen Testen von Python+Selenium
XPATH-Positionierung und CSS-Positionierung sind sehr ähnlich, und die XPATH-Funktion ist leistungsfähiger, aber die CSS-Positionierungsmethode ist schneller, aber einige Browser unterstützen die CSS-Positionierung nicht und es ist im Allgemeinen üblicher, die XPath-Positionierung zu verwenden als CSS beim automatisierten Testen

(Teilen von Lernvideos:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonWas Sie über Selenium mit CSS-Positionierungszusammenfassung wissen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!