写在前面:

阅读这篇文章前,您需要的基础是
1)HTML
2)JavaScript
3)node.js
4)npm基础操作
5)DOM编程基础
如果可以,在读完这篇文章后可以去深入了解selenium-webdriver。
推荐网址:http://www.testclass.net/selenium_javascript

正文

这次我们要爬取的网站是
http://gltxpd.cspiii.com/External/Credentialinfo?type=2

搜索网站.png
目标:
1.爬虫获取搜索框并输入搜索关键词
2.点击查询获取查询内容
3.打印企业的信息

Part1.selenium-webdriver介绍

官方的介绍:Selenium是一个浏览器自动化库。Selenium最常用于测试Web应用程序，可用于需要与浏览器自动交互的任何任务。

个人的理解:selenium实际上能自动打开浏览器，并能模拟一些dom操作,比如点击,滑动,键盘按键。
优点:
1）比起直接在浏览器控制台输入js脚本来抓取信息，selenium能轻松的把信息抓取到本地,这对在浏览器运行的JavaScript程序来说，十分困难。
2）不需要进行反反爬虫处理,因为它是直接打开浏览器,实际行为和用户别无二致。
3）动态。比起静态爬虫比如用（axios+cheerio）。

Part2 selenium-webdriver的安装

1)npm install selenium-webdriver
2)然后请下载下面的组件并添加到环境变量中才可以运行selenium。

Browser	Component
Chrome	chromedriver(.exe)
Internet Explorer	IEDriverServer.exe
Edge	MicrosoftWebDriver.msi
Firefox	geckodriver(.exe)
Safari	safaridriver

Part3实战

第一步引入selenium库

let webdriver=require('selenium-webdriver');

第二步定义选择对象By

let By=webdriver.By;

By对象有个非常重要的方法,By.css(' ')这是css选择器,类似于jq中的$('')或dom原生操作中的document.querySelector('');

第三步打开创建浏览器对象并打开指定网页

let dr=new webdriver.Builder().forBrowser('chrome').build();
dr.get('http://gltxpd.cspiii.com/External/Credentialinfo?type=2');

我们可以测试一下效果；

image.png

成功打开了浏览器。

这里我已经提前用浏览器审查元素，
查明了输入框的id ->code
所以接下来我们要选中输入框并输入关键字

dr.findElement(By.css("#code")).sendKeys("力顿")

浏览器对象有findElement方法,其中参数要输入By对象所查找到的元素,然后就能对该dom元素进行一些操作，比如sendKeys，就能在输入框输入你想要的数据。

第五步
找到按钮并触发上面的点击事件

let ele=dr.findElement(By.css('#btnSearch'));
ele.click();

第六步
待搜索完成后,再开始抓取数据,注意必须是搜索完成后,
你可以用
1）发布/订阅
2）promise

3. 回调函数
   来完成这里的异步操作
   如果直接去抓取数据，会抓取不到任何数据,因为nodejs的运行速度远远大于了网页请求后台数据并渲染回浏览器的速度!
   这里图方便,我用了强制休眠的方式来等待浏览器响应

dr.sleep(2000);

然后开始抓取数据,这里我已经审查过元素,信息来自tr标签下的td标签下的label中title属性的值。

dr.findElements(By.css('tr td label')).then(
   function(labels){
   console.log("开始查询");
   for(let i=0;i<labels.length-1;i++){
      labels[i].getAttribute('title').then((title)=>console.log(title))
   }  
})

对于dr.findElements ,注意这里多了个s,比起dr.findElement,这个方法能查询一组元素,并用数组存储起来。
你可以用then中的回调函数来获取这些元素,
这里labels就是元素数组。
然后针对每一个对象,即 labels[i],我们可以使用getAttribute('title')来获取title中的值
然后用then接受，并打印出来。
打印结果

广东省/深圳市
力顿钮扣配件（深圳）有限公司
GB/T 23001-2017版
有效
北京赛西科技发展有限责任公司
2020-07-13