用pyppeteer自动识别某招聘滑块验证码

前面两篇分别介绍了识别图形验证码和旋转验证码，这次再利用pyppeteer识别一下滑块验证码。对于简单的滑块验证码，可以通过颜色三通道的差值进行缺口位置定位，从而获取到相应的滑动距离。

自动登录成功演示：

一、初始化登录

先进行模拟登录，进行元素定位，进行账号和秘密的输入，再点击登录弹出验证框

async def open_zhilian(self):
    url = 'https://passport.zhaopin.com/login'
    await self.page.goto(url)
    await self.page.waitFor('.zppp-panel-qrcode-bar__triangle',options={'timeout':self.TIMES_OUT*1000})
    await self.page.click('.zppp-panel-qrcode-bar__triangle')
    await self.page.waitForSelector('.zppp-panel-tabs',options={'timeout':self.TIMES_OUT*1000})
    li2 = await self.page.xpath("//div[@class='zppp-panel-login-normal']//ul[@class='zppp-panel-tabs']/li[2]")
    await li2[0].click()
    await self.page.waitForSelector('.zppp-input',options={'timeout':self.TIMES_OUT*1000})
    await self.page.type('.zppp-input','xxx@qq.com',{'delay':100})
    await self.page.type('input[type="password"]','xxx',{'delay':100})
    await self.page.click('input[type="checkbox"]')
    await self.page.click('.zppp-submit')

二、截取图片

对弹出的验证框，获取带缺口图片和完整的图片，利用js改变style属性，从而可以分别获取两张图片，再用element.scrennshot对目标元素进行截图。

async def get_quekou_img(self,name='quekou.png'):
    await self.page.waitForSelector('.geetest_wrap',options={'timeout':self.TIMES_OUT*1000})
    await self.page.evaluate("document.getElementsByClassName('geetest_canvas_slice')[0].style.display = 'none';")
    await self.page.waitFor(3*1000)
    element = await self.page.waitForSelector('.geetest_canvas_bg.geetest_absolute')
    await element.screenshot(path=name)


async def get_normal_img(self,name='normal.png'):
    await self.page.evaluate("document.getElementsByClassName('geetest_canvas_fullbg')[0].style.display = 'block';")
    await self.page.waitFor(3 * 1000)
    element = await self.page.waitForSelector('.geetest_canvas_bg.geetest_absolute')
    await element.screenshot(path=name)

三、获取缺口距离

获取到缺口图片和完整图片后，通过element.load获取颜色三通道，对比颜色的差值，从而判断出缺口的位置

四、滑动拖动

获取到缺口的距离就是滑动的距离，将滑动距离分为三部分，第一部分加速度滑动，第二部分减速度滑动，第三部分后退减速滑动，从而模拟真人更加逼真，不会验证失败。

async def try_validation(self, distance):
      await self.page.evaluate("document.getElementsByClassName('geetest_canvas_slice')[0].style.display = 'block';")
      await self.page.evaluate("document.getElementsByClassName('geetest_canvas_fullbg')[0].style.display = 'none';")
      await self.page.waitFor(3*1000)
      # 将距离拆分成两段，模拟正常人的行为
      distance1 = distance - 10
      distance2 = 10
      btn_position = await self.page.evaluate('''
         () =>{
          return {    
           x: document.querySelector('.geetest_slider_button').getBoundingClientRect().x,
           y: document.querySelector('.geetest_slider_button').getBoundingClientRect().y,
           width: document.querySelector('.geetest_slider_button').getBoundingClientRect().width,
           height: document.querySelector('.geetest_slider_button').getBoundingClientRect().height
           }}
          '''
)
      x = btn_position['x'] + btn_position['width'] / 2
      y = btn_position['y'] + btn_position['height'] / 2
      # print(btn_position)
      await self.page.mouse.move(x, y)
      await self.page.mouse.down()
      await self.page.mouse.move(x + distance1, y, {'steps': 30})
      await self.page.waitFor(800)
      await self.page.mouse.move(x + distance1 + distance2, y, {'steps': 20})
      await self.page.waitFor(800)
      await self.page.mouse.move(x + distance1 + distance2-5, y, {'steps': 20})
      await self.page.waitFor(800)
      await self.page.mouse.up()
      await self.page.click('.geetest_refresh_1')
      await self.page.waitForSelector('.geetest_wrap', options={'timeout': self.TIMES_OUT * 1000})

还有一点，如果电脑的屏幕缩放比例是125%需要调整为100%,不然截取的图片位置偏差，导致图片截取的不完整。