一、安装依赖
npm install selenium-webdriver二、下载chormdriver 文件，并配置全局环境变量
注意：需下载和电脑安装的谷歌浏览器版本相匹配的
ChromeDriver官网下载地址：https://sites.google.com/chromium.org/driver/downloadsChromeDriver官网最新版下载地址：https://googlechromelabs.github.io/chrome-for-testing/ChromeDriver国内镜像下载地址：https://registry.npmmirror.com/binary.html?path=chromedriver/ChromeDriver国内镜像最新版下载地址：https://registry.npmmirror.com/binary.html?path=chrome-for-testing/三、具体使用方法总结
- 基本配置---包括禁止浏览器弹出通知
const { Builder, By, Key, until, ActionChains } = require('selenium-webdriver')
const chrome = require('selenium-webdriver/chrome');let options = new chrome.Options();
// 禁止浏览器弹出通知
options.addArguments('--disable-notifications');
let driver = await new Builder().forBrowser('chrome').setChromeOptions(options).build()- 打开访问网址
driver.get('https://www.instagram.com?locale=zh_CN')- 浏览器设置cookie
let cookie = { name:'key', value:'value' } driver.manage().addCookie(cookie)- 设置休眠时间、最大化浏览器窗口、刷新页面、获取页面源码
// 休眠时间 毫秒
driver.sleep(1000);
// 最大化浏览器窗口
driver.manage().window().maximize();
// 刷新页面
driver.navigate().refresh()
// 获取页面源码
driver.getPageSource()- 浏览器打开多个窗口，切换、关闭浏览器窗口
// 用来处理页面需要打开新页面操作情况，切换操作页面，关闭当前操作页面；
// 获取当前窗口句柄
let originalWindow = await driver.getWindowHandle();// 获取了所有打开的窗口句柄
let allWindows = await driver.getAllWindowHandles();
for(let windowHandle of allWindows) {if(windowHandle !== originalWindow) {// 切换到窗口句柄await driver.switchTo().window(windowHandle);}
}// 关闭单个窗口句柄
await driver.close()//关闭所有页面
await driver.quit();- 查找元素的几种方法
1, 等待第一个查找元素类型出现，可以设置等待时间
注意： 在使用过程中需要 try{}catch(e){} 进行包裹，如果没有找到元素会报错，不再执行之后的代码片段此方法两个参数都为必填，如果第二个等待时间参数未填写，那么页面会一直等待，直到元素出现，这样就会导致页面出现错误时，未获取到元素，也无法抓取异常信息
await driver.wait(until.elementLocated(By.xpath("//a[contains(@href,'/followers/')]")), 10000)
拓展：By.xpath的基本语法总结1、By.xpath('//a[contains(@href,"/followers/")]') // 查找a标签属性值href中包含'/followers/'的元素2、By.xpath('//a[@href,"https://www.baidu.com"]') // 查找a标签属性值href为"https://www.baidi.com"3、By.xpath('//span[contains(text(),"更多")]') // 查找文本内容包含"更多"的span标签4、By.xpath('//a[text()="更多内容"]') // 查找文本内容等于'更多内容'5、By.xpath('//a[@href="***" and text()="***"]') // 多条件查询6、By.xpath('..') // 父节点7、By.xpath('./following-sibling::*[1]') // 获取下一个兄弟节点By.xpath('./preceding-sibling::*[1]') // 获取上一个兄弟节点8、By.xpath('child::div') // 查找当前元素的所有直接子 div 元素 By.xpath("//input[@type='file'][@data-testid='fileInput']") By.css的基本语法总结1、By.css('#username') // 通过id获取元素2、By.css('.password') // 通过类名选择元素3、By.css('button') // 通过标签名选择元素4、By.css('a[href="/about"]') // 通过属性选择元素5、By.css('.acan.acao') // 通过多个类名选择器选择元素6、By.css('form input[type="text"]') // 通过组合选择器选择元素By.css('ul > div:nth-child(3) > div:first-child > div:first-child')By.css("div[aria-label='发帖'][role='button']")
2，查找元素2.1 查找单个元素注意：使用过程中需要 try{}catch(e){} 进行包裹，如果没有找到元素会报错，不再执行之后的代码片段let divDom = await driver.findElement(By.xpath('//div[@data-id, "div"]'))// 查找divDom 元素下的特定元素let childrenDivDom = await divDom.findElement(By.xpath('.//span[contains(text(),"更多")]'))let 2.2 查找多个元素 注意：返回的内容是一个数组，如果没有找到元素不会报错，返回一个空数组，通过数组的长短来定位自己要找的元素位置await driver.findElements(By.css("button._acan._acao._acas._aj1-._ap30")) - 元素点击
let settingNode = await driver.findElement(By.css('.settings-button'));
// 两种点击方法
// 第一种：适用于大多数常规情况，会触发所有浏览器的默认情况
// 优点：自然触发事件：会触发所有浏览器的默认事件，如 mousedown、mouseup、click 等。
// 简单易用：代码更简洁，更容易理解和调试。
// 缺点：限制性：如果元素被其他元素遮挡或不可见，可能会抛出 ElementNotInteractableError 异常。
// 依赖于元素状态：元素必须是可见且可交互的。
await settingNode.click()
// 第二种
// 优点: 兼容性：有些情况下，直接调用 settingNode.click(); 可能会失败，特别是当元素被其他元素遮挡或不可见时。使用 executeScript 可以绕过这些限制，强制执行点击操作。
// 灵活性：可以执行更复杂的 JavaScript 操作，而不仅仅是点击。
// 缺点: 不触发所有事件：通过 JavaScript 执行的点击操作可能不会触发所有浏览器的默认事件（如 mousedown、mouseup 等）。
// 调试困难：如果点击操作出现问题，调试起来可能会更复杂，因为它是通过 JavaScript 执行的。
await driver.executeScript("arguments[0].click();", settingNode);- 输入框、上传文件框输入内容
let destinationPath = "添加内容";
await uploadInput.sendKeys(destinationPath);
// 输入内容并且按下enter按钮
await uploadInput.sendKeys(code, Key.RETURN);- 获取文本
let fansEle = await driver.findElement(By.xpath("//div[@data-id='following']"));
await fansEle.getText()- 页面浏览器滚动或者某个区域滚动
// 主要用途：在获取页面信息时， 遇到含有滚动条的页面，需要滚动动态加载网页数据，抓取全部数据内容
// 控制网页滚动到底部
await driver.executeScript('window.scrollTo(0, document.body.scrollHeight)')
// 等待滚动完成
await driver.wait(until.elementLocated(By.css('body')), 1000);
// 获取 scrollTop 的值
let scrollTop = await driver.executeScript('return window.pageYOffset;');// 针对某个元素内部的滚动
let ulElement = await commonBox.findElement(By.css('ul'));
// 控制ulElement 区域
await driver.executeScript(`arguments[0].scrollTop = arguments[0].scrollHeight;`,ulElement);
// 获取页面当前滚动的距离
let scrollTop = await driver.executeScript(`return arguments[0].scrollTop`, ulElement);- 模拟鼠标悬浮
// 主要用途：网页中有些元素是隐藏的，比如时间、消息发送人等，需要鼠标悬浮到指定元素之后，才会显示内容
// 创建actions实例
let actions = driver.actions({ async: false });
// 移动到元素
await actions.move({ origin: timeEle, x: 1, y: 1}).pause(1000).perform();
注意： 移动到元素获取到tooltip元素内容之后需要将鼠标移出元素，不然有可能会导致下次鼠标移动到其他元素时出现两个tooltip元素，导致获取数据错误- 日期时间选择框操作
// 主要分为两种情况
// 第一种情况：
// 日期年月日input框是分开的 分别获取年月日的input输入框，填入相对应的数据即可
var monthSelectEle = await driver.wait(until.elementLocated(By.css('select[title="月："]')), 10000);
await driver.sleep(1000);
await monthSelectEle.click();
await monthSelectEle.sendKeys(month);
await driver.sleep(1000);
// 获取日期选择框
var daySelectEle = await driver.wait(until.elementLocated(By.css('select[title="日："]')), 10000);
await daySelectEle.click();
await driver.sleep(1000);
await daySelectEle.sendKeys(day);
await driver.sleep(1000);
// 获取年份选择框
var yearSelectEle = await driver.wait(until.elementLocated(By.css('select[title="年："]')), 10000);
await driver.sleep(1000);
await yearSelectEle.sendKeys(year);
await driver.sleep(1000);// 第二种情况：
// 日期年月日input框是一个大的组件，无法分别获取input输入框,获取元素后需要使用sendKeys(Key.TAB) 移动到下一个虚拟输入位
var timeEle = await driver.wait(until.elementLocated(By.id('birthdate')), 10000);
await driver.sleep(5000);
await timeEle.sendKeys(year);
await driver.sleep(1000)
await timeEle.sendKeys(Key.TAB); // 移动到下一个虚拟输入位
await driver.sleep(1000);
await timeEle.sendKeys(month);
await driver.sleep(1000);
await driver.sleep(1000);
await timeEle.sendKeys(day);
await driver.sleep(1000);- 备注-下载图片数据流，通过formData,上传到服务器
// 引用form-data 第三方插件
const FormData = require('form-data');exports.downLoadMedia = async (mediaUrl, proxyObj) => {return new Promise((resolve, reject) => {axios({method: 'GET',url: mediaUrl,responseType: 'stream',httpsAgent: new https.Agent({ rejectUnauthorized: false }),proxy: {host:'127.0.0.1',port: 7890,protocol: "http",}}).then(res => {resolve(res.data)}).catch(e => {reject(e)})})
}/*** 下载资源并上传* * @param {*} imgUrl* @param {*} targetData* @param {*} data*/
async function downloadSource(imgUrl, targetData, data) {let str = "";try {await utils.downLoadMedia(imgUrl).then(async res => {let imgType = "";let suffix = "";if(imgUrl.indexOf('jpg') > -1 || imgUrl.indexOf('jpeg') > -1) {imgType = "image/jpeg";suffix = 'jpg';}else if(imgUrl.indexOf('png') > -1) {imgType = "image/png";suffix = 'png';}else if(imgUrl.indexOf('gif') > -1) {imgType = "image/gif"suffix = 'gif';}else if(imgUrl.indexOf('bmp') > -1) {imgType = "image/bmp";suffix = 'bmp'}else{imgType = "image/jpeg";suffix= 'jpg';}const form = new FormData();let timeStr = new Date().getTime();// // 将 Buffer 转换为 ArrayBuffer// const arrayBuffer = imageBytes.buffer;// 从 ArrayBuffer 创建 Blob// const blob = new Blob([arrayBuffer], { type: imgType });form.append('file', res, {filename: `${timeStr}.${suffix}`,contentType: 'application/octet-stream',});await utils.uploadRes(form, targetData, data.serverUrlPrefix).then(resUrl => {str = resUrl})})} catch (e) {console.log('e',e);str = ""}return str;
}- 下载图片到本地
// 引用form-data 第三方插件
const FormData = require('form-data');exports.downLoadMedia = async (mediaUrl, proxyObj) => {return new Promise((resolve, reject) => {axios({method: 'GET',url: mediaUrl,responseType: 'stream',httpsAgent: new https.Agent({ rejectUnauthorized: false }),proxy: {host:'127.0.0.1',port: 7890,protocol: "http",}}).then(res => {resolve(res.data)}).catch(e => {reject(e)})})
}/*** 下载资源并上传* * @param {*} imgUrl* @param {*} targetData* @param {*} data*/
async function downloadSource(imgUrl, targetData, data) {let str = "";try {await utils.downLoadMedia(imgUrl).then(async res => {let imgType = "";let suffix = "";if(imgUrl.indexOf('jpg') > -1 || imgUrl.indexOf('jpeg') > -1) {imgType = "image/jpeg";suffix = 'jpg';}else if(imgUrl.indexOf('png') > -1) {imgType = "image/png";suffix = 'png';}else if(imgUrl.indexOf('gif') > -1) {imgType = "image/gif"suffix = 'gif';}else if(imgUrl.indexOf('bmp') > -1) {imgType = "image/bmp";suffix = 'bmp'}else{imgType = "image/jpeg";suffix= 'jpg';}const form = new FormData();let timeStr = new Date().getTime();// // 将 Buffer 转换为 ArrayBuffer// const arrayBuffer = imageBytes.buffer;// 从 ArrayBuffer 创建 Blob// const blob = new Blob([arrayBuffer], { type: imgType });form.append('file', res, {filename: `${timeStr}.${suffix}`,contentType: 'application/octet-stream',});await utils.uploadRes(form, targetData, data.serverUrlPrefix).then(resUrl => {str = resUrl})})} catch (e) {console.log('e',e);str = ""}return str;
}