How can I find pseudo element using Playwright?

Question

In my webpage I have some pseudo elements.

For example:

How can I find the ::after element using Playwright?

Answer 1

You can't get the pseudo-element because the browser doesn't expose it. But you can get the CSS properties using JavaScript.

const someCSSPropertyValue = await page.locator('<selector>').first()
  .evaluate(el =>  window.getComputedStyle(el, ':after').someCSSProperty);

I bet that will be helpful if you need to test that some :after was applied.