Cypress：如何访问第三方组件？答案

【问题标题】：Cypress: how to access third party component?Cypress：如何访问第三方组件？
【发布时间】：2020-04-20 12:37:22
【问题描述】：

在 Cypress 中，我通常使用 data-test-id 属性访问 DOM 元素。它们是用 html 硬编码的。

示例：

<div data-test-id="my-div"></div>

然后

cy.get('[data-test-id=my-div]').click();

但我不能使用这种方法，因为我正在开发的应用程序使用第三方库来生成一些第三方组件。几个例子：ngx-datable、full-calendar...

因此，无法直接访问 html 来创建 data-test-id 属性。我不想根据 x/y 位置生成点击，因为我认为这不是各种屏幕尺寸的可靠替代方案。这个问题有解决办法吗？

【问题讨论】：

【解决方案1】：

对于很多组件来说，只需访问父级就足够了，基本上：

<some-component data-cy="foo" />

在您必须访问内部结构的更复杂的情况下，我会尽量使其独立于结构。因此，如果您可以先使用类标签，然后再使用组件类型或在最坏的情况下使用 ID。然后在外部组件上使用data-cy，然后使用find向下遍历结构（无论如何我都建议使用find）

示例

如果您有一个创建输入和标签的表单组件，请执行以下操作：

<some-form-component label="foo" model="blah" data-cy="foo" />

如果组件具有类（首选）form-label 和form-input，则使用以下方法选择它们：

cy.get('[data-cy="foo"]').find('.form-label')
// and
cy.get('[data-cy="foo"]').find('.form-input')

如果组件 (fallback) 只包装了正常的原始类型，但没有可使用的合理类，则执行以下操作：

cy.get('[data-cy="foo"]').find('label')
// and
cy.get('[data-cy="foo"]').find('input')

如果您只有 ID（不要这样做，除非您别无选择）然后按 ID 进行选择：

cy.get('[data-cy="foo"]').find('#label')
// and
cy.get('[data-cy="foo"]').find('#input')

在使用 ID 的最后一种情况下，请考虑查找其他组件，冒着在 html 页面上具有相同 ID 的风险是不好的。

渲染奇怪时 有些框架会做一些看似晦涩难懂的事情。我注意到的一件事是为一个组件使用多个输入。在这种情况下，cy.getByLabelText 可能是您的出路：https://stackoverflow.com/a/55896540/1441857

【讨论】：