Python自动化测试·Selenium操控元素的方法

|----------------|
| 你好，我是安然无虞。 |

文章目录

操控元素的基本方法
- 点击元素
- 输入框
- 获取元素信息
- [补充练习: QQ音乐](#补充练习: QQ音乐)

操控元素的基本方法

选择到元素之后, 我们的代码会返回元素对应的 WebElement 对象, 通过这个对象, 我们就可以操控元素了.

操控元素通常包括:

点击元素
在元素中输入字符串, 通常是对输入框这样的元素
获取元素包含的信息, 比如文本内容, 元素的属性

点击元素

点击元素非常简单, 就是调用元素 WebElement 对象的 click 方法. 前面已经有说过.

这里我们要补充讲解一点:

当我们调用 WebElement 对象的 click 方法去点击元素的时候, 浏览器接收到自动化命令, 点击的是该元素的中心点位置.

例如, 对于下面这样的一个元素:

我们要点击添加客户这个按钮, 既可以点击右边对应的绿色框子中的button元素, 也可以点击红色框子中的span元素.

因为这两个元素的中心点都是button内部, 所以都是有效的点击区域.

输入框

输入字符串也非常简单, 就是调用元素 WebElement 对象的 send_keys()方法.

如果我们要把输入框中已经有的内容清除掉, 可以使用 WebElement 对象的 clear()方法.

请大家点击打开这个网址

并且按F12，观察HTML的内容

我们要写一个自动化程序：要求在输入框中填入姓名：安然无虞

而且要做到输入框中已经有的提示字符，需要先 清除掉

代码如下:

python 复制代码

element = wd.find_element(By.ID, 'input1')

element.clear() # 清除掉输入框中已有的字符串
element.send_keys('安然无虞')

获取元素信息

获取元素的文本内容

我们已经知道, 通过 WebElement 对象的 text 属性, 可以获取元素 展示在界面上的 文本内容.

比如:

python 复制代码

element = wd.find_element(By.ID, 'animal')
print(element.text)

获取元素属性值

通过 WebElement 对象的 get_attribute 方法来获取元素的属性值.

比如要获取元素属性class的值, 就可以使用 element.get_attribute('class'),

如下:

python 复制代码

element = wd.find_element(By.ID, 'input_name')
print(element.get_attribute('class'))

执行完自动化代码, 如果想关闭浏览器窗口, 可以调用 WebDriver 对象的quit()方法, 像这样 wd.quit().

获取整个元素对应的HTML

要获取整个元素对应的HTML文本内容, 可以使用 element.get_attribute('outerHTML')
如果只是想获取某个元素内部的HTML文本内容, 可以使用 element.get_attribute('innerHTML')

获取输入框里面的文字

对于input输入框的元素, 要获取里面的输入文本, 用text属性是不行的, 这时可以使用:

element.get_attribute('value')

比如:

python 复制代码

element = wd.find_element(By.ID, 'input1')
print(element.get_attribute('value')) # 获取输入框里的文本

获取元素文本内容2

通过 WebElement 对象的 text属性, 可以获取元素展示在界面上的文本内容.

但是有时候, 元素的文本内容没有展示在界面上, 或者没有完全展示在界面上. 这时, 用 WebElement对象的text属性来获取文本, 就会有问题.

遇到上面这种情况时, 可以尝试使用 element.get_attribute('innerText'), 或者 element.get_attribute('textContent')

使用 innerText 和 textContent 的区别是, 前者只显示元素可见文本内容, 后者显示所有内容 (包括display属性为none的部分)

具体可以参考这里

注意: 了解前端开发的同学可以知晓一下:

get_attribute 调用本质上就是调用 HTMLElement 对象的属性

比如:

element.get_attribute('value')等价于js里面的 element.value

element.get_attribute('innerText')等价于js里面的 element.innerText

补充练习: QQ音乐

打开qq音乐， https://y.qq.com/n/ryqq/toplist/27

找出其中排名上升的歌曲（序号右边有上升箭头图标的）和演唱者

打印出来，打印格式如下：

复制代码

孤独                ： G.E.M. 邓紫棋
Lovesick Girls      ： BLACKPINK
落幕人              ： 任然
幸存者              ： 林俊杰
刁钻                ： 任然

注意：界面有时会弹出广告框，可以先手动关闭掉，防止其影响自动化爬取信息

参考答案:

python 复制代码

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

wd = webdriver.Chrome()
wd.implicitly_wait(5)
wd.get('https://y.qq.com/n/ryqq/toplist/27')

elements = (wd.find_element(By.CLASS_NAME,'songlist__list')).find_elements(By.TAG_NAME, 'li')#所有歌曲

for element in elements:
    rank = (element.find_element(By.CLASS_NAME,'songlist__rank')).find_element(By.TAG_NAME, 'i')
    # 这个判断非常好, 注意使用
    if rank.get_attribute('class') == 'icon_rank_up':
        song = element.find_element(By.CLASS_NAME,'songlist__songname_txt')#上升 歌曲名
        name = element.find_element(By.CLASS_NAME,'songlist__artist')#上升 歌手名
        print(f'{song.text:20}： {name.text}')

|----------------------|
| 遇见安然遇见你，不负代码不负卿。 |
| 谢谢老铁的时间，咱们下篇再见～ |