Fixed element id

[birbird]

The dynamically generated element ID attributes pose big challenge to our automated test (function test with tool like Selenium). We can work around the problem by using other attributes, but I think the most straightforward method is fixing the element ID if the dom structure does not change.

Is there any config in ember can achieve that?
Any help will be greatly appreciated!

[pixelhandler]

@birbird have you searched and/or posted on Stack Overflow yet for your testing question?

Perhaps reach out in the embercommunity.slack.com group in the #testing channel as well.

Since this is more of a question then an issue would you consider closing this?

[stefanpenner]

Will gladly reopen if this turns out to be an actual issue (preventing this from being solved). If it is an issue, a quick reproduction of the problem would be very help

[ieugen]

Hello,

We have the same problem. We can't write automated tests because ember always generates new ids and it uses the html id attribute instead of a custom one.

Other people (React ) use data- attributes instead of using id which could have other uses.
Custom attribute for a custom job.

<header class="header" data-reactid=".0.0">
<h1 data-reactid=".0.0.0">todos</h1>
<input class="new-todo" data-reactid=".0.0.1" value="" placeholder="What needs to be done?">
</header>

I think having something similar in ember is not hard to do and will solve a lot of issues regarding automated tests with selenium or similar tools that need to target elements with precision.

Thank you,

[ieugen]

I found a solution for my problems and I'm posting it for other people that get here.

If you are using selenium you can use custom data attributes in your ember app instead of using id attribute. In your selenium tests you can target those attributes and do checks.

[1] https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

[harryjackson]

Hit this issue today. We're integrating with Zendesk (so we cannot change their html/css etc) and they're using ember which means all the id's change every time the page loads :(. The id is the preferred way to get elements in Selenium and this is a real PITA. We can use Xpath but it's a cheap substitute.