Senlenium框架能够原生地驱动浏览器，就如同用户亲自操作一样。
Senlenium框架支持6种编程语言，Java、Python、C#、Ruby、JavaScript、Kotlin。
我们当然是选用 JavaScript , 驱动浏览器编程偏向后端，需要Node.js环境。
1.准备环境
-
node -vv20.10.0 -
pnpm -v8.15.4 -
pnpm i selenium-webdriver安装 selenium-webdriver模块 -
现代浏览器firefox、chrome
S1.测试靶向网站访问截图
靶向目标网址:2020wa.com/py/t1.html
关键自动化操作：输入用户名、密码、点击登录按钮、点击弹窗按钮、点击确定/取消、屏幕截图
操作1 对登录页进行截图
const { Builder, By, Key, until } = require('selenium-webdriver');
//##### 任务2. 使用require引入文件处理模块fs #####
async function 登录(){
// firefox 火狐浏览器 chrome 谷歌浏览器
let 浏览器 = 'firefox'
let 设备 = await new Builder().forBrowser(浏览器).build();
//##### 任务1. 将目标网址填入URL值中 #####
let URL = 'https://2020wa.com....修改'
await 设备.get(URL);
//##### 任务4. 在下方完成目标页面要求3-6
//##### 任务5. 在下方完成目标页面要求7-8
//##### 任务3. 在下方增加屏幕截图代码 #####
}//登录
登录()
新建文件S1.js,复制以上代码，完成#####标注的任务要求:
- 任务1. 将目标网址填入URL值中
- 任务2. 使用require引入文件处理模块fs
- 任务3. 增加屏幕截图代码,并使用你的名字命名
let str = await 设备.takeScreenshot()
await fs.writeFileSync('姓名.png', str, 'base64')
console.log('截图完成。请在当前目录查看。')
在命令行控制台执行,查看生成的屏幕截图
node S1
selenium 框架常用知识
1.找到目标HTML元素
设备.findElement( CSS目标 ) //返回符合条件的第一个元素
设备.findElements( CSS目标 ) //返回符合条件的所有元素
2.元素上的常见方法
sendKeys(值) //输入框插入值
click() //鼠标点击
getText() //获取HTML元素内文本值
3.CSS目标
By.css(CSS选择器)
By.css("#A") //根据 id="A" 查找 <元素 id="A">
By.css(".A") //根据 class="A" 查找 <元素 class="A">
By.css("div") //根据 HTML元素标签名 查找 <div>
By.css(".A.B") //找到 class="A B" 的所有元素
By.css(".A .B") // 找到class="A" 里面的所有 class="B" 元素
S2.访问学生个人信息并截图
靶向目标网址:xgxt.hb-green.com:8036 关键自动化操作：输入用户名、密码、点击登录按钮、点击弹窗按钮、点击确定/取消、屏幕截图
操作0 完成登录功能
复制S1的全部代码，命名为S2.增加学号、密码输入、并执行登录。
操作1 确保页面元素加载
已知该页面是异步加载，类似Vue这种框架。需要指定一个元素等待页面加载完成。
获取5个tab 第2个是 [学生服务]，具有共同class="xszm-yyfz-tab"
//判断页面元素加载完成 class="xszm-yyfz-tab"
await 设备.wait(
until.elementLocated( By.css(".xszm-yyfz-tab") ) ,
30000 //最长等待时间
);
//获取5个tab标签，并且点击第2个 [学生服务]
let tabArr = await 设备.findElements( By.css('.xszm-yyfz-tab') )
await tabArr[1].click()
操作2 移动鼠标并点击左键
[Gif图片 hover]
我们点击的是鼠标覆盖后，显示的 [进入应用♥]
所以一进页面马上点击图标文本是不行的。
这里需要包含2个操作的动作，首先将光标移动到被操作元素的正中心，然后按下鼠标左键后再松开：
//操作鼠标点击 第一个元素 （移动到中心并点击）
let 目标 = cardArr[0]
const 动作 = 设备.actions({async: true});
await 动作.move({origin: 目标}).click().perform();
在以上代码之前增加。
在以上代码之前增加。
在以上代码之前增加。
捕获页面class="p_card_name" 的所有元素
let cardArr = await 设备.findElements( By.css('.p_card_name') )
操作3 切换选项卡窗口
// 第一步 获取所有的窗口对象 winArr
let winArr = await 设备.getAllWindowHandles()
console.log('窗口编号')
console.log( winArr )
// 第二步 切换到 第2 个窗口
await 设备.switchTo().window( winArr[1] )
console.log("切换到第2个窗口 完成")
//获得个人信息 待完成....
这时如果对页面进行截图，会发现是空白页面。
因为页面进入是瞬间发生的，拍照也是立即完成。页面元素都没有加载，只有底色白色。
我们需要在页面中指定一个元素作为页面加载完成的标志，这里我们采用个人头像。
class="bh-emapAvatar-avatar"。
在代码中增加，以头像作为标志来判断 基本信息 页面加载完成。
//强制等待 加载个人头像完成 class="bh-emapAvatar-avatar"
await 设备.wait(
until.elementLocated( By.css(".bh-emapAvatar-avatar") ) ,
30000 //最长等待时间
);
console.log("[学生基本信息页面] 加载完成。")
//作为页面加载完成的 标志
操作4 根据浏览器CSS选择器 获取页面任意信息
可以通过浏览器 查看元素属性，复制CSS选择器，缺点是很长。
对于样式清晰的页面，推荐自己写选择器。
let 姓名 = await 设备.findElement(By.css(
"#baseInfoForm1 > div > div:nth-child(2) > div.bh-form-block.bh-mb-36 > div:nth-child(2) > div > p"
)).getText();
let 学号 = await 设备.findElement(By.css(
'#baseInfoForm1 > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > p:nth-child(1)'
)).getText();
let 身份证号 = await 设备.findElement(By.css(
"#baseInfoForm1 > div > div:nth-child(2) > div.bh-form-block.bh-mb-36 > div:nth-child(7) > div > p"
)).getText();
let 信息 = `
姓名: ${ 姓名}
学号: ${ 学号 }
身份证号: ${身份证号}
银行账号:####
手机号:####
QQ号:####
家庭现住址:####
`;
console.log(信息 )
