我如何与谷歌地图或Playwright的OpenStreetMap等地图交互

Question

我一直在尝试使用Playwright与谷歌地图或OpenStreetMap等网站的地图组件进行交互。我已经尝试过使用browser.mouse.move((、browser.mause.up((和browser.mmouse.down((的组合，并将文字作为参数。当我运行它时，它似乎根本没有对地图做任何事情。

有没有办法和Playwright一起移动地图？

我创建了一个GitHub repo，这样它就可以很容易地复制。我还将把代码写在下面。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}添加到move命令中，那么它将按预期工作。我想一些关于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();
})();

Answer 3

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

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