When applying page.mouse() operations in the canvas element, the strokes are not being generated

59 Views Asked by At

In the latest version of Playwright (1.42), when the browser is set to mobile mode, and I simulate signature functionality on a canvas element by pressing the left mouse button and moving the mouse, no strokes are being generated on the canvas. The canvas board on the website requires being in mobile mode to draw properly.

The code is as follows:

from playwright.sync_api import sync_playwright

with sync_playwright() as playwright:
    iphone = playwright.devices["iPhone 12 Pro"]
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context(**iphone)
    context.grant_permissions(['camera', 'microphone'])
    page = context.new_page()
    page.goto(
"https://yc-h5-test15.hrfax.cn/ccip/sign/#/?query=eyJ3YXRlck5vIjoiMTc2NTQxMDQ0NDM5Njk5NDU2MCIsInNpZ25Ub2tlbiI6ImJlYXJlciBleUpoYkdjaU9pSlNVekkxTmlJc0luUjVjQ0k2SWtwWFZDSjkuZXlKd2FHOXVaU0k2Ym5Wc2JDd2lkWE5sY2w5dVlXMWxJam9pTVRnek1EQXdNREF3TURFaUxDSnlaWE5sZEZCaGMzTlhiM0prSWpwbVlXeHpaU3dpYzJOdmNHVWlPbHNpWVd4c0lsMHNJbk5wYm1kc1pVeHZaMmx1SWpwdWRXeHNMQ0psZUhBaU9qRTNNVEF3TWpreE1UTXNJblI1Y0dVaU9uc2lkbUZzZFdVaU9pSnViMjVsWDNWelpYSWlMQ0owWlhoMElqb2k2WjJlNTdPNzU3dWY1NVNvNW9pM0lpd2ljbTlzWlZSNWNHVWlPaUlpTENKaWRYTnBibVZ6YzFSNWNHVWlPaUlpZlN3aWRYTmxja2xrSWpveE9ETXdNREF3TURBd01Td2lhblJwSWpvaWRDMTFUM1pyT0RablVGZEliWG96TFZSWlZsOHlVemxqUWt4Vklpd2lkWE5sY2tOdlpHVWlPbTUxYkd3c0ltTnNhV1Z1ZEY5cFpDSTZJbU5qYVhBdFpuSnZiblJsYm1RaUxDSjFjMlZ5Ym1GdFpTSTZJakU0TXpBd01EQXdNREF4SW4wLldnTlFKeVJ1dWRBeXRyOUtFSnBxeEJfelpiay1nRVlnTFgyXzU1ZFQxWldCSmw5V3d6RjFyYXNVQnFxcjU3ZmRKUmpneHdWQTZRcEhqTjNoXzlJczBUdUQydU5fMlhHMDA1a3VQblQySDI0WXdSWHhtcm1CczktUmd0dnZ2cHdaQWthcXN1MXljWVo3Ri16djNIUVRUcU1majIzLWxXU3BGZEJWR05iSGZFTEx4VkhEVlFoR0ZsZFpEczlqdGhKVEszNElKSURvblFYUWNWbmFqMkxXLXR1OGRFTEt1TmxnRk9JOVlGR2tORWFjOFZ4aHliU0Z2UXBrYkwxTHBKX3VyREVMR2ttcXNjUmhFblN0YlZFWGxncFdYaEJVSDhBenpfejRyUlZvTlppTFF4aDh4NmdLYklPRGlTRkRIeHRrNjRQNXpXU3d2QzloMmROX0l1SmVrdyIsImJhY2tVcmwiOiJodHRwczovL3ljLWg1LXRlc3QxNS5ocmZheC5jbi9jY2lwLyMvcGFnZXMvaW5kZXgvaW5kZXg%2FdXVpZD0wZjI0NjQ4ZS01MTkyLTQ3YTEtODAzZi02NWE5ODEwZjIxMDQiLCJzdWNjZXNzVXJsIjoiaHR0cHM6Ly95Yy1oNS10ZXN0MTUuaHJmYXguY24vY2NpcC8jL3BhZ2VzL3NlbGZBcHBseS9yZXN1bHQvaW5kZXg%2FcmVzdWx0PXRydWUmc291cmNlPXNpZ25hdHVyZSIsImZhaWxlZFVybCI6Imh0dHBzOi8veWMtaDUtdGVzdDE1LmhyZmF4LmNuL2NjaXAvIy9wYWdlcy9teU9yZGVyUGFnZS9pbmRleD9mbGFnPWhpc3RvcnlPcmRlciZmcm9tPXNpZ24ifQ%3D%3D")
    page.locator("//uni-view[@Class='btns-box']").click()
    page.wait_for_timeout(3000)
    page.locator("//uni-button").click()
    canvas = page.locator("#canvas")
    canvas_box = canvas.bounding_box()
    center_x = canvas_box['x'] + canvas_box['width'] / 2
    center_y = canvas_box['y'] + canvas_box['height'] / 2
    page.mouse.move(center_x, center_y)
    page.mouse.down(button="left")
    page.mouse.move(center_x, center_y + 100)
    page.mouse.up()
    page.wait_for_timeout(100000)

After running the code, there is no stroke appearing on the canvas board in the web page.

The expectation is that when the web page is set to mobile mode, it should be possible to simulate signature actions by smoothly moving the mouse on the canvas board and have the strokes displayed correctly.

0

There are 0 best solutions below