部署 Sentinel Cypress 调试器

启用从远程环境( ex. CI) 运行的 Cypress 查看/调试 本地调试信息 .

浏览器兼容性说明: 控制台日志和网络捕获尚未完成 兼容 Microsoft Edge 或 Firefox.

安装

在您的 Cypress 项目中安装 Cypress 插件 .

npm install -D @deploysentinel/cypress-debugger

使用量

添加支持文件

在你的Cypress项目 支助 页:1. cypress/support/index.js增加:

// ❗ Must be declared at the top of the file ❗
import "@deploysentinel/cypress-debugger/support";

...
import "./commands";

添加插件

在你的Cypress项目 插件 页:1. cypress/plugins/index.js增加:

module.exports = (on, config) => {
  // ❗ Must be declared at the top of the function ❗
  [on, config] = require('@deploysentinel/cypress-debugger/plugin')(on, config);

  // Use 'on' and 'config' returned from the plugin
  // ...
};

注:插件返回补丁版本 on 财务报告和审定财务报表 config 改为 与其他插件和配置消除冲突。 。 。 .

添加 API 密钥

最后,将您的 API 密钥添加到一个 deploysentinel_key Cypress 环境变量。 。 。 . 您可以按下您的 API 键 登录编号 :报名 部署森蒂内尔并访问您的简介页面: https://depmousesentinel.com/ profile (中文(简体) )。 。 。 .

之后,您可以通过几种不同的方式指定密钥 :

备选案文1. Cypress 配置文件

在你身边 cypress.json 文件添加:

{
  ...
  "env": {
    ...
    "deploysentinel_key": "YOUR_API_KEY"
  }
}

备选案文2. OS 环境变量

在您环境中导出 OS 环境变量

CYPRESS_DEPLOYSENTINEL_KEY=YOUR_API_KEY

备选案文3. Cypress CLI 旗帜

cypress run --env deploysentinel_key=YOUR_API_KEY

备选案文4. 程序通过插件文件

只有在需要程序控制或自定义 API 密钥从 .

在你的Cypress项目 插件 页:1. cypress/plugins/index.js增加:

module.exports = (on, config) => {
  // Add this to specify the key programmatically, before calling the plugin
  config.env.DEPLOYSENTINEL_KEY =
    process.env.YOUR_CUSTOM_ENV_FOR_API_KEY || 'YOUR_API_KEY';

  // Import plugin as usual, after the key in the env is set above
  require('@deploysentinel/cypress-debugger/plugin')(on, config);

  // ❗ Important: The config needs to be returned in the end
  return config;
};

电子配置

如果你的测试套房在Electron运行, 你需要通过额外的 旗到 Cypress 打开一个远程调试端口供插件监听 网络和控制台日志.

指定远程调试端口 ELECTRON_EXTRA_LAUNCH_ARGS 环境变量。 端口号码可以是任何可用的有效端口号码 那个机器.

ELECTRON_EXTRA_LAUNCH_ARGS="--remote-debugging-port=40500" cypress run ...

如果你的测试套房只在Chrome/Chrome ex运行的话. cypress run --browser chrome,那么这一步骤就没有必要。 联网和 目前不支持为Microsoft Edge和Firefox采集控制台日志.

正在本地验证所有工作

默认情况下,插件只在非交互模式(ex. cypress run),并且只会上传失败时的抓取. 验证插件 正在本地工作, 您可以强制它总是被启用和上传 通过启用下列环境变量来获取:

CYPRESS_DEPLOYSENTINEL_UPLOAD_ON_PASSES=true cypress run # or open

如果无法设置OS环境变量, 也可以设置 通过类似如何配置 API 密钥的 CLI 旗或配置文件( 见 以上"添加API键"部分.

查看测试结果

默认情况下, 测试失败时, 控制台日志中将会有运行的 URL 到运行失败日志。 可以在您的 CI 日志中访问 .

示例日志 :

  Running:  pages.js                                            (3 of 3)


  Pages
    ✓ generates complex slug with md extension (647ms)
    1) generates a slug with an index file
     DeploySentinel Debug URL: https://deploysentinel.com/ci/runs/712345677654321abcd00000
    ✓ generates a slug with a slash (672ms)

否则,运行可以从Sentinel Dashboard at https://depmoutsentinel.com/ci/dashboard 页面存档备份,存于互联网档案馆。 。 。 .

注意: 默认情况下, 当测试通过时, 插件将不会上传任何数据 如果测试以交互模式运行。 参见"校验一切在当地工作" 详情见上文.

J股报告整合

如果Cypress是带着 J股记者, (中文(简体) ), 插件将自动将“部署Sentinel URL”附加到 整个测试套件运行后测试失败的错误细节, 因此您可以 从您的 JUniversity 报告输出中轻松获取测试抓取 .

抓取的数据

启用时, 将自动抓取 Sentinel Cypress 调试器 cypress在测试中采取的行动,以及 DOM 捕获、控制台日志和 网络请求.

