如何为Cypress永久配置Chrome浏览器开发者工具设置

1. 让Cypress使用自定义Chrome用户数据目录 #

Cypress默认启动Chrome时会创建临时用户配置，导致每次设置都无法保存。你需要指定一个固定的用户数据目录，让Chrome记住DevTools的偏好设置。

• 在Cypress配置文件（cypress.config.js或cypress.config.ts）中添加Chrome启动参数：

  module.exports = defineConfig({
    e2e: {
      setupNodeEvents(on, config) {
        on('before:browser:launch', (browser = {}, launchOptions) => {
          if (browser.name === 'chrome') {
            // 替换为你想使用的自定义Chrome配置目录路径
            launchOptions.args.push('--user-data-dir=/your/custom/chrome-profile-path');
            // 可选：指定具体的用户Profile，比如默认的"Profile 1"或自定义名称
            // launchOptions.args.push('--profile-directory=Profile 2');
          }
          return launchOptions;
        });
      },
    },
  });
  

2. 手动配置并保存DevTools设置 #

• 启动Cypress，运行任意一个带界面的Chrome测试。
• 手动将DevTools调整到底部位置，勾选Network和Console标签页的「Preserve log」复选框。
• 直接关闭Chrome和Cypress，这些设置会自动保存到你指定的用户数据目录中。
• 后续再启动Cypress测试时，Chrome会加载这个预配置的用户目录，DevTools的位置和「Preserve log」状态都会保持你之前的设置。

额外注意事项 #

• 确保指定的用户数据目录有读写权限，避免因权限不足导致设置无法保存。
• 如果需要团队共享配置，可以将该用户数据目录纳入版本控制，或者让团队成员各自配置本地路径。

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