掌握web控件定位技巧，提升页面操作效率！

2024-03-09 23:20:04 分类：前端 热度：100 评论： 0

掌握web控件定位技巧，提升页面操作效率！

简介

在做 Web 自动化时，最根本的就是操作页面上的元素，首先要能找到这些元素，然后才能操作这些元素。工具或代码无法像测试人员一样用肉眼来分辨页面上的元素。那么要如何定位到这些元素，本章会介绍各种定位元素的方法。

web 控件定位

id 定位

Python 实现

driver.find_element(By.ID,'query')

Java 实现

driver.findElement(By.id("query"));
name 定位

Python 实现

driver.find_element(By.NAME,'query')

Java 实现

driver.findElement(By.name("query"));

通常来说 name 属性与 id 属性在页面中唯一，推荐使用这两个属性进行定位。

XPath 定位

XPath 是一个定位语言，英文全称为：XML Path Language，用来对 XML 上的元素进行定位，但也适用于 HTML，下面来看一个例子。

要定位的元素是 Sogou 首页的搜索输入框。

首先寻找 id 为 sf 的 form 元素，然后再寻找它的子元素 span，span 的 class 属性为 sec-input-box，最后找 span 的子元素 input，以下代码演示。

Python 实现

driver.find_element(By.XPATH,"//form[@id='sf']/span[@class='sec-input-box']/input")

Java 实现

driver.findElement(By.xpath("//form[@id='sf']/span[@class='sec-input-box']/input"));

下面的定位也可以找到这个 input，请注意，这里使用了双斜杠//，它可以找到子孙节点，而但斜杠/只能找到子节点，以下代码演示。

Python 实现

driver.find_element(By.XPATH,"//form[@id='sf']//input[@id='query']")

Java 实现

driver.findElement(By.xpath("//form[@id='sf']//input[@id='query']"));

XPath 表达式更多内容可参考下面表格。

表达式 描述
nodename 选取此节点的所有子节点。
/ 从根节点选取。
// 从匹配选择的当前节点选择文档中的节点，而不考虑它们的位置。
. 选取当前节点。
.. 选取当前节点的父节点。
@ 选取属性。

如何检验 XPath 定位是否正确？可以使用 chrome 的检查模式 -> Console，输入$x('XPath 表达式')即可。

通过 css_selector

XPath 可以定位绝大多数元素，但是 XPath 采用从上到下的遍历模式，速度并不快，而 css selector 采用样式定位，速度要优于 XPath，而且语法更简洁。下面是 Selenium 使用 css selector 的例子。

css selector 找到 class 属性值为 active 的元素，然后>表示找 class 属性为 active 的元素的子节点，以下代码演示。

Python 实现

driver.driver.find_element(By.CSS_SELECTOR,'.logo-big')

Java 实现

driver.findElement(By.cssSelector(".logo-big"));

下表列出了常用的 css_selector 表达式的用法。

表达式 描述
.intro class="intro" 的所有元素
#firstname id="firstname" 的所有元素
a[target=_blank] 具有属性 target="_blank" 的所有 a 元素
p:nth-child(2) 属于其父元素的第二个 p 元素

使用 Chrome 的检查模式 -> Console 也可以在当前页面检测 css_selector 是否正确，输入$('css selector 表达式')即可。

现在我也找了很多测试的朋友，做了一个分享技术的交流群，共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源，没人解答问题，坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化，性能，安全，测试开发等等方面有一定建树的技术大牛
分享他们的经验，还会分享很多直播讲座和技术沙龙
可以免费学习！划重点！开源的！！！
qq群号：691998057【暗号：csdn999】
link 定位

元素中会出现文字，比如下面的分类，可以利用这段文字进行定位，以下是代码演示。

Python 实现

driver.driver.find_element(By.LINK_TEXT, '欢迎光临测试人社区 | Powered by 霍格沃兹测试开发学社')

Java 实现

driver.findElement(By.linkText("欢迎光临测试人社区 | Powered by 霍格沃兹测试开发学社"));

