软件测试 | 测试开发 |web控件定位与常见操作

霍格沃兹-慕漓

于 2023-02-10 11:04:34 发布

阅读量145

点赞数

分类专栏：测试开发测试软件测试文章标签：前端 html javascript

本文链接：https://blog.csdn.net/cebawuyue/article/details/128966149

版权

软件测试同时被 3 个专栏收录

520 篇文章 4 订阅

订阅专栏

测试开发

518 篇文章 3 订阅

订阅专栏

测试

514 篇文章 2 订阅

订阅专栏

1.简介

测试人员做Web自动化测试时，最基本的测试工作就是操作网页上的元素。操作步骤是：首先要找到页面上的这些元素，然后操作这些元素。测试人员用的工具或代码无法像测试人员一样能用眼镜分辨出网页上的元素。那么用程序如何定位这些网页元素呢？下面介绍各种定位网页元素的方法。

2.实战演示

（1）通过id定位网页元素

定位Web页面中的元素可以通过元素的id属性进行定位，代码演示如下（Python版和Java版）。

Python版本

driver.find_element_by_id('kw')

Java版本

driver。findElement(By.id("kw"));

(2)通过name定位网页元素

定位Web页面中的元素可以通过元素的name属性进行定位，代码演示如下（Python版和Java版）。

Python版本

driver.find_element_by_name('wd')

Java版本

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

通常来说name属性与id属性在网页中是唯一的，推荐测试人员使用这两个属性定位网页元素。

（3）通过XPath定位网页元素

XPath是一种定位元素，英文全称为XML Path Language，用来对XML中的元素进行定位，但也使用与HTML。下面来看一个例子。

要定位的网页元素是百度首页的搜索输入框（见图3-11）。

我们首先在百度首页中寻找id为from的from元素；然后再寻找它的子元素span，span的class属性为bg s_ipt_wr quickdelete-wrap;最后找span的子元素input，代码演示如下（Python版和Java版）。

Python版本

driver.find_element_by_xpath\
    ("//from[@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']/span"));

下面的定位代码也可以找到input，请注意，这里代码中使用了双斜杠//，它可以找到子孙节点，而斜杠/只能找到子节点，代码演示如下（Python版和Java版）。

Python版本

driver.find_element_by_xpath("//from[@id='form']//input[@id='kw']")

Java版本

driver。findElenment(By.xpath("//form[@id='form']//input[@id='kw']"));

代码中有关XPath表达式的更多内容可参考表3-1

表达式	描述
nodename	选取此节点的所有子节点
/	从跟节点选取
//	从匹配的当前节点选择文档中的节点
.	选取当前节点
..	选取当前节点的父节点
@	选区属性

如何检验XPath定位是否正确？先进入Chrome页面，在页面上点击鼠标右键，在弹出的菜单中点击 “ 检查”项，再点击 “ Console”项2，在页面中输入$x(‘XPath 表达式’)即可检验定位是否正确，如图3-12所示。

（4）通过css_selector

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

css_selector找到class属性为active的元素，然后使用 “>“字符表示找class属性为active的元素的子节点，代码演示如下（Python版和Java版）。

Python版本

driver.find_element_by_css_selector('.logo-big')

Java版本

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

表3-2列出了常用的css_selector表达式的用法。

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

进入Chrome页面，在页面上点击鼠标右键，在弹出的菜单中点击“检查”项，再点击“Console”项，在页面中输入$('css selector 表达式')即可完成CSS表达式的检测，如图3-13所示。

（5）通过link

页面元素中会出现文字，如图3-14中标记出来的文字，可以利用这段文字进行元素定位，演示代码如下（Python版和Java版）。

Python版本

driver.find_element_by_link_text('欢迎光临霍格沃兹测试学院')

Java版本

driver.findElement(By.linkText("欢迎光临霍格沃兹测试学院"));

也可以采用部分分配进行元素定位，且匹配是关键词可不必全写，如“欢迎光临” “欢迎光临霍格沃兹测试学院” “ 霍格沃兹” ，代码演示如下（Python版和Java版）。

Python版本

driver.find_element_by_partial_link_text('霍格沃兹测试学院')

Java版本

driver.findElement(By.partiaiLinkText("霍格沃兹测试学院"))

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

（6）通过tag_name

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

下面的代码中高亮部分（灰底）就是tag。

可以使用tag定位元素，实际代码如下（Python版和Java版）

Python版本

driver.find_element_by_tag_name('input')

Java版本

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

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

（7）通过class_name

可以通过元素的class属性值进行定位，如图3-15所示

这里的active用的就是class的值，演示代码如下（Python版和Java版）。

Python版本

driver.find_element_by_class_name('active')

Java版本

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

(8)推荐使用

在Web自动化测试中，定位元素的方法有很多种，常见的定位方式有id/name、CSS、Selector、XPath、link、class_name、tag_name等，推荐使用的顺序如下3-16所示

1）id/name是最安全的定位选项。根据W3C标准，他们在页面中是唯一的，id在树结构中也是唯一的。

2）css_selector语法简洁，搜索速度快于XPath.

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

4）link、class_name、tag_name: 不推荐使用，无法精准定位元素

3.常见操作

Selenium常见操作如下。

输入、点击、清楚。

关闭窗口和浏览器。

获取元素属性。

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

设置窗口大小。

（1）输入、点击、清楚

输入、点击、清楚操作在Selenium中对应的方法分别是send_keys、click、clear，演示代码如下（Python版和Java版）。

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 staticc void main(String[] args){
        
        WebDriver driver = new ChromeDriver();
        driver.get("https://www.baidu.com");
        driver.findElement(By.id("kw")).sendKeys（"霍格沃兹测试学院"）;
        driver.findElement(By.id("su")).click();
        driver.findElement(By.name("wd")).clear();
        try{
            Threed.sleep(2000);
        }catch (InterruptedException  e){
            e.printStackTrace();
        }
        string title = driver.geTitle();
        system.out.printIn(title);
        driver.close();
    }

}

(2)关闭窗口和浏览器

关闭当前句柄窗口（不关闭进程）使用的方法为close（），关闭整个浏览器进程使用的方法为quit（），演示代码如下（Python版和Java版）。

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();

（3）获取元素的属性

获取元素的属性使用的方式为get_attribute('value')，元素的属性包括坐标（location）和大小（size），演示代码如下（Python版和Java版）。

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）

（4）获取网页源代码、刷新页面

获取网页代码使用的方法为page_source，刷新页面使用的方法为refresh（）。演示代码如下（Python版和Java版）。

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演示代码

webdriver webdriver = new ChromeDriver();
webdriver.get("http://www.baidu.com/");
//刷新页面
webdriver.navigate().refresh();
System.out.println(webdriver.getPageSource());

(5)设置窗口大小

设置窗口大小主要包括窗口的最小化、最大化和自定义设置窗口的大小，演示代码如下（Python版和Java版）。

Python演示代码

from selenium import webdriver

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

Java演示代码

import org.openqa.selenium.Dimension;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

import static java.lang.Thred.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();
   }
}