如何用单条npm命令并行启动SPA与API并执行端到端测试

Absolutely, you can pull this off with a few handy npm tools—no complex workflows required. Here's a step-by-step solution tailored to your setup:

Required npm Packages #

First, install these packages to handle parallel execution, service readiness checks, and cross-platform environment variables:

npm install --save-dev concurrently wait-on cross-env

• concurrently: Runs multiple commands in parallel
• wait-on: Waits until your API and WebApp are fully responsive before starting tests
• cross-env: Ensures environment variables work consistently across Windows/macOS/Linux

Script Configuration #

Update your package.json with these scripts to wrap everything into a single command. Adjust the project paths to match your repo structure:

"scripts": {
  // Start API in Test environment (uses your in-memory DB)
  "start:api": "cross-env ASPNETCORE_ENVIRONMENT=Test dotnet run --project ./Path/To/Your/API/ApiProject.csproj",
  // Start .NET Core-hosted Vue SPA in Test environment
  "start:webapp": "cross-env ASPNETCORE_ENVIRONMENT=Test dotnet run --project ./Path/To/Your/WebApp/WebAppProject.csproj",
  // Wait for both services to be fully ready
  "wait:services": "wait-on https://localhost:5000 https://localhost:5001/health",
  // Core workflow: start services, wait for readiness, run tests, then shut down everything
  "test:e2e:setup": "concurrently -k -s first \"npm run start:api\" \"npm run start:webapp\" \"npm run wait:services && npm run test:e2e:run\"",
  // Replace with your actual E2E test command (e.g., TestCafe, Cypress)
  "test:e2e:run": "testcafe chrome ./tests/e2e/**/*.test.js",
  // The single command you'll run locally or in CI
  "test:e2e": "npm run test:e2e:setup"
}

Let’s break down the concurrently flags:

• -k: Kills all running processes as soon as any one command exits (so your services shut down automatically after tests finish)
• -s first: Uses the exit code of the first command that finishes as the overall script exit code—this ensures CI pipelines catch test failures correctly

Health Check Setup (Critical for Reliable Testing) #

To make wait-on truly reliable (waiting for the API to be fully initialized, including the in-memory DB), add a health check endpoint to your API:

1. In your API’s Startup.cs, add health check services:

public void ConfigureServices(IServiceCollection services)
{
    // ... existing services
    services.AddHealthChecks()
        .AddDbContextCheck<MyDbContext>(); // Verifies the DB connection is ready
}

2. Register the health check endpoint in the Configure method:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ... existing middleware
    app.UseHealthChecks("/health"); // Creates a GET endpoint at https://localhost:5001/health
}

This ensures wait-on only proceeds when your API’s database is fully initialized, not just when the port is open.

Azure DevOps CI Integration #

Add a step to your CI pipeline after unit tests to run the E2E command:

1. Make sure your CI agent has Node.js and .NET Core 3.1 installed
2. Add these tasks to your pipeline:
   • Install npm dependencies: npm install
   • Run E2E tests: npm run test:e2e

The script will automatically start both services, wait for them to be ready, run your tests, and shut everything down—no manual intervention needed.

Key Notes #

• Port Conflicts: If your CI agent has port 5000/5001 in use, override the URLs via environment variables:

  "start:api": "cross-env ASPNETCORE_ENVIRONMENT=Test ASPNETCORE_URLS=https://localhost:5001 dotnet run --project ./Api/Api.csproj"
  

• Vue-only SPA: If your Vue app runs separately (not hosted by .NET Core), replace start:webapp with your Vue dev server command (e.g., npm run serve)
• Test Environment Isolation: Your existing in-memory DB setup works perfectly here—no external database is needed for E2E tests

Now you can run a single command locally or in CI to execute full end-to-end testing:

npm run test:e2e

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