Verify text in HTML table

Verify text in HTML table

For any automation tester, this is a common task/problem to solve. Almost every automation project will have a verification point, which involves verifying a value in a table Before we move on to the solution for our problem, let us create a sample HTML table, so that the work is not just theoretical.Hosted table for testing here and HTML Table source hereAssuming that you already know which column to loop through, and all you need to check is that whether the identifier exist, the normal approach would be to get the column that you need to check the value for, and then loop through the values until you find the expected value that you are looking for. Pretty straight forward. However, sometimes it gets a little complex where you need to find the index of the header and then find the value in that column. Something like below WebElement table1HeaderRow = driver.findElement(By.xpath("//table/thead/tr")); List<WebElement> headerValues = table1HeaderRow.findElements(By.tagName("th"));String expectedHeader = "Clicks"; String expectedValue = "2961";int i = 1; for(WebElement e : headerValues) { if(e.getText() == expectedHeader) break; i++; } // variable i will have the matching header here // now verify value in all rows in this columnList<WebElement> values = driver.findElements(By.xpath("//table/tbody/tr/td[" + i + "]")); // manipulate xpath of the matching column and get all values from the matching column boolean match = false; // default match to false, so that no match will be considered failurefor(WebElement e : values) { if(e.getText() == expectedValue) { match = true; break; } } if (match) { // Do something after test step is passed } else { // Do something after test step is failed }Let's see the problem with the above code, before we move on to the possibly different solution. One of the significant problem with the above code is the execution time. Though we know the header and value, we still are verifying each element in the column (header) and row (value) to verify its existence, instead of directly searching the DOM for the presence of the element. Facts and Assumptions We have two values here. One is the header and the other is the value in the header column. In most of the cases, the value will be dynamic, which means, we would not be able to derive the xpath before execution, and has to be derived during runtime. Therefore, we will assume that the value is always dynamic and the header may/may-not be dynamic. Let’s look at both the cases one-step at a time. Static Header and Dynamic Value Here, let’s assume that the header column is something that we already know. In this case where we already know the index of the header column (column number of header) we can do something like below List<WebElement> values = driver.findElements(By.xpath("//table/tbody/tr/td[3]"));Since, we do not have to search for the header column; we already skipped one loop in the code. So what’s next? Let’s see if we can skip the next loop. During the execution, once we find the value (2961) to be verified, the xpath could now be manipulated as //table/tbody/tr/td[3 and .='2961']The code can now be changed as boolean isElementPresent = driver.findElements(By.xpath("//table/tbody/tr/td[3 and .='2961']")).size() > 0;As you can see, the variable isElementPresent will now have the validation result without looping through all the values Dynamic Header and Dynamic Value What happens if we do not know the index of the header column and we need to find the header column number dynamically? Here is where things get interesting! As xpath does not directly support indexing, we would need to tweak our xpath with interesting features that xpath already provides. Let’s start by tackling the index. Xpath provides an option to find the index of the current node by manipulating the count() method. We can get the index of the node that we are searching for using the below xpath. count(//table/thead/tr/th[.='Clicks']/preceding-sibling::th)+1The above xpath will give the index of the Clicks column. Since, the index starts with 0, we are incrementing the index by 1 to find out the actual index (3). We can now get the derived xpath by using the xpath as //tbody/tr/td[count(//table/thead/tr/th[.='Clicks']/preceding-sibling::th)+1 and .='2961']However, there is a caveat in this xpath. The index of the first header will be returned as 1 and the index of a non-existing header will also return 1 i.e., count(//table/thead/tr/th[.='Sites']/preceding-sibling::th)+1returns 1 and count(//table/thead/tr/th[.='Rank']/preceding-sibling::th)+1will also return 1 In other words, the below xpath’s //tbody/tr/td[count(//table/thead/tr/th[.='Sites']/preceding-sibling::th)+1 and .='LinkedIn']//tbody/tr/td[count(//table/thead/tr/th[.='Rank']/preceding-sibling::th)+1 and .='LinkedIn']Will return the same node (row # 4 in column 1), however, the second xpath (with Rank header) does not exist That brings us to the next problem which is to verify whether the actual heading exist before deriving the index. Now, how do we do that? The trick is to find the header column first, then navigate to it's ancestor, then to the ancestor's sibling and derive actual index (above index manipulation code) appended by value. Sounds confusing, but it’s worth a try! The new xpath would be //table/thead/tr/th[.='Clicks']/ancestor::thead/following-sibling::tbody/tr/td[count(//table/thead/tr/th[.='Clicks']/preceding-sibling::th)+1 and .='2961']The above xpath first searches for the existence of the actual heading that we are searching for (Clicks column), then moves up to the 'thead' tag (ancestor) and then moves down to the 'tbody' sibling (following-sibling), then takes the header index by manipulating the count() operator followed by the condition with the value (2961) To check the correctness of the xpath, let’s validate the above xpath for a different value for a different header. To validate row # 4 in column 1, the xpath would be //table/thead/tr/th[.='Sites']/ancestor::thead/following-sibling::tbody/tr/td[count(//table/thead/tr/th[.='Sites']/preceding-sibling::th)+1 and .='LinkedIn']Now changing the header value to Rank which does not exist, let’s try again with the below xpath //table/thead/tr/th[.='Rank']/ancestor::thead/following-sibling::tbody/tr/td[count(//table/thead/tr/th[.='Rank']/preceding-sibling::th)+1 and .='LinkedIn']The above xpath will not return any node as Rank header does not exist. Finally, the new code would now be String expectedHeader = "Clicks"; String expectedValue = "2961";String derivedXpath = "//table/thead/tr/th[.='" + expectedHeader + "']/ancestor::thead/following-sibling::tbody/tr/td[count(//table/thead/tr/th[.='" + expectedHeader + "']/preceding-sibling::th)+1 and .='" + expectedValue + "']";boolean isElementPresent = driver.findElements(By.xpath(derivedXpath)).size() > 0;if (isElementPresent) { // Do something after test step is passed } else { // Do something after test step is failed }And that’s how we deal with dynamic headers and dynamic values in HTML table. Ending Note: If you have to validate specific values in a table, just remember that you don't have to loop through the entire table! Hungry for more. Bon appetit!

