How to get the locator for an CSS ::after selector?

Question

I have the following element (stripped for brevitiy):

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

Which renders to this element:

I now want to click the dropdown arrow.

How to write a selector for this?

Do you have a demo page of that component? So we can try a few examples. — hardkoded, Dec 15 '21 at 12:58

score 0 · Answer 1 · answered Dec 17 '21 at 08:28

0

Depending on Your CSS You can try this:

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

This should return position and then use mouse click on coordinates, but its possible that this will return auto and in that case try to find property that You could use instead of .top

answered Dec 17 '21 at 08:28

senaid

534
2
8

I am looking for a Java solution – Christian Baumann Dec 17 '21 at 13:25
Well according to official documentation: https://playwright.dev/java/docs/next/api/class-locator#locator-evaluate This should work with few changes – senaid Dec 17 '21 at 20:05
Ouch, my bad, sorry! Will check Monday, when back at work! – Christian Baumann Dec 18 '21 at 16:56
Needed to remove the "return", otherwise results in a syntax error. It than return "0px". Atm don't see how this is helpful. – Christian Baumann Dec 20 '21 at 07:21
Try to replace .top with something that You could use. This depends on your CSS. Also another approach could be to use bounding box of search element: https://playwright.dev/docs/api/class-locator/#locator-bounding-box – senaid Dec 20 '21 at 08:35

How to get the locator for an CSS ::after selector?

1 Answers1