20爬虫：使用playwright与图鉴破解豆瓣滑动验证码

1.浏览器坐标系

整个浏览器的坐标系示意图如下图所示，原点在网页的左上角，水平向右是x轴正方向，水平向下是y轴正方向，这个基础知识对于接下来使用playwright模拟鼠标点击滑动验证是非常重要的。

2.实现流程

（1）playwright访问豆瓣网站，定位账号输入框并输入账号，定位获取验证码按钮，让网页弹出滑动验证码窗口，定位整个滑动验证码图片（在下面的代码中我们可以看到，我们下载图片验证码的时候定义的是整个与滑动验证码有关的div块）。

（2）下载滑动验证码图片，如下图所示，将滑动验证码图片交给图鉴，图鉴会以字符串的形式返回一个滑块移动的距离。

（3）playwright定位到滑块标签，使用playwright的内置方法获取滑块标签的坐标以及宽度。

（4）playwright模拟鼠标选中滑块标签，拖到滑块标签滑动图鉴返回的移动距离，松开鼠标。

3.代码实现

'''
程序不能实现我们需要的滑动验证的效果
    使用图鉴中的单张图片识别，现在的问题是没有看到鼠标拖动的效果，页没有看到验证成功的效果
'''
from playwright.sync_api import sync_playwright
import base64
import json
import requests

# 一、图片文字类型(默认 3 数英混合)：
# 1 : 纯数字
# 1001：纯数字2
# 2 : 纯英文
# 1002：纯英文2
# 3 : 数英混合
# 1003：数英混合2
#  4 : 闪动GIF
# 7 : 无感学习(独家)
# 11 : 计算题
# 1005:  快速计算题
# 16 : 汉字
# 32 : 通用文字识别(证件、单据)
# 66:  问答题
# 49 :recaptcha图片识别
# 二、图片旋转角度类型：
# 29 :  旋转类型
#
# 三、图片坐标点选类型：
# 19 :  1个坐标
# 20 :  3个坐标
# 21 :  3 ~ 5个坐标
# 22 :  5 ~ 8个坐标
# 27 :  1 ~ 4个坐标
# 48 : 轨迹类型
#
# 四、缺口识别
# 18 : 缺口识别（需要2张图 一张目标图一张缺口图）
# 33 : 单缺口识别（返回X轴坐标 只需要1张图）
# 五、拼图识别
# 53：拼图识别
def base64_api(uname, pwd, img, typeid):
    with open(img, 'rb') as f:
        base64_data = base64.b64encode(f.read())
        b64 = base64_data.decode()
    data = {"username": uname, "password": pwd, "typeid": typeid, "image": b64}
    result = json.loads(requests.post("http://api.ttshitu.com/predict", json=data).text)
    if result['success']:
        return result["data"]["result"]
    else:
        #！！！！！！！注意：返回 人工不足等 错误情况 请加逻辑处理防止脚本卡死 继续重新 识别
        return result["message"]
    return ""

def get_instance(img_path,typeid):
    result = base64_api(uname='自己登录图鉴的账号', pwd='自己登录图鉴的密码', img=img_path, typeid=typeid)
    return result



with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()

    page.goto("https://www.douban.com/")

    # page.locator("iframe").content_frame.get_by_placeholder("手机号").fill("13695457910")
    page.frame_locator('xpath=/html/body/div[2]/div/div[1]/iframe').get_by_placeholder('手机号').fill('13695457910')
    # page.locator("iframe").content_frame.get_by_role("link", name="获取验证码").click()
    page.frame_locator('xpath=/html/body/div[2]/div/div[1]/iframe').get_by_role("link",name="获取验证码").click()
    page.wait_for_timeout(10000) # 等待图片加载完成，如果不加入等待时间，截图会很模糊导致后续识别失败
    # 下载滑动图片，先得到图片的下载地址（通过playwright直接截取图片不知道为什么截取的很不清楚）
    iframe_1 = page.frame_locator('xpath=/html/body/div[2]/div/div[1]/iframe')
    iframe_1.frame_locator('#tcaptcha_iframe_dy').locator('//*[@id="bodyWrap"]').screenshot(path='background.png')

    # 计算滑块移动的距离
    result = get_instance(img_path='background.png',typeid=33)
    print('滑块滑动的距离为',result,type(result)) # 返回值是x轴的移动距离
    d = int(result)
    # 定位到滑块标签
    slide = iframe_1.frame_locator('#tcaptcha_iframe_dy').locator('//*[@id="tcOperation"]/div[6]')
    # 找到滑块在当前页面的坐标（这个会返回一个字典里边四个数字）
    # {'x': 858, 'y': 339.9921875, 'width': 55, 'height': 55}
    box = slide.bounding_box()
    print(box)

    # 让鼠标移动到滑块标签的中心的位置上
    page.mouse.move(box["x"] + box["width"] / 2, box["y"] + box["height"] / 2)
    # 按下鼠标
    page.mouse.down()
    # 测试能否滑动
    page.mouse.move(x=box['x'] + d,y=box["y"])
    # 移动结束鼠标释放
    page.mouse.up()

    page.wait_for_timeout(5000)

    page.close()
    context.close()
    browser.close()