{"id":1269,"date":"2014-09-01T06:35:20","date_gmt":"2014-09-01T10:35:20","guid":{"rendered":"http:\/\/qxf2.com\/blog\/?p=1269"},"modified":"2017-11-06T04:44:02","modified_gmt":"2017-11-06T09:44:02","slug":"browserstack-part1","status":"publish","type":"post","link":"https:\/\/qxf2.com\/blog\/browserstack-part1\/","title":{"rendered":"Get started with BrowserStack: Part I"},"content":{"rendered":"<p><strong>Problem:<\/strong> Maintaining infrastructure for Selenium cross browser checks is time consuming.<\/p>\n<p>At <a href=\"http:\/\/www.qxf2.com\">Qxf2 Services<\/a>, we use <a href=\"http:\/\/docs.seleniumhq.org\/projects\/webdriver\/\">Selenium<\/a> and <a href=\"https:\/\/www.python.org\/\">Python<\/a> for UI testing of web applications. Recently, we evaluated using <a href=\"http:\/\/www.browserstack.com\/\">BrowserStack<\/a> to run our automated checks against different browsers. BrowserStack gives you access to all desktop as well as mobile browsers anytime and from anywhere. It gives instant access to 300+ desktop and mobile browsers on different Windows, Mac &amp; mobile OS flavors. BrowserStack Automate supports running your Selenium tests in different languages like Python, Ruby, Java, C#, PHP, Perl and Node.js and also support CI tools like <a href=\"http:\/\/jenkins-ci.org\/\">Jenkins<\/a>, <a href=\"https:\/\/travis-ci.org\/\">Travis<\/a> and <a href=\"https:\/\/circleci.com\/\">Circle<\/a>.<\/p>\n<hr \/>\n<h3>BrowserStack: Selenium automation on the cloud!<\/h3>\n<p>Maintaining infrastructure for cross browser testing is *hard*. You need to maintain physical servers, virtual machines, different operating systems, emulators, different versions of different browsers, continuously adapt to an ever changing list of different mobile devices, etc. The maintenance work is an extra overhead on our testers and takes away time from what our testers do well &#8211; thinking and testing software. In a previous series we showed you how to get <a href=\"https:\/\/qxf2.com\/blog\/sauce-labs-part\/\">started with Sauce Labs<\/a>. Given the positive reception and our desire to get more testers using cloud based infrastructure, we have decided to write a series of blog posts helping you get started with BrowserStack. We also show you the changes you need to make to easily integrate it with your current suite of automated Selenium checks.<\/p>\n<hr \/>\n<h3>Get started with BrowserStack<\/h3>\n<p>This section will show you how to run your Selenium automated checks on BrowserStack&#8217;s cloud testing platform a.k.a BrowserStack Automate. We provide you with a working example of a Selenium automated check. The automated check will run on a mobile device of our choice. In future blog posts we will show you how to modify your tests so they run across different browsers in parallel.<br \/>\n1. Sign up for a <a href=\"http:\/\/www.browserstack.com\/\">BrowserStack account<\/a><br \/>\n2. Get your Access Key<br \/>\n3. Write a test you want to run on the cloud<br \/>\n4. Modify your script to run on BrowserStack<br \/>\n5. Run the test<br \/>\n6. Check the result<\/p>\n<hr \/>\n<h3>A step by step guide<\/h3>\n<p><strong>STEP 1:<\/strong> Sign up for a <a href=\"https:\/\/www.browserstack.com\/users\/sign_up\">BrowserStack<\/a> account. You get a free 100 minutes of testing on BrowserStack Automate.<\/p>\n<p><strong>STEP 2:<\/strong> Get your Access Key<br \/>\nOnce you login to your BrowserStack account, navigate to your Account settings to view your private and unique BrowserStack Automate information and keys. We will be using this access key in combination with your username to interact with BrowserStack.<\/p>\n<figure id=\"attachment_7377\" aria-describedby=\"caption-attachment-7377\" style=\"width: 1258px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/Browserstack_Access_Key.png\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7377\" src=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/Browserstack_Access_Key.png\" alt=\"Browserstack_Access_Key\" width=\"1258\" height=\"684\" srcset=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/Browserstack_Access_Key.png 1258w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/Browserstack_Access_Key-300x163.png 300w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/Browserstack_Access_Key-768x418.png 768w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/Browserstack_Access_Key-1024x557.png 1024w\" sizes=\"auto, (max-width: 1258px) 100vw, 1258px\" \/><\/a><figcaption id=\"caption-attachment-7377\" class=\"wp-caption-text\">Browserstack_Access_Key<\/figcaption><\/figure>\n<p><strong>STEP 3:<\/strong> Write a test you want to run on the cloud<br \/>\nAt <a href=\"http:\/\/www.qxf2.com\">Qxf2 Services<\/a> we love playing chess. For this example we are going to execute a Selenium test that visits <a href=\"http:\/\/www.chess.com\/\">http:\/\/www.chess.com\/<\/a> assert the title page and click on Sign up button. Here is the code snippet:<\/p>\n<pre lang=\"python\">import unittest, time\r\nfrom selenium import webdriver\r\nfrom selenium.webdriver.common.keys import Keys\r\nfrom selenium.webdriver.common.desired_capabilities import DesiredCapabilities\r\n\r\nclass SeleniumOnBrowserStack(unittest.TestCase):\r\n    \"Example class written to run Selenium tests on BrowserStack\"\r\n    def setUp(self):\r\n        self.driver = webdriver.Firefox()\r\n        \r\n    def test_chess(self):\r\n        \"An example test: Visit chess.com and click on sign up link\"\r\n        #Go to the URL \r\n        self.driver.get(\"http:\/\/www.chess.com\")\r\n        # Assert that the Home Page has title \"Chess.com - Play Chess Online - Free Games\"\r\n        self.assertIn(\"Chess.com - Play Chess Online - Free Games\", self.driver.title)\r\n        # Identify the xpath for Play Now button which will take you to the sign up page\r\n        elem = self.driver.find_element_by_xpath(\"\/\/a[@title='Play Now']\")\r\n        elem.click()\r\n        time.sleep(5)\r\n        # Print the title of sign up page\r\n        print self.driver.title\r\n        \r\n    def tearDown(self):\r\n        self.driver.quit()\r\n \r\nif __name__ == '__main__':\r\n    unittest.main()\r\n\r\n<\/pre>\n<p><strong>STEP 4:<\/strong> Modify your script to run on BrowserStack<br \/>\nThe magic occurs in this step. Let&#8217;s make the test run on iPhone 7. Change your setup method to look like the code below, where $USERNAME is your username and $ACCESS_KEY is the access key you obtained in Step 2.<\/p>\n<pre lang=\"python\">    desired_cap = { 'device': 'iPhone 7','realMobile': 'true', 'platform': 'iOS','browserName': 'safari', 'browserstack.debug': 'true' }\r\n    self.driver = webdriver.Remote(command_executor='http:\/\/USERNAME:ACCESS_KEY@hub.browserstack.com:80\/wd\/hub',desired_capabilities=desired_cap)\r\n<\/pre>\n<p>Note: Setting desired_cap &#8216;browserstack.debug&#8217;: &#8216;true&#8217; helps us to capture visual logs<\/p>\n<p><strong>STEP 5:<\/strong>Run the test<br \/>\nYou can run the test script the normal way you do. We run it via the command prompt.<\/p>\n<p><a href=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/browserstack_test_result-1.png\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/browserstack_test_result-1.png\" alt=\"Running the BrowserStack Test\" width=\"1078\" height=\"151\" class=\"alignnone size-full wp-image-7407\" srcset=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/browserstack_test_result-1.png 1078w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/browserstack_test_result-1-300x42.png 300w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/browserstack_test_result-1-768x108.png 768w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/browserstack_test_result-1-1024x143.png 1024w\" sizes=\"auto, (max-width: 1078px) 100vw, 1078px\" \/><\/a><\/p>\n<p><strong>STEP 6:<\/strong> Check the result<br \/>\nYou can see the results on your web account. Login to your account and you should see a result table like the screenshot below.<\/p>\n<p><a href=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/Browserstack_text_logs.png\" data-rel=\"lightbox-image-2\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-7380\" src=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/Browserstack_text_logs-300x148.png\" alt=\"BrowserStack Test result\" width=\"300\" height=\"148\" srcset=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/Browserstack_text_logs-300x148.png 300w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/Browserstack_text_logs-768x380.png 768w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/Browserstack_text_logs-1024x507.png 1024w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/Browserstack_text_logs.png 1866w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Once the test is completed, you can also look at the visual logs in case &#8216;browserstack.debug&#8217; is set to &#8216;true&#8217;<\/p>\n<p><a href=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/Browserstack_visual_logs.png\" data-rel=\"lightbox-image-3\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-7381\" src=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/Browserstack_visual_logs-300x225.png\" alt=\"BroswerStack Visual Log\" width=\"300\" height=\"225\" srcset=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/Browserstack_visual_logs-300x225.png 300w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/Browserstack_visual_logs-768x575.png 768w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/Browserstack_visual_logs-1024x767.png 1024w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/Browserstack_visual_logs.png 1222w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<hr \/>\n<p>There you have it! A whirlwind tour of getting started with BrowserStack.<\/p>\n<hr \/>\n<script>(function() {\n\twindow.mc4wp = window.mc4wp || {\n\t\tlisteners: [],\n\t\tforms: {\n\t\t\ton: function(evt, cb) {\n\t\t\t\twindow.mc4wp.listeners.push(\n\t\t\t\t\t{\n\t\t\t\t\t\tevent   : evt,\n\t\t\t\t\t\tcallback: cb\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n})();\n<\/script><!-- Mailchimp for WordPress v4.10.1 - https:\/\/wordpress.org\/plugins\/mailchimp-for-wp\/ --><form id=\"mc4wp-form-1\" class=\"mc4wp-form mc4wp-form-6165 mc4wp-form-theme mc4wp-form-theme-blue\" method=\"post\" data-id=\"6165\" data-name=\"Newsletter\" ><div class=\"mc4wp-form-fields\"><div style=\"border:3px; border-style:dashed;border-color:#56d1e1;padding:1.2em;\">\r\n  <h1 style=\"text-align: center; padding-top: 20px; padding-bottom: 20px; color: #592b1b;\">Subscribe to our weekly Newsletter<\/h1>\r\n  <input style=\"margin: auto;\" type=\"email\" name=\"EMAIL\" placeholder=\"Your email address\" required \/>\r\n  <br>\r\n  <p style=\"text-align: center;\">\r\n    <input style=\"background-color: #890c06 !important; border-color: #890c06;\" type=\"submit\" value=\"Sign up\" \/>\r\n    \r\n  <\/p>\r\n  <p style=\"text-align: center;\">\r\n    <a href=\"http:\/\/mailchi.mp\/c9c7b81ddf13\/the-informed-testers-newsletter-20-oct-2017\"><small>View a sample<\/small><\/a>\r\n  <\/p>\r\n  <br>\r\n<\/div><\/div><label style=\"display: none !important;\">Leave this field empty if you're human: <input type=\"text\" name=\"_mc4wp_honeypot\" value=\"\" tabindex=\"-1\" autocomplete=\"off\" \/><\/label><input type=\"hidden\" name=\"_mc4wp_timestamp\" value=\"1775928106\" \/><input type=\"hidden\" name=\"_mc4wp_form_id\" value=\"6165\" \/><input type=\"hidden\" name=\"_mc4wp_form_element_id\" value=\"mc4wp-form-1\" \/><div class=\"mc4wp-response\"><\/div><\/form><!-- \/ Mailchimp for WordPress Plugin -->\n<hr \/>\n","protected":false},"excerpt":{"rendered":"<p>Problem: Maintaining infrastructure for Selenium cross browser checks is time consuming. At Qxf2 Services, we use Selenium and Python for UI testing of web applications. Recently, we evaluated using BrowserStack to run our automated checks against different browsers. BrowserStack gives you access to all desktop as well as mobile browsers anytime and from anywhere. It gives instant access to 300+ [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,40,18,30],"tags":[],"class_list":["post-1269","post","type-post","status-publish","format-standard","hentry","category-automation","category-browserstack","category-python","category-selenium"],"_links":{"self":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/1269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/comments?post=1269"}],"version-history":[{"count":31,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/1269\/revisions"}],"predecessor-version":[{"id":10977,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/1269\/revisions\/10977"}],"wp:attachment":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/media?parent=1269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/categories?post=1269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/tags?post=1269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}