Question

我通过赛普拉斯实施了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获取生成的文件（图像，视频）？

非常感谢您的帮助！蒂埃里

Answer 1

您可以使用工件从 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 应用程序中的屏幕截图文件夹。

Cypress CI 工件示例 here 和一般 Gitlab 工件信息 here。

赛普拉斯测试在本地是绿色的，但在Gitlab CI中失败

1 个答案: