javascript - How do I interact with a map like Google Maps or OpenStreetMaps with Playwright? - Stack Overflow

admin管理员组

文章数量:1340752

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

Share Improve this question Follow edited Jun 15, 2021 at 2:05 Navneet Bhalodiya 43411 gold badge55 silver badges1414 bronze badges asked Jun 3, 2021 at 23:16 Vincent WoodwardVincent Woodward 9311 silver badge55 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6 +50

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

本文标签： javascriptHow do I interact with a map like Google Maps or OpenStreetMaps with PlaywrightStack Overflow