如何在Playwright浏览器中禁用拼写检查以通过截图对比测试

以下几种方法可以彻底禁用Playwright浏览器的拼写检查，避免截图对比失败：

1. 给目标输入框单独设置禁用属性 #

进入编辑模式后，直接给文本框添加spellcheck="false"属性，强制关闭该输入框的拼写检查：

// 定位到你的编辑文本框，替换成实际选择器
await page.locator('[data-testid="edit-title-input"]').setAttribute('spellcheck', 'false');

这种方法适合只需要禁用特定输入框拼写检查的场景，不会影响页面其他元素。

2. 启动浏览器时全局禁用拼写检查 #

如果需要所有测试页面都关闭拼写检查，可以在启动浏览器时添加对应参数：

Chromium/Chrome #

通过--disable-spell-checking命令行参数全局禁用：

const browser = await chromium.launch({
  args: ['--disable-spell-checking']
});

Firefox #

通过设置Firefox偏好layout.spellcheckDefault为0来禁用：

const browser = await firefox.launch({
  firefoxUserPrefs: {
    'layout.spellcheckDefault': 0
  }
});

3. 在Playwright Test配置文件中全局配置 #

如果使用Playwright Test框架，可以在playwright.config.ts中全局配置，让所有测试用例自动生效：

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  use: {
    launchOptions: {
      // Chromium配置
      args: ['--disable-spell-checking'],
      // Firefox配置（注释掉Chromium配置后启用）
      // firefoxUserPrefs: {
      //   'layout.spellcheckDefault': 0
      // }
    }
  },
});

补充说明 #

设置de-De locale无效的原因是：浏览器拼写检查的触发不仅依赖语言环境，还受本地是否安装对应语言的拼写词典、浏览器默认拼写检查开关状态影响。本地机器可能未安装德语拼写词典，导致浏览器将德语单词识别为拼写错误，而生产环境的浏览器可能已配置正确的词典或全局禁用了拼写检查。

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