也可以采用部分匹配方式，不必写全：“欢迎光临”、“欢迎光临测试人社区”、“霍格沃兹”，以下是代码演示。

Python 实现

driver.find_element(By.PARTIAL_LINK_TEXT, '测试人社区')

Java 实现

driver.findElement(By.partialLinkText("测试人社区"));

要注意 partial_link_text 与 link_text 的区别，partial_link_text 不用写全，只需写部分即可，比如上面使用“霍格沃兹”即可匹配到“欢迎光临霍格沃兹测试学院”。

tag_name 定位

DOM 结构中，元素都有自己的 tag，比如 input tag，button tag，anchor tag 等等，每一个 tag 拥有多个属性，比如 id，name，value class 等等。

下面的高亮部分就是 tag：

可以使用 tag 进行定位:

Python 实现

driver.driver.find_element(By.TAG_NAME,'input')

Java 实现

driver.findElement(By.tagName("input"));

要注意，尽量避免使用 tag_name 定位元素，因为有大量重复的元素！

class_name 定位

可以通过元素的 class 属性值进行定位。

这里的 active 用的就是上图 class 的值。

Python 实现

driver.driver.find_element(By.CLASS_NAME, 'active')

Java 实现

driver.findElement(By.className("active"));
推荐使用

  1. ID/Name 是最安全的定位选项。根据 W3C 标准，它在页面中是唯一的，ID 在树结构中也是唯一的。

  2. CSS Selector 语法简洁，搜索速度快于 XPath。

  3. XPath 定位功能强大，采用遍历搜索，速度略慢。

  4. link，class name， tag name：不推荐使用，无法精准定位。

常见操作

Selenium 常见操作有：

  1. 输入、点击、清除。

  2. 关闭窗口、浏览器。

  3. 获取元素属性。

  4. 获取网页源代码、刷新页面。

  5. 设置窗口大小。

输入、点击、清除

输入、点击、清除在 Selenium 中对应的方法分别是 send_keys、click、clear。

Python 实现

from selenium import webdriver
driver = webdriver.Chrome()driver.get('http://www.baidu.***')driver.find_element(By.NAME,'wd').send_keys('霍格沃兹测试学院')driver.find_element(By.ID,'su').click()driver.find_element(By.NAME,'wd').clear()

Java 实现

importorg.openqa.selenium.By;importorg.openqa.selenium.WebDriver;importorg.openqa.selenium.chrome.ChromeDriver;


