Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ids to form related components ( date input fields, radio buttons and checkboxes, dropdowns, etc) #8305

Closed
TimMisikos opened this issue Nov 24, 2017 · 7 comments
Labels
help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. Inactive

Comments

@TimMisikos
Copy link

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!

@benjycui benjycui added the help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. label Nov 27, 2017
@yesmeck
Copy link
Member

yesmeck commented Dec 12, 2017

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.

@TimMisikos
Copy link
Author

@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.

@yesmeck
Copy link
Member

yesmeck commented Dec 14, 2017

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.

@mgrdevport
Copy link
Contributor

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.

@JeffreyATW
Copy link
Contributor

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.

@yesmeck
Copy link
Member

yesmeck commented Jan 25, 2018

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

@ttgiang
Copy link

ttgiang commented Jan 18, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. Inactive
Projects
None yet
Development

No branches or pull requests

7 participants