<code>import { Builder, Browser, By, Key, until } from "selenium-webdriver";

(async function example() {

console.log(111);

//构建一个 webdriver 浏览器

let driver = await new Builder().forBrowser(Browser.FIREFOX).build();

console.log(driver);

try {

// 打开百度

await driver.get("https://www.baidu.com");

// 代码操作浏览器 获取元素并写入一个关键字webdriver

// By.name 属性选择器name

// By.css; css 选择器

// sendKeys 发送文本内容到文本框

// Key.RETURN 按下回车

// await driver.findElement(By.name("q")).sendKeys("webdriver", Key.RETURN);

await driver.findElement(By.css("#kw")).sendKeys("测试自动化", Key.RETURN);

} finally {

// await driver.quit(); 退出浏览器

}

})();

小结

根据当前浏览器版本选择对应的

driver

下载

参考官网文档实现自动打开百度输入搜索词

5. 使用 Selenium 

在使用 Selenium 实现爬虫之前，需要搞清楚一个问题：

为什么要用 Selenium 来做爬虫？

目前的大流量网站，都会有些对应的反爬虫机制

而通过Selenium可以操作浏览器，打开某个网址，接下来只需要学习其API，就能获取网页中需要的内容了！ 反爬虫技术只是针对爬虫的，例如检查请求头是否像爬虫，检查IP地址的请求频率（如果过高则封杀）等手段

而Selenium打开的就是一个自动化测试的浏览器，和用户正常使用的浏览器并无差别，所以再厉害的反 爬虫技术，也无法直接把它干掉，除非这个网站连普通用户都想放弃掉（12306曾经迫于无奈这样做过）

前几次可能会获取到数据，但多几次则会出现操作频繁请稍后再试的问题

Selenium API

官方文档: https://www.selenium.dev/selenium/docs/api/javascript/index.html

核心对象：

Builder WebDriver WebElement

辅助对象：

ByKey

Builder

用于构建 WebDriver 对象的构造器

let driver = await new Builder().forBrowser(Browser.FIREFOX).build();

WebDriver

通过构造器创建好

WebDriver

后就可以使用

API

查找网页元素和获取信息了：  

findElement()

查找元素

,

返回一个

WebElement

对象 传入 By.css()

可以通过选择器获取元素

WebElement

getText() 获取文本内容 sendKeys() 发送一些按键指令 click() 点击该元素

应用 获取前端薪资统计 

1.自动打开拉勾网搜索"前端"

1. 使用 driver 打开拉勾网主页2. 找到全国站并点击一下3. 输入“前端”并回车

2.模拟登录

默认是未登录状态(电商搜索功能也有此类限制，主要就是为了反爬虫)

运行 selenium 打开目标网站快速完成登录操作登录后会将身份标识存储在 Cookie 中延时 20 秒, 使用 selenium 导出所有 Cookie这就需要我们在打开浏览器之后的 20 秒内快速完成登录操作(考验手速的时候到了, 可自行设置更长的时间)导出后注释掉以上代码加上注入 Cookie 的代码打开 Cookies 查看是否导入成功

模拟登录的原理

人工登录后，导出 cookie，使用时再导入浏览器

为什么要模拟登录

避免网站出现登录校验

 

3.获取招聘信息中的薪资

搜索前端并获取当前页面所有公司的最低薪资

使用driver.findElement()找到所有条目项，根据需求分析页面元素，获取其文本内容即可：

4.自动点击不同城市

定义城市数组和初始索引搜索前端后先点击初始城市后续配合自动翻页再完善功能

5.自动翻页

1. 定义初始页码和最大页码(拉勾最多 30)2. 开始获取数据时打印当前正在获取的城市及页码数3. 获取完一页数据后，当前页码自增，然后判断是否达到最大页码4. 查找下一页按钮并调用点击 api ，进行自动翻页5. 翻页后递归调用获取数据的函数

import { Builder, Browser, By, Key, until } from "selenium-webdriver";

import delay from "delay";

import fs from "fs";

//构建一个 webdriver 浏览器

let driver = await new Builder().forBrowser(Browser.FIREFOX).build();

(async function start() {

try {

// getcooike();

// return;

// 打开网站

await driver.get("https://www.lagou.com");

console.log("打开网站");

// 最大化

await driver.manage().window().maximize();

// 删除所有cooike

await driver.manage().deleteAllCookies();

console.log("删除cooikes完成");

//读取 cookies

const cookies = JSON.parse(fs.readFileSync("./cookies.json", "utf-8"));

// 循环添加cookie

for (let index = 0; index < cookies.length; index++) {

// 因为浏览器对于带有SameSite=None的cookie要求必须同时设置Secure属性，以确保安全性

cookies[index].secure = true;

await driver.manage().addCookie(cookies[index]);

}

console.log("写入cooikes");

await delay(3000);

// 重新打开让cooikes 生效

await driver.get("https://www.lagou.com");

console.log("刷新页面");

await delay(5000);

// 获取输入框搜索前端

await driver

.findElement(By.css("#search_input"))

.sendKeys("前端", Key.RETURN);

console.log("搜索前端");

await delay(5000);

// 获取所有窗口句柄

const handles = await driver.getAllWindowHandles();

// 切换到新打开的标签页

await driver.switchTo().window(handles[1]); // 假设新标签页是第二个句柄

await delay(5000);

console.log("切换tab标签栏目");

await gitCity();

await getData();

} catch (e) {

console.log(e);

} finally {

console.log("退出浏览器");

await driver.quit(); //

}

})();

