Selenium教程系列（二）：元素查找及操作

上一篇教程，写了个Demo实现了打开百度的首页，那打开网页，肯定是要操作网页的，那怎么操作呢？一个网页，会有很多的元素，那我们第一步，就肯定是找到要操作的元素了

首先，我们简单写一个html页面，新建一个记事本，然后把以下代码复制进去

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <input id="un"  class="css1" name="username" />
  <input id="pw" class="css2 lala" name="password" />
  <input id="co" class="css3" name="code" /><br />
  <input type="button" id="btn" class="css4" name="submit" value="按钮" />
  <script>
	document.getElementById('btn').onclick = function(){
		alert("haha");
	}
  </script>
 </body>
</html>

保存，然后更改后缀为html，这里，我存在桌面，名称为test.html

然后，双击它，就会用浏览器打开，当然，如果你默认浏览器是IE的话，那么就是使用IE浏览器打开。也是一样的，不影响，打开以后，把地址栏里的地址复制一下，贴粘到java代码里，替换掉原先写的百度首页的网址

然后运行脚本，就会使用谷歌浏览器打开测试页面了。那现在，这个页面有三个输入框和一个按钮，我们现在要操作这几个元素。selenium查找网页元素，有好几种方式。在整个页面找，那就是用driver.findElement方法。当然也可以在某一个元素里面找。那就是使用元素的findElement方法了。

通过eclipse工具，我们可以看到，查找元素的方法有这么几个：className、cssSelector、id、linkText、name、partialLinkText、tagName、xpath。

className，就是通过元素的class来定位元素。在页面上，一个元素是可以有多个class的，像我们写的案例，第二个input标签（输入框）就有css2和lala两个class。所以通过css2和lala，都可以定位到这个input。但同时，多个标签，也可以使用同一个class，所以通常情况下，通过className来定位元素，都是使用driver.findElements方法，也就是找出多个元素，然后再通过下标，获取到想要的元素。使用driver.findElement方法，如果有多个，也只会返回找到的第一个。
cssSelector，这个基本可以忽略，使用这个方法，你得需要一些前端的知识。前端在写css的时候，怎么定位一个元素，是有一定的语法的，而这个方法就是使用css定位元素的语法。比如：#aaa .css3，这个就表示id为aaa的元素下，class为css3的元素。
id，就是通过元素的id属性来查找元素，在一个页面中，一个id通常只会定位到一个元素。通过id来查找元素，效率是最高的，但很多元素，通常是没有id的。
linkText，就是通过a标签之间的文本。来定位a标签。比如，我们打开百度的首页，，右上角这个"新闻"就是一个a标签。By.linkText("新闻")，就可以定位到这个元素。
name，就是通过元素的name属性来定位元素。通常情况下，只有表单元素，才会有name属性。
partialLinkText，顾名思义，就是通过a标签的部分文本来定位
tagName，就是通过标签名来定位元素。
xpath，就是利用xpath的语法来定位元素。xpath是XML文档定位节点（元素）的一种语法，HTML也是标准的XML文档，所以就可以使用xpath来查找HTML文档的元素。通过xpath查找元素，效率不是很高。但这也只是以前，现在电脑的配置都比较高了。这点性能的影响基本上是可以忽略了。同时，现在前端一般都是使用React.js、Vue.js、Angular.js等框架，使用这些框架，一般都不会给元素加id、name属性。所以通过id、name找元素的方式，就很难行得通了，这个时候，还就得使用万能的xpath。关于xpath的语法规则，后面会详细地讲。

好了，那我们现在就使用这些方法，来操作页面的元素，代码

	@Test
	public void test222() throws Exception {
		// 打开测试页面
		driver.get("file:///C:/Users/Administrator/Desktop/test.html");
		//通过id找到第一个输入框
		WebElement un = driver.findElement(By.id("un"));
		//第一个输入框输入aaa
		un.sendKeys("aaa");
		//通过className找到第二个输入框
		WebElement pw = driver.findElement(By.className("lala"));
		//第二个输入框输入bbb
		pw.sendKeys("bbb");
		//通过name找到第三个输入框
		WebElement co = driver.findElement(By.name("code"));
		//第三个输入框输入ccc
		co.sendKeys("ccc");
		Thread.sleep(2000);
		//找到页面所有的input标签
		List<WebElement> inputs = driver.findElements(By.tagName("input"));
		//获取第4个input标签，即按钮
		WebElement btn = inputs.get(3);
		//点击按钮
		btn.click();
		Thread.sleep(3000);
	}

这里，我只贴了Test部分的代码，Before和After部分的代码，和之前都是一样的。后面，也一直是这样，这两部分的代码，基本上是固定的。

获取到一个web元素之后，就可以操作这个web元素，通过eclipse，可以查看有哪些方法。

这里，只介绍常用的几个方法。

clear，这个方法通常用于清空输入框的内容
click，点击元素
findElement、findElements，就是在元素里面找子元素了，和driver的使用一样
getAttribute，获取元素的属性。在我们写的案例里面，input标签的id、class、name、value等，都是属性
getTagName，获取元素的标签名
getText，获取标签的文本，双标签才有文本。我们写的案例中，input是单标签，是没有文本的。"<div>asdf</div>"，类似这样的，为双标签，那么获取它的文本，就是asdf。如果标签里面还是子标签，子标签，是不算作文本的。
sendKeys，输入内容，一般是输入框，才会使用这个方法。
三个is开头的方法：isDisplayed，元素是否显示，在页面上，元素是可以设置为隐藏或是不显示状态的，但它在文档里却是存在的。你没看见，不代表不存在，请记住这句话。isEnabled，元素是否可交互，也就是我们常说的启用/禁用状态了。isSelected，元素是否被选中，一般是单选按钮，复选按钮及下拉选择框，会用到这个判断。

欢迎加入测试群：91425817，一起讨论测试的那此事。

枝月

发布了47 篇原创文章 · 获赞 9 · 访问量 3万+

私信关注

Selenium教程系列（二）：元素查找及操作

猜你喜欢