How to find Dynamic Web Elements in Selenium

Let’s first understand, What are dynamic elements?

Dynamic Web elements are those elements, who’s IDs change every time when you reload the Web page or a Web Element generates automatically When a page gets reload.

There are a lot of websites, Which have these type of web Elements. So now the challenge is, How can we manage these type of elements in Selenium. You can’t choose or create the fix XPath or CSS Selectors for these web Elements. If you do then your test script will fail every time when it executes.

 

Video Tutorial:

If you liked this video, then please subscribe to our YouTube Channel for more video tutorials.

 

Find Dynamic Web Elements using CSS Selectors

Suppose we have a Web Element whose ID is like XXXXdynamicidXXXX. In this ID, In above-mentioned ID, this ‘dynamic’ text is fixed rest of the part very everytime page gets the refresh. So how can we handle this? First, We will see this with the help of CSS selector–

 

We knows the CSS Selector structure is like — tag[attribute=’value’]

Suppose we are taking the example of OyePages.com SignUp page. We want to find the location of Web Element FirstName and Id of this element varies.

Dynamic ID Elements

 

Although we know this Id is fixed but just assume this is dynamic and the only fix part in Id is “first name”. So there may be three possibilities –

  1. The fixed part of the Id appears in the starting of the Id (like – firstname_1, firstname_2,firstname_3 etc). Then, in this case, we use “Carrot character(^)“, to make CSS selector dynamic for dynamic IDs.
    CSS Selector would be — input[id^=’firstname’]

  2. The fix part of the Id appear in the middle of the Id (like – 5_firstname_1, mm_firstname_2, chd_firstname_3 etc). Then in this case we use “Asterisk sign(*)“, to make CSS selector dynamic for dynamic IDs.
    CSS Selector would be — input[id*=’firstname’]

  3. The fixed part of the Id appear in the end of the Id (like – 523_firstname, mmpot_firstname, chd_firstname etc). Then, in this case, we use “Dolor sign($)“, to make CSS selector dynamic for dynamic IDs.
    CSS Selector would be — input[id$=’firstname’]

 

That’s all, How we can create the CSS selectors for the dynamic ids.

Above, We can clearly see the HTML structure of the First name field Oyepages.com signup page.

 

Let’s understand this with this selenium script. This selenium script opens the Facebook page and enters these values in FirstName field for each test case.

The above script will open the Oyepages.com registration page and enter the first name three times.

 

Find Dynamic Web Elements using XPath

Like CSS Selector’s XPath is also can play with the dynamic ids. In XPath, we can use two functions “starts-with” and “contains” and structure would be like.

//tag[start-with(@attribute, ‘same x-path’)]

//tag[contains(@attribute, ‘same x-path’)]

 

Let’s take the above example and see how can we manage this with the XPath.

  1. Start-with – We can use this function when ID in starting is constant then dynamic. For the oyepages.com firstname field XPath should be —
    //input[start-with(@id, ‘YumRegistrationForm’)]

  2. contains – We can use this if Id contain any fixed value at any place. In our example we can use this like —
    //input[contains(@id, ‘_firstname’)]

 

Let’s execute the Selenium script for these functions.

The above script will open the oyepages.com and enter the value in Firstname field twice.

To understand it batter practice it yourself, it’s very important concept for automation testing.

 

This is all, how we can manage and handle the dynamic id’s or web element in the selenium. If you have any doubt feel free to write us.

2 Comments
  1. Britt Somlazimir 10:08 AM / July 3, 2017 - Reply

    Neat blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple adjustements would really make my blog stand out. Please let me know where you got your theme. Many thanks

  2. Jay Montroza 3:14 PM / July 5, 2017 - Reply

    With havin so much content do you ever run into any issues of plagiarism or copyright violation? My site has a lot of completely unique content I’ve either created myself or outsourced but it appears a lot of it is popping it up all over the web without.

Leave a Reply