作者/唐晓友
排版/唐小悠
文章字数/7370
阅读时间/19分钟
前言
突然很想把以前没有更新过的常用Api操作和演示都写下来javascript下拉框，也算是对API的一种补全。
下面按照Api模块一一介绍。
1. iframe操作
iframe识别：
img_1.png
句型：
driver.switch_to.frame('表单')
1、三种常见的处理方式 2、通过下标输入
进入第一个 iframedriver.switch_to.frame(0)
3.通过id或name属性的值输入
通过id或name属性的值步入指定的iframe
driver.switch_to.frame('iframe')
driver.switch_to.frame('iframeName')
4.通过iframe元素进入iframe
通过iframe元素进入指定的iframe
iframe=driver.find_element(By.ID,"iframe")
driver.switch_to.frame(iframe)
完整案例代码如下：
from selenium import webdriver
from selenium.webdriver.common.by import By
from webdriver_manager.chrome import ChromeDriverManager
driver = webdriver.Chrome(ChromeDriverManager().install())
driver.get("http://localhost:8080/iframeDemo.html")
# 通过下标进入frame
driver.switch_to.frame(0)
# 通过id或name属性的值进入指定的iframe
driver.switch_to.frame('iframe')
driver.switch_to.frame('iframeName')
# 通iframe元素进入iframe
iframe=driver.find_element(By.ID,"iframe")
driver.switch_to.frame(iframe)
driver.find_element(By.ID,'user').clear()
driver.find_element(By.ID,'user').send_keys("this is a frame test !")
print(driver.find_element(By.ID,'user').get_attribute('value'))
2、选择下拉框操作 1、选择控件标识
img_3.png
常见的操作有两种：一步到位，二次控制！
2.一步到位
一步到位：直接定位到元素并点击，示例如下：
# 一步到位，直接选择典韦
driver.find_element(By.CSS_SELECTOR,"[value='3']").click()
print(driver.find_element(By.CSS_SELECTOR,"[value='3']").text)
3、二次控制
二次控制：首先定位到选择框，然后定位到select中的选项，并通过Select对象强制调用select控件中的Api来达到操作的目的。
常见的操作方式：
示例代码如下：
select = Select(driver.find_element(By.ID, "select"))
# 选择第一个选项
select.select_by_index(0)
# 调用first_selected_option就能获取当前下拉框选中值啦
print(select.first_selected_option.text)
sleep(2)
# 选择典韦
select.select_by_value("3")
# 调用first_selected_option就能获取当前下拉框选中值啦
print(select.first_selected_option.text)
sleep(2)
# 选择凯
select.select_by_visible_text("凯")
# 调用first_selected_option就能获取当前下拉框选中值啦
print(select.first_selected_option.text)
4. 浏览所有选项
示例代码如下：
# 打印所有选项的text
for option in select.options:
print("选项为："+option.text)
完整代码示例：
from time import sleep
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.select import Select
from webdriver_manager.chrome import ChromeDriverManager
driver = webdriver.Chrome(ChromeDriverManager().install())
driver.get("http://localhost:8080/SelectDemo.html")
# 一步到位，直接选择典韦
# driver.find_element(By.CSS_SELECTOR,"[value='3']").click()
# print(driver.find_element(By.CSS_SELECTOR,"[value='3']").text)
select = Select(driver.find_element(By.ID, "select"))
# 选择第一个选项
select.select_by_index(0)
# 调用first_selected_option就能获取当前下拉框选中值啦
print(select.first_selected_option.text)
sleep(2)
# 选择典韦
select.select_by_value("3")
# 调用first_selected_option就能获取当前下拉框选中值啦
print(select.first_selected_option.text)
sleep(2)
# 选择凯
select.select_by_visible_text("凯")
# 调用first_selected_option就能获取当前下拉框选中值啦
print(select.first_selected_option.text)
# 打印所有选项的text
for option in select.options:
print("选项为："+option.text)
sleep(2)
关于 Select 模块还有许多其他方法。 请读者和同学们尝试其他方式，我就不一一列举了！
弹窗有两种，一种是基于原生JavaScript编写的弹窗，另一种是自定义封装样式的弹窗，即原生JavaScript编写的弹窗，而另一个弹窗使用click()基本上就可以搞定了。 原生JavaScript编写的弹窗分为三种：
警报
img_4.png
确认
img_5.png
迅速的
img_6.png2。 弹窗处理常用方法：
警报/确认/提示弹框的操作方式主要有：
警报弹出处理
示例代码如下：
# alert弹窗处理
driver.find_element(By.ID,"alert").click()
alert=driver.switch_to.alert
print(alert.text)
# 确定
alert.accept()
sleep(2)
确认弹出处理
示例代码如下：
# dialog对话框处理
driver.find_element(By.ID,"dialog").click()
alert=driver.switch_to.alert
print(alert.text)
# 取消操作
alert.dismiss()
sleep(2)
提示弹窗处理
# 弹窗输入框
driver.find_element(By.ID,"welcome").click()
alert=driver.switch_to.alert
print(alert.text)
alert.send_keys("input 框")
alert.accept()
sleep(2)
print(alert.text)
四、执行Js操作
在做web手工化的时候，有些情况下selenium的api无法完成，需要通过js等第三方手段来实现，比如改变各个元素对象的属性或者进行一些特殊的操作。 本文将讲解今后如何调用JavaScript完成特殊操作。
1. 使用方法
driver.execute_script（js语句）
2、模拟场景
场景1
打开百度首页，弹窗提示hello, world!，关闭弹窗，控制台输出弹出文本hello, world! 示例代码如下：
# 执行js语句
driver.execute_script("alert('hellow,world!')")
alert=driver.switch_to.alert
print(alert.text)
# 确定
alert.accept()
场景2的示例代码如下：
# 将百度按钮改成MyLove
element = driver.find_element(By.ID, "su");
driver.execute_script("document.getElementById('su').setAttribute('value', 'MyLove');", element);
疗效如下：
3.模拟滚动条操作
在写脚本的时候，总会出现这样的情况，当滚动拉到底部时，表单、下拉框、按钮等元素在当前页面没有显示，而webdriver提供的方法来操作当前页面可见的元素javascript下拉框，这时候我们使用JavaScript来操作浏览器的滚动条，使页面元素滚动后可见，然后就可以完成前面的元素操作了。
核心思想：
就是利用js来控制浏览器滚动条的位置，利用selenium调用JavaScript来操作js来完成。
下面几种常用滚动条的js代码示例如下：
//拖动滚动条至底部
document.documentElement.scrollTop=10000
window.scrollTo(0,document.body.scrollHeight)
//拖动滚动条至顶部
document.documentElement.scrollTop=0
arguments[0].scrollIntoView(false);
//左右方向的滚动条可以使用window.scrollTo(左边距，上边距)方法
window.scrollTo(200,1000)
实际案例
以我博客园的文章列表页面为例，演示一下滚动条的操作。 具体代码如下：
from time import sleep
from selenium import webdriver
from selenium.webdriver.common.by import By
from webdriver_manager.chrome import ChromeDriverManager
driver = webdriver.Chrome(ChromeDriverManager().install())
driver.get("https://www.cnblogs.com/longronglang/")
driver.maximize_window()
# 获取第一篇文章列表元素
element = driver.find_element(By.CSS_SELECTOR,".forFlow [role='article']:nth-of-type(1) .vertical-middle")
sleep(2)
# 将页面滚动条拖到底部
driver.execute_script("window.scrollTo(0,document.body.scrollHeight)")
# 将滚动条滚动至第三篇文章列表位置
driver.execute_script("arguments[0].scrollIntoView(true)", element)
sleep(2)
# 将滚动条滚动到顶部
driver.execute_script("arguments[0].scrollIntoView(false)", element)
sleep(2)
# 将滚动条滚动到指定位置
driver.execute_script("window.scrollTo(200,1000)")
五、cookie操作完美绕过验证码
下面我们将利用cookie操作来绕过登录验证码
还是以博客园为例，下面文章将介绍如何绕过右侧验证码进入博客园
图1. 工具设计
如何操作？
JavaScript 基本概念
JS的组成：
1. ECMAScript：Js句型
2、DOM：Document Object Model，文档：html文档，操作html文档（操作html文档的工具）
3、BOM：浏览器对象模型，操作浏览器的工具
JS的三种写法
内联、嵌入、外部链接
JavaScript输入输出语句
alert(msg) 浏览器弹出警告框
console.log(msg) 浏览器控制台复制输出信息
Prompt(info) 浏览器弹出输入框供用户输入信息
我本人是一名从事多年开发的老Web后端程序员。 我目前正在辞去工作，去做自己的Web前端私人定制课程。 今年年初，我花了一个月的时间整理了一份2019年最适合学习的Web后端学习干货，各种框架整理出来，送给每一位后端小伙伴。 如果想要获取，可以关注我的头条号，后台私信我：前端，即可免费获取。
变量的概念
通俗点讲：变量是存储数据的容器。 我们通过变量名来获取数据，甚至数据是可以改变的。
变量理解：变化量、变化内容、变化数据
变量存储数据理解：程序运行时的数据都存储在显存中，但是显存比较大。 为了方便管理，显存被分袋（变量）进行存储。
变量的使用
1.声明变量var变量名； 变量年龄； （声明一个名为age的变量）
2、变量的形参var变量名=值； 变量年龄 = 18； 声明变量age，形参为18
变量大小写
var myname = '旗木卡卡西'; // 字符串
var address = '火影村';
var age = 30; // 数字
var email = 'kakaxi@itcast.cn';
var gz = 2000;
console.log(myname);
console.log(address);
console.log(age);
console.log(email);
console.log(‘gz’); // gz
console.log(gz); // 2000
注意：
// 1. 用户输入姓名 存储到一个 myname的变量里面
var myname = prompt('请输入您的名字');
// prompt 做的事情：
// (1). 弹出输入框 , 用户输入内容:zs
// (2). 将用户输入内容返回 ，相当于 ：var myname = 'zs';
// 2. 输出这个用户名
alert(myname); // zs
变量命名约定
规则
由字母（A-Za-z）、数字（0-9）、下划线（_）和美元符号（$）组成javascript输入框，例如：usrAge、num01、_name ***
严格区分大小写。 var 应用程序； 和 var 应用程序； 是两个变量
不能以数字开头。 18岁是错误的
它不能是关键字或保留字。 例如：var、for、while
变量名必须有意义。 MMD BBD nl → 年龄
遵循驼峰命名法。 第一个字母要大写，后面的短语的第一个字母需要小写。 我的名字
推荐翻译网站：有道爱词吧
变量情况 - 交换两个变量
// js 是编程语言有很强的逻辑性在里面： 实现这个要求的思路 先怎么做后怎么做
// 1. 我们需要一个临时变量帮我们
// 2. 把apple1 给我们的临时变量 temp
// 3. 把apple2 里面的苹果给 apple1
// 4. 把临时变量里面的值 给 apple2
var temp; // 声明了一个临时变量为空
var apple1 = '青苹果';
var apple2 = '红苹果';
temp = apple1; // 把右边给左边
apple1 = apple2;
apple2 = temp;
console.log(apple1);
console.log(apple2);
简单数据类型
JavaScript中的简单数据类型及其说明如下：
数字范围：JavaScript 中数字的最大值和最小值
alert(Number.MAX_VALUE); // 1.7976931348623157e+308 （10的正308次方）
alert(Number.MIN_VALUE); // 5e-324 5e-324 （10的负324次方）
数字三个特殊值
alert(Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN ***
//课堂代码：
// 5. 无穷大
console.log(Number.MAX_VALUE * 2); // Infinity 无穷大
// 6. 无穷小
console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷大
// 7. 非数字
console.log('pink老师' - 100); // NaN：字符串是无法与数字进行运算的，所以结果是一个非数字
Infinity，代表无穷大，大于任何值 -Infinity，代表无穷小javascript输入框，小于任何值 NaN，Not a number，代表非值
为 NaN
用于判断变量是否为非数值类型，返回true或false
var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum); // false ，21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName)); // true ，"andy"是一个非数字
字符串类型 字符串
字符串类型可以是破折号中的任意文本，其句型为双引号“”和单冒号“”
var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子; // 报错，没使用引号，会被认为是js代码，但js没有这些语法
字符串中逗号的嵌套
JS可以用单冒号嵌套双引号，也可以用双冒号嵌套单冒号（外双内单、外单内双）
var strMsg = '我是"高帅富"程序猿'; // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿"; // 也可以用"" 包含''
// 常见错误
var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配
字符串转义字符
与HTML上的特殊字符类似，字符串中也存在特殊字符，我们称之为转义字符。
转义字符均以开头，常用的转义字符及其说明如下：
字符串宽度
var strMsg = "我是帅气多金的程序猿！";
alert(strMsg.length); // 显示 11
字符串连接
//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12); // 1112
//以上的字符串拼接都没有意义，一般我们字符串会与变量进行拼接
原文链接：
