This fails to click the element:

await page.click(
  "#trigger > ytcp-dropdown-trigger > div > div.right-container.style-scope.ytcp-dropdown-trigger > tp-yt-iron-icon"
);

However, this succeeds, and the expected drop down menu is revealed.

await page.evaluate(() => {
  let el: HTMLElement = document.querySelector(
    "#trigger > ytcp-dropdown-trigger > div > div.right-container.style-scope.ytcp-dropdown-trigger > tp-yt-iron-icon"
  );
  el.click();
});

I would prefer the first one to work, and since they are both using the same selector I am not sure why it is not working.

Youtube has alot of JS on this page, and I am thinking that this unexpected behavior is site-specific. Even if I use page.evaluate to click the dropdown arrow, and then wait for another expected element to be in the DOM, and then click that element, the click of the drop down menu item is not registering. I tried with both page.click(...) and page.evaluate(...) for the drop down menu item.