不管做那种类型的UI自动化，其本质都是操作被测对象，也就是元素。为了达到这一目的，我们需要做两件事情：
A：查找元素
findElement();
- 返回一个WebElement对象
findElements();
- 返回一个包含多个WebElement对象的List集合
B：操作元素
八种方式定位元素：
By.id(id)：通过元素ID属性查找-通常情况下元素ID属性在HTML中是唯一的
By.name(name)：通过元素name属性查找
By.className(className)：通过元素classname属性查找
By.linkText(链接文本)：通过链接文本
By.partialLinkText(部分链接文本)：通过部分链接文本
By.cssSelector(Css选择器)：通过元素CSS选择器，也就是元素的CSS路径
By.tagName(name)：通过元素tagname查找，也就是标签的名称查找
By.xpath(XPath路径)：通过元素XPath路径查找
我们以慕课网修改个人信息为例
1、By.id("属性id的值")
HTML源码：
<input type="text" name="nickname" id="nick" autocomplete="off" data-validate="require-nick" class="moco-form-control" value="" placeholder="请输入昵称">
代码例子：
driver.findElement(By.id("nick"));
2、By.name("属性name的值")
HTML源码：
<input type="text" value="" maxlength="37" name="email" data-validate="require-email" autocomplete="off" class="xa-emailOrPhone ipt ipt-email js-own-name" placeholder="请输入登录手机号/邮箱">
代码例子
driver.findElement(By.name("email"));
3、By.className("属性className的值")
HTML源码：
<input type="password" name="password" data-validate="require-password" class="ipt ipt-pwd js-loginPassword js-pass-pwd" placeholder="请输入密码" maxlength="20" autocomplete="off">
代码例子
driver.findElement(By.className("ipt-pwd"));
如果className的值有多个单词组成，只需要其中的一部分就行，选取的部分不能包含空格
4、By.linkText("链接文本")
HTML源码：
<a href="//www.greatytc.com/user/setbindsns" class="set-btn"><i class="icon-set"></i>个人设置</a>
代码例子
driver.findElement(By.linkText("个人设置"));
5、By.partialLinkText("部分链接文本")
HTML源码：
<a href="/user/setprofile" class="on">个人信息<span class="arr"><i class="icon-right2"></i></span></a>
代码例子
driver.findElement(By.partialLinkText("信息"));
6、By.cssSelector("CSS路径")
HTML源码：
<a href="javascript: void(0);" class="pull-right js-edit-info"><i class="icon-note"></i>编辑</a>
代码例子
driver.findElement(By.cssSelector(".pull-right"));
7、By.tagName("标签的名称")
HTML源码：
<textarea name="aboutme" id="aboutme" rows="5" class="noresize js-sign moco-form-control"></textarea>
代码例子
driver.findElement(By.tagName("textarea"));
8、By.xpath("元素路径")
HTML源码：
<input type="button" value="登录" hidefocus="true" class="moco-btn moco-btn-red moco-btn-lg btn-full xa-login">
代码例子
driver.findElement(By.xpath("//*[@id="signup-form"]/div[5]/input"));
综合练习：
- 打开慕课网登录页面，
- 输入账号、密码点击登录按钮
- 跳转至个人中心
- 点击个人设置，进入个人设置页面
- 点击个人信息
- 点击编辑按钮
- 输入昵称和个性签名
Demo
package com.yto.Day1;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class FindElementTest {
static WebDriver driver;
public static void main(String args[]) throws InterruptedException {
openBrowser();
findElementTest();
}
public static void openBrowser() throws InterruptedException {
//设置驱动
System.setProperty("webdriver.chrome.driver", "D:\\SeleniumTool\\chromedriver.exe");
//启动浏览器，创建webdriver对象
driver = new ChromeDriver();
}
public static void findElementTest() throws InterruptedException {
//启动浏览器
driver.get("https://www.imooc.com/user/newlogin");
//最大化浏览器
driver.manage().window().maximize();
Thread.sleep(3000);
//通过name定位账号输入框并输入账户
driver.findElement(By.name("email")).sendKeys("XXXXXX");
//通过className定位密码输入框并输入密码
driver.findElement(By.className("ipt-pwd")).sendKeys("XXXXXX");
//通过xpath定位登录按钮并点击
driver.findElement(By.xpath("//*[@id=\"signup-form\"]/div[5]/input")).click();
Thread.sleep(3000);
//进入个人中心
driver.navigate().to("https://www.imooc.com/u/index/allcourses");
//通过linkText定位个人设置并点击
driver.findElement(By.linkText("个人设置")).click();
//通过partialLinkText定位个人信息并点击
driver.findElement(By.partialLinkText("信息")).click();
//通过cssSelector选择器定位编辑按钮并点击
driver.findElement(By.cssSelector(".pull-right")).click();
Thread.sleep(3000);
//通过id定位昵称，并输入
driver.findElement(By.id("nick")).sendKeys("少年");
//通过tagName定位个性签名文本框
driver.findElement(By.tagName("textarea")).sendKeys("test test");
}
}
