近几年，网页上各种新型验证码层出不穷，其中一种比较常见的是滑动验证码，比如下图这种。
本文介绍了一种使用纯前端方法寻找滑动终点并模拟滑动的方法。
我们需要三个依赖库： puppeteer 、 Resemble.js 以及canvas 。其中
puppeteer 用于打开并操作页面，
Resemble.js 及
canvas 用于寻找滑动验证码的终点位置。相关依赖如下：
"dependencies": {
"canvas": "^1.6.7",
"puppeteer": "^0.12.0",
"resemblejs": "^2.2.6"
}接下来是实现要点。首先，引入所需的库，定义一些常量。
const fs = require('fs')
const puppeteer = require('puppeteer')
const resemble = require('resemblejs')
const Canvas = require('canvas')const URL = 'xxx' // 验证码页面访问地址
const width = 600
const height = 400
const slider_width = 44
const sleep = duration => {
return new Promise(resolve => {
setTimeout(resolve, duration)
})
}
接下来，使用
puppeteer 打开验证码页面：
const browser = await puppeteer.launch()
const page = await browser.newPage()
page.setViewport({width, height})await page.goto(URL, {
waitUntil: 'networkidle'
})
然后往页面上注入一段 JS ，获取验证码滑块的位置。这一段代码可能需要你根据自己页面的实际情况进行调整。
const offset = await page.evaluate(() => {
let offset_ifr = $('iframe').offset() return {
top: offset_ifr.top + 222,
left: offset_ifr.left + 10
}
})
接下来，模拟按下鼠标左键，再放开，并分别截图。
await page.mouse.move(offset.left + 10, offset.top + 10)
// 按下鼠标
await page.mouse.down({
button: 'left'
})
// 等待图片出现
await sleep(500)
// 截图
await page.screenshot({path: 'screenshot2.png'})await page.mouse.up({
button: 'left'
})
// 等待图片出现
await sleep(500)
// 截图
await page.screenshot({path: 'screenshot3.png'})
此时可以得到两个图片：
以及：
