初始化项目

准备好 Docker 镜像

比如：

FROM cypress/browsers:node16.14.0-slim-chrome99-ff97
1

浏览器镜像参考： cypress-docker-images/browsers at master · cypress-io/cypress-docker-images

安装依赖

yarn add --dev cypress eslint eslint-plugin-cypress
1

ESLint 配置

参考： GitHub - cypress-io/eslint-plugin-cypress: An ESLint plugin for projects that use Cypress

IDE 集成

参考： IDE Integration | Cypress Documentation

配置

安装好依赖后执行

npx cypress open
1

运行会初始化配置。

手动配置

参考： Configuration | Cypress Documentation

Gitlab 集成

示例项目： cypress-io / cypress-example-docker-gitlab

测试用例

配置环境变量

静态变量

修改 cypress.json：

{

  "baseUrl": "http://localhost:4100",

  "env": {

    "apiUrl": "http://localhost:3000",

    "user": {

      "email": "tester@test.com",

      "password": "password1234",

      "username": "testuser"

    },

    "codeCoverage": {

      "url": "http://localhost:3000/__coverage__"

    }

  },

  "viewportHeight": 1000,

  "viewportWidth": 1000,

  "video": true,

  "projectId": "bh5j1d",

  "nodeVersion": "system"

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

动态变量

可以在 plugins/index.js 中注入，如：

// 也可以在这里注入 dotenv



module.exports = (on, config) => {

  // `on` is used to hook into various events Cypress emits

  // `config` is the resolved Cypress config

  /* eslint-disable no-param-reassign */

  config.env.authing_username = process.env.AUTHING_USERNAME;

  config.env.authing_password = process.env.AUTHING_PASSWORD;

  config.env.authing_userpool_id = process.env.AUTHING_USERPOOL;

  return config;

};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

注意一下，需要用根用户池登录，且最好关闭 MFA （没有接口支持）。产品环境用户池 ID 为 59f86b4832eb28071bdd9214。

使用变量

// Cpress 是测试脚本中全局注入的

const apiUrl = Cypress.env('apiUrl')
1
2
3

添加 Commands

如获取登录 token。登录方式自行封装，这里以邮箱登录为例：

// ***********************************************

// This example commands.js shows you how to

// create various custom commands and overwrite

// existing commands.

//

// For more comprehensive examples of custom

// commands please read more here:

// https://on.cypress.io/custom-commands

// ***********************************************

//

//

// -- This is a parent command --

// Cypress.Commands.add('login', (email, password) => { ... })

//

//

// -- This is a child command --

// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })

//

//

// -- This is a dual command --

// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })

//

//

// -- This will overwrite an existing command --

// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

import JSEncrypt from 'jsencrypt';



function encrypt(text, key) {

  const jsencrypt = new JSEncrypt();

  jsencrypt.setPublicKey(key); // 设置公钥

  const encrypted = jsencrypt.encrypt(text);

  return encrypted;

}



Cypress.Commands.add(
  'login',
  (
    userPoolId = Cypress.env('authing_userpool_id'),
    email = Cypress.env('authing_username'),
    password = Cypress.env('authing_password')
  ) => {

    cy.loginByEmail(userPoolId, email, password).then((token) => {
      localStorage.setItem('token', token);
      cy.getCookie('authing_session')
        .should('exist')
        .then((c) => {
          cy.setCookie('authing_session', c.value);
        });

    });

  }

);



Cypress.Commands.add(
  'loginByEmail',
  (

    userPoolId = Cypress.env('authing_userpool_id'),

    email = Cypress.env('authing_username'),

    password = Cypress.env('authing_password')

  ) =>
    cy.getPublicKey().then((publicKey) =>
      cy
        .request({
          method: 'POST',
          url: '/api/v2/login/login-by-email',
          headers: {
            'x-authing-userpool-id': userPoolId
          },
          body: {
            input: {
              email,
              password: encrypt(password, publicKey)
            }
          }
        })
        .its('body.data.token')
        .should('exist')

    )

);

Cypress.Commands.add('getPublicKey', () =>
  cy
    .request({
      method: 'GET',
      url: 'https://core.authing.cn/api/v2/.well-known'
    })
    .its('body.data.publicKey')
    .should('exist')
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

参考文档：

• Custom Commands | Cypress Documentation
• request | Cypress Documentation

添加测试用例

// enables intelligent code completion for Cypress commands

// https://on.cypress.io/intelligent-code-completion

/// 



context('Console Sample', () => {

  beforeEach(() => {

    // https://on.cypress.io/visit

    cy.login();

  });



  it('With Login', () => {

    cy.visit('/console/61e4da8864ed00680e252e99/application/self-built-apps');

    cy.get('.app').contains('创建自建应用');

  });



  // more examples

  //

  // https://github.com/cypress-io/cypress-example-todomvc

  // https://github.com/cypress-io/cypress-example-kitchensink

  // https://on.cypress.io/writing-your-first-test

});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

其他

• 最佳实践指南： Best Practices | Cypress Documentation
• API 文档： Table of Contents | Cypress Documentation