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

Question

我一直在尝试使用 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();
})();

Answer 1

好消息！看起来这是大约一天前新添加的！

查看源代码/测试实现

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

Answer 2

我发现如果您添加{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();
})();