Issue
In Cypress I usually access DOM elements with data-test-id attributes. They are hard coded in html.
Exemple:
<div data-test-id="my-div"></div>
then
cy.get('[data-test-id=my-div]').click();
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...
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?
Solution
For a lot of components it's enough to just access the parent, to basically:
<some-component data-cy="foo" />
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)
Examples
If you have a form component that create the input and label, do:
<some-form-component label="foo" model="blah" data-cy="foo" />
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')
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')
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')
In the last case with the IDs consider finding other components, risking having the same ID on a html page is bad.
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
Answered By - Rohde Fischer
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.