Puppeteer元素点击坐标不稳定

Question

这真是让我疯狂。以下是规范中的一段摘录...

await page.goto('localhost:5000/settings?disable-sw-cache', {
  waitUntil: 'networkidle2'
});

// doesn't seem to help w/ stopping flakiness
await page.waitFor(2000); 

page.click("[data-puppeteer='reload-configuration-link']");
await page.waitForSelector('.mdc-snackbar.mdc-snackbar--active');

const message = await page.evaluate(
  selector => document.querySelector(selector).textContent,
  '.mdc-snackbar.mdc-snackbar--active'
);

expect(message).to.contain('Successfully reloaded device configuration');

这个规范大约有6次中的4次是通过的。在2次失败时，调用page.click点击了错误的元素。我在点击事件中输出了坐标，它们在30,80，完全错误。

当我记录应该被点击的元素的坐标时...

await page.waitFor(2000); 

// log the current location of the element that is about to be clicked!
const coordinates = await page.evaluate(selector => {
  const element = document.querySelector(selector);
  const { x, y } = element.getBoundingClientRect();
  return [x, y];
}, "[data-puppeteer='reload-configuration-link']");

console.log(coordinates)

page.click("[data-puppeteer='reload-configuration-link']");

我得到的是64,194，这是正确的，但在接下来的一行中，page.click 有时会因某种原因点击 30,80。

你有任何想法为什么这些坐标有2次错误的情况吗？

---

所以我使用 env DEBUG="puppeteer:mouse,puppeteer:keyboard" 运行我的规范，以显示单击调试信息，当规范单击错误元素时，调试器输出正确的坐标！ 我快疯了！

- Roy Kolak

Answer 1

啊！从视口中删除isMobile配置属性可以解决此问题！

page.setViewport({
  width: 411,
  height: 731,
  deviceScaleFactor: 2.6,
  isMobile: true, // <---------- REMOVE!
  hasTouch: true,
  isLandscape: false
});

我打开了这个错误报告：https://github.com/GoogleChrome/puppeteer/issues/2465。

- Roy Kolak