Python + Selenium: 测试中如何爬取src="placeholder.jpg"、包含orginal-data的图片 -- 进阶篇

这不是很简单的问题？直接获取img标签的original-data属性不就完事？

先来看看包含original-data属性的图片案例：

image

image

可以看出图片显示是延迟的。先出现一张名为“placeholder.jpg”的“等待图片”，然后加载original-data指向的图片。图片完全加载之前出现一段等待时间，<u>渲染时感觉上像是“闪”了一下(flash)</u> 。至少Chrome浏览器视觉上看到是这样子的。这有什么问题？

由于是组图，所以需要“自动翻页”。翻页有两种主要方式：通过加载url网址和通过点击事件翻页。这里讨论的是第二种方式，所以第一种方式分析略。

浏览器渲染需要一定的时间。如果通过图片的父标签的点击事件来完成翻页，当目标图片的父元素(Parent element)已经加载，而图片元素仍在等待下载未渲染完成期间，就极有可能会出现点击事件的空白状态。此时，仍按照正常状况进行处理，就会出现错误。

image

直接通过selenium操作webdriver的element元素的点击事件，既没有报错，也没有如预期一样进行翻页。以为已经翻页，并按照计划进行处理，得到的结果可能仍是上一个页面的数据。受网络状况和软硬件设施的性能影响，渲染的时机是不确定的，所以很难确定是否已完成预期的点击事件。可能为有效的点击事件，也可能为无效的。这就造成一个较大的困惑：到底是否点击有效且翻页成功？

假设webdriver的参数：

# headless无界面浏览器测试
options=Options()
options.add_argument("--headless")
options.add_argument("--disable-gpu")
options.add_argument('log-level=3')
driver=webdriver.Chrome(options=options)

对目标元素的定位保留延时操作：

wait=WebDriverWait(driver, 10)
clickelement=wait.until(ECS.presence_of_element_located((By.ID, 'target'))

通过强制等待延迟点击：

import time
...
# 强制等待1秒
time.sleep(1)
clickelement.click()

结果发现得到的只是第一页的数据，根本没有发生翻页。

将webdriver的参数设置为正常浏览模式：

# 非headless的正常浏览器模式
driver=webdriver.Chrome()

结果类似，丢失部分点击事件，导致目标的数据重复和缺失。点击事件与headless相关。

image

重新使用webdriver的headless模式尝试延迟的"反复点击事件"（repeat click event）。通过lasturl和webdriver当前的地址比较是否处于渲染过程中。如果没有翻页，等待0.5秒再操作点击事件进行跳转。

# repeat click event, with delay of half a second each time and max times of 10
clicks=0
while lasturl==driver.current_url and clicks<=10:
    clicks+=1
    clickelement.click()
    time.sleep(.5)

image.gif

结果与上一次调试类似。

同时开启webdriver的非headless模式和保留“反复点击事件”再测试。

image

结果正如预期的一致。至此问题得到解决。至于问题的原因，很可能是浏览器渲染图片过程中，元素未加载完成无法产生点击事件或浏览器界面的“<u>闪动</u>”(<u>flash</u>)导致同一时间的点击事件丢失。