最近看到很多同学都在研究爬虫，然后我想到了一款尘封已久的插件，很早之前在我刚接触爬虫的时候用过，不过自从上了python爬虫过后，慢慢就搁置了，今天花时间撸一篇教程，给同学们安利这款插件，如果刚开始学爬虫，它一定是你通往人生巅峰的不二人选哦！

创新互联于2013年开始，先为古丈等服务建站，古丈等地企业，进行企业商务咨询服务。为古丈企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

废话不多说，这款插件全名叫webscraper，适用于chrome浏览器，今天争取用一篇文章带大家掌握webscraper的核心要点，好了，开始我们今天的webscraper探索之旅！

一：安装webscraper

首先下载插件，百度搜webscraper有很多资源，这里就不做过多介绍了，文末给大家附上网盘链接，大家也可以自行下载，下载过后，将插件包进行解压，解压完成后，下一步就是在chrome浏览器导入啦！

step 1（更多工具-->扩展程序）：

step 2（加载插件包）：

在扩展程序页面，点击加载已解压的扩展程序，选择刚刚解压好的插件包，至此，即可成功导入webscraper插件，加载完后，记得选择启用该插件哈，如下图的位置，启用过后，webscraper的图表就会展示在浏览器的工具栏上，至此即说明webscraper导入成功！

浏览器上显示webscraper图标，即可说明该插件导入成功！可正常使用了！

二：构造一个完整的爬虫流程

插件安装完成后，接下来我们来用webscraper构建一个完整的爬虫项目：

step 1（create sitemap）：

首先，打开webscraper配置框，有两种方式，一种是鼠标右键，选择检查，打开开发者工具，另一种直接按F12快捷启动开发者工具，如下图所示，在开发者工具的栏目里，我们选择webscraper，即可进入webscraper的主配置框。

打开后，第一步，我们先创建爬虫站点，点击create new sitemap，选择create sitemap，在配置框里配置sitemap name 以及 start url，其中start url为爬虫的起始页，配置如下图所示，再点击下方的create sitemap，即可成功创建。我们在这里以CSDN为例，创建一个name为csdn，starturl为https://www.csdn.net/的sitemap。

step 2（Add selector）：

创建好sitemap后，第二步则创建selector，selector为爬取数据的选择器，需要通过它来选择我们想要抓取的数据

我们来看Add selector有哪些需要配置的属性：

ID：选择器ID，给选择器命名

Type：选择器抓取的数据属性，有Text、Link、image、table、HTML、element等多种类型，我们一般常用的就是Text、link、element这几种类型。

selector：选择抓取元素，点击select，然后鼠标选择我们想要抓取的元素位置即可，鼠标选中后，页面上会进行高亮显示，高亮框则是我们要抓取的元素，效果如下图，具体返回的数据视我们选择的type而定，如果type选择的是text，则返回选中区域类的文本数据，如果选择的是link，则返回链接，如果选择的是element，则会将整个区域的所有元素进行返回。

如果要选择有相同规律的列表数据，比如在这里，我们想选择这一列所有文章的标题，我们只需要连续选择两个标题区域，selector就能自动识别到我们要抓取的元素，把其他结构一致的元素区域选中，效果如下图所示：

element preview：选择完过后，点击element preview可预览下所选择的元素，看是否选择正确。

data preview：点击data preview，可预览返回的文本数据。

multiple：选择是否多选，在前面我们已经说过如何通过selector选择具有相同规律的元素，但是选择出来还不足够，我们还需要勾选multiple，这样才能真正的抓取多行数据。

Regex：正则表达式，从我们抓取的文本数据里面再进行正则匹配。

Delay：选择器生效前的延迟时长，主要担心受网速影响，页面还没加载完就开始抓取，容易抓取空数据。

parent selectors：为该选择器选择父选择器，构造树形结构，特别是在构造循环抓取结构的场景经常会用到parent selectors的配置。

在这里，我们用selector抓取csdn.net首页文章列表的标题，配置内容如下，点击save selector即可保存该抓取器。如果想要抓取其他的数据，按照此种方式配置多个selector即可。

step 3（start scrapy）：

设置好selector后，这时我们就可以开始抓取数据了，按下图方式选择scrape，开始爬取之前，有两个参数需要设置：

Request interval（ms）：默认值2000ms，即每两次请求之间的间隔。

Page load delay（ms）：默认值500，等待页面的加载时长。

点击start scraping，即可开始正式爬取数据，爬取完后，爬取的数据会显示在窗口，如果要将数据导出到csv，选择Export data as CSV-->点击download now，即可将刚才抓取的数据导出到CSV。

至此，整个完整的爬虫项目就构建完成了，是不是很简单！接下来，我们再看下爬虫常见的应用场景，用webscraper如何解决吧！

三：抓取多级数据

在构建了一个简单的csdn文章标题抓取项目后，有同学说，我想再抓取一个作者信息，于是尝试着构建一个author的selector，构建完成后，爬取完过后，竟然发现title跟author对不上，如下图所示，什么情况，难道是selector设置的不对么，但是明明看到了author信息也被抓取下来了啊！

这个问题也是初学者经常所遇到的第一个坑哈！webscraper的selector之间是互相独立的，也就是说，你分别构建的title selector和author selector分别独立的再进行工作，根本就没有存储他们之间一一对应的关系，所以到最后，看到混乱的数据结果也就再正常不过啦！

解决方法也很简单，就是应用selector的多级结构，第一级selector抓取整个元素，元素中包含title跟author信息，然后再构建这个元素的子selector，子selector从元素里面再获取title和author。

