Hello Folks,
I will explain independent-dependent concept in writing XPath expression.
Consider below scenario:
You need to get the displayed price of iPhone 7 of all variants on Flipkart website. As we know price will vary based on model number, memory, color etc. Even price may change also with time or when some sale in on. But model name will be always constant. So, can we say that if we retrieve price based on model name, we will get always updated price.
Price is dependent on model number. Here we can say, model name is independent entity while price is dependent entity which depends upon respective model number.
Consider another scenario:
Suppose you have a form which asks details like Name, Age, Gender, Email id and mobile number and provided a text area with proper label. As a good automation tester, you should check the label before typing. So, first you need to check the label and then you need to go to corresponding input/textarea. This is also a scenario for independent-dependent concept.
How to write XPath expression for such element:
Step 1: Open Flipkart and search for iphone 7.
Step 2: Right click on model name and inspect it. It will highlight a div tag.
Step 3: Now move towards upper nodes just by using upper arrow key or touch pad till model name and its price both are highlighted. This will give you common parent of independent and dependent element.
Step 4: Now, write XPath to locate model name only as:
//div[contains(text(),’Apple iPhone 7 (Black, 32 GB)’)]
It will highlight only model name web element.
Concept: There is a 3 BHK flat. From hall you can go to any room. If you go inside a room, you can not go another room directly. You need to come out from room and go to hall and then you can go for another room.
Same concept applies here. You are inside div and you can navigate only to node inside div. You can not go any node which is outside of div. Here price of model is in another div. So you must need to go to common parent i.e. hall to navigate to div.
You can traverse to immediate parent node by using double dots with slash. To reach common parent, you need to move up two times. So you need to use double dot with slash twice.
Parent of model name web element:
XPath: //div[contains(text(),’Apple iPhone 7 (Black, 32 GB)’)]/..
Common parent of model and price web element.
XPath: //div[contains(text(),’Apple iPhone 7 (Black, 32 GB)’)]/../..
Step 5: Now you have reached to common parent and you are able to go to any immediate children of common parent. As we can see there is two div element and price is in second div. So, we can navigate to directly second div using index.
XPath: //div[contains(text(),’Apple iPhone 7 (Black, 32 GB)’)]/../../div[2]
Step 6: Now we well very well how can you traverse to price web element.
XPath: //div[contains(text(),’Apple iPhone 7 (Black, 32 GB)’)]/../../div[2]/div[1]/div[1]/div[1]
That’s it. I think it will help you to understand independent-dependent concept. If you have any doubt feel free to ask me.
If you like my posts, please like, comment and share. Feedback and suggestions are always welcomed.
Thank you !!
#HappyLearning