Как получить локатор для селектора CSS ::after?

Question

У меня есть следующий элемент (вырезан для краткости):

      <div id="searchButton">
    <div>
        <div>
            "Search"
            ::after
        </div>
    </div>
</div>

Что отрисовывает этот элемент:

Я знаю, что хочу щелкнуть стрелку раскрывающегося списка.

Как написать селектор для этого?

Answer 1

В зависимости от вашего CSS вы можете попробовать это:

      const element = await page.locator('div:has-text("Search")')
const arrow = await element.evaluate((e1) => {     
       return window.getComputedStyle(e1,':after').top
    })

Это должно возвращать позицию, а затем использовать щелчок мыши по координатам, но возможно, что это вернется autoи в этом случае попытайтесь найти свойство, которое Вы могли бы использовать вместо .top