web自动化笔记一:元素定位的八种方式

一、元素定位
优先使用id定位,超链接使用link和paryial_link

二、自动化测试流程(先定位后操作)
1、自动化测试方案->2、自动化脚本编写(定位元素、操作元素、验证操作、记录测试结果)->3、执行测试用例->4、结果分析、报告

三、定位元素
find_element找的是单个元素,必须定位到,找不到元素会报错和find_elements的区别,是找到所有匹配的元素放到一个列表里,找不到会返回一个空列表

①、通过id定位 

from selenium import webdriver
import time
driver=webdriver.Chrome()
driver.get("https://www.baidu.com")
 
# 通过id定位
driver.find_element_by_id('kw').send_keys('新冠肺炎')#定位搜索框输入新冠肺炎
driver.find_element_by_id('su').click()#点击百度一下
# 等待3秒
time.sleep(3)
# 退出浏览器
driver.quit()

②、通过name定位

from selenium import webdriver
import time
driver=webdriver.Chrome()
driver.get("https://www.baidu.com")
 
# 通过name定位
driver.find_element_by_name('wd').send_keys('新冠肺炎')#通过name定位搜索框输入新冠肺炎
driver.find_element_by_id('su').click()#点击百度一下
# 等待3秒
time.sleep(3)
# 退出浏览器
driver.quit()

 补充知识点:通过name定位搜索框,输入新冠肺炎后,加上\n直接回车

from selenium import webdriver
import time
driver=webdriver.Chrome()
driver.get("https://www.baidu.com")
#
# 通过name定位搜索框,输入新冠肺炎后,加上\n直接回车
driver.find_element_by_name('wd').send_key('新冠肺炎\n')#通过name定位搜索框输入新冠肺炎
# 等待3秒
time.sleep(3)
# 退出浏览器
driver.quit()

③通过class定位

from selenium import webdriver
import time
driver=webdriver.Chrome()
driver.get("https://www.baidu.com")
 
# 通过class定位
driver.find_element_by_class_name('s_ipt').send_keys('新冠肺炎')#定位搜索框输入新冠肺炎
driver.find_element_by_class_name('s_btn').click()#点击百度一下,注意class名属性不能有空格,如有空格删掉空格前
# 等待3秒
time.sleep(3)
# 退出浏览器
driver.quit()

④通过超链接link文本去定位

from selenium import webdriver
import time
driver=webdriver.Chrome()
driver.get("https://www.baidu.com")
 
# 通过超链接link文本去定位
driver.find_element_by_link_text('地图').click()#点击百度页面上的地图
# 等待3秒
time.sleep(3)
# 退出浏览器
driver.quit()

⑤tag name去定位元素

from selenium import webdriver
import time
driver=webdriver.Chrome()
driver.get("https://www.baidu.com")
#
# tag name去定位元素
taglist = driver.find_elements_by_tag_name('input')
for one in taglist:
	if one.get_attribute('name')=='wd':
		one.send_keys('新冠肺炎')
time.sleep(3)
driver.find_element_by_id('su').click()#点击百度一下
time.sleep(3)
#打印标题
print(driver.title)
# 退出浏览器
driver.quit()

⑥XPath定位:按路径去找元素
(以百度为例)
绝对路径:从跟目录寻找,可以先定位元素ctrl+f
driver.find_element_by_xpath('绝对路径').send_keys('新冠疫情')
#按索引去取值/html/body/div/div/div/div/div/form/span[2]/input,索引是从1开始
#通过标签+属性去取值://html/body/div/div/div/div/div/form/span/input[@属性名称='属性值']
可以在浏览器f12中copy xpath可以获取绝对路径 ,ctrl+f验证
代码:

from selenium import webdriver
import time
driver=webdriver.Chrome()
driver.get("https://www.baidu.com")
 
# 通过xpath定位
driver.find_element_by_xpath('/html/body/div[1]/div[1]/div[5]/div/div/form/span[1]/input').send_keys('花瓣网')
time.sleep(2)
driver.find_element_by_xpath('/html/body/div[1]/div[1]/div[5]/div/div/form/span[2]/input').click()
#打印标题
print(driver.title)
# 退出浏览器
driver.quit()

