Front-end testing with Python

Video thumbnail (Frame 0) Video thumbnail (Frame 1837) Video thumbnail (Frame 4796) Video thumbnail (Frame 5601) Video thumbnail (Frame 6613) Video thumbnail (Frame 7345) Video thumbnail (Frame 8564) Video thumbnail (Frame 9549) Video thumbnail (Frame 10671) Video thumbnail (Frame 11332) Video thumbnail (Frame 11998) Video thumbnail (Frame 13675) Video thumbnail (Frame 14505) Video thumbnail (Frame 15129) Video thumbnail (Frame 16002) Video thumbnail (Frame 16685) Video thumbnail (Frame 17791) Video thumbnail (Frame 21447) Video thumbnail (Frame 22900) Video thumbnail (Frame 24778) Video thumbnail (Frame 25534) Video thumbnail (Frame 26256) Video thumbnail (Frame 27386) Video thumbnail (Frame 34108) Video thumbnail (Frame 40161) Video thumbnail (Frame 42239)
Video in TIB AV-Portal: Front-end testing with Python

Formal Metadata

Front-end testing with Python
Title of Series
CC Attribution - NonCommercial - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
Release Date

Content Metadata

Subject Area
Front-end testing with Python [EuroPython 2017 - Talk - 2017-07-10 - PyCharm Room] [Rimini, Italy] Web-developers use Python to develop web-applications, serving HTML or JSON content to user's browsers which render it. We test our applications to check that they serve content right and that they respond to HTTP requests in an expected way. However, this is not all that happens in a modern web application. There are lots of moving parts which are executed not on the server, but directly in user's browser, and they need to be tested too. The best way to check that our app works well in a browser is to test it in a browser, and Python gives you tools to do that conveniently. With a Selenium tool and Python package, you can control the browsers, making them open web pages and interacting with them. I will show how to install Selenium and needed drivers, and tell about best practices for writing Selenium tests, such as Page Object pattern Put browser interactions in the page object, not the test Put assertions in the test, not the page object Never use time.sleep() Always make pages wait for actions to complete Wait for JavaScript to load To test the visual look of your application there is a Needle tool, which lets you compare screenshots with baseline set, and highlight the differences. I will talk about how to incorporate that functionality into your tests. As browser testing can get quite slow, I will also show how to set up running them concurrently
Statistical hypothesis testing Complex (psychology) Home page Information View (database) Interactive television Web browser Mereology Replication (computing) Cartesian coordinate system Proper map Statistical hypothesis testing Facebook Type theory Communications protocol
Web browser Sphere Mereology Theory Latent heat Graphical user interface Computer cluster Semiconductor memory Synchronization Software 9K33 Osa Physical system World Wide Web Consortium Home page Server (computing) Physical law Bit Ripping Complex number Cartesian coordinate system Statistical hypothesis testing Web browser Exterior algebra Telecommunication Website Communications protocol
View (database) Interactive television Computer-generated imagery Computer file Correlation and dependence Web browser Instance (computer science) Sphere Bookmark (World Wide Web) Inference Graphical user interface Normed vector space Gastropod shell Information Library (computing) Data type Window
Home page View (database) Computer file Interactive television Coma Berenices Instance (computer science) Web browser Bookmark (World Wide Web) Information privacy Element (mathematics) Graphical user interface Computer configuration Googol Function (mathematics) Information Gastropod shell Video game console HTTP cookie Electric current Finite element method Window Data type
Home page View (database) Interactive television Computer file Home page Complete metric space Information privacy Element (mathematics) Arithmetic mean Graphical user interface Pi Googol Information Gastropod shell Endliche Modelltheorie Window Data type Window
Web page Airfoil Greatest element Link (knot theory) Graph (mathematics) Link (knot theory) View (database) Interactive television Attribute grammar Web browser Mereology Element (mathematics) Element (mathematics) Cross-site scripting Graphical user interface Query language Information Gastropod shell Key (cryptography) Social class Data type Window
Medical imaging Graphical user interface Graphical user interface Online help Coma Berenices Utility software Line (geometry) Element (mathematics)
Source code Rule of inference Home page View (database) Structural load Computer-generated imagery Computer file Computer network Bookmark (World Wide Web) Element (mathematics) Element (mathematics) CAN bus Medical imaging Read-only memory Circle Googol Object model Video game console Utility software Pulse (signal processing) Window
Source code Broadcast programming Demo (music) Validity (statistics) View (database) Structural load Computer file Computer-generated imagery 1 (number) Cartesian coordinate system Bookmark (World Wide Web) Rule of inference Element (mathematics) Mathematics CAN bus Graphical user interface System on a chip Navigation Video game console Software framework Hydraulic jump Window
Web page Email Home page View (database) Line (geometry) Multiplication sign Electronic mailing list Numbering scheme Cartesian coordinate system Bookmark (World Wide Web) Personal digital assistant Endliche Modelltheorie Website Logic gate Error message Electric generator Library (computing) Window
Source code Information management View (database) Clique-width Computer-generated imagery Computer file Computer network Numbering scheme Bookmark (World Wide Web) Element (mathematics) Element (mathematics) Mathematics Event horizon Read-only memory Series (mathematics) Electronic meeting system Video game console Endliche Modelltheorie Sanitary sewer Social class Window
Source code Home page View (database) Computer-generated imagery Computer file Interactive television Computer network Sphere Numbering scheme Bookmark (World Wide Web) Element (mathematics) Graphical user interface Root Event horizon Googol Momentum Game theory Window
Home page Greatest element Key (cryptography) Suite (music) View (database) Interactive television Attribute grammar Element (mathematics) Statistical hypothesis testing Graphical user interface Personal digital assistant output Gastropod shell Data type
Plug-in (computing) Home page View (database) Interactive television Interactive television Attribute grammar Bookmark (World Wide Web) Element (mathematics) Statistical hypothesis testing Mathematics Graphical user interface Error message Computing platform Gastropod shell Information Data type Window
Home page Beat (acoustics) Greatest element Personal digital assistant Multiplication sign Physical law Cartesian coordinate system 2 (number) Statistical hypothesis testing
Token ring State of matter Length Multiplication sign Home page Design by contract Raster graphics Mereology 2 (number) Statistical hypothesis testing Element (mathematics) Mechanism design Object-oriented programming Vapor Object-oriented programming Office suite Extension (kinesiology) Social class Home page Inheritance (object-oriented programming) Structural load Weight Moment (mathematics) Bit Instance (computer science) Cartesian coordinate system Statistical hypothesis testing Element (mathematics) Category of being Object-oriented programming Logic
Home page Suite (music) View (database) Line (geometry) Multiplication sign Computer file Home page Statistical hypothesis testing Uniform resource locator Object-oriented programming Text editor Social class Window
Home page Type theory Greatest element View (database) String (computer science) Computer file Theorem Logic gate Bookmark (World Wide Web) Window
Plug-in (computing) System call PowerPoint View (database) State of matter Home page Attribute grammar Web browser Mereology Bookmark (World Wide Web) Statistical hypothesis testing Element (mathematics) Statistical hypothesis testing Error message Computing platform Gastropod shell Window
Plug-in (computing) View (database) Home page Total S.A. Line (geometry) Numbering scheme Bookmark (World Wide Web) Software bug Statistical hypothesis testing Error message Computing platform Gastropod shell Extension (kinesiology) Window
Multiplication sign View (database) Set (mathematics) Disk read-and-write head Mereology Replication (computing) Web 2.0 Medical imaging Mathematics Mechanism design Bit rate Object model Videoconferencing Object-oriented programming Software framework Social class Injektivität Programming language Structural load Software developer Closed set Data storage device Statistical hypothesis testing Element (mathematics) Wave Hexagon Process (computing) Software framework Website output Clique problem Functional (mathematics) Game controller Web browser Login Event horizon Statistical hypothesis testing 2 (number) Element (mathematics) Cross-site scripting Object-oriented programming Term (mathematics) Operator (mathematics) Energy level Data structure Nichtlineares Gleichungssystem Traffic reporting Condition number Form (programming) Home page Key (cryptography) Inheritance (object-oriented programming) MUD Login Cartesian coordinate system Digital electronics Graphical user interface Uniform resource locator Statement (computer science) Speech synthesis Video game Table (information)
Server (computing) Group action Multiplication sign Virtual machine Web browser Open set Computer font Mereology Neuroinformatik Element (mathematics) Revision control Web 2.0 Object-oriented programming Semiconductor memory Computer configuration Touch typing Musical ensemble Electronic visual display Elasticity (physics) Object-oriented programming Cuboid Endliche Modelltheorie Office suite Error message Physical system Exception handling Social class Home page Keyboard shortcut Electronic mailing list Interactive television Instance (computer science) Directory service Inclusion map Graphical user interface Type theory Particle system Process (computing) Visualization (computer graphics) Personal digital assistant Volumenvisualisierung Formal grammar MiniDisc Speech synthesis Right angle Escape character Whiteboard Resultant
hi guys nice to see you hope everybody had a nice lunch am I'm here to talk about destined in front part of all of application when we develop obligation is not enough currently to just test all views and tests that we apply proper HTML due proper quietus and those Kleiser little information to browser via HTTP protocol to consume often in replication browser interaction part these itself lady complex and in those days everybody's trying to build a single application where you don't have to load page you just more information back and forth and you go to your Facebook page you voltage e-mail page and you expect everything to be small and what and the best this thing without to automate browsers himself you have to commanded this have so go in type testing of its from long past denies how it shows the most popular tools
to do it is selenium and in my talk I will highlight how the what was it and show some best practices we used my work and is destined occasions be sitting and war this son synonymous quite easy you just do the usual even stall selling on but the 2nd part is in this extra is that selenium alternate steel browsers and it needs a bit of an intermediate layer between NATO browser and decided it's communicates is a browser via HTTP and JSON protocol called verb driver protocol if this actually are now at w 3 C's specification which is going to be adopted so it is currently a candidate theories and Mozilla and Google are working to implement it in their browsers that led the actually implemented souls but the other diver diversity is you have to install Audi's by my zeal and will themselves they keep them in sync users the it's fun of them was so you just go to website gun laws all drivers and put them on the part of the new system and that's mostly it is there a couple more steps so you should know if you mention a few find those on the pages as a as a tool for orchestrations those browsers called selenium which you don't need and z is M tool called phantom JS cows we'll get to it later but mostly it's a headless mold for onion browser beach and this stage but and that's the only in memory and you don't have to know these play application on xn the graphics said the so imagine we have already
installed selenium to and just like of funny and easily can interact Python we can interact
with the browser the the impact of driver from our library and the initiates have the browser instance like this 1 this 1 it even modifies the that is this inference is being controlled in Malta
once you have it you can issue commands to
and it opens the page for us others and
that you can find an element on this page user's browser really give confined element by name and as it is typewriter not just video console shall become see things here see the methods we can use
that either cookies father Texeira lots of finite element options for you to
use this has its elements in the page don't model and we can use it we can just send something to it all the completion of the mean and the I could not see each window fast
enough reality here let's close it nodes
element but to OK that was the easy
part this part of the world in officials at we can interact browser and we can find elements in a web page we can find them by the names by the CSS classes by ln which folkway an element in the called off and buying link text for bottom of foil age graph the and so we can click all the themes and we can buy all the things hence is there are lots of methods
to use to find elements defined elements by something as they are actually the lion 1 internal method called defined by find by something which used by ID my ex-boss by selected and all the other utility methods just just call to it usually in our internal methods we would be the line this 1 internal find element of find elements if you want to also get this complex text selected we can
use Chrome dev tools find some elements here for example this image this is the image on the on the
Document Object Model T and for this image we can call it X past all this Parliament x cost for this in an image looks like this that's a quite any element ID is page and we can try to use it the and utility Tomas filament workers
here all the tools become you have ability to clarity and initial ability to interact this page and that's usually ran tutorials stop and presented his future opportunities OK go build things it's easy Lendl all and
let's try to draw an old ones we'll
be drawing on all of em application beach use a
demo for to framework when you try to non and looked on is a give you a validation rule 2 steps and use your invention application called thought
of heroes if as a best modeled as are some purists is there is a list of
heroes and you can interact is
all spins you can open long you can change it you can click Save hence if you wait a 2nd and go back to that the as that's what we will try to hi how would become a little the
best case for this I will go through she agreed just initiate a browser and ask it to go to this web page that is on having thing called time sleep because and applications they take some time to load libraries as they take time to lot assets and if we tried to interact this page just after the that that we'll get an error it'll not work it will not test it still not it'll be fails positive out of testified so sleep a little the after that the 1st list of heroes we find elements by since selected model here that's him
when I was looking for it I found this element of resist give class model hero and this model here use
in CSS his syntax looks like this so the find those elements in the log the least useful for elements and the 1st 2nd best it goes the same place we take toast element in this list but
this 1 weekly comments again
sleep wake for some interaction to happen and in the ghetto details page details page will look like this
but details become click on save and something will happen on this
page you find again and other elements by c assistant that's defined input % key is just like the deed is Google and defined element called bottom this text save you click in it this again and we get to see how a front page be expected to have the text based after that in by test syntax recalled that future which will close hauled out let's just it opens
crosses if on this page interaction changes and if have the the best was
OK great success and now closes
of the apart from the pi was called itself is widest public 1st ugly
things here use those timeouts yes just at application take time to Lord and if have to fight for beat but when the current prices almost timeouts like 2 seconds here to so consoles was all still seconds on never prepare time to wait sometimes the pages take longer time to load that is never is a is Google Analytics India pages it is like bottoms they sometimes lots law and your page me they quote the 2nd and is this
test still should have but we have 2 seconds sometimes you wait phage lords faster it's like half a 2nd and in this case 2 seconds it he's still slaughtered it's states it takes too much time you should have been we just went on your test quicker and faster if it wasn't for 2 seconds To deal is selenium provides
tokens Celeste is implicitly wait for all elements to finish so when it tries to find an element on the page it faithful 3 seconds it tries to find it for 2 seconds tries rasterize waste and the 2nd part is a bit more complex that weights only for some elements the 1st it's easy of a public-private have a command you not to use it because you don't want to wait for each element wall sometimes when you pages load and it is OK but when you page has already been lauded and you don't change anything if you don't find an element you expected to find it means something is broken you should just shows the state to the test has failed and go on implicit is not a recommended the command that is just 1 explicitly wait for something you want with and 2nd part which is dry reaches funny about this test is the story better do it repeats itself is located at the piece itself this page as it is not an easy experienced to dealers and I can test might be easy because 1 it is difficult to write test when it is difficult to understand what the DOS nobody writes tests and when not to divide application is broken by design because they say we should try to do better we should try to design tests each would be easy to understand and easy to extend and easy to maintain the hands is a part that's called page object when you try to encapsulate but page has a Python objects by the knowledge some great reuse them mechanics stands became and inheritance them and we can hide a lots of logic and details in those objects and classes can say they'll make out as let's take a look how we can use
we have pages buying and being initiate based page FIL hydride the instance skin it and we'll hide waiting for this this page to belong to this will be enough for a moment and our 1st question we'll use only this base page just a simple contract hence a little extension of this base page called the page which will have hit To multipied itself several time and we shall have the property which determines here's office at all test looks much nicer me just initially this but plays major the open it and we get length and we get text of 1st element not let's try to include when they try to improve its our
2nd time out 2nd attempt would be to just repeat what you have done this on the test let's try to get things 1 editor things we'll go to another page and talking people posit
page also has a painter objects In our pages ill-defined class called edit
page FIL define committed we should wait for it to be loaded we'll try to open it and we will also highlight some details about this page in the class so we will not be dealing with this expertise locator stinks can all tests in all test will just ask ask the the name the like this that's how additional page it opened its most is the same as it was just hi issued them name and ID here the click it's legal to edit page and the check it is loaded but it is self-explanatory and we check that name is an issue that hands on the 2nd page 2nd the lot this page explicitly by
Theorem details flesh 12
myelodysplasia explicitly in the open and xanthine couldn't have different from
here that's what have you say bottom
we don't go into look at the string just types a bottom peak and after that we expect the support of page to be loaded onto this text today this could be the
you something like the state again and take a
look at what happens in the browser 1st a OK
2nd part the 2nd test we had there we
went back to home and it's still not extension the let's try him the
goal here to Roche heroes details but critics say and nothing happens line I guess we just found the bug in the world the total
for and of to it's what when we when I use in on the test Wendy and went dead you bought to them hi them change saved and the change but if it when directed to you how he did not look that's a nice test if exposed Bogdan and it also shows that you
should not combine several things into 1 test when the combined noted there's about clique goal back it what when they try to go dedicated to edit page he did not get a nice will not be going into fixing that page right now we'll go into details the that's 1 of the things which you should do and you shouldn't do is you should test small things my small tests as possible 1 test for 1 condition this there's also small things can get slow because browsers slow and keep this fast insecure but slow to log and what I wanted to say it's OK to cut corners here like if you are testing publications at this an online store or somethin and panel which needs to load and functionality and it would take a few seconds each time each of your test will be in use you should cut comic him you should not make a user login do you should not make it test load you make will give each time you run some you should there are ways to do it you can just create some Creek Logan I'll just don't expose it in production and like you go to some URL and you optimize it below the so you little idea some or you can log in advance and save called cues and instead of ideologue in him into your application you just substitute caucus head into your browser and Best other things it's OK to cut on indeed controversial advice here about topological you don't always need selenium protest publication you can use requests you can use a table of tests for John Glenn flask to test what your API key terms the he is just sun-dried mud on what to use export policy assess sometimes see assessed doesn't copied but bonus for CSS is that everybody knows it all about develop personal hold composer was quiet and make some simplicial usually use ss exports only when it is not enough there are tools formal so when you deal this this framework of page objects you can also implement into its tools called me don't a synonym has a feature to save the page or save that part of the page the and but it's still low level you don't want to use it you should use it in your page object class and in this page object cost other people have already done it and you just blog he was also functionality in budgeted cost you a million and you can compress controls of a page before and after some change and you can see is that young event design has not been brought it still looks the same if it was supposed to to belong center of it most changes and you don't need to hedge and that ain't baseline images for those images you are compared some people say that frameworks I just collection of other people hex and of course the frameworks around my favorite 1 is book showing it's upon because there was a framework named after some cabochon verbal language and they led development framework for a 2nd test in in by the Tanzanian the book check it is Knowles based framework each extends Solarian and implements needle and implements some other nice helpers to help people I use it and I liked it and but there are other the multiple our by something have can be ta maintained and new 1 called video from but in income and so that's mostly it's thank you I'm now will come in your questions the
tho be the In with but then for some questions we have our microphone please raise your hand if you have 1 thank you very much at all and when you choose to selenium and when you choose to do the requests tests here we are working can this browser things here that I have mechanics this happened in a browser jealous keeps you have to use a linear he is that he is only check form some element is present in its statement of a page some element is present in J sponsor of HIV etc. it is easy to check this request and a class 100 times faster than sitting in as all things should not be sent to the browser it'll save your life they're who think of report so I want to selenium to actually does a very big but replication and a problem I have that war start uh when I always use with forever right and then um founders element in the problem is that apparently way for element is that atomic operation which means that given the thing on the site changes in the meantime it would like but there was a prior over which would further the location which would then be better the latent image but lower the time so obviously ah Kondratiev wave for all the elements of a because might be jealous but but constant loads so what do you do in such a situation were the your site layout might change and you don't like it's not an optimistic that it changes the discovery rate for everything to stop getting data what you do such a situation Park I have showed in my tests exactly as this question head when of view in is a lot some elements and then sent as a deal the structure in those elements inside or maybe is they don't Lord all other all images all styles we don't think it was and key is to understand speech elements has to log in your on Document Object Model like on our 1st page if z is the least of heroes present we can assume that the page has loaded here on the 2nd page is a is in input on this page we can assume this page has loaded and we can start interact with and that of the and thank you very much for the talk um I also have a question about the 2 questions actually goes to the name I'm using it to run his checks from running constantly running given a that it's running log injection will replications and what I've problems I've had there and 1 of the that process so that Chrome the driver doesn't die to 1 equation close selenium I can see dead processes and I'm not sure if an interview from parents and why this through web driver process is this dying and emissions possessed just on the shelf selenium driver it doesn't close private it doesn't close your browser automatically you have to call create explicitly if you wanted to close and also I can become and he she on want to if you want to run this theme continuous you on your set you should try eyes are on in a fountain Gs like here room when
you register initializing private driver call you can initialize but the other font interest or you can initialize got on this some options and the to override prominent headless small it still book publication but it not decline except you can run it the on issue tho instance Elastic Compute income was on instance you can run it on Linux server result display at all until consume much less memory and you can have a run and constantly moving it's systems with Europe of and useful in 10 so when the browser giants leaving artifacts and and so I could see the memory usage Machine rising and also disk usage through leaving behind temp directory but from footprint so what I was doing responding to the processes that the IBM well that's tension model I guess then you have to write your launch escape visual clean office at and kill instance if it doesn't die might be you have all data sitting on the right is some issues of from maybe I'll data thank you the giver that without like and I
want us to questions you can the 1st 1 about the a you have an error in anywhere we prevented you but that which are raised a failure it I'm assuming that adjusted their results is the way you could return that's traceback for instance with that rather than just play there dev console from or maybe even the headless driver and 2nd question I have is which versions of Chrome because where drivers important basically will maintains it is it is it something from so they knew that they maintain August external can you write your own drivers thank you how sitting about selenium does not give you just keep trace back on list yourself set up something in your page which will but but short answers not selling and does not give you a taste that selenium just indicates the problem but by the way when you mention that bind you build results page object classes you could create exceptions for you to use selenium exceptions are I haven't found something I could not locate an element but you know when you're expands o things to happen in your page objects like look at the search box along the title types often that you can raise your own exceptions on the same idea more convenient for you and the it making the bargaining and easier and also when selenium meets at page speech is not some elements missing but full blown done got exception yellow page that the base could not connect with something like this you could also detect this situation and that more meaningful exceptional some element was not found of course it was another element font that yellow page but arise agenda except that I erased textual exception from young use case M. and for a 2nd question so yeah who maintains it selenium is maintained by open company so slopes canceling and the those themes and synonym interacts with a browser using right driver particle which is open issues W. 3 C. stand that just on over HTTP and those little things we should take requests from selenium and translates them into browser actions called web drivers drive us and the best part is that they are maintained by browser renders Google's themselves created driver for will go from and was themselves created driver for Firefox you will have more time for questions you can of course as the im afterwards the grammar that from the out you got on board when you can rate this question you can also all in that column and touch on the but that can be useful for team for a the culture show police and other hand again for being the