Project

General

Profile

Bug #26056

Assigning ID to elements in the new web-ui as an efficient element locator

Added by Rishabh Chauhan almost 4 years ago. Updated over 3 years ago.

Status:
Done
Priority:
Blocks Until Resolved
Assignee:
Rishabh Chauhan
Category:
GUI (new)
Severity:
Reason for Closing:
Reason for Blocked:
Needs QA:
Yes
Needs Doc:
Yes
Needs Merging:
Yes
Needs Automation:
No
Support Suite Ticket:
n/a
Hardware Configuration:
ChangeLog Required:
No

Description

QA automation testing for the new WebUI requires Id in order to locate the elements to be tested along with there functionality. I have been using XPATHs to locate an element till now, which is ok till the layout of a page is completely untouched. Since we are still in the development phase, the XPATH of an element may change even if an extra frame is added for whatsoever reason. So adding ID basically gives a unique identifier (static unlike XPath) to the element which makes the test-framework more robust and efficient. I have already discussed with Joe, Erin and VB, as to why it is needed. So here I will be explaining as to what is needed (which should not be too much extra work, just a bit though :P )
I am attaching images numbered 1-9 and each image has a red circle with a tag number which will explain the requirement. I have tried to explain most of it, but feel free to reach out to me personally or comment your doubts.

Image 1:
Tag 1- new UI collapses the menu bar on the left when opened on a small screen, IDs of elements like these would be needed which dynamically change(another example is hover buttons)
Tag 2- All the Top-right-corner options with there drop down lists as well

Image 2:
Tag 3& 4- All Left hand side Menus and Submenus

Image 3:
Tag 5- User listing(is there a way to know if an ID is assigned to a new user in the list or any other way to locate the element which is created in the list)
Tag 6- Hover button and submenus
Tag 7- 3dotmenus(I hope that serves the purpose, I think it should relate with the element locator for the user list as well)

Image 4:
Tag 8- All the Textboxes which needs to be given an input (even if input type is Password)
Tag 9- All the objects which are checkboxes or radio buttons
Tag 10- All the drop-down lists with there elements
Tag 11- All the Buttons

Image 5:
Tag 12- All Information buttons(I think it is similar to hover buttons)

Image 6:
Tag 13- Buttons with only icons
Tag 14- similar to tag 13

Image 7:
Tag 15- All the Toggle switches

Image 8:
Tag 16- I will have to discuss how shell works in this

Image 9:
Tag 17- All the Submenus

This is just an example of things which are needed since they will need to be located to test the UI. I think a lot of new pages and features are yet to be created, so once id naming convention is established, it should be easier to assign id while creating a page itself.

I have tried to make sense of this description as much as I could by writing, we can discuss verbally once you guys go through it.
Thanks in advance.
NOTE: the formatting of this message may change once I comment it, so I am attaching an image as well, which will be helpful in referencing other images and tags

1-webui-small.png (67.4 KB) 1-webui-small.png Rishabh Chauhan, 10/04/2017 03:10 PM
0-tags.png (164 KB) 0-tags.png Rishabh Chauhan, 10/04/2017 03:10 PM
2-webui-large.png (246 KB) 2-webui-large.png Rishabh Chauhan, 10/04/2017 03:10 PM
3-user list and options.png (310 KB) 3-user list and options.png Rishabh Chauhan, 10/04/2017 03:10 PM
5-information icons.png (214 KB) 5-information icons.png Rishabh Chauhan, 10/04/2017 03:10 PM
4-user form.png (229 KB) 4-user form.png Rishabh Chauhan, 10/04/2017 03:10 PM
6-tasks.png (204 KB) 6-tasks.png Rishabh Chauhan, 10/04/2017 03:10 PM
7-toggle-switch.png (260 KB) 7-toggle-switch.png Rishabh Chauhan, 10/04/2017 03:10 PM
8-shell screen.png (184 KB) 8-shell screen.png Rishabh Chauhan, 10/04/2017 03:10 PM
9-Tabs.png (204 KB) 9-Tabs.png Rishabh Chauhan, 10/04/2017 03:10 PM
id_checkbox_account_user_createnewuser.png (228 KB) id_checkbox_account_user_createnewuser.png Account(SideNav)>User>create new user> Checkbox(Create a new Primary Group for the user) Rishabh Chauhan, 11/08/2017 12:38 PM
id_system_navbar.png (248 KB) id_system_navbar.png System(Side Nav) Rishabh Chauhan, 11/08/2017 12:38 PM
id.png (12.6 KB) id.png Rishabh Chauhan, 01/17/2018 12:33 PM
delus.png (10.1 KB) delus.png Rishabh Chauhan, 01/29/2018 02:49 PM
12612
12613
12614
12615
12616
12617
12618
12619
12620
12621
12972
12973
13943
14147

