TypeScript React项目Playwright测试：Linux WebKit中PublicKeyCredential未定义

开发者阿泽

2026-6-27

解决Linux下Playwright WebKit中PublicKeyCredential未定义的问题

1. 配置Playwright WebKit启动参数

Linux平台的WebKit（WebKitGTK）默认未启用WebAuthn相关特性，需在启动浏览器时手动开启对应实验特性。在Playwright测试配置中给WebKit添加启动参数：

import { test, expect } from '@playwright/test';

test.use({
  browserName: 'webkit',
  launchOptions: {
    args: [
      '--enable-features=WebAuthentication',
      '--enable-experimental-web-platform-features'
    ]
  }
});

这些参数会强制启用WebAuthn相关特性，解决PublicKeyCredential未定义的报错。

2. 安全检查PublicKeyCredential可用性

无论运行环境如何，都应先做兼容性检查，避免直接调用报错。以下是两种可靠的检查方式：

方式一：基础存在性验证

async function isWebAuthnSupported(): Promise<boolean> {
  if (typeof window === 'undefined' || !('PublicKeyCredential' in window)) {
    return false;
  }
  try {
    return await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();
  } catch (err) {
    return false;
  }
}

方式二：兼容旧环境的严谨检测

考虑到极少数旧浏览器可能带前缀的情况，可扩展检查逻辑：

async function checkWebAuthnSupport(): Promise<boolean> {
  if (typeof window === 'undefined') return false;
  
  const pubKeyCred = window.PublicKeyCredential 
    || (window as any).webkitPublicKeyCredential 
    || (window as any).mozPublicKeyCredential;
  
  if (!pubKeyCred) return false;
  
  try {
    if (typeof pubKeyCred.isUserVerifyingPlatformAuthenticatorAvailable === 'function') {
      return await pubKeyCred.isUserVerifyingPlatformAuthenticatorAvailable();
    }
    return true;
  } catch (err) {
    return false;
  }
}