【第三章 selenium学习之css表达式】

---

前言

如果我们要选择的元素没有id、class 属性
或者有些我们不想选择的元素也有相同的 id、class属性值，怎么办呢？

这时候我们通常可以通过 CSS selector 语法选择元素。

关于css 选择器 的组合使用，在本节中没有写的很详细，后续会补充

---

一、css是什么？

CSS 是指层叠样式表 (Cascading Style Sheets)。它定义了如何显示HTML元素的样式【颜色\形状\尺寸】。（HTML超文本标记语言是用来创建网页的内容。）

CSS的作用是给网页[html]的元素/标记/标签设置样式的,以让HTML网页变得好看。为了解决内容（[html]的元素）与表现（样式）分离的问题。

1.选择哪些元素(selenium选择元素) 2. 选择什么样子

下图为css选择器(CSS Selector )

CSS Selector 语法就是浏览器用来选择元素的，所以selenium自然就可以使用它用在自动化中，去选择要操作的元素了。

例如:

find_element(By.CSS_SELECTOR, CSS Selector参数)

二、tag,id,class

CSS Selector 同样可以根据tag名、id 属性和 class属性选择元素

1.根据tag名选择元素

根据 tag名 选择元素的 CSS Selector 语法非常简单，直接写上tag名即可

代码如下:

from selenium import webdriver
from selenium.webdriver.common.by import By

wd = webdriver.Chrome()
wd.implicitly_wait(10)
wd.get('https://cdn2.byhy.net/files/selenium/sample1.html')

# 通过tag选择元素
# elements = wd.find_elements(By.TAG_NAME, 'div')

# 通过css selector选择 tag是div的元素
elements = wd.find_elements(By.CSS_SELECTOR, 'div')

for elements in elements:
    print(elements.text)

wd.quit()

2. 根据id元素

根据id属性 选择元素的语法是在id号前面加上一个井号： #id值

id 为 searchtext 的输入框中输入文本 你好,
代码如下：

# css selector，通过id选择元素

from selenium import webdriver
from selenium.webdriver.common.by import By

wd = webdriver.Chrome()
wd.implicitly_wait(5)

wd.get('https://cdn2.byhy.net/files/selenium/sample1.html')

# element = wd.find_elements(By.ID, 'searchtext')
element = wd.find_element(By.CSS_SELECTOR, '#searchtext')
element.send_keys('ha')

wd