Node.js结合selenium做web自动化测试第四课

亲爱的小伙伴们，Node.js结合selenium做web自动化测试第四课的内容整理来了，今天介绍的是元素定位的八种方法

首先为大家介绍的就是定位元素的写法，这个大家应该并不陌生，上一节课的程序里有用到，不知道细心的同学有没有发现这里有两种写法

两种写法效果一样，至于你想御用哪一个，还是那句话，自己开心就好，我们的重点是，怎么来定位元素，下面，有请八个佳丽出场。

官网上有他们的花名册 

https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_By.html

为了便于让大家看懂，下面的介绍呢我改一下出场顺序

1.By.id

一般情况下，Id都是唯一的，所以如果你在检查元素的时候可以找到它的id值，那就甭犹豫了，拿来用吧！怎么用呢？没图你说个屁，嗯，举个栗子：

我们先用一段程序在浏览器里面打开百度网址

这里我们点击编辑器然后鼠标定位到输入框，可以看到蓝色部分就是定位到的元素

框中有个显眼的id="kw"是吗，嗯，要的就是kw，这就是我们要找的id属性，所以接下来这样写

如我们所愿，它定位到了输入框，并且按照要求，在里面输入了“123”

id属性了解了之后，name和className的道理是一样的

还是刚才那段蓝色的框里的内容，注意到id后面的name和class了吗，这两个就是name属性和className属性

所以同样的功能用这两个写起来是下面这样：

2.By.name

3. By.className

这里大家注意：class属性要保证值是唯一的，检查是不是唯一的方法很简单，把属性值copy下来，检查页面ctrl+f，下面会出现一个搜索框，搜索框里把值贴进去

这里会显示值有多少个

就算这里查到的个数不是唯一的也不用担心，因为有些值可能是在ccs或者javascript里面，我们只要关心body里的值是不是唯一就可以了，比如我们刚刚这个，虽然总数不只一个，但是body里面是唯一的，所以放心的用就好了

4. By.xpath

这一个在上节课介绍过的，准确率较高的一种定位方式，用起来很简单，复制粘贴走一波就可以了,细节不演示了，大家自己动手，丰衣足食吧

5. By.css

By.css呢，跟xpath用法一样，都是可以直接复制粘贴的，还是刚那个路径，只不过要复制的地方稍稍往上一点

但是呢，css肯定不光这一个复制粘贴的办法，送你套秘籍，点这里http://www.w3school.com.cn/cssref/css_selectors.asp

这个选择器什么意思呢，举两个例子啊，上面知道了id属性和class属性了吧，我们用css定位的时候填写class属性，只需要在值的签名加一个.  同样，如果你用id属性，那么就在值的前面加#

比如说，我们刚刚搜索框的Id属性值是kw,那么这样写

或者这样

试一下结果，效果是一样的吧，惊不惊喜，意不意外，下面的那些大家以后的实践当中可以挨个玩玩

6. By.linkText

这个方法，主要用来点击页面上会跳转的链接，还是看百度首页

右上角这一排，点击任一一个都会跳转到一个新页面的链接，用By.linkText就准没错了，不用找属性，直接输入字段名称就可以，但是记得它是页面唯一一的字段才可以，如果这个字段在页面出现两个或以上，那乖乖的用别的方法去，没商量

下面点个“新闻”链接看看

7. By.partialLinkText

这个用法跟上面的一样，定位页面的链接，区别在于，它支持模糊查询，也就是说，输入要点击文字的一部分就可以了，我们要搜索“新闻”，在这里了，主要输入“新”或者“闻”都可以

效果一样的，不骗你

8. By.tagName

我们可以看到官网上在这种方法前面标注了deprecated，没错，它是一种被打入冷宫的方法，已经被弃用了，为什么这样对它呢？

原因这种方法呢要根据元素前面的标签来定位比如说div标签，a标签巴拉巴拉的一对标签，可是这样的标签有太多，找起来相当麻烦，所以呢，大家只要对它有个大致了解就好，实际运用中不用此方法定位元素

定位元素的几种方法上面介绍完了，下面说一下动态生成的元素怎么定位

何为动态生成的元素，比如这样，我们在输入框里输入123，这个时候下面会带出来好几个可能我们要找的选项

如果此时我们想要选择第二条“12306铁路客户服务中心”，你会发现当点击选择器的时候鼠标失去焦点，下面的信息就全都消失不见了，扎心了，老铁。。。

没关系，只要思想不滑坡，办法总比困难多

先记录输入框的Id属性值

然后在console界面下找到输入框，在里面输入搜索内容，这时就会自动输入搜索内容带出下面的结果选项

再切换到Element目录下，就可以定位到了

元素定位说到这里，第四课的另外一个内容，是如何截屏，老套路，还是先看官方文档怎么说https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/chrome_exports_Driver.html#takeScreenshot

调用的方法是takeScreenshot，我们代码实现一下

截屏数据存储在变量Imagedata里面，打印出来

输出结果里面的这一堆天书就是图片的源代码

怎么把这一堆天书存储成可以看到的图片呢，这里用这个方法fs    https://nodejs.org/api/fs.html

首先我们要require进来这个方法

然后把图片的源码转换成图片格式，参考这个文档

https://stackoverflow.com/questions/3422262/take-a-screenshot-with-selenium-webdriver

照他说的，差不多就是这么写了

writeFile后面的第一个代表存储路径，screen.png是我们给他定义的文件名，imagedata我们刚刚给截图源文件的名字，base64是图片的编码格式，就是我们看不懂的天书

行不行，拉出来遛遛呗

看，多了一个.png

打开看一下，就是我们要的截图

今天的课堂笔记到这里结束，更多精彩内容，欢迎关注腾讯课堂

https://ke.qq.com/course/281565#tuin=173f40be，周一至周五晚上8：00，不见不散

测试工具CukeTest下载地址http://www.cuketest.com/