web自动化测试系列-selenium css_selector定位方法详解(七)

接上文 ：web自动化测试系列-selenium xpath定位方法详解(六)-CSDN博客

1.什么是CSS定位

CSS(Cascading Style sheets)是一种语言 ，它主要用来描述HTML元素的样式显示 。

在CSS中，选择器是一种模式 ，用于选择需要添加样式的元素

2. CSS定位方式

css的定位和xpath定位基本相同 ，只不过css针对id和class有单独的写法 ，其它都一样 ，具体如下 ：

• id定位

• class定位

• 属性定位

• 组合定位

selenium同样为css实现一个对应的方法 ，即 ：

find_element_by_css_selector(css_selector)

其中css_selector编写的正式以上几种的定位方法 。

3.定位方法介绍

通过表格来列举下它们每种定位方式的不同 ，具体如下 ：

4.项目案例

需求：通过selenium完成对tpshop的登录操作，具体如下 ：

1. 使用css属性定位首页登录按钮 ，

2. 使用css id定位用户名输入框，并输入账号，如13988888888

3. 使用css 标签+属性定位确认密码输入框，并输入123456 。

4. 使用css多属性定位验证码输入框,并输入8888

5. 使用css class定位登录按钮，并点击确定 。

项目代码：  

# 使用css定位

from selenium import webdriver
import time

# 1. 创建浏览器对象
driver = webdriver.Chrome()
driver.maximize_window()

# 2. 输入地址 ：http://localhost
driver.get("http://localhost")

# 3. 定位元素
# 1） 定位登录 : css属性定位
driver.find_element_by_css_selector("[href='/Home/user/login.html']").click()
time.sleep(3)

# 2) 输入用户名 ：css id定位
driver.find_element_by_css_selector("#username").send_keys("13988888888")

# 3) 输入密码 ：css 标签 + 属性定位
driver.find_element_by_css_selector("input[type='password']").send_keys("123456")

# 4) 输入验证码 : css 多属性定位
driver.find_element_by_css_selector("[placeholder='验证码'][name='verify_code']").send_keys("8888")

time.sleep(1)

# 5) 点击登录 :  css class属性定位
driver.find_element_by_css_selector(".J-login-submit").click()

time.sleep(5)
driver.quit()

5.定位方法总结

至此，我们将selenium中的前8种方法已经介绍完了 ，它们各有优缺点 ，也都有各自的使用场景 。现将这8种方法放在一起做个综合比较，具体如下 ：

你可以看到，通过xpath和css基本能实现所有的定位 ，而xpath 能实现的css也能实现 ，反过来也一样 ，所以 ，这两个其实熟悉一个就可以了 。