[BUG] clientCertificates troubleshooting

[mxschmitt]

          > Update: This issue should be fixed in the latest [@canary](https://playwright.dev/docs/canary-releases). See #31906 for further discussions.

Hi @mxschmitt I have tried this with the beta release and testOptions but it doesn't works as expected, I am still getting the pop-up asking to select the certificate.

here's my config:

package.json:

test file:

Originally posted by @amitAutoS in #1799 (comment)

[mxschmitt]

@amitAutoS posting it here, so that we don't send notifications to the others. I see you are on Windows, are you using Google Chrome by any chance?

Do you mind providing us your full playwright.config.ts?

[amitAutoS]

@amitAutoS posting it here, so that we don't send notifications to the others. I see you are on Windows, are you using Google Chrome by any chance?

Do you mind providing us your full playwright.config.ts?

sure, here it is:

import { defineConfig, devices } from "@playwright/test";
import { resolve } from "path";
import { readFileSync } from "fs";

/**

• See https://playwright.dev/docs/test-configuration.
  /
  // const pfxPaths = resolve(__dirname, "./certs/DavidJonesTest_G5.pfx");
  // console.log("pfxPaths: " + pfxPaths);
  export default defineConfig({
  testDir: "./e2e",
  / Run tests in files in parallel /
  fullyParallel: true,
  / Fail the build on CI if you accidentally left test.only in the source code. /
  forbidOnly: !!process.env.CI,
  / Retry on CI only /
  retries: process.env.CI ? 2 : 0,
  / Opt out of parallel tests on CI. /
  workers: process.env.CI ? 1 : undefined,
  / Reporter to use. See https://playwright.dev/docs/test-reporters /
  reporter: [["list"], ["html", { open: "never" }]],
  / Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. /
  use: {
  / Base URL to use in actions like await page.goto('/'). */
  // baseURL: 'http://127.0.0.1:3000',

  /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
  trace: "on-first-retry",
  headless: false,
  ignoreHTTPSErrors: true,
  clientCertificates: [
  {
  origin: "https://myurl.com/",
  pfxPath: "C:/Users/myusername/Downloads/client_cert/Test_G5.pfx",
  passphrase: "passwordhere",
  },
  ],
  },

/* Configure projects for major browsers /
projects: [
// {
// name: "chromium",
// use: {
// ...devices["Desktop Chrome"],
// },
// },
// {
// name: "firefox",
// use: {
// ...devices["Desktop Firefox"],
// },
// },
// {
// name: "webkit",
// use: { ...devices["Desktop Safari"] },
// },
/ Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
{
name: "Google Chrome",
use: { ...devices["Desktop Chrome"], channel: "chrome" },
},
],

/* Run your local dev server before starting the tests */
// webServer: {
// command: 'npm run start',
// url: 'http://127.0.0.1:3000',
// reuseExistingServer: !process.env.CI,
// },
});

[mxschmitt]

I see! Google chrome has a bug (which is already fixed on beta). In order to workaround it, you need to specify a "dummy proxy" on global level. e.g.

    launchOptions: {
      proxy: {
        server: 'per-context'
      }
    }

You should be able to remove this workaround in when chrome releases version 128 on Tue, Aug 20, 2024.

[amitAutoS]

I'll try the chrome workaround but I tried on Firefox browser. I do not see the cert popup anymore with the settings I shared above but the page keeps on loading but fail to load the URL I am trying. ANd just dies there.
Shouldn't it be working with the cert options set in config file?

[amitAutoS]

And Edge browser is also showing same popup still?

[mxschmitt]

Yes Edge Stable and Chrome Stable have both the same bug. Could you try e.g. just chromium -> no channel?

Firefox is hanging which is unexpected!

[amitAutoS]

Tried Chromium with no channel. Same behavior as Firefox. Tried to load the page(I dont see the cert popup) but couldn't load and dies.

[mxschmitt]

Could you try to set the DEBUG=pw:client-certificates environment variable and rerun it? If this doesn't yield anything helpful, we need to add more debug logs to troubleshoot this issue.

[amitAutoS]

getting this error:

[mxschmitt]

So no additional output when you set the envs? Do you mind pinging me on Discord? Happy to investigate further there.

[ArmandGrechScerri]

I am also encountering the exact same above issue. Has a fix/ workaround been found?

[mxschmitt]

I am also encountering the exact same above issue. Has a fix/ workaround been found?

Please provide us your config file, this would help us a ton in order to triage this issue further.

[ArmandGrechScerri]

We use a bit of a custom launcher. I can also ping you on discord for more data and info. Here is the config I am using for this specific issue:

import { cpus } from "os";

import type { PlaywrightTestConfig } from "@playwright/test";
import { loadProjects } from "e2e/src/services/playwright.service";

// Generate unique output folder to store old local test run reports
const currentDateTime = new Date().toISOString().replace(/[:.]/g, "_").slice(0, -1);
const localOutputFolder = `../test-reports/obgaj-end-to-end-${currentDateTime}`;

const ciOutputFolder = `../test-reports`;

/**
 * See https://playwright.dev/docs/test-configuration.
 */
const config: PlaywrightTestConfig = {
	testDir: `../../../apps/${process.env.PWC_DOMAIN ?? "adaptive"}/end-to-end`,
	/* Maximum time one test can run for. */
	timeout: 180_000,
	expect: {
		/**
		 * Maximum time expect() should wait for the condition to be met.
		 * For example in `await expect(locator).toHaveText();`
		 */
		timeout: 20_000,
	},
	/* Run tests in files in parallel */
	fullyParallel: true,
	/* Retry on CI only */
	retries: 1,
	/* Opt out of parallel tests on CI. */
	workers: process.env.CI ? 3 : Math.floor(cpus().length * 0.35),
	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
	reporter: process.env.CI
		? [["blob", { outputDir: ciOutputFolder }]]
		: [["list"], ["html", { outputFolder: localOutputFolder }], ["../src/custom-reporters/pass-rate-reporter.ts"]],
	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
	use: {
		headless: true,
		viewport: { width: 1280, height: 720 },
		ignoreHTTPSErrors: true,
		video: process.env.CI ? "off" : "retain-on-failure",
		trace: process.env.CI ? "off" : "on-first-retry",
		screenshot: "only-on-failure",
		navigationTimeout: 30_000,
		testIdAttribute: "data-test-id",
		actionTimeout: 30_000,
		clientCertificates: [
			{
				origin: "*ORIGIN URL*",
				certPath: "../certs/cert.pem",
				keyPath: "../certs/key.pem",
				passphrase: "*PASSPHRASE*",
			},
		],
	},
	testMatch: /.*e2e\.(js|ts|mjs)/,
	projects: loadProjects(),
};

export default config;

[mxschmitt]

Feel free to ping me on Discord. loadProjects would be the interesting piece.