How can we automate the fields if there are multiple data components are present on UI and we need find inside elements

Question

I am new to selenium. following are some info. Can someone guide me to create xpath and this is the approach we are using to maintain the UI elements unique, so for this code, will selenium help to automated the fields.

All general components and containers having a custom attribute called data-component. So their parent element will contain - ...data-component = "text-input" or ...data-component="wc-card"

My code will look like this

<div data-component="wc-dialog">
<div data-component="text-input" name="wcName"></div>
<div data-component="text-input" name="wcCode"></div>
<div data-component="text-input" name="wcDescription"></div>
<div data-component="button-input" name="add-wc"></div>
</div>

Answer 1

If you observe below code

<div data-component="text-input" name="wcName"></div>
<div data-component="text-input" name="wcCode"></div>
<div data-component="text-input" name="wcDescription"></div>
<div data-component="button-input" name="add-wc"></div>

The name attribute is different in all 4 so you can locate using name. Refer below cssSelector code

div[name='wcDescription']

Or suppose these 4 remain common but parent i.e <div data-component="wc-dialog"> id different e.g.

<div data-component="wc-dialog">
    <div data-component="text-input" name="wcName"></div>
    <div data-component="text-input" name="wcCode"></div>
    <div data-component="text-input" name="wcDescription"></div>
    <div data-component="button-input" name="add-wc"></div>
</div>

<div data-component="wc-card">
    <div data-component="text-input" name="wcName"></div>
    <div data-component="text-input" name="wcCode"></div>
    <div data-component="text-input" name="wcDescription"></div>
    <div data-component="button-input" name="add-wc"></div>
</div>

Then pick the parent data-component attribute and locate e.g.

div[data-component='wc-card']>div[name='wcDescription']

Obviously you have some other elements (input, checkbox, button etc) within these div. e.g there is a input box within <div data-component="text-input" name="wcDescription"> the used below code to locate

div[data-component='wc-card']>div[name='wcDescription'] input

Answer 2

As long as the name, id, value, class attributes' values are different, you can easily pick them as unique identifier to automate the fields. No need to worry for them.

Confusions may arise when all available attributes for multiple data fields are exact same, but then again there is way around to solve this too!

That time you may choose to pick xpath as an option, though not encouraged! Choosing xpath option to automate should always be remain as second choice if there is alternative! Because automating with xpath has overhead compared to others.