3步搭建Cypress测试框架，前端回归效率提升80%_千锋教育

// Selenium等待方式
WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("submit-btn")));
driver.findElement(By.id("submit-btn")).click();

// Cypress等待方式
cy.get('#submit-btn').click(); // 自动等待元素可见、可点击

# 在你的项目目录下
npm install cypress --save-dev

npx cypress open

describe('登录功能测试', () => {
  beforeEach(() => {
    // 每次测试前访问登录页面
    cy.visit('http://localhost:3000/login')
  })

  it('输入正确账号密码，登录成功', () => {
    // 输入用户名
    cy.get('#username').type('admin')
    // 输入密码
    cy.get('#password').type('123456')
    // 点击登录按钮
    cy.get('button[type="submit"]').click()
    // 验证跳转到首页
    cy.url().should('include', '/dashboard')
    // 验证显示欢迎信息
    cy.contains('欢迎回来，admin').should('be.visible')
  })

  it('输入错误密码，显示错误提示', () => {
    cy.get('#username').type('admin')
    cy.get('#password').type('wrongpassword')
    cy.get('button[type="submit"]').click()
    // 验证错误提示
    cy.get('.error-message').should('be.visible')
      .and('contain', '密码错误')
  })
})

npx cypress run

npx cypress open

describe('用户注册表单测试', () => {
  beforeEach(() => {
    cy.visit('/register')
  })

  it('填写完整信息，注册成功', () => {
    // 1. 填写基本信息
    cy.get('#username').type('testuser')
    cy.get('#email').type('test@example.com')
    cy.get('#password').type('Password123!')
    cy.get('#confirm-password').type('Password123!')

    // 2. 选择下拉框
    cy.get('#country').select('中国')
    cy.get('#city').select('北京')

    // 3. 勾选复选框
    cy.get('#agree-terms').check()

    // 4. 上传文件
    cy.get('#avatar').attachFile('avatar.jpg')  // 需要cypress-file-upload插件

    // 5. 提交表单
    cy.get('button[type="submit"]').click()

    // 6. 验证成功提示
    cy.contains('注册成功').should('be.visible')
    cy.url().should('include', '/welcome')
  })

  it('密码不匹配，显示错误', () => {
    cy.get('#username').type('testuser')
    cy.get('#email').type('test@example.com')
    cy.get('#password').type('Password123!')
    cy.get('#confirm-password').type('DifferentPassword')

    cy.get('button[type="submit"]').click()

    // 验证密码不匹配错误
    cy.contains('密码不一致').should('be.visible')
    cy.url().should('not.include', '/welcome')
  })

  it('必填字段为空，表单阻止提交', () => {
    cy.get('button[type="submit"]').click()

    // HTML5验证阻止提交
    cy.url().should('include', '/register')
    
    // 验证错误提示
    cy.get('#username:invalid').should('exist')
    cy.get('#email:invalid').should('exist')
  })
})

{
  "validUser": {
    "username": "testuser",
    "email": "test@example.com",
    "password": "Password123!"
  },
  "invalidUser": {
    "username": "",
    "email": "invalid-email",
    "password": "123"
  }
}

cy.fixture('user').then((user) => {
  cy.get('#username').type(user.validUser.username)
})

name: E2E Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v3
    
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
    
    - name: Install dependencies
      run: npm ci
    
    - name: Start application
      run: npm start &   # 启动开发服务器
      
    - name: Run Cypress tests
      uses: cypress-io/github-action@v5
      with:
        record: true
        parallel: true
      env:
        CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

# 只运行登录测试
npx cypress run --spec "cypress/e2e/login.spec.js"

# 运行多个文件
npx cypress run --spec "cypress/e2e/login.spec.js,cypress/e2e/register.spec.js"

npm install --save-dev mochawesome

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: 'cypress/reports',
    overwrite: false,
    html: true,
    json: true
  },
  e2e: {
    baseUrl: 'http://localhost:3000'
  }
})

// cypress/support/commands.js
Cypress.Commands.add('login', (username, password) => {
  cy.visit('/login')
  cy.get('#username').type(username)
  cy.get('#password').type(password)
  cy.get('button[type="submit"]').click()
})

// 测试中使用
cy.login('admin', '123456')