如何在Playwright JS/TS中实现基于证书的认证自动化测试？

1. 配置浏览器启动参数 #

针对不同浏览器，Playwright提供了不同的证书认证配置方式，核心是让浏览器识别系统已安装证书或指定证书文件：

Chromium/Chrome #

通过启动参数启用证书认证，若需自动匹配目标站点的证书（避免手动选择弹窗），可添加--auto-select-client-certificate-for-urls参数指定匹配的URL规则：

import { chromium } from '@playwright/test';

const browser = await chromium.launch({
  args: [
    '--use-client-certificate',
    '--auto-select-client-certificate-for-urls=https://your-auth-domain.com/*'
  ]
});

Firefox #

通过配置浏览器偏好设置，设置证书自动选择规则：

import { firefox } from '@playwright/test';

const browser = await firefox.launch({
  firefoxUserPrefs: {
    'security.default_personal_cert': 'Select Automatically',
    'security.autodeploy.enabled': true
  }
});

WebKit #

直接在启动选项中指定证书文件路径（若使用系统已安装证书，可省略路径配置，浏览器会自动读取系统证书库）：

import { webkit } from '@playwright/test';

const browser = await webkit.launch({
  clientCertificate: {
    pfxPath: '/path/to/your/certificate.p12', // 系统已安装证书可删除此配置
    passphrase: 'cert-password' // 证书有密码时添加
  }
});

2. 手动处理证书选择弹窗（自动选择失效时） #

当系统存在多份证书、自动匹配规则不生效时，可通过定位弹窗元素模拟选择操作（注意不同浏览器的弹窗元素结构不同，需实际调试定位）：

// 等待证书选择弹窗加载完成，定位目标证书项并点击
await page.waitForSelector('div[role="listitem"]:has-text("目标证书名称")');
await page.click('div[role="listitem"]:has-text("目标证书名称")');

3. 验证认证结果 #

完成证书操作后，通过页面跳转或指定元素判断是否认证成功：

// 等待跳转到认证后的页面
await page.waitForURL('https://your-auth-domain.com/dashboard');
// 验证登录成功标识
const isAuthenticated = await page.locator('h1:has-text("欢迎登录")').isVisible();
console.log('认证状态:', isAuthenticated);

关键注意事项 #

• 确保测试环境已正确安装目标证书，且证书具备访问目标站点的权限。
• 无头模式下部分浏览器不会弹出证书选择框，优先使用自动选择参数配置。
• 带密码的证书需在对应浏览器配置中传入密码参数，避免认证中断。

内容的提问来源于stack exchange，提问作者user26886815