History

#1 Updated by Anonymous almost 4 years ago

  • Assignee changed from Release Council to Vaibhav Chauhan
  • Priority changed from No priority to Expected

#2 Updated by Dru Lavigne almost 4 years ago

  • Status changed from Untriaged to Unscreened

#3 Updated by Dru Lavigne almost 4 years ago

  • Target version changed from 11.1-BETA1 to 11.1

#5 Updated by Vaibhav Chauhan almost 4 years ago

  • Status changed from Unscreened to 15
  • Assignee changed from Vaibhav Chauhan to Rishabh Chauhan

right now lola and myself have added some autogenerated id's to entity-form, please let us know if that would work for you now ?

#6 Updated by Rishabh Chauhan almost 4 years ago

  • Assignee changed from Rishabh Chauhan to Vaibhav Chauhan

I have already checked the entity form, and it seems useful so far (Good job :D ), hopefully, it remains useful till the end. If there is any glitch in the autogenerated IDs for the entity form, I will let you know. Other than that I still need IDs for other elements, like I have explained in the image (such as side menu, top right panel, also tabs in image 9 and similar occurrences )

#7 Updated by Dru Lavigne almost 4 years ago

  • Status changed from 15 to Screened

#8 Updated by Dru Lavigne almost 4 years ago

  • Target version changed from 11.1 to Master - FreeNAS Nightlies

#9 Updated by Rishabh Chauhan almost 4 years ago

  • Priority changed from Expected to Blocks Until Resolved
  • Target version changed from Master - FreeNAS Nightlies to 11.1

Tag 8 & 9 have been completed so far!
QA WebUI testing needs other tags to be completed as well in order to have proper New WebUI testing ASAP!

#10 Updated by Vaibhav Chauhan almost 4 years ago

  • % Done changed from 0 to 30

we have added id's to sidenav

#11 Updated by Dru Lavigne almost 4 years ago

  • Target version changed from 11.1 to 11.2-BETA1

#12 Updated by Rishabh Chauhan almost 4 years ago

I verified. Side Nav has been updated with IDs. Goodjob and Thanks!

#13 Updated by Rishabh Chauhan almost 4 years ago

12972
12973

I double checked...there is an issue, Since the naming convention is numericals for both side nav and entity forms...there is a very high priority of id conflict..for example...in the following two instances...both have ID=2 at the same time...,
Account(SideNav)>User>create new user> Checkbox(Create a new Primary Group for the user)
System(Side Nav)

I am also attaching a screenshot to explain the problem better with IDs highlighted..
this creates a problem if I navigate from create new user to system side bar or any other side bar..

#14 Avatar?id=14398&size=24x24 Updated by Kris Moore almost 4 years ago

  • Assignee changed from Vaibhav Chauhan to Nesma Shah

Nesma is looking for tickets, load balancing

#15 Updated by Nesma Shah almost 4 years ago

  • Status changed from Screened to 15
  • Assignee changed from Nesma Shah to Kris Moore

does ids need to follow any rules or particular format???

#16 Updated by Nesma Shah almost 4 years ago

please provide and example with that.

#17 Avatar?id=14398&size=24x24 Updated by Kris Moore almost 4 years ago

  • Assignee changed from Kris Moore to Rishabh Chauhan

Rishabh, can you provide Nesma some examples here?

#18 Updated by Rishabh Chauhan almost 4 years ago

Hi Nesma and Kris,
I just saw these comments.
So Nesma, If you will go through the images, I have provided examples of what I think would be helpful in order to locate the elements.
Lola and Vb worked on few things which was helpful, I will first explain what they did:
1. Since in each page, all the elements are generated using entity forms, they assigned a simple numerical ID to each element(for ex- inputbox, checkbox, radio button etc) using for loop. The only element left to assign the ID on each page is the button.
2.In the similar fashion, the assigned Id to the elements in the side Navigation bar, but since there would be ID conflict on a page and side Navigation they assigned the IDs in the following fashion- Dashboard Id: Nav-0, Account Id: Nav-1 and so on..., and for the elements underneath them- Account>User Id: 1-0 (It means, element with id "0" after clicking the element with id "Nav-1" ), Network>Global Configuration: 4-0 (It means, element with id "0" after clicking the element with id "Nav-4" )

