软件测试/人工智能|熟练使用web控件定位技巧,提升测试工作效率!

简介: 软件测试/人工智能|熟练使用web控件定位技巧,提升测试工作效率!

image.png

简介

在做 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"));

image.png

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

XPath 定位

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

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

image.png

首先寻找 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 表达式')即可。

image.png

通过 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 元素

image.png

link 定位

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

image.png

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_textlink_text 的区别,partial_link_text 不用写全,只需写部分即可,比如上面使用“霍格沃兹”即可匹配到“欢迎光临霍格沃兹测试学院”。

tag_name 定位

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

下面的高亮部分就是 tag:

image.png

可以使用 tag 进行定位:

Python 实现

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

Java 实现

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

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

class_name 定位

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

image.png

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

Python 实现

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

Java 实现

driver.findElement(By.className("active"));

推荐使用

image.png

  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_keysclickclear

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
#初始化webdriver
driver = 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 logging
from 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 logging
from 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();
}
}
相关文章
|
13天前
|
Web App开发 IDE JavaScript
Selenium IDE:Web自动化测试的得力助手
Selenium IDE:Web自动化测试的利器。作为开源工具,Selenium IDE支持录制与回放用户操作,适用于Chrome、Firefox等多浏览器,简化了测试流程,提升了效率,降低了自动化测试的门槛。它还支持导出多种编程语言的脚本,便于测试集成与复用。
63 19
Selenium IDE:Web自动化测试的得力助手
|
15天前
|
Web App开发 IDE 测试技术
Selenium:强大的 Web 自动化测试工具
Selenium 是一款强大的 Web 自动化测试工具,包括 Selenium IDE、WebDriver 和 Grid 三大组件,支持多种编程语言和跨平台操作。它能有效提高测试效率,解决跨浏览器兼容性问题,进行性能测试和数据驱动测试,尽管存在学习曲线较陡、不稳定等缺点,但其优势明显,是自动化测试领域的首选工具。
104 17
Selenium:强大的 Web 自动化测试工具
|
14天前
|
Web App开发 IDE JavaScript
Selenium IDE:Web自动化测试的得力助手
Selenium IDE是开源的Web自动化测试工具,适用于Chrome、Firefox等多款浏览器。它提供简单的录制与回放功能,用户可通过录制浏览器操作自动生成测试脚本,支持导出为多种编程语言,便于非专业测试人员快速上手,有效提升测试效率与质量。
101 6
Selenium IDE:Web自动化测试的得力助手
|
1月前
|
监控 安全 测试技术
如何在实际项目中应用Python Web开发的安全测试知识?
如何在实际项目中应用Python Web开发的安全测试知识?
29 4
|
2月前
|
机器学习/深度学习 人工智能 自然语言处理
软件测试中的人工智能:改变游戏规则的革新
在这篇技术性文章中,我们将深入探讨人工智能(AI)如何彻底改变了软件测试领域。从自动化测试到智能缺陷检测,AI不仅提高了测试的效率和准确性,还为软件开发团队提供了前所未有的洞察力。通过具体案例,本文揭示了AI在软件测试中应用的现状、挑战及未来趋势,强调了技术创新在提升软件质量与开发效率中的关键作用。
|
2月前
|
机器学习/深度学习 人工智能 自然语言处理
软件测试中的人工智能:提升效率与准确性的新途径
在当今快速发展的技术领域,人工智能(AI)正成为软件测试的重要工具。本文将探讨AI在软件测试中的应用,如何通过智能化手段提高测试的效率和准确性。从自动化测试到缺陷预测,我们将深入了解AI如何改变传统的软件测试方式,为软件开发流程带来革命性的变化。
|
1月前
|
Web App开发 测试技术 数据安全/隐私保护
自动化测试的魔法:使用Python进行Web应用测试
【10月更文挑战第32天】本文将带你走进自动化测试的世界,通过Python和Selenium库的力量,展示如何轻松对Web应用进行自动化测试。我们将一起探索编写简单而强大的测试脚本的秘诀,并理解如何利用这些脚本来确保我们的软件质量。无论你是测试新手还是希望提升自动化测试技能的开发者,这篇文章都将为你打开一扇门,让你看到自动化测试不仅可行,而且充满乐趣。
|
1月前
|
Web App开发 设计模式 JavaScript
自动化测试之美:如何利用Selenium实现Web应用的高效测试
【10月更文挑战第29天】在软件开发的世界中,测试是确保产品质量的关键步骤。本文将带你了解如何使用Selenium这一强大的自动化测试工具,提高Web应用测试的效率和准确性。通过实际案例,我们将探索Selenium的核心功能及其在现代软件开发中的应用,旨在帮助读者掌握自动化测试的精髓,从而提升软件测试工作的整体效能。
45 0
|
2月前
|
机器学习/深度学习 人工智能 自然语言处理
软件测试中的人工智能:改变游戏规则的技术革命
【10月更文挑战第10天】 本文深入探讨了人工智能在软件测试中的应用,揭示了它如何提高测试效率、减少人为错误,并预示了未来软件测试行业的发展趋势。通过案例分析和原理讲解,文章展现了AI技术在自动化测试、缺陷检测和性能评估等方面的巨大潜力。
|
2月前
|
机器学习/深度学习 数据采集 人工智能
软件测试中的人工智能应用与挑战
【10月更文挑战第10天】 在当今信息技术飞速发展的时代,软件系统日益复杂且多样化,传统的手工测试方法已无法满足快速迭代和高效发布的需求。人工智能(AI)技术的引入为软件测试领域带来了新的希望和机遇。本文将探讨人工智能在软件测试中的应用现状、所面临的挑战以及未来的发展趋势,旨在启发读者思考如何更好地利用AI技术提升软件测试的效率和质量。
46 0