Python实现网页自动化-浏览器查找元素（二）

前言

在上一节中(https://mp.weixin.qq.com/s/lqYEjiqA4eLI59GkDEpKcg)已经部署了Selenium+chromedriver的开发环境，在真正的开发之前，还需要学会利用浏览器来查找网页元素。

因为Selenium是通过程序来自动操控网页的控件元素，比如单击某个按钮、输入文本框内容等，若网页中有多个同类型的元素，好比有多个按钮，想要Selenium精准地单击目标元素，需要将目标元素的具体信息告知Selenium，让它根据这些信息在网页上找到该元素并进行操控。

浏览器开发者工具部分讲解

网页的元素信息是通过浏览器的开发者工具来获取。以Google Chrome为例，在浏览器上访问

(https://www.qq.com/)

然后按快捷键F12打开Chrome的开发者工具（部分电脑要用 fn +12 ），如下图

从上图可以看到，开发者工具的界面共有9个标签页，分别是Elements、Console、Sources、Network、Performance、Memory、Application、Security和Audits。

开发者工具以Web开发调试为主，如果只是获取网页元素信息，只需熟练掌握Elements标签页即可。Elements标签页允许从浏览器的角度查看页面，也就是说，可以看到Chrome渲染页面所需要的HTML、CSS和DOM（Document Object Model）对象，此外，还可以编辑内容更改页面显示效果，它一共分为两部分，左边是当前网页的HTML内容，右边是某个元素的CSS布局内容；查找元素信息以左边的HTML内容为主。

HTML相关知识讲解

在查找控件信息之前，首先了解HTML的相关知识。HTML是超文本标记语言，这是标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（Head）和“主体”部分（Body），其中“头”部分提供关于网页的信息，“主体”部分提供网页的具体内容。通过一个简单HTML来进一步了解：

#声明为HTML5标准的文档

DOTYPE html>

#元素是html也没的根元素

<html>

#包含了文档部分的元（meta）数据

<head>
#提供主要页面的元信息，主要是描述和关键词
<meta charset="utf-8">
#元素描述了文档的标题
<title>编程技术圈title>  
head>


#元素包含了可见的页面内容

<body>

#定义一个一级（h1）标题

<h1>我的一级标题h1>

#定义一个段落（p标签）

<p>我的第一个段落p>

body>

html>

一个完整的网页必定以为开头和结尾。

整个HTML可分为两部分：

（1）是对网页的描述、图片和JavaScript的引用。元素包含所有的头部标签元素。在元素中可以插入脚本（scripts）、样式文件（CSS）及各种meta信息。该区域可添加的元素标签有<span class="md-plain">、<span class="md-tag md-raw-inline"><style><span class="md-plain">、<span class="md-tag md-raw-inline"><meta><span class="md-plain">、<span class="md-tag md-raw-inline"><link><span class="md-plain">、<span class="md-tag md-raw-inline"><script><span class="md-plain">、<span class="md-tag md-raw-inline"><noscript><span class="md-plain">和<span class="md-tag md-raw-inline"><base><span class="md-plain">。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-plain">（2）<span class="md-tag md-raw-inline"><body><span class="md-tag md-raw-inline"></body><span class="md-plain">是网页信息的主要载体。该标签下还可以包含很多类别的标签，不同的标签有不同的作用。每个标签都是以<>开头，以</>结尾，<>和</>之间的内容是标签的值和属性，每个标签之间可以是相互独立的，也可以是嵌套、层层递进的关系。根据这两个组成部分就能很容易地分析整个网页的布局。其中，<span class="md-tag md-raw-inline"><body><span class="md-tag md-raw-inline"></body><span class="md-plain">是整个HTML的重点部分。</span></span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-plain">“主体”部分（Body）的使用方式，我们进行详细分析，说明如下：</span></p> <p class="md-end-block md-p"><span class="md-plain">（1）<span class="md-tag md-raw-inline"><h1><span class="md-plain">、<span class="md-tag md-raw-inline"><div><span class="md-plain">和<span class="md-tag md-raw-inline"><h2><span class="md-plain">是互不相关的标签，三个标签之间是相互独立的。</span></span></span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-plain">（2）<span class="md-tag md-raw-inline"><div><span class="md-plain">标签和<span class="md-tag md-raw-inline"><div><span class="md-plain">里面的<span class="md-tag md-raw-inline"><p><span class="md-plain">标签是嵌套关系，<span class="md-tag md-raw-inline"><p><span class="md-plain">的上一级标签是<span class="md-tag md-raw-inline"><div><span class="md-plain">。</span></span></span></span></span></span></span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-plain">（3）<span class="md-tag md-raw-inline"><h1><span class="md-plain">和<span class="md-tag md-raw-inline"><p><span class="md-plain">是两个毫无关系的标签。</span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-plain">（4）<span class="md-tag md-raw-inline"><h2><span class="md-plain">标签包含一个<span class="md-tag md-raw-inline"><p><span class="md-plain">标签，<span class="md-tag md-raw-inline"><p><span class="md-plain">标签再包含一个<span class="md-tag md-raw-inline"><a><span class="md-plain">标签，一个标签可以嵌套多个标签。</span></span></span></span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p md-focus"><span class="md-plain">除上述示例的标签之外，大部分标签都可以在<span class="md-tag md-raw-inline"><body><span class="md-tag md-raw-inline"></body><span class="md-plain">中使用，常用的标签如下表：</span></span></span></span></p> <p class="md-end-block md-p md-focus"><span class="md-plain"></span></p> <p class="md-end-block md-p"><span class="md-plain md-expand">使用浏览器查找元素</span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p md-focus"><span class="md-plain">大致了解了HTML的结构组成，接下来使用开发者工具来查找网页元素。比如查找腾讯网的搜索框在HTML里所在的位置，我们可以单击开发者工具的“小箭头按钮”按钮，然后将鼠标移到网页上的搜索框并单击，最后在Elements标签页里自动显示搜索框在HTML里的元素信息，具体操作如图：</span></p> <p class="md-end-block md-p md-focus"><span class="md-plain"></span></p> <p class="md-end-block md-p"><span class="md-plain md-expand">从图上可以看到，网页中的搜索框是由<span class="md-tag md-raw-inline"><input><span class="md-plain">标签生成的，该标签的上一级标签是<span class="md-tag md-raw-inline"><div><span class="md-plain">。<span class="md-tag md-raw-inline"><input><span class="md-plain">标签有属性id、name、size和maxlength等，这些属性值是这个<span class="md-tag md-raw-inline"><input><span class="md-plain md-expand">标签特有的，我们可以通过这些属性值来告诉Selenium，让它根据这些属性值去操控这个搜索框。</span></span></span></span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"> </p> </div>  <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid8-0.html' class='tagbtn' target='_blank'>Python</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div>  <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-566513.html">学习《Python编程从入门到实践》PDF+代码训练</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-566439.html">python-----面向对象简单理解</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565236.html">python多线程控制</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564738.html">Sublime 的安装、汉化、配置、Python环境和插件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564855.html">python——time strftime() 函数表示当地时间</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564276.html">python 初识函数</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564187.html">python 函数对象嵌套闭包</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563864.html">Python栈溢出——设置python栈大小</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563952.html">python-面向对象-01课堂笔记</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563329.html">python爬虫</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563001.html">Python 之父的解析器系列之五：左递归 PEG 语法</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563230.html">Python 为了提升性能，竟运用了共享经济</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div>   </div>  </div> <div class="col-lg-3 col-12 p-0 ps-lg-2">     <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div>  </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>