Puppeteer won't click on div in acceptance test

[Vir-8]

I'm writing an acceptance test for topic management in this PR, and for the mobile view, I am attempting to click on a div that opens a dropdown.

The div is clearly visible and clickable on the screen, but puppeteer won't click on it no matter what. We can manually click on the div perfectly fine to open the dropdown.

See this debugging doc for more info -
https://docs.google.com/document/d/1Hh6b2MOcL8EhvYXRtBFCHE6Sw20TvYKY3MO9YFGJ3MI

[agallop]

Hey @Vir-8,

I believe I know the issue.
There is a second element (...that occurs first within the html) with the same class that is hidden and not clickable.

If you inspect the page (right-click -> Inspect) and press Ctrl-f, you can search for the class and notice that there are two hits.

You would have to explicitly click the second element, or click the one that is clickable.

Hope that helps :)

[agallop]

      await this.page.waitForXPath('(//*[contains(@class, "e2e-test-mobile-save-topic-dropdown")])[2]');
      const [dropdown] = await this.page.$x('(//*[contains(@class, "e2e-test-mobile-save-topic-dropdown")])[2]');
      await dropdown.click();

Can consider using this. Maybe create a generic click function in puppeteer-utils that supports using xpath.

[Vir-8]

The double instances were indeed the issue, thank you so much for helping me out! That never crossed my mind as it was a newly created class with only one instance in the codebase. Thanks again!