[BUG] <area> links inside image maps can't be clicked

[twbryan]

Context:

• Playwright Version: 1.24.2
• Operating System: Mac
• Node.js version: 16.14.2
• Browser: Chromium

Code Snippet

Help us help you! Put down a short code snippet that illustrates your bug and that we can run and debug locally. For example:

const { chromium } = require("playwright");
(async () => {
  const browser = await chromium.launch({
    headless: true,
  });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto("https://thirsty-kowalevski-ab6f40.netlify.app/imagemap/");

  await page.waitForLoadState();

  let areas = await page.locator("area");

  try {
    await areas.first().click({ timeout: 1000 });
  } catch (e) {
    console.log(e);
  }

  await context.close();
  await browser.close();
})();

Describe the bug

any attempt to click the area links using either elementHandles or locators fails with a timeout. When force:true is specified, it fails with an "element is outside of the viewport" error.

locator.click: Timeout 1000ms exceeded.
=========================== logs ===========================
waiting for selector "area >> nth=0"
  selector resolved to hidden <area target="" shape="rect" alt="region 1" href="page…/>
attempting click action
  waiting for element to be visible, enabled and stable
    element is not visible - waiting...
============================================================
    at /private/tmp/foo/test.js:17:25 {
  name: 'TimeoutError'
}

or

locator.click: Element is outside of the viewport
=========================== logs ===========================
waiting for selector "area >> nth=0"
  selector resolved to hidden <area target="" shape="rect" alt="region 1" href="page…/>
attempting click action
  waiting for element to be visible, enabled and stable
    forcing action
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
============================================================
    at /private/tmp/foo/test.js:15:25 {
  name: 'Error'
}

[rwoll]

Thanks for the report and the repro. Labeled to collect upvotes and other users encountering the issue!

As a workaround, you can try using locator.getAttribute(name[, options]) to get the coords, do some math, and then dispatch raw mouse events using page.mouse.click.

[rwoll]

Edited above with some more pointers for suggested workarounds.

[twbryan]

thanks for the workaround!

[pavelfeldman]

Closing as per above, please feel free to open a new issue if this does not cover your use case.