Playwright自动化登录JD

import base64
import random
import re
import time
from playwright.sync_api import sync_playwright
import cv2


def show(name):
    '''展示圈出来的位置'''
    cv2.imshow('Show', name)
    cv2.waitKey(0)
    cv2.destroyAllWindows()

def _tran_canny(image):
    """消除噪声"""
    image = cv2.GaussianBlur(image, (3, 3), 0)
    return cv2.Canny(image, 50, 150)

def detect_displacement(img_slider_path, image_background_path):
    """detect displacement"""
    # # 参数0是灰度模式
    image = cv2.imread(img_slider_path, 0)
    template = cv2.imread(image_background_path, 0)

    # 寻找最佳匹配
    res = cv2.matchTemplate(_tran_canny(image), _tran_canny(template), cv2.TM_CCOEFF_NORMED)
    # 最小值，最大值，并得到最小值, 最大值的索引
    min_val, max_val, min_loc, max_loc = cv2.minMaxLoc(res)

    top_left = max_loc[0]  # 横坐标
    return top_left * 278 / 360

def to_pic(file_name, base64_pic):
    result = re.search(
        "data:image/(?P<ext>.*?);base64,(?P<data>.*)", base64_pic, re.DOTALL
    )
    if result:
        data = result.groupdict().get("data")
    else:
        raise Exception("Do not parse!")

    img = base64.urlsafe_b64decode(data)

    filename = file_name
    with open(filename, "wb") as f:
        f.write(img)


def get_track(distance):  # distance为传入的总距离
    # 移动轨迹
    track = []
    # 当前位移
    current = 0
    # 减速阈值
    mid = distance * 4 / 5
    # 计算间隔
    t = 0.2
    # 初速度
    v = 1

    while current < distance:
        if current < mid:
            # 加速度为2
            a = 4
        else:
            # 加速度为-2
            a = -3
        v0 = v
        # 当前速度
        v = v0 + a * t
        # 移动距离
        move = v0 * t + 1 / 2 * a * t * t
        # 当前位移
        current += move
        # 加入轨迹
        track.append(round(move))
    return track


with sync_playwright() as p:
    # 启动浏览器
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()

    url = "https://www.jd.com/"

    page.goto(url)

    # 点击
    page.click('xpath=//*[@id="ttbar-login"]/a[1]')
    page.click('xpath=//*[@id="content"]/div[2]/div[1]/div/div[3]/a')

    # 输入
    page.type('xpath=//*[@id="loginname"]', "188888888")
    page.type('xpath=//*[@id="nloginpwd"]', "1111")

    time.sleep(1)
    # 登录
    page.click('xpath=//*[@id="loginsubmit"]')

    time.sleep(2)

    for i in range(10):
        # 按照元素截图
        # 背景图片
        bg_pic = page.query_selector(
            'xpath=//*[@id="JDJRV-wrap-loginsubmit"]/div/div/div/div[1]/div[2]/div[1]/img'
        ).get_attribute("src")
        to_pic("bg.png", bg_pic)

        gap_pic = page.query_selector(
            'xpath=//*[@id="JDJRV-wrap-loginsubmit"]/div/div/div/div[1]/div[2]/div[2]/img'
        ).get_attribute("src")
        to_pic("gp.png", gap_pic)

        # 滑块图片
        distance = detect_displacement("gp.png", "bg.png")
        print(distance)
        
        # 移动滑块
        # 首先咱们的找到要移动的东西吧
        s = page.wait_for_selector('//*[@id="JDJRV-wrap-loginsubmit"]/div/div/div/div[2]/div[3]', strict=True)
        # 找到这个元素再当前页面的坐标（这个会返回一个字典里边四个数字）
        box = s.bounding_box()
        # 移动鼠标到上边元素的中心（上边四个参数用途来了）
        page.mouse.move(box["x"] + box["width"] / 2, box["y"] + box["height"] / 2)
        # 按下鼠标（这个不多说）
        page.mouse.down()

        page.mouse.move(box["x"] + distance + random.uniform(30, 33), box['y'], steps=30)
        page.mouse.move(box["x"] + distance + 27, box['y'], steps=30)
        
        # 移动结束鼠标抬起
        page.mouse.up()
        time.sleep(3)
    time.sleep(60)
    browser.close()