(This is with reference to the answer )

I am facing same issue i.e not able to handle 'Select Certificate' pop up and click on ok button from the pop up with Playwright Version 1.50.0 and latest Chromium version. Here is my code for the reference

    import { test } from '@playwright/test';
    import { defineConfig } from '@playwright/test';
    const path = require('path');
    const fs = require('fs');

    export default defineConfig({
    use: {
        clientCertificates: [{
          origin: 'https://t01:8443/Ter/#/login',
          pfxPath: 'C:/o/tk/cert/t-lp-tre/t-lp-truststore.p12',
          passphrase: 'tore', 
        }],       
      },      
    });

    // Main login function
    async function login(browser, username, password) {
      console.log('Starting login process...');

        const context = await browser.newContext({
        ignoreHTTPSErrors: true, 
      });

      const page = await context.newPage();     
      
      await page.goto("https://t01:8443/Ter/#/login");

      console.log('Navigating to the login page...');     

      console.log('Filling in credentials...');
      await page.fill('input[placeholder="Username"]', username);
      await page.fill('input[placeholder="Password"]', password);
      await page.click('button[type="submit"]');  
      await page.waitForLoadState('load'); 

      console.log(`${username} logged in successfully`);
    }

    test('Run Tests with Parallel Users', async ({ browser }) => {
      const dataPath = 'testdata/testdata_2Usr.json';
      const testData = await fs.promises.readFile(dataPath, 'utf-8');
      const jsonData = JSON.parse(testData);
      
      for (const user of jsonData) {
        const { username, password } = user;
        await login(browser, username, password);
      }
    });

And after using solution provided in the link, I am still not able to handle TLS Client Certificates pop up. I even tried with third party utilities like autoIT but still not able to click on 'ok' on 'select certificate' pop up.

• Can someone please help with how to click Ok on this pop up?

(I am fairly new to Playwright and js so any suggestions are appreciated.)

• Note: The p12 certificate I am using is a valid one. And if we click OK button manually on the pop-up then we can see actual web page.

• Here is the reference image of pop up

(This is with reference to the answer https://stackoverflow/a/78943350/12876441)

I am facing same issue i.e not able to handle 'Select Certificate' pop up and click on ok button from the pop up with Playwright Version 1.50.0 and latest Chromium version. Here is my code for the reference

    import { test } from '@playwright/test';
    import { defineConfig } from '@playwright/test';
    const path = require('path');
    const fs = require('fs');

    export default defineConfig({
    use: {
        clientCertificates: [{
          origin: 'https://t01:8443/Ter/#/login',
          pfxPath: 'C:/o/tk/cert/t-lp-tre/t-lp-truststore.p12',
          passphrase: 'tore', 
        }],       
      },      
    });

    // Main login function
    async function login(browser, username, password) {
      console.log('Starting login process...');

        const context = await browser.newContext({
        ignoreHTTPSErrors: true, 
      });

      const page = await context.newPage();     
      
      await page.goto("https://t01:8443/Ter/#/login");

      console.log('Navigating to the login page...');     

      console.log('Filling in credentials...');
      await page.fill('input[placeholder="Username"]', username);
      await page.fill('input[placeholder="Password"]', password);
      await page.click('button[type="submit"]');  
      await page.waitForLoadState('load'); 

      console.log(`${username} logged in successfully`);
    }

    test('Run Tests with Parallel Users', async ({ browser }) => {
      const dataPath = 'testdata/testdata_2Usr.json';
      const testData = await fs.promises.readFile(dataPath, 'utf-8');
      const jsonData = JSON.parse(testData);
      
      for (const user of jsonData) {
        const { username, password } = user;
        await login(browser, username, password);
      }
    });

And after using solution provided in the link, I am still not able to handle TLS Client Certificates pop up. I even tried with third party utilities like autoIT but still not able to click on 'ok' on 'select certificate' pop up.

• Can someone please help with how to click Ok on this pop up?

(I am fairly new to Playwright and js so any suggestions are appreciated.)

• Note: The p12 certificate I am using is a valid one. And if we click OK button manually on the pop-up then we can see actual web page.

• Here is the reference image of pop up

• javascript
• authentication
• playwright
• smartcard
• pfx

• Playwright is not able to directly handle the native certificate selection prompt. If you really need to interact with that selection prompt (which isn't recommended) then you can: 1)Use a Pre-configured Browser Profile, 2)Use a Third-Party Tool like AutoHotkey and run that before your Playwright script, or 3)Use an External UI Automation Tool like AppleScript, SikuliX, or PyAutoGUI. None of those are good choices. I strongly recommend a programmatic solution by using a client certificate in the Playwright Context. – Anton Commented Feb 4 at 12:27

1 Answer 1

It looks like you've combined the code that meant to be in playwright.config file with the test file itself.

Playwright reads it's configuration file before it start any test, so this code that define the certificate details isn't located within the playwright.config file. therefore playwright would not read it as it's configuration.

In order to make it work, you need to add the pfx configurations to the use section on the existing playwright.config.js file on the root path of your project.

Playwright test-configuration docs