Setting dataAttribute does not work for clicks on nested elements

[scharf]

I have a case where I have a structure like this (I have set the dataAttribute to data-testid in the settings):

<li data-testid='some-id'>
   <a href="...">a label</a>
</li>

The reason, I cannot set the data-testid on the a is, because I use a UI library and that only allows me to set data attributes on the outer element and not on the inner element.

If I click on the <a>..</a>, I would expect, that the selector is [data-testid=some-id] > a but it does not recognize the dataAttribute in the parent of the clicked item.

I think it is probably a problem with @medv/finder. It seems finder does not support to look for data- attributes.

What you could do: walk up the tree (to some level) and until you find a dataAttribute and then use this as root for @medv/finder. And merge the two selectors.

If you want, I can provide some help for doing this, but it should be relatively straight forward....

[oscartavarez]

Thanks for your email.. I will run some tests using the library you mentioned. Will let you know

…

On Thu, Jun 13, 2019, 5:07 PM Michael Scharf ***@***.***> wrote: I have a case where I have a structure like this (I have set the dataAttribute to data-testid in the settings): <li data-testid='some-id'> <a href="...">a label</a> </li> The reason, I cannot set the data-testid on the a is, because I use a UI library and that only allows me to set data attributes on the outer element and not on the inner element. If I click on the <a>..</a>, I would expect, that the selector is [data-testid=some-id] > a but it does not recognize the dataAttribute in the parent of the clicked item. I think it is probably a problem with @medv/finder. It seems finder does not support to look for data- attributes. What you could do: walk up the tree (to some level) and until you find a dataAttribute and then use this as root <https://github.com/antonmedv/finder#root-element> for @medv/finder. And merge the two selectors. If you want, I can provide some help for doing this, but it should be relatively straight forward.... — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1?email_source=notifications&email_token=ABG3HWMWGBMFIUXONXHSUHDP2KZHPA5CNFSM4HX7EE42YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4GZNJLCQ>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABG3HWJQ5PSNH7CMUAJCNYDP2KZHPANCNFSM4HX7EE4Q> .

[jpike88]

@oscartavarez this is a great library, I think you'll get strong attention from the Cypress team if this does a good job. good luck

[fmoliveira]

@oscartavarez I've had the same issue in a project that uses react-intl for i18n, which adds children span tags to every processed string. When recording, the innermost span tags are clicked most of the times, so, no data attributes are recorded in most attempts.

I've fiddled a little bit with the code and came up with a solution that my team have been using for a few weeks with no problems, but I'm not sure if that's the best solution.

I've opened a PR at #4 to discuss about my solution.

[wolfi3b]

Hi guys..absolutely cool extension! Thank you a lot making it!

Just wanted to ask as this nested selection when clicking is kinda problem. Any progress there?