技术分享 | Web 控件定位与常见操作

简介: 技术分享 | Web 控件定位与常见操作

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

实战演示

Selenium 自带 id 定位,可以通过元素的 id 属性进行定位,比如下面的代码:

  • Python 版本
driver.find_element_by_id('kw')
  • Java 版本
driver.findElement(By.id("kw"));

Selenium 自带 name 定位,可以通过元素的 name 属性进行定位,比如下面的代码:

  • Python 版本
driver.find_element_by_name('wd')
  • Java 版本
driver.findElement(By.name("wd"));

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

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

要定位的元素是百度首页的搜索输入框


首先寻找 id 为 form 的 form 元素,然后再寻找它的子元素 span,span 的 class 属性为 bg s_ipt_wr quickdelete-wrap,最后找 span 的子元素 input:

  • Python 版本
driver.find_element_by_xpath\
    ("//form[@id='form']/span[@class='bg s_ipt_wr quickdelete-wrap']/input")
  • Java 版本
driver.findElement(By.xpath("//form[@id='form']/span[@class='bg s_ipt_wr quickdelete-wrap']/input"));

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

  • Python 版本
driver.find_element_by_xpath("//form[@id='form']//input[@id='kw']")
  • Java 版本
driver.findElement(By.xpath("//form[@id='form']//input[@id='kw']"));

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

如何检验 XPath 定位是否正确?可以使用 chrome 的检查模式 → Console,输入$x(‘XPath 表达式’)即可,例如:


XPath 可以定位绝大多数元素,但是XPath采用从上到下的遍历模式,速度并不快,而 css_selector 采用样式定位,速度要优于 XPath,而且语法更简洁:

下面是 Selenium 使用 css_selector 的例子:

css_selector 找到 class 属性为 active 的元素,然后 > 表示找 class 属性为 active 的元素的子节点

  • Python 版本
driver.find_element_by_css_selector('.logo-big')
  • Java 版本
driver.findElement(By.cssSelector(".logo-big"));

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

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

元素中会出现文字,比如下面的分类,可以利用这段文字进行定位:


  • Python 版本
driver.find_element_by_link_text('欢迎光临霍格沃兹测试学院')
  • Java 版本
driver.findElement(By.linkText("欢迎光临霍格沃兹测试学院"));

也可以采用部分匹配方式,不必写全:“欢迎光临”、“欢迎光临霍格沃兹测试学院”、“霍格沃兹”

  • Python 版本
driver.find_element_by_partial_link_text('霍格沃兹测试学院')
  • Java 版本
driver.findElement(By.partialLinkText("霍格沃兹测试学院"));

注意:partial_link_text 与 link_text 的区别:

partial_link_text 不用写全,只需写部分即可,比如上面使用“霍格沃兹”即可匹配到“欢迎光临霍格沃兹测试学院”。

DOM 结构中,元素都有自己的 tag,比如 input tag, button tag, anchor tag 等等,每一个 tag 拥有多个属性,比如 id, name, value class,等等。下面的高亮部分就是 tag:


可以使用 tag 进行定位:

  • Python 版本
driver.find_element_by_tag_name('input')
  • Java 版本
driver.findElement(By.tagName("input"));

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

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


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

  • Python 版本
driver.find_element_by_class_name('active')
  • Java 版本
driver.findElement(By.className("active"));

  • ID/Name 是最安全的定位选项。根据 W3C 标准,它在页面中是唯一的,ID 在树结构中也是唯一的。
  • CSS Selector 语法简洁,搜索速度快于 XPath。
  • XPath 定位功能强大,采用遍历搜索,速度略慢。
  • link,class name, tag name:不推荐使用,无法精准定位。

常见操作

Selenium 常见操作有:

  • 输入、点击、清除
  • 关闭窗口、浏览器
  • 获取元素属性
  • 获取网页源代码、刷新页面
  • 设置窗口大小

