【网站密码管理不用愁】基础篇 • 利用selenium构建网站密码管理和自动登录神器

————————————————————————————————

一、项目背景

作为一名职场人士，你是否有这样的困惑。

需要经常登录的网站非常多，每个网站都申请了个人账号，为了保证信息安全，又不得不把每个网站的账号和密码设置成不同。

• 大大小小的网站账号和密码太多，不知道咋管理？
• 时常想不起某个网站的账号和密码是什么？
• 手忙脚乱寻找笔记本查找当初记录的账号密码是多少？
• 半天都找不到自己的笔记本在哪里？
• 所有账号和密码记录在一个地方怕泄露？
• …

如果你有以上烦恼，那么本篇文章能够彻底解决你的烦恼。

让你能够用最简单最轻松最快速的方式管理自己的各大网站账号密码库，并实现自动化登录。

比如，以登录QQ邮箱为例。

通常我们登录自己的QQ邮箱方式：

1. 在登录了QQ的状态下，点击QQ上的邮箱图标登录；
2. 直接百度搜索并访问QQ邮箱，然后输入账号和密码登录；
3. 如果你勾选了下次自动登录，访问网站就可自动登录，但并不是很安全。

以上方法或多或少有点麻烦，要先登录QQ，或者要输入账号密码（甚至有可能记不住），或者存在安全隐患问题。

那有没有更快更方便的方法？

【Win+R】打开运行窗口 → 输入关键字：邮箱 → 回车

两秒钟轻松完成QQ邮箱的登录！

从此你再也不用绞尽脑汁去记录账号和密码，只需要记住自己设定的关键词即可。

而且实现以上功能仅仅只需要10行代码。

from selenium import webdriver            # 导入浏览器控制包
from selenium.webdriver.common.keys import Key   # 导入键盘控制包

driver= webdriver.Chrome()
driver.get('https://mail.qq.com/cgi-bin/loginpage')     # 启动浏览器并访问QQ邮箱登录界面

driver.maximize_window()             # 最大化窗口（此步可以省略）

frame = driver.find_element_by_id('login_frame')  # 须首先定位到元素所在的iframe下
driver.switch_to_frame(frame)

driver.find_element_by_id('u').send_keys('*******')  # 括号为账号
driver.find_element_by_id('p').send_keys('*******')  # 括号为密码
driver.find_element_by_id('p').send_keys(Keys.ENTER) # 按下ENTER键

——

二、前置必懂知识

虽然代码只有10行，但是需要一些前置知识作铺垫的，知道并会写Python这是最基本的，除此之外还需要清楚掌握selenium库，以及懂得HTML和CSS方面的一些基础知识。

【01】selenium基础知识

什么是selenium？

selenium是一个关于web的自动化测试工具。而对于我们非专业人士来说，可以利用selenium帮助我们完成很多在浏览器上的自动化操作，从而方便我们的生活和工作。

关于selenium的基础知识，可以参考我之前写的一篇文章
【Python库】Selenium基础入门

在这里我重点提一下，如果你想要实现本文章的功能，那么最低限度的熟悉掌握以下关乎selenium的知识：

• 如何自动访问网站
• 如何定位目标元素
• 如何控制键盘事件

【02】了解HTML和CSS

想要实现自动登录网站功能，那么就不得不了解一点web前端的知识，不用太多太深，只需要简单的知道HTML和CSS基础知识，知道什么是标签、如何定位。

如果你想要实现本文章的功能，你得知道：

• 如何进入浏览器的开发者模式
• 如何定位目标元素代码
• 如何查找并明确唯一特征

——

三、用Python和selenium实现

说明下，本文的自动登录网站功能实现是基于Chrome浏览器。

【01】实现访问网站

from selenium import webdriver            # 导入浏览器控制包
from selenium.webdriver.common.keys import Key   # 导入键盘控制包

driver= webdriver.Chrome()
driver.get('https://mail.qq.com/cgi-bin/loginpage')     # 启动浏览器并访问QQ邮箱登录界面

driver.maximize_window()             # 最大化窗口（此步可以省略）

