# （八）通过css选择器去定位页面上的元素




### css选择器

火狐的[css教程](https://developer.mozilla.org/zh-CN/docs/Learn/CSS)应该是比较权威的css入门教程了。

对于selenium自动化测试来说，大家只需要掌握一些必备的[css选择器](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors)知识就好了。


### 目的

* 熟悉selenium webdriver 定位方式
* 学会通过css选择器去定位元素


### 练习对象

我们使用[html5-test-page](https://github.com/cbracco/html5-test-page/blob/master/index.html)作为我们的练习对象。

将html代码拷贝一份并保存到本地，文件名为```index.html```。

### 场景

定位下面html代码所示的输入框，并使用sendKeys输入一些内容。

```html
<p>
  <label for="input__search">Search</label>
  <input id="input__search" type="search" placeholder="Enter Search Term">
</p>
<p>
  <label for="input__text2">Number Input</label>
  <input id="input__text2" type="number" placeholder="Enter a Number">
</p>
<p>
  <label for="input__text3" class="error">Error</label>
  <input id="input__text3" class="is-error" type="text" placeholder="Text Input">
</p>
<p>
  <label for="input__text4" class="valid">Valid</label>
  <input id="input__text4" class="is-valid" type="text" placeholder="Text Input">
</p>

```

### 代码

```javascript
var path = require('path');
var webdriver = require('selenium-webdriver'),
  By = webdriver.By;

var testFile = "file://" + path.join(__dirname,  "index.html");

var dr = new webdriver.Builder().forBrowser('chrome').build();
dr.get(testFile);

// id selector
dr.findElement(By.css('#input__search')).sendKeys('测试教程网');
// attribute selector
dr.findElement(By.css('input[type="number"]')).sendKeys('66666');
// class selector
dr.findElement(By.css('.is-error')).sendKeys('should be error');
// class selector
dr.findElement(By.css('.is-valid')).sendKeys('should be valid');

```

### 运行结果

如下图所示

![](http://wx4.sinaimg.cn/mw690/726a2979gy1fhb7dut06qj20g009aaai.jpg)




原始封面

![课程图片](https://images.unsplash.com/photo-1498713301984-508015049dc1?w=300)