相对路径:// 标签[@属性=‘属性值’] 
也可以通过索引取值://标签[索引值]
可以copy xpath相对路径//*[id='id属性值']
*是通配符。代表所有可以使用//*[@属性='属性值']
代码:

from selenium import webdriver
import time
driver=webdriver.Chrome()
driver.get("https://www.baidu.com")
 
# 通过xpath定位:相对路径查找
driver.find_element_by_xpath('//*[@id="kw"]').send_keys('花瓣网')
driver.find_element_by_xpath('//*[@id="su"]').click()
time.sleep(2)
#打印标题
print(driver.title)
# 退出浏览器
driver.quit()

⑦css定位(以百度搜索为例)
css定位方式:1、根据id:'#id'
          2、通过class:'.class'
          3、通过标签去定位+id或者class:'标签#id'   或者  '标签.class'
          4、通过标签+属性:标签[属性='属性值']
                注释:xpath里属性要加@ css不用
         5、模糊查询:以什么开头

from selenium import webdriver
import time
driver=webdriver.Chrome()
driver.get("https://www.baidu.com")
 
# 通过css定位
# 模糊查询:以什么开头
driver.find_element_by_css_selector("input[name^='w']").send_keys('新冠疫情')#input标签中name属性以w开头的
# 通过css定位:用input下的id属性定位
driver.find_element_by_css_selector('input#su').click()#input标签中id属性以s开头的
time.sleep(2)
#打印标题
print(driver.title)
# 退出浏览器
driver.quit()

          6、以什么结尾

 
from selenium import webdriver
import time
driver=webdriver.Chrome()
driver.get("https://www.baidu.com")
 
# 通过css定位
# 模糊查询:以什么结尾
driver.find_element_by_css_selector("input[name$='d']").send_keys('新冠疫情')#input标签中name属性以d结尾的
# 通过css定位:用input下的id属性定位
driver.find_element_by_css_selector('input#su').click()
time.sleep(2)
#打印标题
print(driver.title)
# 退出浏览器
driver.quit()

          7、在中间 *

from selenium import webdriver
import time
driver=webdriver.Chrome()
driver.get("https://www.baidu.com")
 
# 通过css定位
# 模糊查询:以中间属性查询
driver.find_element_by_css_selector("input[name*='ubmi']").send_keys('新冠疫情')#input标签中name属性以ubmi在中间的
# 通过css定位:用input下的id属性定位
driver.find_element_by_css_selector('input#su').click()
time.sleep(2)
#打印标题
print(driver.title)
# 退出浏览器
driver.quit()

#子元素查询
#(A>B>C :三个必须连着的所属层级关系爷爷>爸爸>儿子)(不能使用下标:例C>D[1])
1、driver.find_element_bu_css_selector(div>form>span>input).send_keys('新冠疫情')   

#A  C  A后代的任意标签,爷爷   可以匹配儿子的标签,也可以匹配孙子的标签
2、driver.find_element_bu_css_selector(form   input[id='kw']).send_keys('新冠疫情') 

标签:nth-child(num):一般用在下拉框中,代表第几个儿子。
#frist-child 第一个儿子  #last-child最后一个儿子
3、driver.find_element_bu_css_selector(select.select-small>option:nth-child(3))

代码:

from selenium import webdriver
import time
driver=webdriver.Chrome()
driver.get("https://www.baidu.com")
 
# 通过css定位
# 子元素查询
driver.find_element_by_css_selector('form>span>input[id="kw"]').send_keys('新冠肺炎')
time.sleep(5)
driver.find_element_by_css_selector('form input[id="su"]').click()
time.sleep(5)
driver.quit()
#打印标题
print(driver.title)
# 退出浏览器
driver.quit()

⑧定位封装
driver.find_element()

需求
使用driver.find_element()定位用户名
使用driver.find_element()定位密码 

扩展8种元素定位的底层实现
方式:driver.find_element(By.XXX,’value’)
参数说明:
    By.xxx:为By类的类型 如:By.ID
    value:元素的定位值  如 “userA”
By需要进行导包

元素操作方法
为什么要学习?
1、需要让脚本模拟用户给指定元素输入值
2、需要让脚本模拟人为删除元素内容
3、需要让脚本模拟点击操作

元素常用操作方法
1、click()  单击元素
2、send_keys(value)  模拟输入
3、clear ()  清除文本

