CODEWITHSUNDEEP
javascriptplaywright
Vincent Woodward
Vincent Woodward

Reputation: 93

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();
})();

Upvotes: 9

Views: 4579

Answers (3)

Allen
Allen

Reputation: 3374

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();
})();

Upvotes: 4

FER31
FER31

Reputation: 76

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();
})();

Upvotes: 1

Dan Levy
Dan Levy

Reputation: 1263

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();

Upvotes: 6

Related Questions