React: Get Dom Element by Component Name

Created on 9 Jan 2020  路  7Comments  路  Source: facebook/react

Do you want to request a feature or report a bug? Feature

What is the current behavior?

React dev tools has the very useful "inspect dom node" feature that ties a component in your tree to its particular dom node.

What is the expected behavior?

In e2e testing scenarios using tools such as cypress I often find myself sprinkling data test id attributes throughout my code to select certain elements with which to do various assertions. I've found that these test id attributes closely mirror the component hierarchy. Instead of needing to declare this essentially duplicate information it would be useful if there was a utility which allowed me to programmatically retrieve a dom node that corresponds to a particular component's name for testing purposes. Ideally, this would essentially mirror the functionality of the "inspect dom node" feature in react dev tools.

Developer Tools Discussion

All 7 comments

cc: @bvaughn

Hi @bradenhs.

You've got uncanny timing with this issue. I've been thinking about the pros and cons of adding such an API this week. I think the upsides are pretty well understood. The team is currently discussing the potential downsides. I'll update this issue when we come to a decision one way or another.

I will be posting an RFC sometime this week. (I've already written it, just haven't shared it broadly yet.) It won't be find-by-name, rather find-by-component (the function/class itself), and there will be a couple of other constraints- but I think there's a good path forward for e2e.

I'm going to close this issue because this sort of API should be an RFC anyway, but I'll leave a comment here to link the two once the RFC has been posted.

Edit 1 Have not forgotten. Still waiting on an internal round of review before posting publicly. (Everyone is very backed up at the moment.)

Edit 2 Still have not forgotten (and promise not to). We're just really busy at the moment.

Small update. My internal/pre RFC has been through a round of discussion with Sebastian and I think, once I've taken a pass at cleaning it up and formatting it for the public RFC template, it should be ready to share. Hopefully sometime this week!

Going to do a small scale review of the RFC tomorrow with a couple of stake holders, then I plan to publish it to the RFCs repo this week.

I'm going to stop commenting here probably, because it's just bumping an issue without adding much value- but before I do:

This is still an ongoing thing I'm considering and working on.

It's been held up because Sebastian and I are still trying to determine the right scope for the API.

I've already written a private RFC (though it may change a bit) and started implementing it for React DOM in the meanwhile. Hopefully I will have something more to share soon, but at the moment everything is kind of a bit up in the air because of health issues.

Thanks for the update. No rush but when an RFC does get posted a link to that here would be great!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

acdlite picture acdlite  路  83Comments

gabegreenberg picture gabegreenberg  路  119Comments

AdamKyle picture AdamKyle  路  148Comments

gaearon picture gaearon  路  126Comments

gaearon picture gaearon  路  111Comments