 Hi, so I'm Michael Horyszek, but call me just Michael because if you are not from Czech Republic and Want to pronounce want to try to pronounce my last name. It will be sounds very funny like I am now talking English I work for since now to that Which is company making web apps for local people like email search maps and we are Actually good that we are trying to Open our maps to open to the world because when I made a planned trip to Pyrenees, it's actually More detailed net then the Google ones. So We do web apps. So we have to test them somehow And he does that and therefore I'm standing right here to share our knowledge some best practices some tips and Point out some pitfalls So how can we test websites the easiest thing is Unit test and call some API. This is my test and You should really should does it Does test like this Because it's very mandatory, but it's not enough for web apps because you have to test Some requests and their spawns you can do that as well Flask and Django Supports it. It's it can be very simple like this piece of code but still It's not testing of the of the page because they know what is there are a lot of client sites script so you have to test also JavaScript You can do that. This is for example, Yasmin how's it called and Again, it's a unit test and Say Now you you have you can test the client side and Backend side, but you have to somehow connect it to make some integration tests of full web page that it's work As for the user seats. So how can we do that? You can do that with Selenium Selenium automates browser. That's it. This is what documentation says and How does it look like? It sounds pretty hard, but actually it isn't it looks Like that. It's very simple code. You firstly import something then you Open a browser in this example. It's from then you get some page It's our home page for example then print title of that page and After that just quitting closing the browser I'm sorry for these comments. It's pretty dummy and I don't like these comments in code So I will not say it again in this talk and what can Do Selenium more it can travel the web it can you can't Check some attributes on the elements you can click on them you can check some cookies you can make skin shots and That's it and I Don't I will not talk about it because I you can treat it in documentation of Selenium. I want to Talk about some pitfalls and Some best practices how to test the pages with Selenium. So first pitfall is a Forms it's very hard This code isn't simple and it's just so does That's type Selenium in search field and the submit that form and that's it and you can see it's five lines it's a lot of code and It's hard to find what actually does and you have to think about a lot of things like When you have on client side some on change event, it will not be fired when you send keys to that input Because when you send keys focus is still here. So you have to press stop like in this example To lose that focus and fire on change event Also, you have to think about all inputs like checkboxes selects text area and and more and every input have to be Be written differently Also, there is bootstrap which has shiny checkboxes which hides actually to a real checkbox and Instead shows some another element and you have to think about it. That's a lot of think you have to do So I made it simple With library web driver wrapper, which is on pi pi you can use it for Python 2 and Python 3 and it's well documented and Code like this one can be very simple just find some form and pass dictionary with keys that are names of these inputs and the value are values Pythonic types like there is some Text if it's a checkbox you can just pass through false and doesn't have to think about it That it's some bootstrap checkbox or that you have to click on it. That's library will Do it for you So very simple Another default is exceptions. Yeah, I can show you some example. I forgot it. Sorry I have some code here you can see that it's what What slideshows and when I run it It will come closer Open our home page print title and quit That's it. Sorry exceptions So when when you can find some exception with some element, which is not here On that page it will raise no such element, but It will not says where or which one so I made it made it simple because for example when you have For example, our search engine or Google wants to be it doesn't matter when you go to home page You see some form you fill fill in something click submit and then you want to check that some results are on the next page and Selenium will say is just no such element, but I want to know that it's on on which page because is there a bug on that page with results or is there a bug with page with form and That page is not fairing the good action With this exception you can see that the result count is not on home page So yeah, it's not here because you have to be on a different page So I know that the bug is not on page with results, but on the home page another pitfall is status codes or headers There is a big discussion on web braver Backtracker and it's closed. They want to feature a lot of people once feature To check these attributes, but you cannot because they says that It shouldn't be there It's just API for browser and if you want some headers or status codes and and so just We use some library for requests That's true, but if you want to make some owner request you have to Know that link you have to know if it's get or post or another You have to know if You have to pass the cookies and you have to pass if it's some kind of form you have to Get these attributes and it's it's pretty hard. It's about ten lines of codes to make it done and I I made it and put it to that library so you can just get the element of Some of some link and just download file or page and you can check actually what is there Another way is my colleague did that that he run a proxy and checks status codes and headers and and more from proxy because you can do that with so on state element exception it's if you will write some Selenium code and or some tests with Selenium you will find it pretty soon because when you do with some something with dome on the client side with Shavascript and These elements change or disappear and Shavascript completely changes dome of You don't have In in in Python you have just reference to that element in dome and if something changes if just exchanges it or if you go to another page if there is somewhere direct or something you don't have this element Anymore and you have just reference to something what doesn't exist. So that in that exception is just Get me some element which he has IDQ and send some keys just keep to make some changes and When you send keys again to that element state the element exception, it's It's something How to say You you don't want to reuse some elements. So and if you do that you have to be very careful because it happens a lot and Actually, it's easy to fix it just You know you see the difference in in that Example is under very bad thing and it's time sleep You don't want anything like this in your test code because What if it it will take a longer time it will fail because it will not be You want to wait for some action, but it will not be there. So it will fail For that there is Wait machinery in the selenium you can use it like like this, but you have to wait for elements A lot because there is a lot of JavaScript and you always want to wait for something. So I made it simple again Just wait for element and that's it. I Have Proof to I have some code here you can see This code from from slides. So just a little bit longer and It opens our home page pass pass something Then The fire some autocomplete then it won't so first element in that autocomplete so what was found or autocompeted and then show a text and send another keys and Show what's there later If I will run it It will fail Now you can see that it failed still element reference exception so If you want to fix it You have to just for example you slumped out or whatever to where you saw that's getting off element and Always get the fresh one If I will run this this one It works but You could see that there is time sleep to which is which waits for two seconds and you could see that action was Much faster and it doesn't have to wait for two seconds. So you can make it with wait for element and It's almost same just a little bit shorter and it works as expected You can see the change and when I run it it will be much faster about four seconds So use that another thing is Searching elements by text Selenium again doesn't support it But it's also commenting because You want to you will insert something to database then you want to show some Table or some Contacting for something and you want to check that That information is here and you doesn't care about in which element or whatever So you can't search by that It's implemented by expat which are very gate. You can't make a lot of things, but I I Would not recommend it use it a lot The first line is so very simple Example how it's done, but it's more complicated than that and It's very slow You can see that in one run, but if you use it a lot of times It will be very slow now and it It's not good for maintaining test with expat. It's better with IDs and classes because it's it's much much easier because if you use classes and Someone changes a template or whatever Elements around and still these classes are moving with these elements You don't have to change a test code ideally, okay We we know how to manipulate browser, but how to write test Well, you can use web-diver test case which is seen that library as well and And Why is there because it's it implements a lot of cool things like It creates driver for you and you just Implement to get the driver method like in this example. No default is Firefox and you can say with Constant if you want Open new browser for every test or test case or all tests If you will reuse browser because it's very slow to open a new browser window Then you have another things to keep in mind Which are for example that in test you can click and Suddenly some alert will show up and When that happens it's blocking like for user when some alerts show up user can't make anything just click on okay, just somehow dismiss it and Same thing is with Selenium. So when there is alert you have to dismiss it and if you will Try to do something else you will get just exceptions and when some Unexpected tests on failed test will open some alert. It will Stay there for forever to the or no forever, but to to the time when you close the browser so you have to close it and That test case does it for you in teardown and other things are Windows because see your web page can open a new tab to some other page some link to different word and Also, you want to go back to your web web app Which you are testing so again, this this case does it for you and It does a more thing Because how you want to check out if your page works just perfectly and For example, if there is some 500 error or something else like access denied or whatever you want to know about it and This test case After every test checks that if there is something like this by default it just looks for classes error and you can't Change that and you can see that in documentation Also, there are Error messages because your app can show some error message to user for example if user wants to insert another user with same username or It's some registration formula or whatever and there is already that username registered It should show a error message and you want to Check that test failed because you want it to insert it and if it's it's not done You want to know about it and you have to write a lot of code in every test To check that everything is alright, so I made some decorators and And That this case always check if there is some error or error page and if there is something it's That test will fail and if you want that it should be access denied you just Put the creator there and if you go to admin it should Shows so that's the night page and that's it. You are done. You don't have to always check everything also if there is some form and you want to register another user with admin and You want to check that it will shows error message again You will just put the correct expected error message and so which one what should be there and If there is this extension, it's okay. There is not it's not okay, and if there is different except error class Error message. It's also the felt test So it's very easy to test things like this and there are more decorators like this also for info messages if you want to test that after test after Registration there is some info message that everything was fine and you can look in or whatever You can test that as well another things I Was in JavaScript as I was showing you here you can test the JavaScript some yes mean unit test but When you run JavaScript in browser in real app, it's There always can be some bug which is not covered in unit test. So Just put these codes to your page and Selenium always checks for these errors And if there is some unexpected error in JavaScript again, it will fail. I can I Have the example for you It looks like that. It's very simple just go to home page and To test one for searching one for some telescopes and When I run it it works You could see that I Used one instance per test. I can also use one instance for full test case or all tests and if I run it It will be much faster because there will be just one browser Also, I can show you Some error You can see that this element is is not in that page and that's correct because it's very not here Also, I Love Pytest also does web drivers. So you can Write tests with Pytest with this library So that's it It's very simple To write tests with my web driver wrapper But there is still one more thing and it's so you don't have to run it in your laptop With open browser you doesn't want to always look at it and you want to run it on Server without x server it can be done on the beyond You can install By virtual display it's Python clients for backends x server backends Like one of you you can pick one of them which are shown in slide and For example, we are using x3 of B and we are happy with that For example XVNC are good that you can connect to it to it So if it's failing you can connect and see what's happening so it's nice and Use usage is very simple just start some display and so start it and run your test and then stop it I Can't show it to you that it works because I don't have any virtual x server on my machine here on the own server but it really works and And I would recommend you to use Very big size of that display because there is one pitfall that if you are using some Fixed elements it will mess up because Selenium will always scroll to that element you want to work with But if there is some fixed element It will just scroll to that element and if it's fixed something above it will fail to because That click action or something else would fire Would save another element There For you if you have some fixed elements you want the biggest size you can Another things are Selenium server You don't have anything because as you could see I just run browser directly, but If you want something more you should Check out slanium gird. It's written in Java. So be careful with it and It Allows you to run it in more browsers with more operating systems also some mobile devices and It will be faster It works That you have some master Selenium server and there are a lot of nodes on different type of Machines you will just run somewhere windows and the beyond and Android and whatever and Install Selenium server there Configure it like note and on some master you will register it and With your code you will just connect it to That master and you will say Which browser you want? There in this example for example is Firefox and when it's it's the same like with Chrome just you put remote there and So you want Firefox for example and that master will find node where is Firefox and you can say also that you want Firefox on the BN or that you want Chrome on the Android and so that master will find that node and if it's there It will run it and if it's not you will see you some exception So that's it. So if you like it, so check out the documentation. There are a lot more things then I was saying and Thank you. Thank you very much Michael. Do we have any questions we do? Hello If I use one instance per test case Can I have something like a setup and tear down methods for each test? because You can and it doesn't restart the browser, but and it is You have to think that if some tests messing up something You have to fix it in teardown Like like in the some another test if you will run some unit test and these unit tests Well unit test and it will Write something to database It's some it's same here. It's when you click somewhere and it will do something It's messed up and you have to fix it in teardown, but you can use it Normally as you are used to thanks Go back one slide, please Thanks for the talk You said you had to put Big configuration big resolutions when you're using the display servers like xvnc and other stuff Is that really mandatory or is it usable to? test Responsive design you can test responsive design If you will make it smaller, it's your web page will adapt. That's all right I'm just saying if you have some fixed Elements, and you can you can't do it. It's the page. It's broken. It won't work Yeah, okay. Thank you Hi, thanks for the talk. Could you comment on? Architecture of your test suite when you have a big application Are there some things that you definitely need to test or some that you shouldn't test? Can you comment on that? Well, it's a question for another 40 minutes, but There is always a 8020 that 80% of Work is in 20% of code. So Focus on what your users do mostly and test that If it's okay, if you this question is answer is good for your answer question. Excuse me Should you for example test your styles? size styles CSS your CSS is possible like the how the whether you get the I I don't think so. Well, you you can check which Values of CSS styles are there, but I wouldn't recommend it Thanks, I have one more question Can you make something like automated screenshot comparisons with this? For example start the test case do screenshots at every step remember it somehow and Then compare it every time you run the test case Is there a tool to automate that? Well, I forgot one thing. Thank you for question that when test fails and you use my Test case for unit test or my tools for pie test it will automatically make a skin shot and When you see in Jenkins that it's broken you can just check out skin shot It's very faster than the run it on my computer and check out what's what's happening Making screen shot is very simple. You can just driver that make screenshot, I think and so just pass a parameter where you want to store it and that's it and Then you can Write your code which just compares these images so you can do that very simple But I don't know anything about About any library which is doing that Any other questions? First thanks for the talk and which version of Selenium are you using with your workbench is to the Selenium yes the version. Yeah, there are two versions of Selenium 1 and 2 You don't want to use Selenium 1 because It's called Selenium and Selenium 2 is actually called web driver and Selenium 1 just Calls some javascript so it's not really user actions with Selenium 2, it's web driver and all browsers implemented it inside the browsers except Chrome with its binary Alongside and You call real API of browser and it's It's It's faking almost real user actions so Selenium 2. Okay, thanks very much Michael