赛普拉斯：如何访问第三方组件？ [英] Cypress: how to access third party component?

问题描述

在赛普拉斯中，我通常使用data-test-id属性访问DOM元素。

In Cypress I usually access DOM elements with data-test-id attributes. They are hard coded in html.

示例：

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

然后

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

但是我无法使用此方法，因为我正在使用的应用使用第三方库生成一些第三方组件。
几个示例：ngx可伸缩，完整日历...

But I can't use this method because the app I'm working on uses third party libraries to generate some third party components. A few examples: ngx-datable, full-calendar...

因此，无法直接访问html以创建data-test-id属性。我不想基于x / y位置产生点击，因为我认为在各种屏幕尺寸下，这都不是可靠的选择。

Therefore the html is not directly accessible to create data-test-id attributes. I don't want to generate a click based on an x/y position cause I don't think this would be a reliable alternative with various screen sizes. Is there a solution to this problem?

推荐答案

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

For a lot of components it's enough to just access the parent, to basically:

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

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

In more complex case where you have to access the inner structure, I'd try to keep it a independent of the structure as possible. So if you can go for class tags first, then component types or in the worst case IDs. Then use the data-cy on the outer component and then using find to traverse down into the structure (I'd recommend using find no matter what)

示例

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

If you have a form component that create the input and label, do:

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

如果组件具有类（首选） form-label 和 form-input ，然后使用以下命令选择它们：

If the component have the classes (preferred) form-label and form-input, then select them using:

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

如果组件（ fallback ）仅包装正常的原始类型，但没有可使用的明智的类，则执行以下操作：

if the component (fallback) only wraps the normal raw types, but have no sensible classes to use, then do:

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

，如果您唯一拥有的是ID（除非您没有其他选择，否则不要这样做），然后按ID进行选择：

and if the only thing you have is IDs (don't do this, unless you have no other option) then select by the IDs:

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

在最后一种具有ID的情况下，考虑寻找其他组件，冒着在html页面上具有相同ID的风险。

In the last case with the IDs consider finding other components, risking having the same ID on a html page is bad.

当渲染很奇怪时
有些框架似乎会使事情变得晦涩。我注意到的一件事是为一个组件利用多个输入。在这种情况下，根据以下答案， cy.getByLabelText 可能是您的出路： https ：//stackoverflow.com/a/55896540/1441857

When rendering is weird Some frameworks will do seemingly obscure things. One thing that has come to my attention is utilizing multiple inputs for a component. In that case cy.getByLabelText might be your way out per the answer here: https://stackoverflow.com/a/55896540/1441857

这篇关于赛普拉斯：如何访问第三方组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！