上一篇：node.js 13 Web框架Koa

做过前端自动化，测试或者爬虫的朋友应该对Selenium不陌生。

Selenium是一个用于支持和支持web浏览器自动化的一系列工具和库。

它提供了模拟用户与浏览器交互的扩展、用于缩放浏览器分配的分发服务器以及用于实现W3C WebDriver规范的基础结构，该规范允许您为所有主要web浏览器编写可互换的代码。

这是一个开源的项目。Selenium的核心是WebDriver，它是一个编写指令集的接口，可以在许多浏览器中互换运行。

简而言之，Selenium可以被多种语言调用来模拟浏览器进行web访问。通过使用Selenium，可以轻松的进行Web前端的自动化测试，也可以作为爬虫。

目前Selenium支持Java, Python, C#, Ruby，JavaScript和Kotlin。

在node.js环境下安装Selenium

1. 安装selenium webdriver，这是selenium的运行环境。

D:\Projects\nodejs\NodeDemo\selenium>npm install selenium-webdriver --save
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN y@1.0.0 No description
npm WARN y@1.0.0 No repository field.

+ selenium-webdriver@4.0.0-alpha.7
added 27 packages from 22 contributors and audited 32 packages in 10.196s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities

2. 安装Chrome驱动，也可以选择安装Firefox驱动或者其他浏览器驱动。Selenium支持多个浏览器。

D:\Projects\nodejs\NodeDemo\selenium>npm install chromedriver --save
> chromedriver@80.0.1 install D:\Projects\nodejs\NodeDemo\selenium\node_modules\chromedriver
> node install.js
Current existing ChromeDriver binary is unavailable, proceeding with download and extraction.
Downloading from file:  https://chromedriver.storage.googleapis.com/80.0.3987.16/chromedriver_win32.zip
Saving to file: C:\Users\vincent\AppData\Local\Temp\80.0.3987.16\chromedriver\chromedriver_win32.zip
Received 1025K...
Received 2050K...
Received 3076K...
Received 4101K...
Received 4268K total.
Extracting zip contents
Copying to target path D:\Projects\nodejs\NodeDemo\selenium\node_modules\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at D:\Projects\nodejs\NodeDemo\selenium\node_modules\chromedriver\lib\chromedriver\chromedriver.exe
npm WARN y@1.0.0 No description
npm WARN y@1.0.0 No repository field.

+ chromedriver@80.0.1
added 60 packages from 93 contributors and audited 137 packages in 110.907s

3 packages are looking for funding
  run `npm fund` for details

found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

如果安装Firefox驱动，将上述命令行中的 "chromedriver" 改成 "geckodriver" 即可。

3. 设置路径，将Chromedriver的路径添加到系统环境变量path中。

Chromedriver的路径在上一步安装Chrome驱动时已经下载了，保存在 <Your Project>\node_modules\chromedriver\lib\chromedriver目录中，将该目录加入到系统环境变量Path即可。否则在运行时，会报下列错误。

 D:\Projects\nodejs\NodeDemo\selenium>node app.js
(node:27800) UnhandledPromiseRejectionWarning: 
Error: The ChromeDriver could not be found on the current PATH. 
Please download the latest version of the ChromeDriver from http://chromedriver.storage.googleapis.com/index.html and ensure it can be found on your PATH.

在node.js环境中使用Selenium

我这里举两个例子。一是获取某网站频道，另一个是使用某网站进行搜索。

为了避免不必要的麻烦，我把该网站的网站隐藏了，如果朋友们感兴趣，测试时可以在代码中输入相关网站的网址即可。

• 获取网站频道

这里的代码使用了async/await，这样就可以回避嵌套回调函数了。关于async/await，感兴趣的朋友可以看看这篇文章 node.js 12 异步 async/await。

const {Builder, By, Key, until} = require('selenium-webdriver');

async function example() {
    let driver = await new Builder().forBrowser('chrome').build();
    
        // 访问网址，可以将下面的字符串替换成自己想要访问的网址即可。
        await driver.get('https://xxxx.xxx.xxx')
      //获取网页中的元素
        let elements = await driver.findElements(By.className('channel-item'))
        for(let e of elements) {
          //获取元素的文本
            console.log(await e.getText());
        }
}
//直接调用该async方法
example()

注意，上面相关的代码都使用了await，方法头加了async，在方法外面就可以直接调用了。

运行该代码，程序会打开Chrome，访问该网站，在控制台打印出该网站的频道。

• 搜索网站内容

找到网站搜索文本框对应的css class，逻辑和上面一样，不同的是再获取到WebElement后，调用sendKeys方法即可进行搜索。

const {Builder, By, Key, until} = require('selenium-webdriver');

async function example() {
    let driver = await new Builder().forBrowser('chrome').build();
         // 访问网址，可以将下面的字符串替换成自己想要访问的网址即可。
        await driver.get('https://xxxx.xxxx.com')
        await driver.findElement(By.className("tt-input__inner")).then(function(source) {
            source.sendKeys('vincent', Key.ENTER)            
        })   
}

example()

运行该js文件，程序会自动打开Chrome浏览器，再搜索文本框中输入'vincent'并点击回车进行搜索。

关于上面Selenium的介绍或者示例代码，如果有问题，欢迎朋友们留言讨论。