Ant-design: Add ids to form related components ( date input fields, radio buttons and checkboxes, dropdowns, etc)

Created on 24 Nov 2017  ·  7Comments  ·  Source: ant-design/ant-design

What problem does this feature solve?

It makes it easy to do end-to-end testing using Selinium and xPath

What does the proposed API look like?

For example a code like this:

<DatePicker id='datepicker' /> should give in the compiled code something like this:

...
<div class="ant-calendar-date-input-wrap">
       <input class="ant-calendar-input " value="" placeholder="Select date"  id="datepicker">
</div>
...

Thank you very much for the great job you are doing!

Inactive help wanted

Most helpful comment

Adding an id to input fields (even inside components like DatePicker) is important for accessibility reasons. I want to add an htmlFor to associated labels, and focus the input fields when I click the labels.

All 7 comments

Adding ids won't work for all components. Let's say Select component, a simplest Select component doesn't render input, you can not assign a value to input to change Select's value.

@yesmeck thank you for giving me more information regarding this issue, so is there any other way around that you are aware? Do you know any other tools which would work well for end-to-end testing? is this going to work on the antd@3? If no... at least we will be able to read pre-populated values.

Adding id to DatePicker input won't work. I you want to populate a DatePicker, you need simulate user behavior:

  1. Find '.ant-calendar-picker' and simulate a click;
  2. Find '.ant-calendar-input ' and populate it's value;
  3. Simulate click on body to close date picker panel.

As far as I could see, there is currently no way to pass any kind of id to the input field with the class '.ant-calendar-input'.
I will have a look into the rc-calendar module.

Adding an id to input fields (even inside components like DatePicker) is important for accessibility reasons. I want to add an htmlFor to associated labels, and focus the input fields when I click the labels.

PR anytime if you find any component doesn't support id.

I'm using uilicious.com for my UI testing and it's very challenging when IDs are not present.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tianyacsdn picture tianyacsdn  ·  3Comments

yangbin1994 picture yangbin1994  ·  3Comments

ericdai picture ericdai  ·  3Comments

longhuasishen picture longhuasishen  ·  3Comments

zhangchen2397 picture zhangchen2397  ·  3Comments