publi***lass demo2{publicstaticvoidmain(String[]args)throwsInterruptedException{WebDriverdriver=newChromeDriver();
driver.get("http://www.baidu.***'");Thread.sleep(2000);driver.findElement(By.name("wd")).sendKeys("霍格沃兹测试学院");driver.findElement(By.id("su")).click();driver.findElement(By.name("wd")).clear();
//关闭浏览器进程driver.quit();}}
关闭窗口、浏览器

关闭当前句柄窗口（不关闭进程）close()，关闭整个浏览器进程 quit()。

Python 实现

#导入对应的依赖from selenium import webdriver#初始化webdriverdriver = webdriver.Chrome()#访问网站driver.get('http"//www.baidu.***')#关闭当前窗口driver.close()#关闭浏览器driver.quit()

Java 实现

importorg.openqa.selenium.WebDriver;importorg.openqa.selenium.chrome.ChromeDriver;publi***lass demo{publicstaticvoidmain(String[]args)throwsInterruptedException{WebDriverdriver=newChromeDriver();
driver.get("https://ceshiren.***");Thread.sleep(2000);//关闭页面driver.close();Thread.sleep(2000);//关闭浏览器进程driver.quit();}}
获取元素属性

获取元素标签上的属性 get_attribute('value')，元素的坐标 location，元素的大小 size。

Python 实现

import loggingfrom selenium import webdriver
def test_baidu():    driver = webdriver.Chrome()    driver.get('https://www.baidu.***')    search = driver.find_element(By.ID,'su')    logging.basi***onfig(level=logging.INFO)    logging.info(search.get_attribute('value'))    #获取search的value属性值并打印    logging.info(search.get_attribute('value'))    #打印search的位置坐标    logging.info(search.location)    #打印search的元素大小    logging.info(search.size)

Java 实现

importorg.openqa.selenium.*;importorg.openqa.selenium.chrome.ChromeDriver;importjava.util.logging.Logger;publi***lass demo{privatestaticfinalLoggerlogger=Logger.getLogger(demo.class.getName());publicstaticvoidmain(String[]args)throwsInterruptedException{
WebDriverdriver=newChromeDriver();
driver.get("https://www.baidu.***");
Thread.sleep(2000);
WebElementsearch=driver.findElement(By.id("su"));//获取search元素的value属性值并打印logger.info(search.getAttribute("value"));//获取search元素的位置坐标值并打印
Pointp=search.getLocation();logger.info("Width: "+p.x);logger.info("Height: "+p.y);//获取search元素的大小并分别打印Dimensionsize=search.getSize();intwidth=size.getWidth();intheight=size.getHeight();logger.info("Width: "+width);logger.info("Height: "+height);
driver.close();//关闭浏览器进程driver.quit();}}

输出结果为：

INFO:root:百度一下INFO:root:百度一下INFO:root:{'x':844,'y':188}INFO:root:{'height':44,'width':108}
获取网页源代码、刷新页面

网页源代码 page_source，刷新页面 refresh()。

Python 实现

import loggingfrom selenium import webdriver
driver = webdriver.Chrome()driver.get('http"//www.baidu.***')#刷新页面driver.refresh()logging.basi***onfig(level=logging.INFO)#打印当前页面的源代码logging.info(driver.page_source)

Java 实现

importorg.openqa.selenium.*;importorg.openqa.selenium.chrome.ChromeDriver;importjava.util.logging.Logger;publi***lass demo{privatestaticfinalLoggerlogger=Logger.getLogger(demo.class.getName());publicstaticvoidmain(String[]args)throwsInterruptedException{
WebDriverdriver=newChromeDriver();
driver.get("https://ceshiren.***");

Thread.sleep(2000);driver.navigate().refresh();//打印页面源代码logger.info(driver.getPageSource());
driver.close();//关闭浏览器进程driver.quit();}}
设置窗口大小

设置窗口大小主要有最小化、最大化和自定义设置窗口具体的大小。

Python 实现

from selenium import webdriver
driver = webdriver.Chrome()driver.get('http"//www.baidu.***')#最小化窗口driver.minimize_window()#最大化窗口driver.maximize_window()#将浏览器设置为1000*1000的大小driver.set_window_size(1000, 1000)

Java 实现

importorg.openqa.selenium.*;importorg.openqa.selenium.chrome.ChromeDriver;
publi***lass demo{
publicstaticvoidmain(String[]args)throwsInterruptedException{
WebDriverdriver=newChromeDriver();
driver.get("https://ceshiren.***");//最大化页面driver.manage().window().maximize();//最小化页面driver.manage().window().minimize();
Thread.sleep(2000);//将浏览器页面大小设置为800x600像素driver.manage().window().setSize(newDimension(800,600));
driver.close();//关闭浏览器进程driver.quit();}}

下面是配套资料，对于做【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！

最后： 可以在公众号：程序员小濠 ！ 免费领取一份216页软件测试工程师面试宝典文档资料。以及相对应的视频学习教程免费分享！，其中包括了有基础知识、Linux必备、Shell、互联网程序原理、Mysql数据库、抓包工具专题、接口测试工具、测试进阶-Python编程、Web自动化测试、APP自动化测试、接口自动化测试、测试高级持续集成、测试架构开发测试框架、性能测试、安全测试等。

如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！

转载请说明出处内容投诉
CSS教程_站长资源网 » 掌握web控件定位技巧，提升页面操作效率！
减肥猫

减肥猫

分享到：

相关推荐

发表评论

欢迎 访客 发表评论

一个令你着迷的主题！

查看演示 官网购买