在赛普拉斯中，我通常使用data-test-id属性访问DOM元素。它们是用html硬编码的。
示例：
<div data-test-id="my-div"></div>
然后
cy.get('[data-test-id=my-div]').click();
但是我不能使用这种方法，因为我正在使用的应用程序使用第三方库来生成一些第三方组件。 举几个例子：ngx可伸缩，全日历...
因此，无法直接访问html以创建data-test-id属性。我不想基于x / y位置产生点击，因为我认为这对于各种屏幕尺寸都不是可靠的选择。有解决这个问题的方法吗？
答案 0 :(得分：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