Cypress 对 Gatsby 的测试在 GitHub 个操作上失败

Question

我们编写 Gatsby.js 与 Contentful 和 Shopify 集成。我们有 Cypress 测试，我们在 GitHub 操作上运行。但是我有错误，比如

  1) Test shopify cart
   Buying only first product
     should open product modal:
 AssertionError: Timed out retrying: Expected to find element: `[data-test=product-modal]`, but never found it.
  at ensureExistence (http://localhost:8000/__cypress/runner/cypress_runner.js:137673:32)
  at Object.ensureElExistence (http://localhost:8000/__cypress/runner/cypress_runner.js:137691:12)
  at ensureExistence (http://localhost:8000/__cypress/runner/cypress_runner.js:127867:23)
  at onFailFn (http://localhost:8000/__cypress/runner/cypress_runner.js:127905:9)
  at tryCatcher (http://localhost:8000/__cypress/runner/cypress_runner.js:9065:23)
  at Promise._settlePromiseFromHandler (http://localhost:8000/__cypress/runner/cypress_runner.js:7000:31)
  at Promise._settlePromise (http://localhost:8000/__cypress/runner/cypress_runner.js:7057:18)
  at Promise._settlePromise0 (http://localhost:8000/__cypress/runner/cypress_runner.js:7102:10)
  at Promise._settlePromises (http://localhost:8000/__cypress/runner/cypress_runner.js:7178:18)
  at _drainQueueStep (http://localhost:8000/__cypress/runner/cypress_runner.js:3772:12)
  at _drainQueue (http://localhost:8000/__cypress/runner/cypress_runner.js:3765:9)
  at Async.../../node_modules/bluebird/js/release/async.js.Async._drainQueues (http://localhost:8000/__cypress/runner/cypress_runner.js:3781:5)
  at Async.drainQueues (http://localhost:8000/__cypress/runner/cypress_runner.js:3651:14)

开始测试的脚本：

"test:e2e:ci": "start-server-and-test develop http://localhost:8000 cy:run"
"develop": "gatsby develop",

有人知道如何解决这个问题吗？因为在本地机器上一切正常...

Answer 1

当您的 CI 中存在您无法在本地重现的问题时，您应该尝试的第一件事是仔细检查您的 CI 环境，并确保它与您的本地机器非常匹配.

对于 Gatsby 网站，尤其是在使用需要保密的插件时（例如您的 Shopify 凭据），一个常见的问题是没有在 CI 中正确设置您的 environment variables .

确保您的 GitHub 存储库设置了正确的机密，并且您将它们提供给您的 GitHub 操作。查看 GitHub 的 Creating and storing encrypted secrets 寻求帮助。

如果您确定您的环境变量不是问题所在，您可以调试 Cypress CI 运行，方法是将 Cypress 屏幕截图和视频保存为 GitHub Action 工件。 official Cypress GitHub Action has an example 如何使用 GitHub 的 actions/upload-artifact。

Cypress 对 Gatsby 的测试在 GitHub 个操作上失败

Cypress tests for Gatsby failed on GitHub Actions

shopify

contentful

gatsby

cypress

github-actions