{"id":1246,"date":"2014-05-11T11:43:35","date_gmt":"2014-05-11T10:43:35","guid":{"rendered":"http:\/\/blogs.kent.ac.uk\/webdev\/?p=1246"},"modified":"2014-05-11T11:43:35","modified_gmt":"2014-05-11T10:43:35","slug":"automated-browser-testing-with-selenium","status":"publish","type":"post","link":"https:\/\/blogs.kent.ac.uk\/webdev\/2014\/05\/11\/automated-browser-testing-with-selenium\/","title":{"rendered":"Automated browser testing with Selenium"},"content":{"rendered":"<p>The web dev team has been writing <strong>automated browser tests<\/strong> for our web applications for a while now. This post gives a basic overview of why you&#8217;d want to do automated testing, what tools we use, and why we use them.<\/p>\n<div class=\"kent-video-wrapper\"><span class='embed-youtube' style='text-align:center; display: block;'><iframe class='youtube-player' type='text\/html' width='1140' height='672' src='https:\/\/www.youtube.com\/embed\/E_ozYzM4kcc?version=3&#038;rel=1&#038;fs=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;wmode=transparent' frameborder='0' allowfullscreen='true'><\/iframe><\/span><\/div>\n<p><strong>Automated browser tests mimic a user&#8217;s journey<\/strong> through a web application, and perform checks to ensure the elements on the page are behaving as expected. So a single test could be scripted to do the following sort of thing:<\/p>\n<ul>\n<li>go to http:\/\/www.kent.ac.uk<\/li>\n<li>type &#8216;library fines&#8217; into the site search box (I&#8217;m not suggesting you would have a library fine!)<\/li>\n<li>press enter<\/li>\n<li>click the first result with the word &#8216;fine&#8217; in it<\/li>\n<li>check that the resulting page has the heading &#8216;Library fines&#8217;<\/li>\n<\/ul>\n<p><strong>So why not do this manually?<\/strong><\/p>\n<p>The example above is very simple. But imagine if we wanted to check that the same thing happens across <strong>many different versions of browser<\/strong>?\u00a0Or imagine if we had to repeat the same set of actions every time we changed anything on the site or in our code?<\/p>\n<p>All this would be a real pain to do manually. Worse still it would be prone to error.<\/p>\n<p><strong><em>Automation reduces the chance of error.<\/em><\/strong><\/p>\n<p>So, automated testing is great when we have a <strong>specific set of actions<\/strong>, or <strong>a user journey that we know about<\/strong>. As we modify the system we need to know that that particular set of actions remains stable.<\/p>\n<p>What about those cases where we don&#8217;t yet know exactly what users will try to do, or there are conditions we hadn&#8217;t expected?<\/p>\n<p>In these cases we still need some level of\u00a0<strong>manual\u00a0exploratory testing<\/strong>.\u00a0Any problems from user testing should be fed back into the automated tests, so that next time we&#8217;re covered.<\/p>\n<p><a href=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2014\/05\/Screen-Shot-2014-05-09-at-15.01.48.png\"><img loading=\"lazy\" class=\"alignleft size-medium wp-image-1279\" alt=\"diagram of how phpunit and selenium interact\" src=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2014\/05\/Screen-Shot-2014-05-09-at-15.01.48-300x227.png\" width=\"300\" height=\"227\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2014\/05\/Screen-Shot-2014-05-09-at-15.01.48-300x227.png 300w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2014\/05\/Screen-Shot-2014-05-09-at-15.01.48.png 906w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><strong>Tools<\/strong><\/p>\n<p>Our browser tests use\u00a0<a href=\"http:\/\/phpunit.de\/\">PHPUnit<\/a> with <a href=\"http:\/\/phpunit.de\/manual\/3.7\/en\/selenium.html\">Selenium<\/a>.<\/p>\n<p><strong>PHPUnit<\/strong> is used as the framework for the tests. It allows us to define the tests in a formal language.<\/p>\n<p><strong>Selenium<\/strong> translates those tests into actions in real-time in a web browser.<\/p>\n<p>Selenium can also take snapshots of the page at any point during the tests. If a test fails, this gives us a clear idea of where things are going wrong in the browser.<\/p>\n<figure id=\"attachment_1281\" aria-describedby=\"caption-attachment-1281\" style=\"width: 300px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2014\/05\/Screen-Shot-2014-05-09-at-15.02.13.png\"><img loading=\"lazy\" class=\"size-medium wp-image-1281\" alt=\"phpunit code example\" src=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2014\/05\/Screen-Shot-2014-05-09-at-15.02.13-300x183.png\" width=\"300\" height=\"183\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2014\/05\/Screen-Shot-2014-05-09-at-15.02.13-300x183.png 300w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2014\/05\/Screen-Shot-2014-05-09-at-15.02.13.png 878w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-1281\" class=\"wp-caption-text\">A very simple example of a PHPUnit test<\/figcaption><\/figure>\n<p><strong>External<\/strong><\/p>\n<p>Selenium can also integrate with\u00a0<strong>external tools<\/strong> like <a href=\"https:\/\/www.browserstack.com\/automate\">browserstack<\/a>\u00a0and <a href=\"http:\/\/docs.travis-ci.com\/user\/gui-and-headless-browsers\/\">travis<\/a>. This allows us to use a particularly powerful set of cross-browser, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Continuous_integration\">continuous-integration<\/a> testing and deployment processes.<\/p>\n<p>We haven&#8217;t as yet hooked our tests up to external tools. But it&#8217;s certainly something we would like to do given the time and resource.<\/p>\n<p><a href=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2014\/05\/Screen-Shot-2014-05-09-at-15.01.58.png\"><img loading=\"lazy\" class=\"alignleft size-medium wp-image-1278\" alt=\"selenium grid\" src=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2014\/05\/Screen-Shot-2014-05-09-at-15.01.58-300x217.png\" width=\"300\" height=\"217\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2014\/05\/Screen-Shot-2014-05-09-at-15.01.58-300x217.png 300w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2014\/05\/Screen-Shot-2014-05-09-at-15.01.58.png 912w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><strong>Grid<\/strong><\/p>\n<p>Selenium can also be used in a <a href=\"https:\/\/code.google.com\/p\/selenium\/wiki\/Grid2\">grid<\/a>\u00a0to allow a number of servers to run selenium. Each node can be used to run our tests on different browsers. This makes our testing much more powerful and much faster.<\/p>\n<p><strong>Summary<\/strong><\/p>\n<p>The web dev team use PHPUnit and Selenium to help us automate a number of our web applications. We do not have exhaustive test coverage, but having at least some automated tests gives us the assurance that key parts of a web application are working as expected. Given time and resources we aim to make testing a core part of our development and deployment continuous integration lifecycle.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The web dev team has been writing automated browser tests for our web applications for a while now. This post gives a basic overview of &hellip; <a href=\"https:\/\/blogs.kent.ac.uk\/webdev\/2014\/05\/11\/automated-browser-testing-with-selenium\/\">Read&nbsp;more<\/a><\/p>\n","protected":false},"author":1046,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1464],"tags":[79429,79432,8965,79428,79430,28927,79431],"_links":{"self":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/1246"}],"collection":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/users\/1046"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/comments?post=1246"}],"version-history":[{"count":13,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/1246\/revisions"}],"predecessor-version":[{"id":1285,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/1246\/revisions\/1285"}],"wp:attachment":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media?parent=1246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/categories?post=1246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/tags?post=1246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}