Angular CLI 6+Protractor多环境多浏览器配置优化及适用性问询

Great question! I've been in exactly this situation with large Angular E2E suites, so let's break down how to tackle each part of your problem.

1. Reducing Configuration File Duplication #

The key here is to centralize common logic and only define what's unique for each environment/browser combination. Here are the most effective approaches:

Option 1: Protractor Configuration Inheritance #

Create a base configuration file (protractor.base.conf.js) that contains all your shared settings (framework setup, report configurations, test timeouts, suite definitions, etc.). Then each environment/browser-specific config only needs to import this base and override the differences.

Example base config (protractor.base.conf.js):

exports.config = {
  framework: 'jasmine',
  jasmineNodeOpts: {
    defaultTimeoutInterval: 30000,
    showColors: true
  },
  reporters: ['spec', 'jasmine-html'],
  suites: {
    szenarioTests: './src/szenario/**/*.e2e-spec.ts',
    regressionTests: './src/regression/**/*.e2e-spec.ts'
    // Add all shared suites here
  },
  // Other shared settings...
};

Example environment/browser config (protractor.remote.qsa.chrome.conf.js):

const baseConfig = require('./protractor.base.conf.js');

exports.config = {
  ...baseConfig.config,
  seleniumAddress: 'https://qsa-grid.example.com/wd/hub',
  capabilities: {
    browserName: 'chrome',
    'goog:chromeOptions': {
      args: ['--headless', '--disable-gpu']
    }
  },
  baseUrl: 'https://qsa.aut.com'
};

This cuts down repetitive code to just the unique bits per combination.

Option 2: Dynamic Configuration with Environment Variables/CLI Params #

Instead of 20 full config files, use a single base config that pulls values from environment variables or CLI params to adjust to different environments and browsers. This is even more scalable.

Step 1: Update the base config to read dynamic values:

const env = process.env.E2E_ENV || 'local';
const browser = process.env.E2E_BROWSER || 'chrome';

// Load environment-specific settings (store these in JSON files for easy management)
const envSettings = require(`./env-configs/${env}.json`);
// Load browser-specific capabilities
const browserCaps = require(`./browser-configs/${browser}.json`);

exports.config = {
  framework: 'jasmine',
  seleniumAddress: envSettings.seleniumAddress,
  capabilities: {
    ...browserCaps,
    ...envSettings.browserOverrides // Allow env to override browser settings if needed
  },
  baseUrl: envSettings.baseUrl,
  jasmineNodeOpts: { defaultTimeoutInterval: 30000 },
  suites: { /* Shared suite definitions */ }
};

Step 2: Simplify angular.json to use one base configuration:

"configurations": {
  "base_e2e": {
    "protractorConfig": "./protractor.base.conf.js"
  }
}

Step 3: Update package.json scripts to pass env vars:

"e2e": "ng e2e --configuration=base_e2e --webdriver-update=false",
"e2e:local:chrome": "E2E_ENV=local E2E_BROWSER=chrome npm run e2e",
"e2e:dev:firefox": "E2E_ENV=dev E2E_BROWSER=firefox npm run e2e",
// ... Add all 20 combinations here (scripts are easy to copy/paste)

Now you only maintain 1 base config + 5 env JSON files + 4 browser JSON files (total 10 files) instead of 20 full configs.

Option 3: Angular CLI Configuration Extension #

Angular CLI allows you to extend configurations in angular.json using the extends property. You can create a base E2E config, then extend it for each environment/browser, overriding only the protractorConfig or additional flags. This works best combined with Protractor's inheritance.

2. Angular CLI E2E Configuration Best Practices #

Here are the top practices to keep your E2E setup maintainable, even for large projects:

• Separate concerns: Split environment settings (selenium grid URLs, base URLs) from browser settings (capabilities, headless mode) from test settings (suites, timeouts).
• Avoid hardcoding: Use environment variables or CLI params for dynamic values (like --base-url as you're already doing) instead of hardcoding in config files.
• Centralize test suites: Define all suites in the base config so you don't repeat them across every environment/browser.
• Optimize webdriver management: Keep --webdriver-update=false and run webdriver-manager update manually or in your CI pipeline to avoid slow test starts.
• Configure parallel testing: In your base config, set maxSessions and shardTestFiles to run tests in parallel—critical for large test suites to save time.
• Unify reporting: Set up consistent reporters (like protractor-beautiful-reporter) in the base config so all test runs generate the same report format.
• Use .env files: For local development, use a .env file to store environment variables (with dotenv package) so you don't have to type them every time.

3. Is Protractor + Angular CLI Suitable for Large Projects? #

Absolutely—but with caveats:

• Protractor is in maintenance mode (Angular team has shifted focus to Cypress/Playwright for new projects), but it's still fully supported for existing Angular CLI projects and receives bug fixes.
• For large projects, you need to:
  • Keep your test suite organized (split by feature/module, avoid monolithic test files).
  • Implement proper configuration management (as we discussed above) to avoid duplication.
  • Optimize test performance (parallel runs, smart waits, avoiding unnecessary page reloads).
• If you're starting a new large project, you might want to evaluate Cypress or Playwright (both have better modern features and active development), but if you're already invested in Protractor, it's still a solid choice that can handle large E2E suites with the right setup.

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