在 github 操作中使用 .shadow() 和 cypress.io答案

【问题标题】：Using .shadow() with cypress.io in github actions在 github 操作中使用 .shadow() 和 cypress.io
【发布时间】：2021-12-05 23:54:41
【问题描述】：

我正在使用 Cypress 在 React 中编写一些 e2e 测试。我让它在我的本地开发环境中正常工作，但是当测试在 GitHub Action 管道中运行时它失败了。

我认为这是因为我正在尝试访问影子 Dom 元素，并且在运行操作时由于某种原因无法正常工作。

这是我的测试：

it('Should be able to click add to list button',
    { includeShadowDom: true },
    () => {
        cy.get('.IPEX_HSD_product_sheet_add_to_bag')
        .shadow()
        .find('kompis-icon-button', { includeShadowDom: true })
        .shadow()
        .find('button')
        .click();
    }
);

这是我的柏树配置：

{
    "baseUrl": "http://127.0.0.1:3000/#/",
    "includeShadowDom": true,
    "defaultCommandTimeout": 10000,
    "fixturesFolder": false,
    "integrationFolder": "./test/e2e",
    "pluginsFile": false,
    "supportFile": "./test/cypress.support.ts",
    "testFiles": "**/*.test.ts",
    "video": false
}

这些是我的 package.json 中的脚本：

"cypress:open": "cypress open --config-file ./test/cypress.config.json",
"test:e2e": "cypress run --headed --config-file ./test/cypress.config.json",
"test:e2e:ci": "start-server-and-test serve http://localhost:3000 test:e2e"

这是来自我的 workflow.yml：

  - name: Install dependencies and cache them. Run E2E tests against production build ????
    uses: cypress-io/github-action@v2
    with:
      build: npm run build
      start: npm start
      command: npm run test:e2e:ci
      cache-key: node-modules-${{ hashFiles('package-lock.json') }}

如您所见，我已尽可能添加 includeShadowDom: true ，但似乎没有效果。

我得到的错误是：

AssertionError: Timed out retrying after 10000ms: Expected to find element: `kompis-icon-button`, but never found it. Queried from element: <kompis-add-to-bag.IPEX_HSD_product_sheet_add_to_bag>

这是源 HTML：

【问题讨论】：

可以添加元素的html吗？
@AlapanDas 是的，我已经添加了。

标签： reactjs cypress github-actions

【解决方案1】：

假设您在cypress.json 中添加了"includeShadowDom": true,，那么您不需要在其他任何地方添加shadow()。 cy.get() 会自动遍历 shadow dom。

cy.get('.IPEX_HSD_product_sheet_add_to_bag', {timeout: 7000})
  .should('be.visible')
  .find('kompis-button > button', {timeout: 7000})
  .click()

【讨论】：

谢谢，但我已经尝试过了，它在本地运行良好，但是一旦我通过 git 操作运行它，测试就会中断。
你可以添加一个可见的断言。
再次感谢，但我很确定我的测试语法没问题。我的问题是 git 操作管道中发生了什么以及为什么它似乎无法在那里找到阴影元素。
我很想这样做，但我该怎么做呢？
您可以截取屏幕截图并将其添加到工件中进行调试。