输入、点击、清除在 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 版本
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class AiceTest {
    public static void main(String[] args) {
        WebDriver driver = new ChromeDriver();
        driver.get("http://www.baidu.com");
        driver.findElement(By.id("kw")).sendKeys("霍格沃兹测试学院");
        driver.findElement(By.id("su")).click();
        driver.findElement(By.name("wd")).clear();
        try {
            Thread.sleep(2000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        String title = driver.getTitle();
        System.out.println(title);
        driver.close();
    }
}

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

  • Python 版本
#导入对应的依赖
from selenium import webdriver
#初始化webdriver
driver = webdriver.Chrome()
#访问网站
driver.get('http"//www.baidu.com')
#关闭当前窗口
driver.close()
#关闭浏览器
driver.quit()
  • Java 版本
//导入对应的依赖
import org.openqa.selenium.WebDriver;
//初始化webdriver
WebDriver driver = new ChromeDriver();
//访问网站
driver.get("http://www.baidu.com");
//关闭当前窗口
driver.close();
//关闭浏览器
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)

输出结果为:

INFO:root:百度一下
INFO:root:百度一下
INFO:root:{'x': 844, 'y': 188}
INFO:root:{'height': 44, 'width': 108}
  • Java 版本
@Test
    void baiduTest(){
        webDriver = new ChromeDriver();
        webDriver.get("https://www.baidu.com/");
        WebElement search = webDriver.findElement(By.id("su"));
        //获取search的value属性值并打印
        System.out.println(search.getAttribute("value"));
        //打印search的位置坐标
        System.out.println(search.getLocation());
        //打印search的元素大小
        System.out.println(search.getSize());
    }

输出结果为:

百度一下
(902, 188)
(108, 44)
  • Python 版本

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

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 版本
WebDriver webDriver = new ChromeDriver();
webDriver.get("https://www.baidu.com/");
//刷新页面
webDriver.navigate().refresh();
System.out.println(webDriver.getPageSource());

设置窗口大小主要有最小化、最大化和自定义设置窗口具体的大小。更多技术文章

  • 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版本
import org.openqa.selenium.Dimension;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import static java.lang.Thread.sleep;
public class AiceTest {
    public static void main(String[] args) throws InterruptedException {
        WebDriver driver = new ChromeDriver();
        driver.get("http://www.baidu.com");
        //设置窗口最大化
        driver.manage().window().maximize();
        //浏览器的设定大小
        sleep(2000);
        Dimension dimension = new Dimension(800, 600);
        driver.manage().window().setSize(dimension);
        sleep(2000);
        //浏览器全屏
        driver.manage().window().fullscreen();
        sleep(2000);
        driver.close();
    }
}
相关文章
|
5月前
|
文字识别 前端开发 API
视觉智能开放平台产品使用合集之需要在Web端处理本地文件并上传,该如何操作
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
|
2月前
|
前端开发
|
3月前
|
开发者 Java Spring
JSF 牵手社交登录,如魔法风暴席卷 Web 世界,开启震撼便捷登录之旅!
【8月更文挑战第31天】在互联网时代,便捷登录成为用户的核心需求。社交登录凭借其便捷性、安全性和社交化的特点,在各类Web应用中广泛应用。JavaServer Faces(JSF),作为一款流行的Java Web框架,能够轻松集成社交登录功能,显著提升用户体验。本文详细介绍社交登录的优势,并提供两种JSF集成社交登录的常见方法:一是利用Spring Social等第三方库简化开发;二是自行实现社交登录流程。开发者可根据项目需求选择适合的方案。
40 0
|
3月前
|
开发者 C# UED
如何轻松将WinUI控件引入Web应用?Uno Platform实战攻略——从环境搭建到性能优化,一探究竟!
【8月更文挑战第31天】Uno Platform 通过支持 WebAssembly,将 WinUI 控件无缝带入 Web,为多平台开发提供了新途径。本文介绍如何在 Web 中使用 WinUI 控件,包括环境搭建、控件使用、性能优化、样式调整及测试调优,助力开发者打造高质量跨平台应用。
53 0
|
3月前
|
数据采集 前端开发 开发者
Angular表单控件详解:掌握模板驱动与响应式表单的精髓,让Web应用中的数据采集工作变得高效又简单,彻底告别繁琐的表单处理流程
【8月更文挑战第31天】表单是 Web 应用的关键组件,用于用户登录、注册及信息提交。Angular 作为成熟前端框架,提供了强大的表单处理功能,包括模板驱动与响应式表单。本文通过技术博客形式,详细介绍这两种表单控件,并提供示例代码,展示如何利用它们简化表单处理流程,提高开发效率。首先介绍简单的模板驱动表单,然后讲解基于 RxJS 的响应式表单,适用于复杂逻辑。通过本文,你将学会如何高效地使用 Angular 表单控件,提升应用的用户体验。
36 0
|
5月前
|
数据采集 Web App开发 前端开发
Selenium:自动化Web浏览器操作的强大工具
**Selenium** 是一款用于自动化Web应用测试和模拟用户行为的工具,支持多种浏览器和编程语言。安装包括安装Selenium库和对应浏览器的WebDriver。基本用法包括导入库、启动浏览器、查找与操作页面元素、等待元素加载及关闭浏览器。在实际项目中,Selenium常用于Web测试、爬虫、自动化表单填写等,优点是跨平台、模拟真实用户行为,但性能较低且依赖浏览器。
197 9
|
5月前
|
机器学习/深度学习 人工智能 Apache
人工智能平台PAI操作报错合集之alink任务可以在本地运行,上传到flink web运行就报错,如何解决
阿里云人工智能平台PAI (Platform for Artificial Intelligence) 是阿里云推出的一套全面、易用的机器学习和深度学习平台,旨在帮助企业、开发者和数据科学家快速构建、训练、部署和管理人工智能模型。在使用阿里云人工智能平台PAI进行操作时,可能会遇到各种类型的错误。以下列举了一些常见的报错情况及其可能的原因和解决方法。
|
5月前
|
前端开发 计算机视觉
视觉智能开放平台操作报错合集之人脸对比1:1,采用web前端直接调用,使用了base64处理图片,提示http错误码414,该如何处理
在使用视觉智能开放平台时,可能会遇到各种错误和问题。虽然具体的错误代码和消息会因平台而异,但以下是一些常见错误类型及其可能的原因和解决策略的概述,包括但不限于:1. 认证错误、2. 请求参数错误、3. 资源超限、4. 图像质量问题、5. 服务不可用、6. 模型不支持的场景、7. 网络连接问题,这有助于快速定位和解决问题。
|
5月前
|
前端开发 JavaScript 容器
程序与技术分享:BeetleX之快速构建Web多房间聊天室
程序与技术分享:BeetleX之快速构建Web多房间聊天室
42 0
|
5月前
|
前端开发 程序员 API
视觉智能开放平台产品使用合集之web前端拉起人脸识别该如何操作
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。