I've been attempting to use Playwright to interact with the map component of sites like Google Maps or OpenStreetMaps. I've tried using the combination of browser.mouse.move(), browser.mouse.up(), and browser.mouse.down() with literals as the parameters. When I run it, it doesn't seem to be doing anything with the map at all.
Is there a way to move the map around with Playwright?
I've created a GitHub repo so that it can be reproduced easily. I will also have the code down below. https://github.com/vincent-woodward/Playwright-Map-Interaction
const { chromium } = require("playwright");
(async () => {
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();
//await page.goto("https://www.google.com/maps");
await page.goto("https://www.openstreetmap.org/#map=4/38.01/-95.84");
await page.mouse.move(600, 300);
await page.mouse.down();
await page.mouse.move(1200, 450);
await page.mouse.up();
browser.close();
})();
Great news! It looks like this was freshly added about a day ago!
View source/test implementation
After looking at the PR, your code should work:
await page.mouse.move(600, 300);
await page.mouse.down();
await page.mouse.move(1200, 450); // NOTE: make sure your viewport is big enough for this
await page.mouse.up();
I found that if you add {steps: 5}
to the move command then it will work as expected. I think something about the moving map interfaces of openstreet maps and also leaflet expect there to be a sequence of mouse move events.
const { chromium } = require("playwright");
(async () => {
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();
//await page.goto("https://www.google.com/maps");
await page.goto("https://www.openstreetmap.org/#map=4/38.01/-95.84");
await page.mouse.move(600, 300);
await page.mouse.down();
await page.mouse.move(1200, 450, {steps: 5}); // <-- Change here
await page.mouse.up();
browser.close();
})();
This works for me on a laptop. You can also remove the loops for the delay
const { chromium } = require("playwright");
(async () => {
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();
//await page.goto("https://www.google.com/maps");
await page.goto("https://www.openstreetmap.org/#map=4/38.01/-95.84");
await page.click('#map',{force:true});//here the trick
await page.mouse.down();
await page.mouse.move(890, 80);
for(var i = 0;i<1000000000;i++){}
await page.mouse.move(400, 180);
for(var i = 0;i<1000000000;i++){}
await page.mouse.move(700, 300);
await page.mouse.up();
//browser.close();
})();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With