如何使用 Playwright 与 Google Maps 或 OpenStreetMaps 等地图进行交互？答案

【问题标题】：How do I interact with a map like Google Maps or OpenStreetMaps with Playwright?如何使用 Playwright 与 Google Maps 或 OpenStreetMaps 等地图进行交互？
【发布时间】：2021-08-22 01:33:15
【问题描述】：

我一直在尝试使用 Playwright 与 Google Maps 或 OpenStreetMaps 等网站的地图组件进行交互。我尝试过结合使用 browser.mouse.move()、browser.mouse.up() 和 browser.mouse.down() 以及文字作为参数。当我运行它时，它似乎根本没有对地图做任何事情。

有没有办法用 Playwright 移动地图？

我创建了一个 GitHub 存储库，以便可以轻松地复制它。我还将在下面提供代码。 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();
})();

【问题讨论】：

我已经尝试过同样的事情，但无法让它工作。非常令人沮丧。

标签： javascript playwright

【解决方案1】：

好消息！看起来这是freshly added about a day ago!

View source/test implementation

查看 PR 后，您的代码应该可以工作：

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

【讨论】：

我仍然遇到一些麻烦。我没有看到这将如何用于地图。例如，在 Google 地图中，您可以在第一次使用悬停时选择地图，但不会有一个选择器可以在第二次使用悬停时用作目标。我可能遗漏了一些东西，但是我将如何使用这些方法拖动地图呢？
为清晰起见进行了更新，并添加了有关视口大小的说明。
这对我不起作用。请参阅下面关于最终正常工作的答案。
感谢@Allen，我在图像拖动界面上进行了测试...带有动画拖动和异步资源加载的地图可能需要 {steps: 5} 位。

【解决方案2】：

这适用于我的笔记本电脑。您还可以删除延迟的循环

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

【讨论】：

【解决方案3】：

我发现如果将{steps: 5} 添加到移动命令中，它将按预期工作。我想一些关于openstreet地图的移动地图界面的事情，并且传单期望会有一系列的鼠标移动事件。

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

【讨论】：