当然可以不用逐个配置每个场景的选择器！BackstopJS提供了专门的全局配置能力，还有动态处理的方案，帮你彻底避免重复操作：

方法一：使用官方的defaultScenario配置项 #

这是最直接的解决方案，BackstopJS的defaultScenario会作为所有场景的基础配置，所有场景都会自动继承这里的属性。你只需要在配置文件的根节点定义它，不用再给每个场景单独写selectors了：

module.exports = {
  // 其他全局配置（比如viewports、paths等）...
  defaultScenario: {
    // 统一设置所有场景的截图焦点选择器
    selectors: ['div[id="component_preview"]'],
    // 还可以在这里添加其他全局默认配置，比如：
    // delay: 1000,
    // misMatchThreshold: 0.05
  },
  scenarios: [
    {
      label: 'Primary Button',
      url: 'http://your-storybook-url/button--primary'
      // 这里不需要再写selectors，会自动继承defaultScenario的配置
    },
    {
      label: 'Basic Card',
      url: 'http://your-storybook-url/card--basic'
      // 同样自动复用全局选择器
    },
    // 后续新增的场景都不需要重复配置selectors
  ]
};

如果遇到某个特殊场景需要覆盖全局选择器（比如要截图整个页面），只需要在该场景里重新定义selectors即可，场景内的配置会优先于defaultScenario生效。

方法二：动态批量生成场景配置 #

如果你的场景是从外部来源动态获取的（比如自动遍历Storybook的所有故事），可以用JavaScript的数组方法批量给每个场景添加选择器：

// 示例：假设你有一个函数用来获取所有Storybook场景的基础配置
const fetchStorybookScenarios = () => {
  // 这里可以是读取Storybook元数据、调用API等逻辑
  return [
    { label: 'Input Component', url: 'http://your-storybook-url/input' },
    { label: 'Modal Component', url: 'http://your-storybook-url/modal' }
  ];
};

module.exports = {
  // 其他全局配置...
  scenarios: fetchStorybookScenarios().map(scenario => ({
    // 复制原有场景的所有配置
    ...scenario,
    // 统一添加全局选择器
    selectors: ['div[id="component_preview"]']
  }))
};

这种方法适合场景数量极大或者需要自动化维护场景列表的项目，新增场景时完全不用手动修改Backstop配置。

之前你尝试在scenarios外直接设置selectors无效，是因为BackstopJS的根配置里并没有这个属性，只有defaultScenario才是用来定义场景默认值的正确入口哦。

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