Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I interact with a map like Google Maps or OpenStreetMaps with Playwright?

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();
})();
like image 902
Vincent Woodward Avatar asked Jun 03 '21 23:06

Vincent Woodward


3 Answers

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();
like image 71
Dan Levy Avatar answered Oct 24 '22 01:10

Dan Levy


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();
})();
like image 1
Allen Avatar answered Oct 24 '22 01:10

Allen


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();
})();
like image 1
FER31 Avatar answered Oct 24 '22 01:10

FER31