在Github Actions中运行.NET Core与Ant Design Pro时遇到Cypress元素定位超时问题求助

Let's break down why your Cypress test is failing in GitHub Actions but working locally, and walk through actionable fixes step by step:

1. Critical Issue: Your .NET Backend Isn't Actually Starting in CI #

Looking at your main.yml, the step to run dotnet run is blocking the entire workflow—since dotnet run doesn't exit on its own, the subsequent Cypress step never gets executed. That means your frontend might load, but it's probably stuck waiting for backend data, so the button you're targeting never renders.

Fix: Run the .NET Backend in the Background #

Update your workflow to start the backend as a background process, then wait for it to fully initialize before launching the frontend:

- name: Setup .NET
  uses: actions/setup-dotnet@v1
  with:
    dotnet-version: 5.0.404

- name: Start .NET Backend (Background)
  working-directory: dotnet
  run: nohup dotnet run --no-restore > backend.log 2>&1 &

- name: Wait for .NET Backend to Start
  run: npx wait-on http://localhost:<YOUR_BACKEND_PORT>  # Replace with your actual backend port (e.g., 5000)

2. Fragile Element Selector Tied to DOM Structure #

Your selector .ant-pro-table-list-toolbar-right > :nth-child(1) > .ant-space > [style=""] > .ant-btn is overly dependent on the exact DOM hierarchy. Ant Design Pro might render elements slightly differently in production builds (since you're running yarn run build in CI) vs. your local dev environment, breaking this fragile path.

Fix: Use a Test-Focused, Robust Selector #

Add a data-testid attribute to your create button in the React component:

// In your Ant Design Pro component code
<Button data-testid="create-application-btn" type="primary">
  Create Application
</Button>

Then update your Cypress test to use this reliable selector, plus extend the timeout to account for slower CI environments:

describe('test button', () => {
  it('Create application',() => {
    cy.visit('http://localhost:8000/Application')
    // Use test ID instead of fragile DOM path, with extended timeout
    cy.get('[data-testid="create-application-btn"]', { timeout: 10000 }).click()
  })
})

3. Wait-On Isn't Waiting for the Page to Be Fully Ready #

Your current wait-on: 'http://localhost:8000' only checks if the frontend server is up, not if the page has loaded all required data or rendered its content. The button might not exist yet even when the server responds.

Fix: Wait for a Core Page Element First #

Modify your test to wait for a key element that confirms the page is ready before targeting the button:

cy.visit('http://localhost:8000/Application')
// Wait for the table container to load first (adjust selector to match your page)
cy.get('.ant-pro-table-container', { timeout: 10000 }).should('be.visible')
// Then find and click the create button
cy.get('[data-testid="create-application-btn"]').click()

4. Chrome Headless Mode Needs Special Configuration in CI #

GitHub Actions runs Chrome in headless mode, which sometimes requires specific flags to work correctly with Cypress.

Fix: Add Browser Launch Options to Cypress #

Update your cypress.config.js (or cypress.json for older versions) with these flags:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // Your existing setup code (if any)
    },
    browserLaunchOptions: {
      args: ['--no-sandbox', '--disable-dev-shm-usage', '--disable-gpu']
    }
  }
})

These flags resolve common stability issues with Chrome in Ubuntu-based CI environments.

Final Workflow Check #

Ensure your steps run in this logical order:

1. Checkout code
2. Setup .NET
3. Start backend in background + wait for it to initialize
4. Run Cypress tests (skip build: yarn run build if you want to test dev mode; if testing production, replace start: yarn start with start: npx serve -s build and add serve as a frontend dev dependency)

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