用 Lighthouse 爬取 JavaScript 动态渲染页面

本文针对JavaScript动态渲染页面,使用selenium+scrapy,爬取levels.fyi中微软公司员工的信息和薪酬,目的在于讲述JavaScript页面如何进行爬取。

一.简介

读过上篇教程(Scrapy爬虫初探)的同学应该已经对如何编写爬虫有了一定的认识。但是对于较为复杂的网站设计,比如网站页面使用了JavaScript动态渲染,入门级的爬虫就不太适用了。本文针对JavaScript动态渲染页面,使用selenium+scrapy,爬取levels.fyi中微软公司员工的信息和薪酬(示例页面点击这里),目的在于讲述JavaScript页面如何进行爬取。程序部署在腾讯云轻量服务器Lighthouse中。

二.Lighthouse购买

这里简单介绍一下Lighthouse的购买.先放一段Lighthouse官网的简介:

‘‘轻量应用服务器(Lighthouse)是一种易于使用和管理、适合承载轻量级业务负载的云服务器,能帮助中小企业及开发者在云端快速构建网站、博客、电商、论坛等各类应用以及开发测试环境,并提供应用部署、配置和管理的全流程一站式服务,极大提升构建应用的体验,是您使用腾讯云的最佳入门途径.’’

购买地址点击这里

Lighthouse提供多种镜像供你选择,这里我们先选择LAMP镜像,选择套餐后进行支付,就拥有了属于你的Lighthouse镜像!

用 Lighthouse 爬取 JavaScript 动态渲染页面

三.页面分析

levels.fyi中进入开发者模式,可以看到待爬取的元素其实是一个iframe,数据由script脚本生成:

用 Lighthouse 爬取 JavaScript 动态渲染页面

我们需要获取tbody下的每一个tr,并选择我们需要的数据

我们直接使用Request获取tbody,会发现该元素下并没有任何数据:

t_body = response.css("table#compTable tbody").extract()

print(t_body)

下面,我们讲解下如何成功的获取javaScript生成的tbody数据

四.Selenium获取

Selenium是一个web自动化工具,运行在浏览器中,使用脚本模拟用户对浏览器进行操作。在本例中,本质上是使用Selenium等待javascript加载完成后,再获取数据。Selenium的安装和配置非常简单,脚本编写也非常容易。而缺点在于,相比起其他爬取方式,Selenium的爬取速度相对较慢。

Selenium安装:pip install selenium

浏览器驱动下载:使用Selenium需要下载浏览器驱动,推荐下载Chrome版本,下载完成后mac可以直接放在/usr/local/bin,Windows需要在脚本里配置下路径或者配置环境变量

建立scrapy项目,新建MicrosoftSpider,并进行简单的配置,方法和上篇教程【Lighthouse教程】scrapy爬虫初探一样,不加以赘述。

获取driver对象:

driver = webdriver.Chrome()

使用WebDriverWait,等待页面加载完成。在这里,我们设置超时时间为5秒:

wait = WebDriverWait(self.driver, 5)
wait.until(
    lambda driver: driver.find_element_by_xpath('//*[@id="compTable"]/tbody/tr[1]'))  # 等待第一行内容加载完成

wait结束后,获取一下tbody中的第一行数据试试?

tr1 = self.driver.find_element_by_xpath('//*[@id="compTable"]/tbody/tr[1]').text  # 每一行信息
print(tr1)

OK!我们已经成功获取到第一行数据了!在上述代码中,我们使用了find_element_by_xpath函数。这个函数是Selenium中获取元素的函数,返回的是WebElement类型,可以通过text获取元素的文本

接下来,我们使用同样的方法,获取‘下一页’按钮,并点击该按钮:

wait = WebDriverWait(self.driver, 1)
wait.until(lambda driver: driver.find_element_by_css_selector('li.page-item.page-next'))  # 等待内容加载完成
next_page = self.driver.find_element_by_css_selector('li.page-item.page-next a')
next_page.click()  # 模拟点击下一页

next_page同样是WebElement类型。可以看到,WebElement除了text等基本属性外,还具有click这样的动作。实际上,这也是WebElement最常使用的方式。