I would suggest, discuss with them also how did they actually do it to get a better idea.

so this is what has been done,
Rest everything else mentioned above in the ticket is yet to be done. For eg- Ids to the login/logout, reboot buttons and other things.
There was a lot of interaction between me VB and Lola to understand what needs to be done. Feel free to telegram me with any other questions. And really, thanks for the help, in advance :D

#19 Updated by Rishabh Chauhan almost 4 years ago

  • Assignee changed from Rishabh Chauhan to Nesma Shah

#20 Updated by Dru Lavigne almost 4 years ago

  • Status changed from 15 to Screened

#21 Avatar?id=14398&size=24x24 Updated by Kris Moore almost 4 years ago

  • Assignee changed from Nesma Shah to Anonymous

#22 Updated by Anonymous almost 4 years ago

  • Assignee changed from Anonymous to Peter Southwell

#23 Updated by Peter Southwell over 3 years ago

  • Status changed from Screened to Ready For Release
  • % Done changed from 30 to 100

#24 Updated by Dru Lavigne over 3 years ago

  • Status changed from Ready For Release to Resolved
  • Target version changed from 11.2-BETA1 to Master - FreeNAS Nightlies

#25 Updated by Rishabh Chauhan over 3 years ago

Is it ok if I double check this one, since its utility is very crucial to me writing tests before we mark it as resolved ? I am updating my machine now, I will update whatever I find

#26 Updated by Dru Lavigne over 3 years ago

  • Status changed from Resolved to 47

#27 Updated by Dru Lavigne over 3 years ago

  • Assignee changed from Peter Southwell to Rishabh Chauhan

#28 Updated by Rishabh Chauhan over 3 years ago

13943

Hi, I just realised and found that the xpath of certain elements change even with a refresh making it impossible to locate few important elements.
I found this issue while performing automated webui tests for the new UI.
clicking on Logout button is almost impossible via automation since xpath is constantly changing..
this is the xpath of logout button in the same login session but when in multiple refreshes and also if I try to click the logout button from any other page.

/html/body/div3/div3/div/div/button5/div

/html/body/div3/div2/div/div/button5/div

/html/body/div4/div2/div/div/button5/div

/html/body/div3/div2/div/div/button5/div

and this is the case with all the elements of the dropdown list from the root button!
So it would be very helpful to have id assigned to these elements from the dropdown list(ref image:id). It was also mentioned in the original bug ticket.

#29 Updated by Rishabh Chauhan over 3 years ago

  • Status changed from 47 to 15
  • Assignee changed from Rishabh Chauhan to Peter Southwell

#30 Updated by Dru Lavigne over 3 years ago

  • Status changed from 15 to Unscreened
  • Target version changed from Master - FreeNAS Nightlies to 11.2-BETA1
  • Seen in changed from 11.1-BETA1 to Master - FreeNAS Nightlies

#31 Updated by Rishabh Chauhan over 3 years ago

I noticed the exact same issue with the themes...
XPATH of the first theme in the same login session
/html/body/div4/div2/div/div/md-grid-list/div/md-grid-tile1/figure/div/div2
/html/body/div3/div3/div/div/md-grid-list/div/md-grid-tile1/figure/div/div2

ID in the form of simple numbers will work too, just like it was added in the entity forms.

#32 Updated by Peter Southwell over 3 years ago

didn't read this carefully enough Rishabh Chauhan... I basically just went in and added more IDs... But not the ones you requested.. And came up with no convention persay.. Other then.. Name of the component file..

SO............

Im going to at least bang out IDs for everything that's requested in this ticket. First pass..

Then.. Ill come up with a scheme for things that are random/based on data.. Like checkboxes on a form populated from data in a REST API... For example.

#33 Updated by Rishabh Chauhan over 3 years ago

Wow, that would be amazing Peter..really :D :D

#34 Updated by Peter Southwell over 3 years ago

Current state.. So I know whats here..

*Image 1:
Tag 1- new UI collapses the menu bar on the left when opened on a small screen, IDs of elements like these would be needed which dynamically change(another example is hover buttons) *

