At TestExpo 2017, held in August 31 in Copenhagen, Leapwork's CTO, Claus Topholt, presented our idea of flowchart-based automation design. The novel approach generated a lot of buzz among conference attendees.
Watch the keynote session below. Transcript is available below the video player.
Transcript:
“…It occurred to me we just need different tools, we need a different way of working with these things, because testers are not programmers. Some people want to kill me when I say that, but actually, you know it’s great if you have those skills, if you have those tools available to you. But that’s not the point of why you are doing testing. You are more like end user ambassadors, that stand with the end users and use the product and try to root out the different scenarios where the chain breaks.
And most of the time, you are business or product flow oriented, right? It is about process, it is about what does the software do in a business scenario that’s important and that’s what you try to challenge.
So, for instance, this is a login box for, I’m going to demo this in just a bit, but this is a login box for Tradingfloor.com. Which is a property of this investment bank and as a tester you can take a look at that, and you can sort of understand, that you want to click on that email field and type in an email address and you want to click on the password field and type in a password. Then you kind of want to, instinctively click on the login box and you want to test out those different things.
So, in that whiteboard scenario, what does that look like? Well it looks something like this. You have a click on the email field, type that email address, click on the login box and then try to see if, well in my case, me, that I’m logged in. If any of this fails, you have a failure scenario.
So, I try to say, maybe this is enough, maybe just visualizing the test case like this is enough. So, I wouldn’t say that I at the same minute went in and quit my job, but that is the end result and we ended up building this Leaptest tool. That I am now going to demonstrate.
That was just a joke. There has got to be something to laugh at, right?
Okay, so this is the tool. It is a visual tool, with a canvas and I am just going to create a new test case and we will try to do that login on Tradingfloor.com, a site you have probably never seen before, but was the scourge of my existence for about 5 years. I am going to make a case called Tradingfloor.com and I am going to choose the web application type, that puts our product in to a perspective, where we use the Selenium WebDriver framework to make it run. You can also choose desktop and then in which case you can use image and text recognition technologies and other things, but we will stick to this web thing.
So now, a case appears on the screen and there is a start block. Our whole product is just a whiteboard, where you draw building blocks up and you wire them up together and you and make the logic flow. We will start with a start block, I am just going to drag out a wire here, just like I am drawing on a whiteboard, like that. I am going to start a web browser and I just want to go to Tradingfloor.com and on Tradingfloor.com, I know for a fact that there is a login button. I want to click on that login button. I do that by just selecting what to click on and selecting capture new element and then it says, do you want to work with pop-ups, in which case you want to run as admin, no. We will just continue, and then what’s going to happen is, a browser will appear magically, the site will load and everything will turn into capture mode. I can just move my mouse around and you can see that we can sort of understand all the different HTML elements. I will just hover the login button up here, click on it and that is going to capture it back into Leaptest. That means that now we actually have a small test case that we can run. If I press play now, it is going to close that old browser and open up a fresh one, load the site again, locate the button, and as soon as the site has loaded, locate the button and click on it.
This really is like drawing on a whiteboard and then you just a have a play button that you can click on and stuff just starts running. While it ran, we recorded everything on video, so you have a video representation of what was going on and you can actually see the building blocks light up, as I just scroll through this video here. It is a handy way of understanding what actually happened.
Now, we can start speeding up a bit here, because apart from clicking on that login button, I also want to click on this login with email button. In fact, I can just right click and say run case from here, that is going to use the open browser and just run the case from that point, and so I can use this method to just click my way through, click on the email field and type in an email address. It is just a test account, don’t worry, there is not money involved with this account, so even if you write down my password, nothing’s going to happen, I hope. Password. I’ll just type in my test password here. You can actually protect these things, you can set a field to be password protected field and then we will encrypt it and make sure everything is safe and so on. But basically, like that and go click on the big login button at the bottom. So now we have sort of visualized what I was talking about before when we saw that screenshot and if I just zoom out a bit here, I can just say, let’s just run the case from this point right here. As you can see, it just fills out the form, clicks the login button and that’s it. The last step in this process is to just verify that something appeared on the screen, that we expect to appear on the screen. I am going to go back to the browser and capture my name up here, can you all see? And if we can find my name, we can say that this test is passed. So now we have a full end to end test.
Maybe it is a little hard to see with the resolution here, but the point with this is, it is visual and even if you have never seen this tool before, you have an intuitive sense of what is going on. We start at that end, we start a web browser, click on something, fill out some fields. This isn’t difficult to understand, even for one of the managers, when you have to show this to them. Whereas, trying to show them a bunch of code or something and it’s not going to end well. So, the visual part of this is easy but it actually gets kind of better because, I’m just zooming in here a bit. This part here, the login part, these blocks that I just selected now, that is something that you typically want to reuse. That is a sub-process, something you want to make into a module and then use in different test cases. I am just going to select them and go create a custom building block and that just wraps all of that stuff that I just selected into one building block, that we can now give a name. I will just call it login. Let me just move this stuff over here, so it is easier to overview. There we go. Now it is sort of easier to understand what is going on. I can double click this block and it will open up this custom building block. And you can see that there is an execution input thing happening here, and there is the same flow throughout this process as before. And the execution output at the far end which corresponds to the green arrow going in this way and going out this way.
The next step that people typically want to take is, how do you parameterize this, how do you drive this with some data? The first thing that people say, you know, is that I would really like to run this on a database, so can I please grab some data from a database? Or I have a http endpoint and I want to pull some data from an endpoint, I have a command line, I have many different types of scripts I want to pull things in from.
We have building blocks for all of those things. But after people have thought about this for a little bit and they actually want to do this for real, what most people end up is saying “can we just read this from an Excel file?” So, there is a block for reading from an Excel file, and that’s the one we are going to use. I am just going to type, read Excel, that adds that block, I can just point to a local file and lo and behold I have an Excel file with some data that is relevant here, I am just going to click define range, that is going to open the Excel document.
I can select inside this Excel document, the data that I want to drive this case with. I am just going to select these 3 test rows, use the first row as the header, which means that Leaptest will understand now that we have these fields and we can work with the rows.
Now that we have read this Excel file, we want to take the username and the password and plug it into the login box, so drag a wire from here and into the login box. Only thing is, how do we actually do that? Well, to do that, we go back into this custom building block, we take a look at this place where I put in my hardcoded email address, and we can just do something called a value input. I’ll just call this one username so it is easier to understand and we will take whatever comes in from this value input and we will put that in as the value of the text to be typed in the email field. I could have called it email as well I guess, but we’ll just call it username. Over here, this one if definitely going to be called password and again the same, we will take the password that comes in through this value input block and we will type it in into the email and password field. So save that, go back and now we have these two extra fields that I just created.
Now it becomes easy it is just a matter of hooking them up like this, user name goes there, password goes there. So, the last thing of course would be to say, well my name was also hardcoded into this, when we recorded, when I recorded this little thing it just picked up my name. Of course, I would like to take the full name from the excel file and also use here, but how do I do that? Well, slightly less easy, but on the other hand, way more powerful. Because now we can dive into, how did we actually find this block on the screen? I can click on edit web element and this slightly complicated pop up appears and what is does is it tells us on the left side different locator strategies, it does become a little technical here, but means that basically we can find this block where it says my name using many different methodologies.
We don’t try to find it by the id field, we try to come up with ways that locates this block without it being fragile. So, we need some structure here, we need some way of finding it, that can survive layout changes for instance. The first strategy that was picked here, and this happens automatically when you capture, is we are looking for a A tag with the class of something and this isn’t typically something that you need to know about, unless you want to drive things very thoroughly with data as I am doing here. But basically, we can see that there are other strategies as well, for instance here is one that just says we will just look for a link where the text inside is Claus Topholt, that’s me. And we have that information in the Excel file so now it just becomes a matter of removing the hardcoded value here and adding a dynamic field and this dynamic field will appear underneath the element to locate and so we hook them up. There we go.
This is it, this is a case that runs from starting web browser, logs in, checks that the person in fact is logged in. And we can just see it here as it happens, it starts up a fresh browser and go through the whole process. The point is, this is not terribly difficult to write in Selenium or in any other browser driving framework, and it is not terribly difficult to do in Python or Java or whatever. Oh, interestingly, if it takes more than 10 seconds, it is going to time out and the case is going to fail. Yeah, see because there is a default timeout here. My old site was slow, that is kind of embarrassing, let’s just do it again here, and see if it runs faster. The point is, even if a skilled developer can do this in 45 minutes, it takes me about 45 minutes to write this test case, you know, I can do it in 5 with these building blocks, 3 if I am not talking. That productivity gain is immense and you know, you can use this or so many different scenarios, you can get so far, using just your business process knowledge, your knowledge of the software that you are testing and the skills that you already have as a tester. There is not much technical stuff to learn here, if you have to learn some stuff, we have a very wide library of, oh, case passed, of videos on our learning center that you can just get started with.
So, I think that is what I wanted to demo, this was a whirlwind demo, but I would like to take some questions and also just advertise that we have an exhibit downstairs and you are all very welcome to come and speak with me or one of my colleagues afterwards.
So, questions, yes!
Can I use this in keyword driven testing? Well you know, our approach to this is just, sort of, not quite the same as keyword testing. We are wrapping things up in a different kind of way, we have these modules, so there’s not really keywords as such. Does that make sense to you? It is just a slightly different approach to structuring things.
Yes, anyone else? Yes, go ahead.
How do I find the picture of me?
Yeah so, okay, let’s just go back and take a look at this log in box, because maybe that also makes a bit more sense. So this login box, if I say edit web element you can see that the strategy that we picked here, was kind of the same as for finding my name before. We start out by saying, is there an A link with a class of item button, login, something, something. So, that was just the automatically generated strategy, so if we just click validate in Chrome, maybe it is going to open the same page again, yeah I think so, so we can see the validation actually happening. Yeah, here we go, so there you go.
There is sort of a rectangle around it, and we can see in the document now it gets a bit more technical even. But we can see the HTML over here, where did we find it, what are the properties and this corresponded to this fact that we were looking for an A with the class of this and this. We can add conditions we can change this, so we can say that the only thing that I am really interested in, is something that contains the word login, so I will change that and click validate, again we find the same button. Now, if I was just to remove this condition and click validate, it is going to just find the first link on the page, which is the logo up there.
Yeah, so if the address or the location of an element is dynamic, what is important to note here, is that this was in fact the entire strategy, that I just showed you. It doesn’t matter what colour it is, or where on the page it exists, it just looks for, in this case for instance, it literally just looks for any link, anywhere on this page with the text “login”. So now you can change the colour of the button, the location, the functionality, all of that and this will not break. This will continue to work because it is such a simple strategy.
No, no pixel, in this case it is actually just looking at the HTML that the webpage is using, so there is no resolution stuff, there is no looking at pixels. Oh, I think what is confusing is that you see the green login button here, that is because our tool tries to do something nice for you, which is when you capture an element, it takes a small screenshot of it, so you can recognize it visually the next time you visit this case. It is not actually using those pixels in this mode, we have other ways of using our tool, where you do in fact work with the pixels, so you can automate Citrix and that sort of thing.
Yes sir.
Yeah so, that is a broad question I would say, well, in a different mode, let’s say that you are deploying stuff through Citrix for instance, then you are stuck with the Citrix receiver that just renders pixels on the screen, and then you can just use our click image and find image and find text and find number and those types of building blocks that we have that are based on image and text recognition, and that works pretty well, you can automate things, whatever it is on the screen and game or an SAP client or whatever.
Later in the year, we are actually coming out with dedicated SAP support, where we are using the SAP automation framework that is in SAP, the gooey thing.
And in fact, I think I just did that, you see, I took a bit of my scenario and I put it into a custom reusable building block and you can put those inside each other, so you can make hierarchies of these building blocks, that you combine in different ways to make your cases.
So, if I want to make another test case, I can reuse this one?
Yeah, exactly, so I actually just renamed it, I think we are running out of time, but I am going to be quick about it, so a new case here, nice to be able to spell the word test, when you are at a test conference. And so I had this custom building block, it think it was this one, that’s the one we just made, I should have renamed it properly, but yeah there you go.
Yeah, good questions today.
So, in this one, I just asked for this read Excel thing to get the first row. But we can actually just change it to loop through each of the rows in the Excel file, so now this block becomes a loop. That is another example of you don’t have to know what a loop is and how to set it up and how you loop through structures. We sort of built that in, so if you have a dataset with 100 rows, now this one will trigger everything on that side, for every row in the Excel file, just remember to log out before you redo this.
Yes!
Yeah, so, I mean, you can definitely look at the individual elements that I captured on the screen, there is a tab for that and you can see each one, just like you can see all of the data sources and custom building blocks and I think you can right click and say, okay, this one was actually not my joke, this actually happened. No I am not going to update critical. I think maybe, for some weird reason, it is only on the custom building blocks show, where it is used, and then you can dive into that and recapturing an element is really easy as maybe you can sort of understand here, let’s say that I wanted to capture this login button over here. Let’s say that I was already here, this button changed for some reason and I need to maintain this test case. It is just the matter of saying capture a new element, click, done. You don’t have to update XPaths or CSS selectors or any of those types of things that you would otherwise be left with, it is still visual as you are doing the maintenance.
Oh, no, yes it does. I mean, I am talking about, image and text recognition for instance as a way to automate anything that happens on the screen, but obviously text recognition is not 100%, is that a comma, is that a dot, what is that? So we try to make our algorithms as good as possible, but definitely when you are on Citrix and you are left with that sort of thing, you have to be clever about it. On the website, we are basing all of this on the open source Selenium framework, which allows us to run the test cases in cloud services like browser stack and source labs and your own Selenium grid, if you have that. But IE support is always a problem, IE should have been killed many years ago, even Microsoft, I think, thinks so. Selenium support for IE is just poor, which means that it is also kind of hard for us, regardless of the many workarounds that we try to add on top of it.
I’m sorry, has anyone had any questions over here, that I have not been able to see? No? Yes, one.
Are we able to parallelize something running at the same time? Yes, So, when we are running in Selenium mode, you can parallelize them using selenium grid for instance, you can just install that on the same machine. I could also run 2 cases just from my studio here, click play, go to the other one and click play. When you are using the real mouse and keyboard driver, you are stuck with one at a time. You would have to have some virtual machines and install a one-time agent to do it there.”
.svg "Leapwork")
