TechAIDBlogDynamic Web Elements: How to interact with them?
By Mike Arias 02/27/2020 0

Dynamic Web Elements: How to interact with them?

Dynamic Web Elements: How to interact with them?

¿Have you ever mapped an element in your page object? It runs awesome the first time, and then… Does it just stop finding the element out of a sudden? This can happen for a bunch of reasons. One of these reasons could be that the element you’re trying to map is dynamic.

By Dynamic, I mean that the element’s locator changes every time the page is loaded. Developers do this for several reasons that can inspire a whole other article.

Let’s take as an example one element of this blog. If you go to the HomePage and inspect the posts that show up, you’ll notice the IDs are something like “post-XXX,” and they don’t show a clear numerical pattern. If we made a script that mapped “post-294” exactly, there is a chance that in the future, this element could give us problems.

 

Dynamic-elements

 

But what can we do to solve this?

There are several ways of tackling this issue. We’ll cover the most common ones:

 

Find alternative ways of locating the dynamic element.

Now we’ll dive into our first solution. If one method of locating the element (using its ID directly) doesn’t work, try another one! Selenium offers a huge array of methods to locate an element. Chances are, you’ll find another one that better suits your needs.

Let’s take a deeper look at our element:

 

web-elements-tools

 

Here we can see that we have a <article> that’s inside a <main> that’s inside an <div>, each of them with a seemingly unique ID. This means we could use a relative Xpath or CSS Selector to get to the dynamic element we want.

An Xpath like this one:

| //div/main/article[1]

Or a CSS Selector like this one:

| div>main>article:first-of-type

 

Would be sufficient to accomplish what we want. But what if we are not so lucky and don’t have a similar structure in our HTML that allows us to do this? Well, then we would need to look even deeper.

 

Look at the dynamic element attributes.

If we look at our <article>, we’ll notice that it has quite a bunch of classes assigned to it. Maybe one of those classes is unique and can help us achieve our goal.

For example:

 

 

 

 

| post = self.driver.find_element((By.CLASS_NAME, “blog-post”)

Using the default find_element method provided by Selenium will return the first element found that meets the specified criteria. Which, in this case, is exactly what we want. But then again, what happens if the dynamic element we’re looking for also doesn’t have a unique class we can use to find it?


Well, that’s when we pull out the big guns.

That’s when we go to our last resort. Use an XPath that selects the dynamic element based on the part of the ID that doesn’t change.

| //article[contains(@id, ‘post-‘)][1]

 

In this XPath, we’re selecting the first <article> whose ID contains “post-. “

 

We can also combine a few of these tips depending on how specific we want to be with our locator, but keep in mind that the more specific the locator is, the more brittle it becomes.

 


Author: Mike Arias
Senior Software Testing Engineer of TechAID.
Twitter: @theqaboy
Blog: qaboy.com/

Using the default find_element method provided by Selenium will return the first element found that meets the specified criteria. Which, in this case, is exactly what we want. But then again, what happens if the dynamic element we’re looking for also doesn’t have a unique class we can use to find it?

Using the default find_element method provided by Selenium will return the first element found that meets the specified criteria. Which, in this case, is exactly what we want. But then again, what happens if the dynamic element we’re looking for also doesn’t have a unique class we can use to find it?

GO BACK TO Tools

Leave a Reply

OTHER POSTS YOU MIGHT LIKE

API Testing Tools: An Example-Based Guide

By Manuel Marinez 03/29/2021 2

  For API testing, there are many tools out there that let you perform the test and collect the results. In this article, We will be focusing on three tools by straight-up showing how to do a request using the Trello API.   But before…

If Clauses vs. ASSERT Statements – When to use which one?

By Mike Arias 09/17/2020 6

If Clauses vs. ASSERT Statements – When to use which one? If clauses and ASSERT statements serve different, yet similar functions. This article aims to establish once and for all when to use “if” and when to use “asserts” in our test cases. There will…