Skip to main content
Cypress应用

Angular组件测试

info
你将学到​
  • 如何在Angular中设置组件测试
  • 如何为Angular项目配置Cypress

框架支持​

Cypress组件测试支持Angular 17.2.0及以上版本。

教程​

访问入门指南，获取如何为任何项目添加组件测试并编写第一个测试的逐步教程。

安装​

要在Angular中开始使用Cypress组件测试，请将Cypress安装到你的项目中：

npm install cypress --save-dev

打开Cypress：

npx cypress open
选择组件测试

选择组件测试

Cypress应用将引导你完成项目配置。

info

如需创建组件测试的逐步指南，请参考入门指南。

关于使用方法和示例，请访问Angular示例指南。

框架配置​

Cypress组件测试与@angular/cli项目开箱即用。在设置过程中，Cypress会自动检测到你的项目是Angular并正确配置。以下示例仅供参考。

Angular CLI配置​

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
    },
    specPattern: '**/*.cy.ts',
  },
})

选项API​

你也可以使用options API为devServer提供项目特定的配置。devServer配置接收一个options属性：

import { defineConfig } from 'cypress'

export default {
  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
      options: {
        projectConfig: {
          root: '',
          sourceRoot: 'apps/my-app',
          buildOptions: {
            outputPath: 'dist/my-app',
            index: 'apps/my-app/src/index.html',
            main: 'apps/my-app/src/main.ts',
            polyfills: 'apps/my-app/src/polyfills.ts',
            tsConfig: 'apps/my-app/tsconfig.app.json',
            inlineStyleLanguage: 'scss',
            assets: ['apps/my-app/src/favicon.ico', 'apps/my-app/src/assets'],
            styles: ['apps/my-app/src/styles.scss'],
            scripts: [],
            buildOptimizer: false,
            optimization: false,
            vendorChunk: true,
            extractLicenses: false,
            sourceMap: true,
            namedChunks: true,
          },
        },
      },
    },
  },
}

示例Angular应用​

目录