JavaScript: Array Manipulation

JavaScript: Array Manipulation

JavaScript offers different ways to manipulate arrays. However, there are methods that changes the original array and other methods that don’t. The methods that changes original array is called MUTATION. Let’s take a look at most common methods to manipulate arrays in JavaScript Now, that we know that there are methods that mutates the original array, it’s considered best practice to assign the array to const, if you know that the array that you use is not going to get mutated. It’s wise to use let otherwise. It is not a mandate that you need to use const to declare an array that will not be mutated, however, it’s easy for your colleague to understand that the array which is declared as const is not going to get changed anywhere in the code; which is why it’s considered best practice As usual, if you wanna try the examples in this post, I recommend codepen.io, but you are free to make your own choice. The most common interactions that we usually have with arrays areAdd item to array Remove item from array Update and item in the arrayAll the above mentioned actions can be done by both mutating and non-mutating methods. Instead of explaining each of the methods subjectively, I felt it would be better understood with a table. Here we go! testArray: [a, b, c, d, e, f, g, h, i];Code Original Array Processed Array Returned Val Is Mutated Action MethodtestArray.push('j') [a,b,c,d,e,f,g,h,i] [a,b,c,d,e,f,g,h,i,j] 10 true add push()testArray.unshift('z') [a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i,j] 11 true add unshift()testArray.concat('k') [z,a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i,j,k] false add concat()['y', ...testArray, 'l'] [z,a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i,j] [y,z,a,b,c,d,e,f,g,h,i,j,l] false add ...testArray.pop() [z,a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i] j true remove pop()testArray.shift() [z,a,b,c,d,e,f,g,h,i] [a,b,c,d,e,f,g,h,i] z true remove shift()testArray.splice(0, 2) [a,b,c,d,e,f,g,h,i] [c,d,e,f,g,h,i] [a,b] true remove splice()testArray.filter(a => a!== 'c') [c,d,e,f,g,h,i] [c,d,e,f,g,h,i] [d,e,f,g,h,i] false remove filter()testArray.slice(1, 6) [c,d,e,f,g,h,i] [c,d,e,f,g,h,i] [d,e,f,g,h] false remove slice()testArray.slice(2) [c,d,e,f,g,h,i] [c,d,e,f,g,h,i] [e,f,g,h,i] false remove slice()testArray.splice(2, 1,30, 31) [c,d,e,f,g,h,i] [c,d,30,31,f,g,h,i] [e] true update splice()testArray.map(x => x ==='d' ? 29 : x) [c,d,30,31,f,g,h,i] [c,d,30,31,f,g,h,i] [c,29,30,31,f,g,h,i] false update map()I hope the above table is self-explanatory, however if you need to check the values of the testArray with real code, feel free to visit programmatic output where the exact same table is derived programmatically. Codepen pin link

Cookie Policy

Cookie Policy

