 It's kind of weirdly spelled, but that's how that's the pronunciation. It's all I give myself. I'm a senior manager of quality engineering at Red Hat for the last six plus years almost seven years now I've been building quality engineering teams to responsible for testing and automating tests for several different Products at Red Hat. You can see some of them listed here such as Red Hat Satellite pole project, which is an upstream project Ansible Tower and I would like to talk to you today about doing web UI automation specifically using Selenium and Python. You'll probably notice that the I don't have a slide So I'm actually using a web page to show you the data. There's a reason why I chose to do that and not actually have slides for one thing You can follow along so you can either clone the git repository that's right there on the site You can visit that page, which is devconf USA18.readthedocs.io And the reason why I decided to do this is because devconf the whole idea about devconf is about open source, right? So sharing really trying to collaborate with other people So a couple of things that you get out of if you were to clone this git repository for one thing You're gonna have all the sort of the source code for the document itself I know that sometimes people have to write documents and they want to use maybe something that is easy for you to Script against a write code. So restructured text is what I've used here It's it can be a little bit daunting and scary to write anything using restructured text So if anything if you don't want to do any of anything related to automation You don't want to know about Python or anything at least you can use this to say well This is how you build a document with images and tables and links and that stuff so I'm hoping that you will though want to do automation and want to use Python and Selenium But this is one of the things you can get out of The other thing that I want to also point out is that I am going to try to cover as much as I can in about 30 minutes There's a lot to unpack. So I'll do my best But once again if you clone this repository if you just bookmark this page You will actually get access to all the configuration files that I'm using here I'm going to show you how to automate stuff using Python I'm going to show you how to use py test and Then I am actually also going to show you how to plug it all in into a continuous integration continuous delivery environment So what's in this whole thing for you? Why am I taking so much time or the 30 minutes that I have to talk about this is that I interview people a lot For jobs and a lot of times they don't have they they come in and they say well I've done this I read this or I studied this in college But I don't have anything to show for if you take this and you start modifying it at least you have some kind of Portfolio that you can bring into your interviews and say I know how to write tests. I know how to use py test I know how to use continuous integration So I think that you know ultimately you could use this to hopefully get your next position or you know at least to brush up on your skills right now and True sense of true spirit of open source what I do ask is that if you make any Changes and if you make any improvements, please send me a patch. I will apply it I will give you credit for it and then you can help me improve the document for anyone else who wants to use it Okay, so there's a lot like I said that I want to unpack here But when we talk about web UI automation your job as a Quality engineer or as a tester is to actually try to identify the things there are the elements that are on the web page So that you can interact with it and I'm not gonna lie to you web UI automation is a pain a but it's it's hard Especially I would say that writing good robust web UI test is really hard to do that Because you have to I'm gonna show you this little picture here. This is a a dumb object you can think of a web page as a Two ways that you can interact with a web page You can look at the source code for it, which is the HTML or you can think of it as a tree Representation where you have this dumb object and you can see that you have the top node That represents the entire web page that you're working on and then for each node that you see here It either represents a section of the page or an element that you want to interact with So why is it such a pain to to actually do web UI automation is that a lot of times? designers and the developers that will change the look and feel of the page and Depending on how you choose. I'm gonna show you some of the schemes some strategies for you to identify the elements here Depending which strategy you choose if you're relying on an element to be on this node here So it's like two nodes deep what three nodes deep and you build your strategy around something called expath If that element moves to another node, then your code is broken The expath expression that you're gonna write is just is completely useless, right? So you have you find yourself Continuously having to rewrite your expression is your strategy the other thing that is also I Guess I should point out. It's not really Maybe it may not be obvious But the whole point is you want to automate and computers are much faster than the human beings So a lot of times when you work on a web page people put like a lot of you know Ajax see things and there's a bunch of JavaScript Frameworks that people are using there. So sometimes you have to say, you know when you're devising your test I'm gonna click on something something is going to happen I need to make sure that my code is smart enough to wait for that one thing that I'm expecting to happen So it's really an art. It's a pain about so my advice is that try to keep it to you know Keep your tasks UI automation as few as possible make them robust make them cover As much ground as you can to like for integration tests Unless your job is actually to do web UI automation, I guess at that point you don't have much of a choice But you can the way they integrate to interact with the elements and the elements like buttons menus images and whatnot is to Find a locator and if you are here earlier for Anisha's talk She was talking about how you can look at the source code for example of a web page And this is the you know Google's search box there I am highlighting the the specifically the search box because in there I can look at information that I can use Right now. It's what I have highlighted here is the ID of the box Which is LST dash IB and that's going to be something that I'm going to be using for for the demo here So you can search for things by text, which is what I recommend then you can search for things by There's CSS IDs or CSS values, and that's that the list that I have here and tag names the HTML tag names I Put XPath as the last option here because I'm trying to encourage people not to use it and the reason why is you know for one thing It's pretty fragile if things move around then your XPath changes and then you break a test But some XPath expressions are evil. They're really really hard to understand So like this example here because I don't have a good way to get a hold of the element that I want I need to find an element and then walk backwards To find the one that I wanted because there was no clear way direct way for me to get to the element that I wanted to To get to so that's my advice so Selenium is the Framework that a lot of people use so Anisha talked about Protector and Jasmine earlier today But Selenium is the one that I'm really used to and I think it seems to predominate around like people who are doing Wabio automation But it works on it works on different platforms. It's open source, which is pretty cool And it also has a bindings for several different programming languages we're going to be talking about Python today, but it does offer bindings for other languages and You require what you do is you install the Selenium Application the framework itself the for your system and then it provides you with a Domain specific language that gives you helper methods to interact with the web elements So it lets you click on things select things scroll through the web page Really control like the elements of the web page And in addition to Selenium you need something called a web driver Which lets you interface with the with an actual browser. Okay, so Firefox Chrome Microsoft Edge Safari or anything like that. So you need the combination those two to actually do web UI automation One easy way that used to be really nice tool and still there is but this change a little bit It's Selenium ID and it's an add-on that you install on your on your browser The old version was in my opinion was a little bit easier. It provided a little more value But it was a pain to install it required an older version of Firefox The one of the advantages of it is that the Selenium ID lets you record your interaction So you you turn it on and you start clicking away and and typing stuff and moving things around the web UI It records every step of the way everything that you've done and then when you're done You can just replay it and you could literally say this is my automation though I wouldn't go as far to say that that's automation, but but you could literally do that, right? So The other advantage that the old version of the Selenium ID had it was that it let you Export things Into different languages so all the actions use the language the domain specific language click select go get stuff like that But then he translated that into Python so now you're really closer to having full automation because you could just use this thing and Then record it export it and had your Python code and then you were done The new version, which is what you're seeing on the right hand side of the screen there It actually there are good things about it in the bad things the good things is that it's a hole It's really easy to install so if you have the latest version of Firefox or now it supports Chrome so what whichever browser you have you can just install it through the add-ons page and That's nothing else for you to do. So that's pretty cool The bad things about the new version is that they removed all the bells and whistles that they had and one of them is not being Able to export to Python so that kind of stinks But what I want to show you here is that you know just to give an idea what web UI automation really is all about so I'm gonna hit the record button here and Now I'm just going to give you an example of going to Google Com and then I'm gonna click here on the search box on the right hand side You can see that there are some two steps two commands were executed and recorded. There's an open slash Slash is the root address that I typed right here So Google.com it says that I clicked at something that has an ID equals to LST dash IB If you remember the screen the screenshot that I showed before that's the Google search box now I am going to you know type some text. I'm gonna I'm gonna search for Red Hat And then I'm going to hit the search button and It performed the search right all the steps were recorded on the right hand side So if I stop recording now, I can change the speed Let me make because this goes really fast and it goes back to what I said about computers being really fast But I can replay this and what you should see now is that it's going to open Google It's going to type red hat on the search box It's going to hit the Google search button and you know, it's it's going to display the list So I'm running really slowly here for you guys to see it right all the steps of the way But this is I guess an example do I automation? right, so it's too bad that the new version of the ID has changed, but I highly recommend it to play around see see if you like it. It gives you good ideas As you recall as you are recording your actions, you can actually right click on the browser and he adds a Extra menu option that gives you things for example You want to say, you know verify that a certain Text is present verify there a certain field is present before you move on to the next thing or assert that the thing That I'm looking for is there so you can see all of that exposed through the the interface So trying to move really quickly here Selenium ID is a really nice tool I hope that you read through the web page and there's some points there to talk about advantages and disadvantages of it Soroko is another one. It's the same exact thing does the same exact thing as Selenium ID, but it's for Chrome only it doesn't really Give you the same I guess the same experience Selenium ID does but it's still there now the Selenium ID supports Chrome I would recommend you to use Selenium ID just to play around But the real magic happens when you start automating things using Python or some other programming language, right? Because now we have really full control over it and the idea here is as I mentioned earlier You want to use the Selenium module? It expose a lot of different methods and these in my opinion They're very intuitive because the name of the method tells you exactly what you're trying to accomplish So find element by ID find element by X path and then you know It should be very intuitive what you're what you're attempting to do and I would say that most methods are named in such a Way that are very easy to follow along Right so you can see for example here some fragments of HTML and this is the this box here in the bottom You can see this is how you would use Selenium to access something by ID something by the class name something by you know tag name And so and so forth so it's pretty straight forward to install this to get it running All you have to do is it install Selenium however you get your your Python packages nowadays, right? And then you want to install the web driver for the specific browser that you want to interact with control I'm going to recommend Google Chrome only because Firefox requires something called a gecko driver and Firefox has been churning out newer versions of of itself Quicker than the gecko driver guys can actually update their drivers So your experience is not going to be that great So I highly recommend go with Chrome and you're gonna be pretty safe right if you're on a Mac You can just brew cask install Chrome driver But if you're on Linux just you know I guess yum install DNF install or whatever it is the package that you use the package manage system they use Here's something cool that I really liked about also using Python and Selenium is as you start doing UI automation You probably don't know what to do You probably don't know like what am I what strategy am I going to use here? Right? I don't even know what I'm trying to find So I have an example here that is basically going to do two things one and if you were to run this in Python It's gonna be really quick, but It's going to basically open Google Dot com it's going to assert that the title of the page says Google and then what I'm gonna do is I'm gonna open Google again, and now I'm gonna modify Google's logo I'm going to inject my own images in there so this shows you that you can interact with the browser elements and It also shows that you have a really powerful way to really inject anything to the page. So and it's really really powerful This screen here shows on the bottom. You have the code that I just showed you I added a breakpoint So if you were to when you If you are to clone my repository just mind that I'm using Python 3.7 So breakpoint is something that it's only available in the Python 3.7 There are other ways to we serve breakpoints This breakpoint would not be found on the source code So you're not gonna have any trouble, but if you want to follow along if you're watching the video later on Just be aware the breakpoint works only in 3.7. So what I'm gonna do here is I'm going to basically I'm gonna load this script on a Python repo. I'm using something called I Python and And Because of the breakpoint you can see that I am at the line that says to start Google Chrome It says browser equals web driver Chrome So I'm just going to walk through it and the reason why I want to do is because I want to show you how You can interact and why this is a useful idea Because if you are starting out doing web UI It's a good idea for you to be able to interact with it and not have to write a script run it fail Try it again fail again run it right You don't want to do that. So you can actually do this really Interactively and slowly so we're just gonna hit the next thing. So here is opening Google and Then I am actually doing a couple of things. I am going to find the element So I'm using element equals browser dot find element by ID I'm past the search box ID to it and then because I am in the testing business I want to make sure that I got my element back and that's what the assert there is for it says Please make sure that I found the thing that I want to interact with If you don't find the thing that you're trying to interact with then you won't be able to do anything with it Right, so that's the whole idea. So now, you know, we're going to type You know red hat into the search box. It's going to Perform the search and that's the end of that that part of the code. I'm going to browse to Google again. I Am going to now I'm going to make sure that I got my box And now is where the fun begins because I'm going to inject some code and that's me That's my picture. I just replaced it. It looks squashed. So I'm going to Change it so that it looks a little bit better, right? But that's a little whole idea so interact with it if you had more elements here So you want to say you want to search that you know the about link works So you could actually do it right here test it When you got to the point where you think that you got everything that you needed then write the code You got your script right so that's the whole idea the last thing that you probably want to remember is that you want to quit You want to close your browser right so that it doesn't just especially if you're running this locally Which I wouldn't recommend for a real scenario. You don't want to have like a million web browsers open on your on your system Right, so that's the whole idea of using Python and Selenium But you don't want to sit there and type all this stuff you want to automate it and that's where we start talking about using Python to write Your tests the idea here is that you don't want to sit around and type stuff You want to be able to have something that can be run as acute at any time you want as many times as you want Especially I would recommend that you want to do it through some kind of continuous integration environment, right? And what I have here is that you know because we already have all the We have Selenium installed we have a web drive installed what I have here is what is referred to as unit test Python unit tests like test it relies on Python's built-in unit test module and the idea here is that you create a class for every it's a Python class For every test that you want to run right so like a test suite I'm going to speed up really quickly because I got my ten minute there But basically you can see a couple things I want to highlight There's a setup here which takes care of creating the browser instance And then there's a cleanup method which takes care of closing your browser So that's going to be very important. This is also referred to as a fixture for your test And that's something that you want to happen every time you run a test There's some a little there's more control over this so you can have this happen for every test It could be for the entire module. It could be for the class for the class itself so there's some ways that you can control but the interesting thing here is that That the first line that line 11 line 12 takes care of creating the browser for you and closing it up And then the rest of the code now is just basically please open Google and assert things for me Right so make sure that the first test make sure that the title is present The next one is I'm going to type red hat in the search box And then I want to make sure the red hat shows up in the in the title of the window itself So this is the the whole idea Because we're you know, I don't have a lot of a lot of time I have the actual code here. This is how you were actually running So if you clone again if you clone the repository you just run Python put the entire path there And you're gonna see your browser start popping up and running things and it's gonna be really really quick. Okay? So that's Python unit as style, but if you really want to learn The coolest thing the newest technology out there if you really want to impress people and say hey I want to work as an automation person a tester of Python bless you So I would recommend that you look into PyTest and PyTest has a lot of really cool features I'm not gonna go through it right now because I don't have the time But I will highlight that there are plugins which are really really cool And then you have fixtures which have really like fine grain control you can really tell like You know give it a name and you can specify when do you want the fixture to be applied? What should it happen when what should happen when you use the fixture? There's some cool things called parametrize which lets you do pass the data to your test So you write test once and you change the data value and then he gives you the you know the The different variations of the tests right so what I'm gonna do here I'm gonna show you is I am installing a plugin called Python Selenium And the reason why I chose to put that in here is because when you install Python Selenium like this If you remember that the previous code I had to create my own setup And I had to say please make sure to create my browser and then please shut it down This plug-in automatically gives you that fixture for free for all of your tests right so the way that you tell your test which driver which I guess browser you want to use is by specifying the command line So you say that's that's driver Chrome and if you look at the code above there's no setup There's no tear down. I just wrote my test using just plain Python There's no magic here, but they're the magic. I guess there is is this Selenium Object here right there's this argument that's being passed to it and this is the fixture that you get for free There's no declaration. You don't need to import anything. It's automatically available for you, right? So I think this is really really really cool Some other plug-in that I have here Is X this and this allows you to imagine that you have like a thousand tests You don't want to run your test sequentially unless you have to you want parallelize it right you want to get your test really quickly So by installing this Python dash X this you can pass the and flag and then you can specify if you just pass pass dash and auto I think you will figure out how many cores are available in your system and then we'll figure out like how many threads I'm gonna spin up and I'm gonna split your tests Execute them in parallel and then return all the test results back to you, right? So that's really really powerful here, and that's why I wanted to show you that you definitely want to play with with this plug-in Then what I want to show you is that the next thing that I want to show you is there's something called sauce labs I'm gonna try to get back to it because I want to if I run out of time At least I want to get to the continuous integration part and if I have time I'll come back and I'll talk about sauce if I don't have time then if you want to ask me about sauce labs Just about ping me on you know outside of the room, and I'll let you know but the final I guess piece of Of this presentation is about CI So what's the use of you having written like a thousand automated tests? And they're just sitting there and it requires someone to automatically going there and and run something or click on something But so the idea here is that you don't want to be bothered, right? You'll want to be drinking you want to drink your coffee you want to you know check the news online while your tests are being Executed that's really the truth. You don't want to be bothered with by anyone. So get lab is just one free Service out there. It's completely free. Okay, that will give you a CI CB so it's continue continues integration continues delivery Process environment that it's completely free and what I have here when you look at the source code for this repository You will see that there's a file called dot get lab dash CI that Yemo and what I've done here Really to show what you can do the power of CI is that I created three stages and These are the things that must be executed in a certain order and for each stage that I have here What I'm doing is I have different jobs that will be executed right so I have a generate docs I have a test pie test and I have test sauce labs and then you know for each stage for each job I have all the commands everything that I that I need to happen here But the coolest thing is this so I'm some of these tests Will require running my automated tests the ones that I showed you before running on Chrome or running on Firefox I don't want to run this on my system So using get lab pipelines what he does is he uses a Docker rise and I hope you know I don't know if you know if how many of you are familiar with Docker But you know talking about containers of virtualization, right? So what he does is it will spin up a Dockerized Firefox and Chrome for you and your test will be executed against it So there's no infrastructure that you've required on your end, right? So that's really really powerful that you have I think that a picture will probably be a better way to represent here But this is what if you go to get labs and you look at the CI pipeline page You'll see that the three stages So what happens here is that this document that I'm using for this presentation is generated There are some steps involved in the job So I do some linting which means I want to make sure that the restructure text Syntax that I'm using is properly formatted and if it's not the job fails I don't get my document. There's no new version of the document for me, right? But what I do is I generate the document and assume me the document is actually finished and has no issues It gets published to read the docs, which is that site that you see over there on the URL address bar And then once that is done, I run my tests in parallel, right? So I run my tests on Chrome. I run my tests on Firefox and Assuming that these run then I run my tests on sauce labs. How many more minutes do I have? You got three Sweets, all right, so let me go back to sauce labs. So what is sauce labs? First of all, I work for red hat. I don't work for sauce labs. So I make no money out of this I just want to make sure But I really we use it internally and the hope the whole point of using sauce labs is that you Don't want to host your own infrastructure. What if you are in the business of testing web UI? Applications for phones for devices, right? Or you have you have a requirement You have to support Microsoft, right? Are you going to have a windows box laying around and install everything and maintain it and keep updating whenever new versions of Of the browser come out. I don't think you want to do that You could but I wouldn't recommend it. So using the same exact things that I was using before So using PyTask using Python using Python Selenium plugin What I can do here is I can create my matrix of support and that's what you see here So I have Chrome running on the Mac a specific version of the Mac I have Windows 10 and Microsoft Edge. I have Firefox and Linux. I have Safari on the Mac And that's some magic here also that you will see that when you run the test itself It does some really cool things and it gives it gives like specific names for the the job so that you know you know like I Got a little ahead of myself. Here's the test, right? So I only have two tests. My matrix has four different elements So the outcome is that these two tests would be executed against those browser operating system combinations Right, so it would be a total of eight tests automated in the end for you The way the PyTask works and when you use the x-disk plugin is that the name of the tests are not gonna be it's gonna be all Garbage you're not gonna be able to tell which which is which so there's some really cool examples here on this File that I that I have here on the on the repository that shows you how you can override the ID So you can give it a like a name that makes a little more sense So you can see for example that I'm running a test called tasks on the score page title on Chrome Then the same one on Microsoft Edge, right? So You know it is really cool to use SOS labs because you using their Infrastructure, you're not pay well you pay for it But you're not paying for the in terms of the you know like the sense of you have to maintain it Right because that week that's time and money and people that requires and then SOS labs also let you You can actually watch the video of the of the test the recording of it, right? So you can look that's what you're seeing here on the screen For example, I actually have 50 VMs available to to the projects that I work on so I can have my tests running 50 Testing parallel, which is pretty powerful thing to have to right so I've been told that that's the end of my Presentation so that won't you know time for questions five minutes for question. All right, cool So I hope this was useful like I said, please if you if you clone the repository if you make any improvements If you have any feedback, please let me know At the end of the schedule for that conf you find a nice little link that says hey vote for this presentation Tell all you how awesome it was so please do that Because then they will invite me back and I'll love to be back next year here. So With that, I'll take any questions from anyone anyone Yes Correct so the question I've been doing that in Java Using the third safe thing, but I don't know whether there is some utility in Python for that Yeah, I mean I would say that I believe that the plug-in will Handle that the question was running tests in parallel being thread safe, right? I believe that the plug-in will handle all that for you But I think the other factor that is important for you to keep in mind is that if you have a specific setup or tear down Let's just say for example the your tests require a database, right? So you don't want your tests Relying on the same database if they're going to be changing the data So that's something that you're gonna have to to handle also so not just being thread safe But also the the content that you're gonna use You're welcome Yes question Is there like a repo of any like standard sample tests? I may have missed it That's a good question So Yes, there is but is it wouldn't be intuitive because for example I'm gonna put a link here, and I hope that you have time to to jot it down but for example, I work I work at Red Hat and We actually have all of our tests are fully open sourced Okay, so you can actually go if you look on github Com and you look for satellite QE Under satellite QE you're gonna find all the repositories everything that we that we write for the automation that we Execute at Red Hat Robotello is something that I wrote 2011 it's still being around but when you go to Robotello and then you look under the tests folder There then there's some a couple of different folders, but this one over here You can see for example, like how do I do API tests? How do I do CLI tests? So yes, there's there are many Repositories out there, but I don't think that there's anything that is like the definite source of truth for that So you have to look around so you can look at this And you know feel free to ping me email me and I'll point you to something interesting You're welcome One more question perhaps anyone I'm preventing you from getting lunch. Yes You mentioned that the documentation is You mentioned that the documentation is autumn with the change of tests How do you like for your stakeholders and just for legacy like referring to how do you look at the history? like is there a way to Like what does that look like? Yeah, so I mean this specific document wouldn't I guess it wouldn't Match I guess the the scenario that you put it out because this is just for an example But I would say that you know what you have to do is Anyone who would like to see what the changes were in you go to either get hub or in this case You go to get lab and then you can look at the at the repository you can look at all the commits So this is where we're gonna see the history of the changes that went in Right, and if you if in the business of writing documents, right? So then you probably submit your your changes and have someone review them before they get merged So they'll have a review process before anything happens, right? So the pipeline is executed every time there's code changes here All right, all right cool. Thank you very much for your time. Appreciate it. Thank you