These are now there. BUT.... I need to add them for the right menu popup and some popups. Its now in the left side nave and all the buttone on the top toolbar.

*Tag 2- All the Top-right-corner options with there drop down lists as well *

A couple need to be done.

*
Image 2:
Tag 3& 4- All Left hand side Menus and Submenus *

Done.

*Image 3:
Tag 5- User listing(is there a way to know if an ID is assigned to a new user in the list or any other way to locate the element which is created in the list) *

To Do.. WHich I can add to entity-table. not seeing it now.. But easy to add.

*Tag 6- Hover button and submenus *

To Do.. Some lots have them. But still have to add ones missing.

Tag 7- 3dotmenus(I hope that serves the purpose, I think it should relate with the element locator for the user list as well) *

To DO.

*Image 4:
Tag 8- All the Textboxes which needs to be given an input (even if input type is Password)
Tag 9- All the objects which are checkboxes or radio buttons
Tag 10- All the drop-down lists with there elements
Tag 11- All the Buttons
Image 5:
Tag 12- All Information buttons(I think it is similar to hover buttons)

Image 6:
Tag 13- Buttons with only icons
Tag 14- similar to tag 13

Image 7:
Tag 15- All the Toggle switches

Image 8:
Tag 16- I will have to discuss how shell works in this

Image 9:
Tag 17- All the Submenus *

To Do.. (Check which do and which don't)

#35 Updated by Dru Lavigne over 3 years ago

  • Status changed from Unscreened to In Progress

#36 Updated by Peter Southwell over 3 years ago

Added IDs.

Form buttons. And some extra IDs in entity-form and entity-embeded-form

Actions

Table Rows actual row/column values

https://github.com/freenas/webui/pull/318

#37 Updated by Peter Southwell over 3 years ago

  • Status changed from In Progress to Done

#38 Updated by Dru Lavigne over 3 years ago

  • Status changed from Done to In Progress

#39 Updated by Peter Southwell over 3 years ago

  • Status changed from In Progress to Done

Ready to have this spin into nigfhtly and tested

#40 Updated by Peter Southwell over 3 years ago

  • Assignee changed from Peter Southwell to Rishabh Chauhan

Just for your testing sir.. Should be able to run your scripts on it now Rishabh

#41 Updated by Rishabh Chauhan over 3 years ago

Awesome Peter...I am waiting for tonight's build... :D :D I am excited to see the changes you have put in :D

#42 Updated by Dru Lavigne over 3 years ago

  • Target version changed from 11.2-BETA1 to Master - FreeNAS Nightlies

#43 Updated by Rishabh Chauhan over 3 years ago

Finally, I will test it today since we have a nightly with changes

#44 Updated by Rishabh Chauhan over 3 years ago

  • Status changed from Done to In Progress
  • Assignee changed from Rishabh Chauhan to Peter Southwell

Hey Peter, from our conversation from Friday, it would be very much appreciated if you could look into the "config.name" bug :D let me know if you need anything from my end...

#45 Updated by Rishabh Chauhan over 3 years ago

14147

Hey Pete, I would require your help with one more thing..
I know you have assigned ID to the table action menu button(the 3 dots at the end of user list) i.e "table_actions_menue_button".
Each table action menu button (3 dot) has same ID as above, so it is difficult to click a specific button since there is ID conflict. Is it possible that in the list, these button's ID is in relation to the username, like you have done with the actual display of the username(which I actually like a lot :D)
refer the attached image

#46 Updated by Peter Southwell over 3 years ago

Wont be able to put that in action.. .because there's no mechanism to pick a unique column for the various rest feeds the table renders.. with out massive additions of code to achieve that.. Id like to hold off on that. What you can do.. Is grab the DOM element of the Row.. And then.. Do sub query on that partial tree to find the action IDs.. in the case of the table.

#47 Updated by Peter Southwell over 3 years ago

  • Status changed from In Progress to Done

fixed config.name Which fixes many of the form problems.

#48 Updated by Rishabh Chauhan over 3 years ago

  • Status changed from Done to In Progress
  • Assignee changed from Peter Southwell to Rishabh Chauhan

I will check the config.name tommorow

#49 Updated by Dru Lavigne over 3 years ago

  • Status changed from In Progress to Done

Also available in: Atom PDF