高级配置

网络请求过滤

默认情况下,调试器会捕获所有网络请求. 您可以指定一个 beforeNetworkSend 在过滤敏感网络请求的插件文件中 返回时 null 或者说 undefined。 。 。 .

require('@deploysentinel/cypress-debugger/plugin')(on, config, {
  beforeNetworkSend: event => {
    if (event.request.url.includes('wikipedia.org')) {
      return null;
    } else if ('ds-key' in event.request.headers) {
      return null;
    } else if (event.response?.statusCode === 400) {
      return null;
    }
    return event; // Don't filter out event
  },
});

注意: 更新/修改函数内的网络事件对象不会 修改实际记录的网络事件内容,我们可能允许在 未来通过这个API.

事件对象类型 :

{
  request: {
    url: string;
    method: string;
    headers: { [key: string]: string };
  };
  // optional
  response?: {
    statusCode: number;
    statusMessage: string;
    headers: { [key: string]: string };
    bodySize: number;
    body: string;
  };
}

信头会小写。 ưμ㼯A X-My-Header 将会是 可通过 event.headers["x-my-header"]。 。 。 .

启用特定文件的抓取

要抓取特定的测试, 您可以在 CYPRESS_DEPLOYSENTINEL_SPEC 环境变量,类似于 --spec Cypress CLI旗 (英语).

示例

CYPRESS_DEPLOYSENTINEL_SPEC="cypress/tests/ui/**, cypress/integration/**"

Git 提交元数据

默认情况下,调试器会自动发送元数据以显示 在仪表板UI。 如果我们不能自动调出信息, 您可以设置以下环境变量来手动指定承诺 资料:

branch: COMMIT_INFO_BRANCH
message: COMMIT_INFO_MESSAGE
email: COMMIT_INFO_EMAIL
author: COMMIT_INFO_AUTHOR
sha: COMMIT_INFO_SHA
timestamp: COMMIT_INFO_TIMESTAMP
remote: COMMIT_INFO_REMOTE

发送自定义事件到部署Sentinel [BETA]

用户可将自定义事件发送到 Sentinel 以附加额外的调试 测试中的信息。 (例如用 DB 或 app 调试错误和片段) 州立垃圾场) 要使用它,只需将自定义数据传递给命令 cy.dsAddEvent。 。 。 .

Cypress.on('fail', e => {
  // As an example, fetch data from Firebase
  cy.callFirestore('get', 'myData').then(r => {
    cy.dsAddEvent(r);
  });
  throw e;
});

说明:对于每个有效载荷,应当能够用 JSON.stringify (无圆形依赖关系) 大小必须小于 4 个 MB。 。 。 .

键入符配置

如果你用Typescript与 Cypress, 你需要添加 @deploysentinel/cypress-debugger 页:1 cypress/tsconfig.json 文件 :

{
  "compilerOptions": {
    "types": ["cypress", "@deploysentinel/cypress-debugger"]
  }
}

网络固定器 发电机/拦截器 [BETA]

启动后, 自动丢弃生成器 网络在测试完成后向本地磁盘请求数据.

另一方面,部署Sentinel Cypress网络拦截器,在启用时, 将使用固定装置在测试运行时自动拦截网络请求 由Fixtures发电机生成.

记录模式

一旦启用了记录模式,调试器将把网络文物倾倒到 /cypress/fixtures 带有文件名前缀 ds-network-mock 以 JSON 为格式

要启用记录模式, 设置 CYPRESS_DEPLOYSENTINEL_NETWORK_MOCK_MODE 环境变量改为 record

CYPRESS_DEPLOYSENTINEL_NETWORK_MOCK_MODE=record

(备选) 您可以指定 networkMock 在要过滤未使用的插件文件中 网络文物

require('@deploysentinel/cypress-debugger/plugin')(on, config, {
  networkMock: {
    mode: 'record', // optional
    methods: ['GET', 'POST'], // default to ["GET", "PATCH", "POST", "PUT", "HEAD", "DELETE"]
    includeUrls: ['https://example.com/**', 'https://api.example.com/users/**'], // default to ['**']
    excludeUrls: ['https://example.com/**'], // inverse of 'includeUrls', default to []
  },
});

截取模式

启用截取模式时, 调试器会先前读取定着值 从记录模式生成( in) /cypress/fixtures)和截取 使用 cy.intercept

要启用截取模式, 设置 CYPRESS_DEPLOYSENTINEL_NETWORK_MOCK_MODE 环境变量改为 intercept

CYPRESS_DEPLOYSENTINEL_NETWORK_MOCK_MODE=intercept

注意: 截取模式将创建一个 fixtures/.ds-network-cache 文件夹 暂时存储网络模拟。 此文件夹应该被指定为源 真理来源于 fixtures/ds-network-mock-*

更改日志

查看我们的 我们的网站上直接有更改日志。 。 。 .