依旧拿前面写的网页案例来讲
<!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 />
<input />
<input /><br />
<input type="button" value="按钮" />
<script>
document.getElementsByTagName('input')[3].onclick = function(){
alert("haha");
}
</script>
</body>
</html>只不过，现在输入框都没有了id、class、name这些属性。这个时候，要操作这几个输入框，就只能通过TagName或是xpath来定位了。现在就讲怎么用xpath语法来找到这几个输入框。首先，看文档的结构，先是根标签html，html标签下有head标签和body标签，body标签下，有四个input标签，还有一个br标签和script标签。这个时候，是不是就可以这样描述：根标签html下的body标签下的input标签。这就是一个层级的关系。各个层级之间用"/"分隔。那么写出来就是"html/body/input"，这是不是跟一个目录很像，如果学过linux的话。这其实就跟linux系统中定位文件是差不多的，这样写，代表的是相对路径，在最前面再加一个"/"，那就是绝对路径。同样，在xpath表达式中，一样可以使用"."和".."，一个点，代表是当前元素，两个点，就代表找父元素。运行效果：
现在的问题是，页面有四个input标签，但这样只能找到第一个，要找第二个怎么办，可以使用findElements，找出所有的input，再使用get下标，一个一个遍历出来。不过，有更简单的方法，使用xpath就可以直接定位到第二个，只要在input后面加上方括号，方括号里，填要找的元素的下标就可以了，找第二个输入框，那么就是"html/body/input[2]"，特别注意，xpath计算下标，是从1开始的，这与平常的习惯是不一样的。要找第三个，只要把下标改成3就可以了。这是标准的写法，一级一级的往下找，各个节点的层次关系，全都描述出来了。就我们现在写的这个页面，一共就四个input，可以写得更简单一点。"//input"就可以找到第一个input。"//input"就代表在所有层级找input。只要是input标签就可以，不管在哪个层级。
@Test
public void test() throws Exception {
// 打开测试页面
driver.get("file:///C:/Users/Administrator/Desktop/test.html");
//通过id找到第一个输入框
WebElement un = driver.findElement(By.xpath("//input"));
//第一个输入框输入aaa
un.sendKeys("aaa");
//通过className找到第二个输入框
WebElement pw = driver.findElement(By.xpath("//input[2]"));
//第二个输入框输入bbb
pw.sendKeys("bbb");
//通过name找到第三个输入框
WebElement co = driver.findElement(By.xpath("//input[3]"));
//第三个输入框输入ccc
co.sendKeys("ccc");
Thread.sleep(2000);
//找到页面所有的input标签
WebElement btn = driver.findElement(By.xpath("//input[4]"));
//点击按钮
btn.click();
Thread.sleep(3000);
}运行一下，效果和前面的脚本执行是一样的。在linux系统中查找文件，可以使用通配符"*"，在xpath里，也可以使用这个通配符。"//*"就代表当前元素下的所有子元素，如果是driver调用这个查找，则可以找出页面所有的元素。当然，找出页面所有的元素，有什么用呢？找出所有的元素就可以遍历，看有没有符合我们要求的元素。现在，我们更改一下网页的源代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul style="list-style:none">
<li><span>用户名：</span><input placeholder="8-12位字母数字" /></li>
<li><span>密码：</span><input placeholder="6-16位字母数字" /></li>
<li><span>验证码：</span><input placeholder="4位数字" /></li>
<li><input type="button" value="按钮" /></li>
</ul>
<script>
document.getElementsByTagName('input')[3].onclick = function(){
alert("haha");
}
</script>
</body>
</html>打开后，大概就是长这个样子：
很丑，主要是我没有写css样式，毕竟那不是我们要关注的东西。这个时候，我们要操作这个输入框和下面的按钮，就可以不看源代码，不用知道文档的结构来实现。这个时候，我们通过属性来找元素。我们看输入框里的灰色文字"8-12位字母数字"，这个，其实是input的一个属性placeholder。通常情况下，在一个页面下，不同的输入框的提示语是不同的，所以通过这个来定位一个输入框，重复的概率就很小了。问题是，知道了元素的属性，要怎么来定位这个元素。这个时候，就要使用新的语法了。"//input[@placeholder='8-12位字母数字']"，这样就可以定位到用户名后面的输入框了。语法就是标签名后加方括号，方括号里以"@"开头，"@"后面接属性名=属性值，属性值，用单引号引起来。
@Test
public void test() throws Exception {
// 打开测试页面
driver.get("file:///C:/Users/Administrator/Desktop/test.html");
//通过id找到第一个输入框
WebElement un = driver.findElement(By.xpath("//input[@placeholder='8-12位字母数字']"));
//第一个输入框输入aaa
un.sendKeys("aaa");
//通过className找到第二个输入框
WebElement pw = driver.findElement(By.xpath("//input[@placeholder='6-16位字母数字']"));
//第二个输入框输入bbb
pw.sendKeys("bbb");
//通过name找到第三个输入框
WebElement co = driver.findElement(By.xpath("//input[@placeholder='4位数字']"));
//第三个输入框输入ccc
co.sendKeys("ccc");
Thread.sleep(2000);
//找到页面所有的input标签
WebElement btn = driver.findElement(By.xpath("//input[@value='按钮']"));
//点击按钮
btn.click();
Thread.sleep(3000);
}执行一下，效果和前面的是一样的。
我现在写的这个页面，非常的简单，但是在真实的项目中，页面是非常复杂的。我前面讲过一句话， 你没看见的，不代表没有，甚而，有些时候，你看见的，也未必就是你以为的。比如，我写按钮的value时，在中间加一个空格，你通过页面查看，可能就看不出来，结果你查找元素的时候，中间不加空格，那是找不到这个元素的。同时，页面中可能会隐藏有很多的元素，这些元素，只在一些特定的条件下，才会展示出来，比如，前端开发人员自定义的弹框。但这些弹框，里面的文本，就可能会和你页面上看到的元素是一样的，特别是"确定"按钮，这个时候，通过文本找，就可能找出的元素，并不是你预期的结果。而这些问题的解决，基本上都依赖经验，遇到这些问题，就要慢慢的解决，依靠经验。下一篇博文，会讲一些xpath的高级语法，来最大限度的避免这些问题，同时，也使得通过xpath查找元素时，更灵活。
欢迎加入测试群：91425817，一起讨论测试的那此事。
