WebUI自动化之必备技能——CSS定位详解

前言

最简单的方法：打开Chrome的开发者模式——选择所需要定位的元素——右击元素——copy——copy selector

image.png

一、CSS基本定位方式

1.根据class定位

from selenium import webdriver

driver=webdriver.Chrome()
driver.get('https://www.baidu.com/')
driver.find_element_by_css_selector('.s_ipt').send_keys('天天Python')

以下为百度输入框的class属性：

image.png

2.根据ID定位

from selenium import webdriver

driver=webdriver.Chrome()
driver.get('https://www.baidu.com/')
driver.find_element_by_css_selector('#kw').send_keys('天天Python')

3.标签定位

from selenium import webdriver

driver=webdriver.Chrome()
driver.get('https://www.baidu.com/')
driver.find_element_by_css_selector('#kw').send_keys('')
driver.find_element_by_css_selector('#su').click()
driver.implicitly_wait(10)
num=len(driver.find_elements_by_css_selector('h3'))
#循环打印h3标题
#标签定位
for i in range(num):
    text=driver.find_elements_by_css_selector('h3')[i].text
    print(text)

image.png

4.根据属性定位

4.1属性名定位

表达式：[attribute]
由于属性一般不唯一，找到的一般有多个，需要使用find_elements+索引方法

from selenium import webdriver

driver=webdriver.Chrome()
driver.get('https://www.baidu.com/')
driver.implicitly_wait(10)
#find_elements+索引方法
driver.find_elements_by_css_selector('[maxlength]')[0].send_keys("天天Python")

4.2属性名+属性值定位

[attribute=value]或[attribute="value"]
需要先确定属性名+属性值定位是否唯一

from selenium import webdriver

driver=webdriver.Chrome()
driver.get('https://www.baidu.com/')
driver.implicitly_wait(10)
driver.find_element_by_css_selector('[name="wd"]').send_keys("天天Python")
#两条代码都是正确的
#driver.find_element_by_css_selector('[name=wd]').send_keys("天天Python")

4.选择选择多个不同元素

选择器语法：element1,element2

from selenium import webdriver

driver=webdriver.Chrome()
driver.get('https://www.baidu.com/')
driver.find_element_by_css_selector('#kw').send_keys('')
driver.find_element_by_css_selector('#su').click()
driver.implicitly_wait(10)

text=driver.find_elements_by_css_selector('h3,.c-abstract')[0].text
print(text)
print(driver.find_elements_by_css_selector('h3,.c-abstract')[1].text)

二、组合定位

1.标签+class组合定位

element1+element2：选择所有紧接着元素1之后的的元素2

from selenium import webdriver

driver=webdriver.Chrome()
driver.get('https://www.baidu.com/')
driver.implicitly_wait(10)
driver.find_elements_by_css_selector('[maxlength]')[0].send_keys("天天Python")
driver.find_element_by_id('su').click()
print(driver.find_elements_by_css_selector(r'h3+.c-abstract')[0].text)

2.其他组合定位方式

• 标签与标签组合
• 标签与ID组合
• 标签与属性组合
• 属性与属性组合
  ……等等

这些在测试中一般都不用，还有很多其他形式的css定位，但是基本用不上，很多都是方便做CSS样式用，软测定位基本不需要用。