My app uses card certificate authentication. As for now seems like there is no official solution made/suggested by Playwright- according to this GitHub Issue.
I couldn't found any way to workaround it.

Here's a list of things I've tried:

1. looking for Playwright's offered solution - not exist yet.
2. Handle it like a regular alert - not working
3. Provide credentials using browser or context- not working
4. Provide credentials using launchPersistentContext (chromium only)- not working
5. Check if it's inside an iFrame - it's not, looks like this pop-up is on a lower level than the DOM
6. Auth using context.route("**/*") and providing pfx using agentOptions field(workaround somebody suggested in the GitHub Issue) -couldn't figure what I did wrong
7. send keyboard keys using playwright- no help, looks like the pop-up is on a lower level than Playwright regular session can reach- which led me to the next try:
8. Use Playwright's CDPSession in order to use the it's event handler- but after I look into CDP Docs seems like they expose the basic http auth event, couldn't find anything about SSL certificate event.

What I haven't tried yet:

1. Use an external pixel recognition tool- too much time to learn each tool, really heavy, and from what I saw most of them require Java or Python

A great workaround for Windows & Chromium users - using Windows Registry AutoSelectCertificateForUrls Chromium Policy

I’m demonstrating on Chromium/Chrome, but it’s the same for every other Chromium-based browser. (you just need to figure the exact key path)

For the Playwright Chromium browser you need to create this registry key: HKEY_CURRENT_USER\\SOFTWARE\\Policies\\Chromium\\AutoSelectCertificateForUrls

Note: According to google-docs If you use the PC Chrome (i.e. channel: "chrome") you should use this path instead: HKEY_CURRENT_USER\\SOFTWARE\\Policies\\Google\\Chrome\\AutoSelectCertificateForUrls

with this value pattern:

"1"="{\"pattern\":\"<https://www.example.com\>",\"filter\":{\"ISSUER\":{\"CN\":\"certificate issuer name\", \"L\": \"certificate issuer location\", \"O\": \"certificate issuer org\", \"OU\": \"certificate issuer org unit\"}, \"SUBJECT\":{\"CN\":\"certificate subject name\", \"L\": \"certificate subject location\", \"O\": \"certificate subject org\", \"OU\": \"certificate subject org unit\"}}}"

Code Example

In this example I'm executing the CMD reg add command using node-js exec function:

const key = "HKEY_CURRENT_USER\\SOFTWARE\\Policies\\Chromium\\AutoSelectCertificateForUrls";
const value = "1";
const data = `{\\"pattern\\":\\"${url}\\",\\"filter\\":{\\"SUBJECT\\":{\\"CN\\":\\"${certName}\\"}}}`;

exec(`reg add "${key}" /v "${value}" /d "${data}"`);

Now, navigate to your site and the certificate pop-up shouldn't pop-up.