nodejs操作selenium-webdriver
一、安装依赖
npm install selenium-webdriver二、下载chormdriver 文件，并配置全局环境变量
注意：需下载和电脑安装的谷歌浏览器版本相匹配的
ChromeDriver官网下载地址：https://sites.google.com/chromium.org/driver/downloads
ChromeDriver官网最新版下载地址：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;
}