首先构建父级selector，这里的type需选择Elements，选择区需要选择包含title和author的整个选择区。

接着，第二步，构建子selector，从父selector点击进去，即可进入子selector的配置框，接着分别配置title和author两个selector即可。

配置子selector需要注意两点，第一，multiple不能再勾选，这里只是对单个元素再次进行解析。第二就是，在选择子selector的时候，要在标黄的区域框进行选择，标黄的区域即是父selector选择的元素区域。

设置好后，再进行抓取，这次，终于看到我们的数据恢复正常啦！

还有种多级页面抓取场景是进入到二级页面继续抓取数据，在本场景，我们想点开每一个文章，然后抓取文章的详情内容，这种场景又怎么实现呢？

利用多级结构也能轻松实现，我们首先构建一个抓取文章链接的子selector，然后在该链接selector之下再构建子selector，这时的子selector抓取的元素就变成了该链接的详情文章页面了。按照常规的配置方式，我们再配置抓取文章详情的selector即可。

第一步，先构建链接selector，这里抓取的是链接，selector type需要选择link，我们这里构建了一个名为href的selector。

第二步，进入到href selector的子selector配置页面，配置文章详情页的抓取内容，这里我们构建了文章详情页里的title和content两个选择器。

构建完成后，我们来看下整个抓取结构，可通过selector graph来查看，整个抓取结构呈三级结构，第一级为elements的抓取，主要是解决数据一一映射的问题，第二级为子页面抓取，通过链接构建子selector来实现。

至此，我们的子页面抓取配置完成。

四：翻页场景的设计模式

我们前面讲述的都是抓取单页内容，但是实际情况中，翻页场景比比皆是，因为一页所展示的数据有限，我们需要通过翻页来获取更多的数据，对于这种场景，我们首先介绍一种通过改变URL来获取翻页数据的方法，来看这个例子。

这是亿欧新闻网站，我们可以发现一个规律，当我们切换页面的时候，它的url会随着页数而发生变化，这种有规律的翻页场景，我们可以通过设置starturl来实现，如下的设置方式表示在1到100进行轮询，间隔为1。

那对于一些无规律的翻页场景呢，我们又有哪些翻页设计模式可以参考呢？常规的做法我们可以利用循环嵌套抓取结构来实现翻页抓取，还是以亿欧网站为例，我们来看如何设计一个循环嵌套抓取结构。

首先在一级selector增加一个获取下一页链接的selector。该next selector获取当前页面的下一页链接。elements selector获取当前页面的元素。

接着，我们分别配置elements和next的父节点，next的父节点除了root以外，我们将next自身也添加为父节点。

elements的父节点除了root以外，我们也将next添加为父节点。

最后，我们来看下整个抓取结构图，如下所示，点击next，可以看到整个结构会无限循环下去，通过这种方式，我们就可以构建一个通用的翻页循环抓取结构！

五：滚动加载场景的设计模式

通过点击下一页来翻页是比较常见的翻页方式，除此以外，我们还会经常看到通过滚动来加载更多数据的场景，这种场景我们又该如何解决呢？

其实很简单，webscraper已经帮我们设计好了这种元素类型，即selector type里的elements scroll down，在选择type时，将之前的elements换成这个类型即可，其他配置方式保持不变，我们即可以实现滚动加载数据的抓取。

六：点击加载场景的设计模式

最后再来说说另外一个点击加载数据的场景吧！我们经常会遇到有的场景，需要点击查看更多才能加载更多的数据，这种场景怎么解决呢？

当然少不了我们强大的webscraper啦！webscraper提供了一种type类型，即elements click，可以轻松解决此类问题，接下来让我们看一个具体的实例，我们以亿欧网站为例，打开快讯栏目，我们可以看到如果要获取更多数据的话，必须点击查看更多才会加载。

与滚动加载场景一样，我们在一级selector设置element click 的选择器，配置内容如下：

id：选择器名称

type：选择elements click

selector：选择需要抓取的元素，与之前设置方式一致，选择元素即可

click selector：这里选择查看更多的元素，也即我们点击加载按钮的元素。

click type：一种为click once，即同一个按钮只点击一次，一种为click more，同一个按钮可点击多次，直到按钮发生变化为止。这里我们选择click more，因为需要不断点击查看更多来获取更多数据。

click element uniqueness：判定是否同一按钮的条件，主要用于停止条件的判定，有以下四种类型可选择：

Unique Text - 有同样文本内容的按钮被视为同一按钮

Unique HTML+Text - 有同样 HTML 和文本内容的按钮被视为同一按钮

Unique HTML - 有同样 HTML 的按钮被视为同一按钮

Unique CSS Selector - 有同样 CSS 选择器的按钮被视为同一按钮

Discard initial elements（忽略初始元素）- 选择器不会选中在第一次点击按钮前就已经存在的元素。用在去重的场景

Delay：这里需要按照实际情况配置，如果等待加载的时间配置过短，很容易造成抓取不到数据的情况。

配置完click selector过后，接着在其二级子selector继续配置想要抓取的数据即可。

至此，基本上常用的webscraper操作都介绍完了，掌握以上的方法，基本可以覆盖80%左右的爬虫场景。当然使用webscraper也主要是在一些小规模数据的抓取场景，如果要爬取较大规模的数据，有较大概率会遇到站点的反爬措施，这时就只能上代码解决啦！

伙伴们学习python爬虫的有多少，举个爪，评论回复：python爬虫，领取全套python视频教程！

文章题目：一篇文章带你了解webscraper爬虫插件
当前网址：http://csdahua.cn/article/jccjpg.html