CODEWITHSUNDEEP
playwright
CForsh75
CForsh75

Reputation: 33

Playwright - Element not Clickable

I'm trying to click on an icon that appears on the page however despite trying everything I can think of I keep getting the following error:

waiting for selector "[aria-label="Comment"]"
  selector resolved to 2 elements. Proceeding with the first one.
  selector resolved to hidden <svg role="img" width="24" height="24" fill="#8e8e8e"…>…</svg>
attempting click action
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  element is not visible
retrying click action, attempt #1
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  element is not visible
retrying click action, attempt #2
  waiting 20ms
  waiting for element to be visible, enabled and stable

etc etc etc.

So it looks like the element is hidden although I can't see any sign of that in the html....attached.

Any help greatly appreciated.

enter image description here

Upvotes: 3

Views: 11983

Answers (3)

Vishal Aggarwal
Vishal Aggarwal

Reputation: 4178

Use nth method with caution.

WHY? Often times, the page might change, and the locator will point to a completely different element from the one you expected. Instead, try to come up with a unique locator that will pass the strictness criteria.

Instead use Chained Filters

When you have elements with various similarities, you can use the locator.filter() method to select the right one. You can also chain multiple filters to narrow down the selection.

For example to take a screenshot of the row with "Mary" and "Say goodbye":

const rowLocator = page.getByRole('listitem');

await rowLocator
    .filter({ hasText: 'Mary' })
    .filter({ has: page.getByRole('button', { name: 'Say goodbye' }) })
    .screenshot({ path: 'screenshot.png' });

Upvotes: 0

Yevhen Laichenkov
Yevhen Laichenkov

Reputation: 8672

You can use nth locator's method to get second element:

page.locator('svg[aria-label="Comment"]').nth(1);

or shorter version:

page.locator('svg[aria-label="Comment"] >> nth=1');

Keep in mind that's zero-based numbering.

Upvotes: 1

Maulik
Maulik

Reputation: 75

shorter version

page.locator('svg[aria-label="Comment"] >> nth=1').click();

Upvotes: 3

Related Questions