其实实现自动打开浏览器并访问指定网站的核心代码就两行：
driver = webdriver.Chrome()
driver.get(‘https://mail.qq.com/cgi-bin/loginpage’)

【02】定位目标元素

首先我们要分析下整个页面，我们需要的是程序自动填写账号和密码，最后自动点击【登录】，实现登录操作。

【下次自动登录】这个选项最好就不勾选了，因为我们已经能够实现通过程序自动输入账号和密码了，而且还能防止别人恶意使用我们的电脑访问。

那么我们就开始定位目标元素。

（1）首先【F12】打开开发者调试工具

（2）定位目标元素代码

点击下图中类似鼠标样式的图标，我们就可以实现点击浏览器页面任意地方从而定位到代码所在位置。
具体的操作演示图如下：

其中红色框就是定位到的我们要【输入账号】的源代码。

【输入密码】的代码也是通过同样的方法来进行定位，如下

（3）明确元素唯一特征

下面我们就要分别对两行代码进行分析，从而确定它们的唯一特征。唯有明确唯一特征，我们才能确保Python程序找到的是这一行代码，而不是找到其他地方去了。

首先我们来分析下【输入账号】的HTML源代码

这行代码属性中有class、id、name，那么我们主要的css定位、id定位和xpath定位我们都可以使用。

因为 id=“u” 非常简短，那么我们就选择id定位方法。

那么我们接下来最重要的事情就是确定唯一性

按【Ctrl+F】打开查找框，输入 “#u” (#代表id属性)，然后【回车】

我们发现这行代码被标黄了，且右下方的查找有且只找到一个，那么说明我们
通过使用 “#u” 定位的方式有且只能找到【输入账号】元素位置，就确保了其唯一性。

说明这个方法可行！

同时我们来举个反面例子。

如果我们采用css定位，选择 class=“inputstyle” 这个属性。同样我们输入 “.inputstyle” (.代表class属性)进行查找发现，虽然同样改行代码被标黄了，但是我们右下角的查找却找到了4个，这只是其中的第一个而已，也就意味着我们只是通过 “.inputstyle” 进行定位那么查找不唯一。

那么在Python中采用css定位仅仅输入 “.inputstyle” 代码就无法找到我们的的【输入账号】此处位置。

其次我们来分析下【输入密码】的HTML源代码

具体的分析手段同上，我们发现 id=“p” 非常简短，所以试试用id定位法。

按【Ctrl+F】打开查找框，输入 “#p” (#代表id属性)，然后【回车】

我们发现可以定位到此行代码，且找到的代码有且只有一个，那就说明可行。

##【03】实现自动输入账号密码并登录
通过以上对HTML源代码的分析，我们确定了使用id定位法，确定了唯一特征，分别是 id=u 和 id=p。

接下来我们就要在Python中实现代码了。

同样代码非常简单，两行代码即可实现账号和密码的自动输入
（这里为了隐藏我的账号密码，我就用*****代替了。）

driver.find_element_by_id('u').send_keys('*******')  # 括号为账号
driver.find_element_by_id('p').send_keys('*******')  # 括号为密码

我们列一下完整的代码

from selenium import webdriver            # 导入浏览器控制包
from selenium.webdriver.common.keys import Key   # 导入键盘控制包

driver= webdriver.Chrome()
driver.get('https://mail.qq.com/cgi-bin/loginpage')     # 启动浏览器并访问QQ邮箱登录界面

driver.maximize_window()             # 最大化窗口（此步可以省略）

driver.find_element_by_id('u').send_keys('*******')  # 括号为账号
driver.find_element_by_id('p').send_keys('*******')  # 括号为密码

我们先来运行代码检测一下。

结果发现，浏览器一如既往自动打开了QQ邮箱登录网站，但是却没有自动输入我们的账号和密码。

返回检查代码，同样我们发现了程序报错：Message: no such element: Unable to locate element: {“method”:“css selector”,“selector”:"[id=“u”]"}。

也就是程序并没有找到我们的id=u 和 id=p的元素位置。

这是为什么？难道我们选择的方法和特征错误了？

可是在开发者工具中我们明明定位到了且唯一？

骚年，莫要慌！

之前说过，通常我们定位不到元素的问题有三：

1. 页面请求超时
2. 元素定位方法不对
3. 页面存在iframe或内嵌窗口

首先，页面请求正常，网站是正常打开并显示出输入账号和密码框的；
其次，我们也坚信自己使用的元素定位方法正确；
最后，通常来说就是页面中存在iframe或内嵌窗口。

那么我们来检查一下，按【Ctrl+F】打开查找框，输入 “iframe” ，然后【回车】。

发现果然存在内部框架结构，且我们的输入账号和密码的代码也在iframe内部。

找到了为什么定位不到元素的原因，接下来就好办了。

同样对该行代码进行分析，采用id定位法，通过定位id=login_wx_iframe，定位到该框架，再转到该框架下。

实现代码如下：

frame = driver.find_element_by_id('login_frame')  #划重点 必须首先定位到元素所在的frame下
driver.switch_to_frame(frame)

完整的代码如下：

from selenium import webdriver            # 导入浏览器控制包
from selenium.webdriver.common.keys import Key   # 导入键盘控制包

driver= webdriver.Chrome()
driver.get('https://mail.qq.com/cgi-bin/loginpage')     # 启动浏览器并访问QQ邮箱登录界面

driver.maximize_window()             # 最大化窗口（此步可以省略）

frame = driver.find_element_by_id('login_frame')  #划重点 必须首先定位到元素所在的frame下
driver.switch_to_frame(frame)

driver.find_element_by_id('u').send_keys('*******')  # 括号为账号
driver.find_element_by_id('p').send_keys('*******')  # 括号为密码

我们再运行代码，成功实现了账号密码的自动输入。

最后我们再来考虑，一般我们输入完账号和密码后，如果要正式登陆，通常会有两种方式，一是点击界面上的【登陆】按钮，二或者是直接按【Enter键】就实现页面的成功跳转。

为了方便，我们采用程序自动按下【Enter键】的方式来实现最终的登陆，最终实现的代码也很简单，也不需要重新定位元素，直接在上面定位元素基础上按下【Enter键】。

driver.find_element_by_id('p').send_keys(Keys.ENTER)

我们来看看最终的效果

——

四、Path环境变量配置

关于环境变量以及它的作用和意义，可以翻阅文章【Python基础】正式学习前必备的前置知识，查看 三、环境变量 这部分知识。

首先一定要搞清楚为什么要进行Path环境配置。

因为目前我们是通过编译器中运行Python程序从而实现自动打开QQ邮箱网址并自动登录的。

那每一次我们想要登录到我们的邮箱难道都要打开我们的源代码运行？那也太麻烦了吧。

通过环境变量配置和生成bat文件，我们可以轻松实现利用运行窗口来启动程序。

【01】环境变量配置

首先我们新创立一个文件夹叫【Python-bat】，用来专门存放bat文件。

然后正式开始添加到Path环境变量操作。

右键【此电脑】-【属性】-【高级系统设置】-【环境变量】

双击【Path变量】

在末尾处添加路径：E:\Python\Python-bat。最后确定即可。

【02】生成为bat文件

我们创建一个txt文本，取名【邮箱.txt】

打开后输入内容如下：

@py.exe [python程序的绝对路径] %*

然后另存为bat类型文件，并保存在Python-bat目录下

最后我们在该文件夹下就会发现这样的文件【邮箱.bat】

至此就大功告成啦！！！

——

五、最后总结

我们再回顾下实现整个功能的代码：

from selenium import webdriver            # 导入浏览器控制包
from selenium.webdriver.common.keys import Key   # 导入键盘控制包

driver= webdriver.Chrome()
driver.get('https://mail.qq.com/cgi-bin/loginpage')     # 启动浏览器并访问QQ邮箱登录界面

driver.maximize_window()             # 最大化窗口（此步可以省略）

frame = driver.find_element_by_id('login_frame')  # 须首先定位到元素所在的iframe下
driver.switch_to_frame(frame)

driver.find_element_by_id('u').send_keys('*******')  # 括号为账号
driver.find_element_by_id('p').send_keys('*******')  # 括号为密码
driver.find_element_by_id('p').send_keys(Keys.ENTER) # 按下ENTER键

整个也就10行代码，却大大地方便了我们的日常工作生活，从此我们再也不用担心忘记账号密码了，可以用极快的速度秒登各大网站，甚至当你需要回忆账号密码的时候只需要打开源代码便可知道了。

（如果遇到要输入验证码的网站，可能就无法实现全流程，但是自动打开网站并输入账号和密码还是能够实现的）

正如最开始所说，当然虽然代码很短，需要的前置知识也不少，除了懂得Python，还必须对selenium库、HTML和CSS、环境变量等有所了解才可以。

————