javascript - Cypress 测试在本地是绿色的,但在 Gitlab CI 中失败
问题描述
我用 Cypress 实现了 e2e 测试。它们工作正常,我可以根据应用程序的打包版本使用命令行运行它们:npm run ci:cy-run
.
以下是来自的命令package.json
:
"ci:start-server": "angular-http-server --path ./dist/treo -p 4200",
"cy:run": "cypress run --project e2e --browser chrome --headless",
"ci:cy-run": "start-server-and-test ci:start-server http://localhost:4200 cy:run"
当我尝试使用此 .gitlab-ci.yml 文件在 Gitlab CI 中执行此命令时:
image: teracy/angular-cli:latest
image: cypress/browsers:node12.16.2-chrome81-ff75
build:
stage: build
cache:
paths:
- node_modules/
script:
- npm install --quiet
- npm run build:prod
artifacts:
paths:
- dist/myapp
test:
stage: test
cache:
policy: pull
paths:
- node_modules/
script:
- npm run lint
- npx cypress install
- npm run ci:cy-run
我遇到了一些错误,例如:
CypressError: Timed out retrying: `cy.type()` failed because this element is not visible:
`<input formcontrolname="verificationCode" name="verificationCode" matinput="" placeholder="Code à 6 chiffres" required="" type="string" minlength="6" maxlength="6" class="mat-input-element mat-form-field-autofill-control ng-tns-c27-2 ng-untouched ng-pristine ng-invalid cdk-text-field-autofill-monitored" id="mat-input-0" aria-invalid="false" aria-required="true">`
This element `<input#mat-input-0.mat-input-element.mat-form-field-autofill-control.ng-tns-c27-2.ng-untouched.ng-pristine.ng-invalid.cdk-text-field-autofill-monitored>` is not visible because its parent `<div.mat-form-field-infix.ng-tns-c27-2>` has CSS property: `visibility: hidden`
Fix this problem, or use `{force: true}` to disable error checking.
https://on.cypress.io/element-cannot-be-interacted-with
Gitlab 是否有一些特定的配置要做?由于无法从 CI 获取生成的文件(图像、视频),如何调试此问题?
非常感谢您的帮助!蒂埃里
解决方案
您可以使用工件在 gitlab CI 中从 Cypress 获取视频/屏幕截图,只需确保将它们放在应用程序的文件夹结构中。
我现在正在处理的示例会产生一个可下载的屏幕截图文件夹:
e2e tests all:
image: cypress/base:14.15.4
stage: manual-tests
when: manual
allow_failure: true
before_script:
- npm install
- npx cypress verify
script:
- npm run-script test:e2e
cache:
<<: *global_cache
policy: pull
artifacts:
paths:
- tests/e2e/screenshots/**/*.png
expire_in: 2 hrs
when: on_failure
这将在我们的 VueJS 应用程序中获取屏幕截图文件夹。
推荐阅读
- asp.net-mvc - MVC:编辑用户后无法刷新身份声明(我也是)
- r - 为什么 RShiny 无法可视化 Cardinal 图 (Cardinal::plot()) 和图像 (Cardinal::image())?
- excel - 如何在 vba 的 Rows() 函数中使用 OFFSET 函数
- r - 计算r中列表的列总和
- java - JAVA_HOME 指向 JRE 而不是 JDK
- c# - 为来自控制器的检查输入创建自定义模型绑定
- react-native - 每当用户的位置发生变化时调用一个函数
- elasticsearch - 将 Vega 与包含嵌套聚合的 Elasticsearch 数据一起使用(或在 Elasticsearch 中将一个聚合除以另一个)
- python - 当我使用 model.evaluate() 时,为什么训练数据的结果不同?
- java - 使用 for 循环以编程方式将 TextView 添加到布局