Ce que vous devez savoir sur Selenium en utilisant le résumé de positionnement CSS

Cet article vous apporte des connaissances pertinentes sur l'utilisation par Selenium du résumé du positionnement CSS. Le positionnement CSS est plus rapide et la syntaxe est plus simple. J'espère qu'il sera utile à tout le monde.

La plupart des gens utilisent le positionnement XPath lorsqu'ils utilisent Selenium pour positionner des éléments. En fait, le positionnement CSS a également sa valeur. Il est plus rapide et la syntaxe est plus concise. Symboles courants :
# représente le sélecteur d'identifiant

. représente le sélecteur de classe

> représente les éléments enfants, les niveaux

Un espace représente également les éléments enfants, mais tous les éléments enfants descendants, équivalent à xpath Le chemin relatif de

2. CSS : positionnement de l'attribut css peut être directement positionné sur

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

css via les trois attributs réguliers de l'identifiant, de la classe et de l'étiquette de l'élément. Utilisez le signe # pour représenter l'attribut id, tel que : #kw

Utilisez css. Indique l'attribut de classe, tel que : .s_ipt

css utilise directement le nom de la balise sans aucun identifiant, tel que : input

3. CSS : d'autres attributs

css peuvent être positionnés à travers les trois attributs conventionnels de tag, class et id, ou il peut se positionner via d'autres attributs

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

4. CSS : étiquette

css peut localiser des éléments grâce à la combinaison de balises et d'attributs

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

5. CSS : relation hiérarchique

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

6. CSS : index

css peut également être localisé via les sous-éléments de positionnement de l'index

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 : opérations logiques

css peut également implémenter des opérations logiques et faire correspondre deux attributs en même temps, ce qui est différent de xpath

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

8. Exemple de zone de recherche Baidu

Obtenir la recherche Baidu Examinons de plus près le positionnement CSS Zone de saisie de positionnement

Positionnement d'attribut unique

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

Positionnement d'attribut combiné

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 En cliquant sur le bouton sur la page d'accueil de Baidu à titre d'exemple

. Méthode de valeur d'attribut de correspondance floue

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. CSS et Xpath La différence de positionnement

Positionnement des attributs

CSS

le CSS peut être directement positionné via les trois attributs réguliers de l'élément, de l'identifiant, de la classe et de l'étiquette

①. le signe # pour représenter l'attribut id, tel que :

id="kw" peut être écrit comme : #kw

② utilise css pour représenter l'attribut de classe, tel que :

class="s_ipt" peut être écrit comme. : .s_ipt
③. css utilise le nom de la balise directement sans aucun identifiant, tel que : input

Xpath
xpath peut également être transmis. Localisez l'identifiant, le nom et les attributs de classe de l'élément
① Utilisez xpath pour localiser via l'attribut id.
driver.find_element(By.XPATH, "//[@id='kw']")

②. Utilisez XPath pour localiser via l'attribut name

driver.find_element(By.XPATH,"//[@name=' wd']")
③. Utilisez XPath pour localiser via l'attribut de classe
driver.find_element(By. ']")

Autres attributs

CSS
En plus de ce qui précède, le CSS peut également être positionné via d'autres attributs

①. Le CSS est positionné via l'attribut name :

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

② Le CSS est positionné via l'attribut autocomplete :

driver.find_element(By. CSS_SELECTOR, ". [autocomplete='off']")
③.css est positionné via l'attribut type :
driver.find_element(By. CSS_SELECTOR, "[type ='text']")

Xpath
Sans les attributs ci-dessus, vous pouvez localisez-le via d'autres attributs
driver.find_element(By. Les pages CSS peuvent localiser des éléments grâce à la combinaison de balises et d'attributs
①. positions CSS grâce à la combinaison de balises et d'attributs de classe driver.find_element(By.CSS_SELECTOR, "input.s_ipt" )

②. Positions CSS grâce à la combinaison de balises et d'attributs d'identification driver.find_element(By.CSS_SELECTOR, "input#kw")

③ CSS localise driver.find_element(By.CSS_SELECTOR, "input[id='kw']. ")

Xpath

1. S'il existe de nombreux attributs portant le même nom, vous pouvez les filtrer par balises

①. Utilisez XPath pour localiser driver.find_element(By.XPATH, "//input[@autocomplete='off' ]")

②. Utilisez XPath via d'autres attributs. Localisez driver.find_element(By.XPATH,"//input[@id='kw']") via l'attribut id

③. Utilisez XPath pour localiser driver.find_element(By .XPATH,"//name[@id ='wd']")

Relation hiérarchique

CSS

Telle que : //form[@id='form']/span/input et //form[@class ='fm']/span/input

① . CSS localise driver.find_element(By.CSS_SELECTOR, "form#form>span>input") via des relations hiérarchiques
②. .fm>span>input") via des relations hiérarchiques

Xpath
1. Si les attributs d'un élément ne sont pas évidents et ne peuvent pas être localisés directement, vous pouvez d'abord trouver son élément parent, trouver l'élément parent, puis trouver le niveau suivant à localisez-le

①. Localisez l'entrée en localisant l'élément parent Input box driver.find_element(By.XPATH,"//span[@id='s_kw_wrap']/input")

② Positionnez la zone d'entrée driver.find_element. (Par. [@id='form']/span/input")

Index

CSS
1. CSS peut également localiser les éléments enfants via l'option d'index :nth-child(1)
① Sélectionnez le premier élément enfant driver.find_element(By.CSS_SELECTOR,"select#nr>option:nth -child. (1)")
②. Sélectionnez le deuxième élément enfant driver.find_element(By.CSS_SELECTOR,"select#nr>option:nth-child(2)")
③ Sélectionnez le troisième élément enfant driver.find_element( By. CSS_SELECTOR,"select#nr>option:nth-child(3)")

Xpath
1. Il peut être positionné par tri
① Utilisez XPath pour localiser la première position driver.find_element(By.XPATH,"//. select [@id='nr']/option[1]")
②. Utilisez XPath pour localiser le deuxième driver.find_element(By.XPATH,"//select[@id='nr']/option[2] " )
③. Utilisez XPath pour localiser le troisième driver.find_element(By. .CSS_SELECTOR,"input:contains('kw')")

Xpath

1. Correspondance floue puissante de XPath

2. by_partial_link, positionnement de correspondance floue
driver.find_element(By.XPATH,"//*[contains(text (),'hao123')]")

11. Résumé

Tests automatisés Il existe deux méthodes de positionnement XPATH et CSS courantes pour les tests Web. les éléments dans Python+Selenium
Le positionnement XPATH et le positionnement CSS sont très similaires, et la fonction XPATH Il est plus puissant, mais la méthode de positionnement CSS est plus rapide, mais certains navigateurs ne prennent pas en charge le positionnement CSS, et il est généralement plus courant d'utiliser XPath positionnement que CSS lors des tests automatisés

(Partage vidéo d'apprentissage :

Tutoriel vidéo CSS

)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!