Ever wondered why do websites have no decline option in their cookie policy popup? Well, lets’ see. Today, almost all sites in the internet uses cookies that is stored temporarily in the system cache to ease authentication of the same user in the same system. I’m talking about well-established sites that makes some use of the information in your local machine (THE COOKIE!). Why do I need it? As per GDPR, every website that tracks their visitors should have the visitors consent to use their data to better manage what they need. So if you are tracking your website users and making decisions based on their user data, then ‘YES’, you have to force the user to accept your cookie policy. Do I need it? Before we get into the fun part, we gotta understand what this cookie policy can do. Let’s say you own a blogging portal with ‘Disqus’ comment system enabled. Obviously, any visitor need to have a ‘Disqus’ account in order to comment. This means, like it or not ‘Disqus’ can track your visitors on which sites they visit and which site they comment and maybe manipulate your data based on their need. Now, let’s get into the fun part. As long as you plan to use your visitor’s data and manipulate something from it, you gotta have the cookie policy in your site. However, what do you think you can do with your visitor’s data? As soon as that question is asked, we start to think big! Maybe we can find users locations. “Ok, then what?” If you are just planning or started a blog for yourself like me, all we have is our petty subscription list, which is a list of email ids’ that will be almost empty for atleast couple of months! What can possibly be done with that except sending emails about new posts, which again seldom occurs? Therefore, my view of adding a cookie policy is, if you are just starting a blog; just make sure that you are not adding any tracking 3rd party code that tracks your blogs visitor. That means, in case of WordPress websites, the plug-ins that you use in your site may need you to register in order to use it, but not for your visitors. That is it. You have a long way to go before you even think about adding the cookie policy. Just focus on adding new and useful posts. After all, who wants to accept a policy that has no choices?

How to start blogging

How to start blogging

Now this being an obscure topic, I will try to be as different as possible. First things first, you guessed it right. Bluehost. Every post that I found about how to start a blog has section to create Bluehost account and use their service. I am not going to make any suggestions here, but I would say make your own research before buying a hosting space. Most of us tend to believe that the service that the product owner provides is directly proportional to the service that they provide and most of the times, it is true. Let’s see an example here. Service provider X bills $2.00 per month and service provider Y bills $1.60 per month. Now without knowing anything about either X or Y, if someone asks which one is better (without considering the cost), we would say X is better. Now, the outcome of the above scenario is either X might actually be better or maybe not. The point is, you are going to create a blogging portal for yourself or for your niche and you are not going to build a website like google. That means during the initial days, all you need is a single digit simultaneous user-handling server, which you will be hitting all alone. And, by the time you reach a significant user base, you will be matured enough to handle hosting changes. We don’t have to overthink here. Some would prefer cheap and some would prefer quality. I would let you decide on that. Though, this site is not a WordPress site, I would recommend non-technical users to go-ahead with any hosting provided which installs WordPress. Now, one of the mistakes that I did was looking free resources everywhere, until I realized that I would lose my interest as long as something is free. Coz’ as long as you know that something is free and you can get it anytime you wanted and you have nothing to lose, chances of losing interest are more likely to come true. What I’m trying to say is, just buy a paid WordPress theme that you like. Don’t go for free themes. Now, some people might argue that the above statement (or everything) is not true and I agree to that. I have seen sites (sub-domains) in blogspot.com and wordpress.com having more visitors than individually/business owned sites. I gotta say, “They are great bloggers”. This post is just for the ones that are trying to do something good and no intent to become great! Now, if you are still reading this. It’s time for you to start writing.

How to stay a blogger

How to stay a blogger

Staying a blogger is always gonna be hard business. After revamping my blog site, I reviewed most if the interesting and well-established personal blogger sites and guess what, they are not staying a blogger consistently. It’s quite obvious that once you plan to start a blog, you put some good efforts into it and it’s no surprise. I have seen blogs where there were close to 80 posts in a month 10 years ago and hardy any posts in a month now. And I say that is no accident. It’s just the way life goes. Everyone has other work to do apart from blogging unless you earn quite enough from your blog posts. So, my first point about how to stay a blogger is plan not to. Yes. You read it right. Coz’ if you are creating your own blog, you are more likely to lose interest in due time and that’s totally human. That’s why I plan to create posts only when I have time and spend enough time to create one before publishing. That way I know that I am doing this only coz’ I’m interested in writing and not expecting anything more. Now, there is always a different opinion from different people and I respect that. If you think you can plan your life so perfectly, that even after a decade your plan still stays the same, I probably prefer anyone like that, not reading this blog! Having said that, my primary objective now with this post of mine is basically NOT to prove a point and that’s the way the cookie crumbles 🙂