写点什么

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

  • 2024-02-20
    北京
  • 本文字数:4115 字

    阅读完需:约 14 分钟

简介

在做 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 表达式更多内容可参考下面表格。

如何检验 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 表达式的用法。

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



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.com')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;


publicclass demo2{publicstaticvoidmain(String[]args)throwsInterruptedException{WebDriverdriver=newChromeDriver();
driver.get("http://www.baidu.com'");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.com')#关闭当前窗口driver.close()#关闭浏览器driver.quit()
复制代码

Java 实现

importorg.openqa.selenium.WebDriver;importorg.openqa.selenium.chrome.ChromeDriver;publicclass demo{publicstaticvoidmain(String[]args)throwsInterruptedException{WebDriverdriver=newChromeDriver();
driver.get("https://ceshiren.com");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.com') search = driver.find_element(By.ID,'su') logging.basicConfig(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;publicclass demo{privatestaticfinalLoggerlogger=Logger.getLogger(demo.class.getName());publicstaticvoidmain(String[]args)throwsInterruptedException{
WebDriverdriver=newChromeDriver();
driver.get("https://www.baidu.com");
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.com')#刷新页面driver.refresh()logging.basicConfig(level=logging.INFO)#打印当前页面的源代码logging.info(driver.page_source)
复制代码

Java 实现

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

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.com')#最小化窗口driver.minimize_window()#最大化窗口driver.maximize_window()#将浏览器设置为1000*1000的大小driver.set_window_size(1000, 1000)
复制代码

Java 实现

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



领取人工智能学习资料,请点击!!!

用户头像

社区:ceshiren.com 微信:ceshiren2023 2022-08-29 加入

微信公众号:霍格沃兹测试开发 提供性能测试、自动化测试、测试开发等资料、实事更新一线互联网大厂测试岗位内推需求,共享测试行业动态及资讯,更可零距离接触众多业内大佬

评论

发布
暂无评论
掌握web控件定位技巧,提升页面操作效率!_测试_测吧(北京)科技有限公司_InfoQ写作社区