如何在WebKit/Playwright中实现跨域iframe访问（替代Cypress的chromeWebSecurity:false）

Cypress里的chromeWebSecurity:false是通过关闭浏览器同源策略实现跨域iframe访问的，Playwright针对WebKit和Firefox有对应的配置方案，直接上干货：

WebKit（Safari）配置 #

方法一：完全禁用同源策略 #

启动WebKit时添加特定启动参数，代码示例：

const { webkit } = require('playwright');

(async () => {
  const browser = await webkit.launch({
    args: ['--disable-web-security', '--user-data-dir=/tmp/test-profile']
  });
  const context = await browser.newContext({
    ignoreHTTPSErrors: true // 遇到HTTPS证书问题时启用
  });
  const page = await context.newPage();
  // 编写你的测试逻辑
})();

方法二：直接定位跨域iframe（更推荐） #

无需关闭同源策略，Playwright的frameLocator可直接定位Stripe这类第三方iframe并操作元素：

const stripeFrame = page.frameLocator('iframe[src*="stripe.com"]');
await stripeFrame.locator('input[name="cardnumber"]').fill('4242 4242 4242 4242');

Firefox配置 #

Firefox需要同时调整启动参数和用户偏好设置，代码示例：

const { firefox } = require('playwright');

(async () => {
  const browser = await firefox.launch({
    args: ['--disable-web-security', '--disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure']
  });
  const context = await browser.newContext({
    ignoreHTTPSErrors: true,
    firefoxUserPrefs: {
      'privacy.file_unique_origin': false,
      'security.csp.enable': false // 可选，关闭CSP限制
    }
  });
  const page = await context.newPage();
  // 编写你的测试逻辑
})();

重要提醒 #

• 这些配置仅适用于测试环境，生产环境使用会引发严重安全风险，绝对禁用。
• 优先使用frameLocator定位跨域iframe，比直接关闭同源策略更安全，也符合测试最佳实践。
• 如果使用Playwright Test框架，可将配置写入playwright.config.js统一管理：

module.exports = {
  use: {
    browserName: 'webkit',
    launchOptions: {
      args: ['--disable-web-security']
    }
  }
};

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