2

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>
  • Please share screenshot of UI as well. – Sagar007 Nov 26 '18 at 9:56
  • 1
    If I understand your question correctly, and you're stating that there will be various input type web elements inside the divisions listed above, and those web elements don't have their own unique identifier, then //div[@name="wcName"]/input would find the input web element inside the wcName division. – Bill Hileman Nov 26 '18 at 14:41
  • @Nilam Nikam, check the answer i have posted. let me know if you have any query. – NarendraR Nov 27 '18 at 10:11
2

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
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.