技术分享 | 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();
    }
}

大家是不是对web控件的定位有了进一步的了解了呀？来跟着示例一起操练起来吧~

引荐学习

**内容全面升级，4 个月 20+ 项目实战强化训练，资深测验架构师、开源项目作者亲授 **BAT 大厂前沿最佳实践，****带你一站式掌握测验开发必备核心技能（对标阿里P6+，年薪50W+ ）！直推 BAT 名企测验经理 ，普遍涨薪 50%+！

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

实战演示

常见操作

相关文章

基于PaddleSeg的证件照一键式生成工具

突破堆内存大小上限！ mSponge方案实践

9. 异步链路追踪实现设计

重新定义性价比!人工智能AI聊天ChatGPT新接口模型gpt-3.5-turbo闪电更新,成本降90%,Python3.10接入

作者信息