React-bootstrap-typeahead: Add "id" as a property I can set on Typeahead for use in automated testing

[rsshilli]

Hello!

I'm using this package and it's working beautifully. Thank you for your hard work!

Now I'm trying to create a few automated tests. I have 4 Typeahead components on the my page. I'd love to identify them like:

<Typeahead id="assignedToTypeahead" options=....>

So that I can use that ID in WebdriverIO/Selenium to type into the Typeahead and enter data. I'm surprised I'm the first person to hit this issue, honestly. I've tried putting the id attribute there, but there's nothing in my webpage when I look at it with Chrome's developer tools.

How do others write automated end to end tests?

Ryan

[ericgio]

Seems reasonable. I assume the id would just go on the outermost div?

[rsshilli]

I could make that work, but ideally it would be on the first input that you type into.

[ericgio]

While it solves your particular problem, I'm not sure applying id to a sub-component is very intuitive. I think the right solution is for the input to be more customizable, just as the menu is. That's not trivial, though.

[rsshilli]

Agreed. And I don't think this is worth overthinking. For my case, and I suspect most people's, I just want to call something like:

"#myTypeaheadId".setText("This is some text");

If you set it on the outside div, that'll work fine too. I can then use a selector to get to the first input.

[ericgio]

Are you able to use CSS class selectors? That seems like the easiest solution to your problem.

[rsshilli]

Yes, I already have a work around to this issue with CSS selectors. I can set my own ID on the outermost element and work from there (hoping you don't change the underlying structure excessively).

Maybe the right solution would be to take the ID of the outermost element, if it's set, and then set IDs on the elements that you create inside by appending various strings? So if the outermost element has ID "projectManager" then you could put IDs like "projectManager_textInput" and "projectManager_dropDown" or whatever. Then people could get at whatever they wanted.

[ericgio]

inputProps prop added in v2.0.0-alpha.1 that allows adding arbitrary props to the input.