其余方法可见WebElement API文档

OK!现在,你已经获取了所有关键的元素了!接下来,就是爬取每一行的元素,并进行循环点击啦!

五.爬虫的路上总是充满坎坷

Selenium的教程到这里其实已经结束了,但是如果有小伙伴去尝试爬取网站的活,就会发现各种各样神奇的bug。这些bug不是程序的问题,而是现在有着各种各样神奇的网站。这些网站的设计者们脑海里可能有个哪吒在闹海,让你根本想不明白他在想什么。在这里,分享一下在爬取这个示例网站的时候,我遇到的那些有意思的事儿。

1.JavaScript嵌套:

就像下面这张图,当你点击iframe的一行时,会出来一个新的iframe,数据同样是由JavaScript生成的。获取新的iframe数据并不难,wait+find就可以得到。难点在于,当每一行都点击的时候,你要如何把新出现的iframe和他所属的iframe关联起来呢?毕竟,像下图一样,每个新出现的iframe的class都是”detail-view”。最开始时候,我想做两个map,然后join,但是很难保证join后的结果是正确的。后来,我发现了新的Iframe的特点:当再次点击该行数据时,新的Iframe会被关闭。这样,就有了取巧的办法:在循环爬取数据的时候,每次生成新的iFrame,并爬取数据后,再次调用click,把Iframe关闭。这样,就可以保证每次根据’detail-view’获取元素的时候,就只有唯一的一个Iframe。

这个解决办法看起来毫无技术含量,并且增加了爬取的总耗时:增加了一个click动作的耗时。但是就像在开头说的一样:写爬虫的时候,总是“不择手段”的。当你可以很快的想到一个解决爬虫问题的方法,并且很容易实现时,你就可以大胆的使用他,哪怕它并不是最优的解决办法。毕竟,在你费脑筋想到更好的解决办法时,使用“笨”办法爬取的数据可能已经到手了。

用 Lighthouse 爬取 JavaScript 动态渲染页面

2.爬取中断:

如果你尝试爬取示例网站的时候,你会发现,爬虫在爬取到1000余条的时候,会被中断,同时提示:元素‘page-link’无法被点击,也就是点击不了‘下一页’按钮。

最开始的时候,我以为是那一页数据缺少了‘下一页’按钮的href,毕竟,类似按钮缺少href,链接突然变成text这样的事情实在是太普遍了。但是,在我找到该页数据的时候,我发现并不是这样的。该页数据看起来非常的正常,‘下一页’按钮也是具有href,可以被正常点击的。但是在我重复爬取了多次后,在爬取到该页数据时爬虫均会中断,同时提示我元素‘page-link’无法被点击。这个问题困扰了我很久,直到我发现了这个东西:

用 Lighthouse 爬取 JavaScript 动态渲染页面

这是个可以和网站客服人员联系的按钮,在第125页的时候,他神奇的出现在了‘下一页’按钮的上方,遮挡住了‘下一页’按钮,导致模拟器无法点击到‘下一页’按钮。这个发现也是让我有些哭笑不得。那么,发现了这个问题,要如何解决呢?办法其实非常的简单,把模拟器的窗口调大。因为‘聊天按钮‘的位置是依据当前窗口大小,也就是相对位置,而’下一页‘按钮不一样。这样,就可以保证让两个按钮分开:

用 Lighthouse 爬取 JavaScript 动态渲染页面

数据也就可以正常爬取了。

之所以写出这两个例子,是因为这两个解决方法其实都属于‘怪逻辑’:一个莫名其妙的点击,和一个莫名其妙的调大窗口。如果你仅仅去看代码,你不会明白这两行代码的意义在哪里。但是对于这个网站而言,这两行又是必需的。就像文章开头提到的‘不择手段’,在解决问题的时候,换一种角度去思考,可能会比从正面解决要容易得多。

五.代码地址

最后附上示例代码的github地址:https://github.com/Pro-YY/baby-steps-to-the-cloud

本文来自腾讯云计算社区,转载请注明出处:https://computeinit.com/archives/2610

发表评论

登录后才能评论
交流群