案例:

from selenium import webdriver
import time
from selenium.webdriver.common.by import By
 
# 需求:打开某某网站注册页面,完成以下操作
# 1).通过脚本执行输入用户名:admin;密码:123456;电话号码:18611111111;电子邮件:123@qq.com
# 2).间隔3秒,修改电话号码为:18600000000
# 3).间隔3秒,点击‘注册’按钮
# 4).间隔3秒,关闭浏览器
# 5).元素定位方法不限
 
driver = webdriver.Chrome()
driver.get('www.XXXX.com/')
# 输入用户名
driver.find_element(By.CSS_SELECTOR,'#userA').send_keys('admin')
# 输入密码
driver.find_element(By.CSS_SELECTOR,'#passwordA').send_keys('123456')
# 输入手机号码
driver.find_element(By.CSS_SELECTOR,'#telA').send_keys('18611111111')
# 输入邮箱
driver.find_element(By.CSS_SELECTOR,'#emailA').send_keys('123@qq.com')
time.sleep(3)
# 清空手机号码,重新输入手机号码
driver.find_element(By.CSS_SELECTOR,'#telA').clear()
driver.find_element(By.CSS_SELECTOR,'#telA').send_keys('18600000000')
time.sleep(3)
# 点击注册
driver.find_element(By.XPATH,'//*[@id="zc"]/fieldset/button').click()
time.sleep(3)
# 关闭浏览器
driver.quit()

注意:输入框有数据,在输入之前一定要清空,尤其是保存密码,用户名不被清空的情况

作为一个软件测试的过来人,我想尽自己最大的努力,帮助每一个伙伴都能顺利找到工作。所以我整理了下面这份资源,现在免费分享给大家,有需要的小伙伴可以关注【公众号:开心螺蛳粉】自提!

软件测试面试文档

我们学习必然是为了找到高薪的工作,下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料,并且有字节大佬给出了权威的解答,刷完这一套面试资料相信大家都能找到满意的工作。在这里插入图片描述

在这里插入图片描述

行动吧,在路上总比一直观望的要好,未来的你肯定会感谢现在拼搏的自己!如果想学习提升找不到资料,没人答疑解惑时,请及时加入群:1150305204,里面有各种测试开发资料和技术可以一起交流哦。

  • 9
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Playwright是一个用于自动化浏览器操作的工具,它提供了多种元素定位方式定位网页中的元素。以下是一些常用的Playwright元素定位方式: 1. 基础定位方式: - 通过选择器定位元素:使用`page.$(selector)`方法,其中`selector`是一个CSS选择器字符串。 - 通过XPath定位元素:使用`page.$x(expression)`方法,其中`expression`是一个XPath表达式字符串。 2. 进阶定位方式: - 定位元素:可以使用`element.$(selector)`方法来定位一个元素的子元素,其中`element`是一个已经定位到的元素对象。 - 定位相邻元素:可以使用`element.nextSibling`和`element.previousSibling`属性来定位一个元素的相邻元素。 - 定位元素:可以使用`element.$xpath(expression)`方法来定位一个元素的父元素,其中`expression`是一个XPath表达式字符串。 3. 使用剧作家选择器(playwright-relative-selector): - 剧作家选择器是一个Playwright的扩展包,它允许您相对于其他元素定位元素。 - 首先,您需要安装`playwright-relative-selector`包:`npm install --save-dev playwright-relative-selector`。 - 然后,在您的Node.js脚本中,您可以使用`require`来引入该包,并与Playwright一起使用。 以下是一个使用Playwright进行元素定位的示例代码: ```javascript const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch(); const page = await browser.newPage(); await page.goto('https://example.com'); // 使用CSS选择器定位元素 const element1 = await page.$('.my-class'); // 使用XPath定位元素 const element2 = await page.$x('//div[@id="my-id"]'); // 定位元素 const childElement = await element1.$('.child-class'); // 定位相邻元素 const nextSibling = await element1.nextSibling; const previousSibling = await element1.previousSibling; // 定位元素 const parentElement = await element1.$xpath('..'); // 使用剧作家选择器定位元素 const relativeSelector = require('playwright-relative-selector'); const relativeElement = await relativeSelector(page, 'parent > child'); await browser.close(); })(); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值