I've been attempting to use Playwright to interact with the map ponent of sites like Google Maps or OpenStreetMaps. I've tried using the bination 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.

const { chromium } = require("playwright");

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  //await page.goto(";);
  await page.goto("/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();
})();

I've been attempting to use Playwright to interact with the map ponent of sites like Google Maps or OpenStreetMaps. I've tried using the bination 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./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./maps");
  await page.goto("https://www.openstreetmap/#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();
})();

• javascript
• playwright

• I have tried the same thing and can not get it to work. Very frustrating. – Allen Commented Jun 4, 2021 at 11:09

3 Answers 3

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 mand 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./maps");
   await page.goto("https://www.openstreetmap/#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./maps");
  await page.goto("https://www.openstreetmap/#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();
})();