let low = 0; // 10K 以下的岗位数量

let mid = 0; // 10K ~ 20K 的岗位数量

let high = 0; // 20K 以上的岗位数量

let currentPage = 1; // 当前第几页

const maxPage = 3; // 最大页数 30 页

const cityArr = ["北京", "上海", "广州", "深圳", "武汉"];

let cityIndex = 0; //城市索引

const results = []; //数据

// 获取数据

async function getData() {

// 获取所有条目

console.log(`---正在获取${cityArr[cityIndex]}的第${currentPage}页数据---`);

await delay(10000);

// 获取每一页的所有数据

const items = await driver.findElements(By.css(".item__10RTO"));

// console.log(items.length);

// 获取所有的岗位薪资

const moneys = await Promise.all(

items.map((item) => item.findElement(By.css(".money__3Lkgq")).getText())

);

// console.log(moneys);

// 进行数量统计

moneys.forEach((item) => {

const money = item.split("-")[0].slice(0, -1);

money < 10 && low++;

money >= 10 && money < 20 && mid++;

money >= 20 && high++;

});

// console.log(low, mid, high);

// 获取完当前页的数据了

if (currentPage < maxPage) {

// 点击下一页进行页码累加

await driver

.findElement(By.css(".lg-pagination-next .lg-pagination-item-link"))

.click();

currentPage++;

await getData();

} else {

// 说明已经把当前城市获取完成了

// 存储结果

results.push({

city: cityArr[cityIndex],

low,

mid,

high,

});

// 写入到本地

fs.writeFileSync("./results.json", JSON.stringify(results));

console.log(cityArr[cityIndex], "数据写入成功");

console.log(results);

// 城市索引自增并判断还有没有城市, 没有就直接结束

// ++i是先进行自增操作，然后再进行运算，换句话说，表达式++i的值是i自增1之后的值

if (!cityArr[++cityIndex]) {

console.log("数据拉取完毕");

return;

}

// 让指定的城市被点击

await gitCity();

// 重置条件

currentPage = 1;

low = mid = high = 0;

// 继续递归调用

await getData();

}

}

// 获取城市

async function gitCity() {

// 获取所有可以点击的城市

const cities = await driver.findElements(By.css(".option__2xJt5"));

// 查找文本内容为北京的 div 让它被点击

for (let i = 0; i < cities.length; i++) {

const city = cities[i];

const text = await city.getText();

if (text === cityArr[cityIndex]) {

console.log(text, "要点击的元素");

await city.click();

break;

}

}

}

//保存cookies

async function getcooike() {

await driver.get("https://www.lagou.com/wn?");

// 删除所有cooike

await driver.manage().deleteAllCookies();

// 最大化

await driver.manage().window().maximize();

await delay(5000);

// 搜索

await driver

.findElement(By.css("#search_input"))

.sendKeys("前端", Key.RETURN);

// 延迟10秒 登陆准备cooike

await delay(20000);

const cookies = await driver.manage().getCookies();

console.log(cookies);

fs.writeFileSync("cookies.json", JSON.stringify(cookies));

}

6. 搭建服务器并实现数据可视化

使用

express

快速构建服务器

使用

echarts

渲染图表

构建服务器

import express from 'express'

import fs from 'fs'

// 创建一个 express 服务器

const server = express()

// 静态资源托管

server.use(express.static('./public'))

server.get('/salary', (req, res) => {

const results = fs.readFileSync('./results.json', 'utf-8')

res.send(results)

})

server.listen(3000, () => {

console.log('http://localhost:3000')

})

echarts 渲染图表

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />code>

<title>ECharts</title>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.js"></script>code>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>code>

</head>

<body>

<!-- 为 ECharts 准备一个定义了宽高的 DOM -->

<div id="main" style="width: 600px;height:400px;"></div>code>

<script type="text/javascript">code>

async function init() {

const res = await axios.get('/salary')

console.log(res)

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

var option = {

title: {

text: '各城市就业薪资分布'

},

tooltip: {

trigger: 'axis',

axisPointer: {

type: 'shadow'

}

},

legend: {},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

xAxis: {

type: 'value',

boundaryGap: [0, 0.01]

},

yAxis: {

type: 'category',

data: res.data.map(item => item.city)

},

series: [

{

name: '10K 以下',

type: 'bar',

data: res.data.map(item => item.low)

},

{

name: '10K ~ 20K',

type: 'bar',

data: res.data.map(item => item.mid)

},

{

name: '20K以上',

type: 'bar',

data: res.data.map(item => item.high)

}

]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

}

init()

</script>

</body>

</html>

课程总结