Coding 自动化 UI 测试实践（二）—— 页面元素定位(一

前言

UI 测试的本质在于模拟人手的点击和肉眼的审查，然而，不管是点击页面上的按钮还是查看这些控件是否正确都需要先定位到这些元素。selenium 提供了多种定位方式，不过主要以“CSS 选择器”为主。因为其他方法都可以看成它的子集，所以这里只讨论 CSS 定位。本文先讨论 CSS 选择器编写流程

CSS 选择器编写流程

这里我们以“登录 Coding”的为例进行说明。
分析测试
登录操作主要分四步走：打开登入首页，输入用户名，输入密码，点击登录按钮。因此，需要编写三个元素（用户名输入框，密码输入框，登录按钮）的 CSS 选择器。
审查元素
编写 CSS 选择器，必须先知道元素背后的 html 源码结构，可以使用浏览器的“审查元素”功能进行查看 。打开 Coding 登录页面，将鼠标放在要审查的元素上，右击，选择“审查元素”即可。

Paste_Image.png
查看 html 源码
查看 html 源码
编写选择器
观察两个输入框，发现都有 id 属性，根据 id 优先的原则，以 id 作为选择器。登录按钮没有选择器，就选用 class 属性。得到的选择器如下：“#email”, “#password”, “.large.green.button”

编写测试代码

@Test
public void loginCoding()  {
    FirefoxDriver driver = new FirefoxDriver();
    driver.navigate().to("https://coding.net/login");
    driver.findElement(By.cssSelector("#email")).sendKeys("ciwang");
    driver.findElement(By.cssSelector("#password")).sendKeys("coding0620");
    driver.findElement(By.cssSelector(".large.green.button")).click();
}

运行调试

Paste_Image.png