{"id":3177,"date":"2015-10-09T01:04:40","date_gmt":"2015-10-09T05:04:40","guid":{"rendered":"http:\/\/qxf2.com\/blog\/?p=3177"},"modified":"2017-07-06T14:40:25","modified_gmt":"2017-07-06T18:40:25","slug":"browserstack-circleci-build-containers","status":"publish","type":"post","link":"https:\/\/qxf2.com\/blog\/browserstack-circleci-build-containers\/","title":{"rendered":"Connecting to BrowserStack from CircleCI containers"},"content":{"rendered":"

Problem:<\/strong> How do I connect to BrowserStack from CircleCI’s build containers?
\n <\/p>\n

\n

Why this post?<\/h3>\n

A recent Qxf2<\/a> client was using CircleCI<\/a> for their continuous integration and deployment needs. Partnering with our client, we had identified that it would be useful to run a minimal set of automated GUI tests as part of their continuous integration and deployment process. The GUI tests needed WebGL<\/a> enabled browsers. So we figured we would use BrowserStack<\/a> to run the tests against the local CircleCI build container. You can find bits and pieces of the solution in different places on the Internet. We thought we would document the complete solution in one place. <\/p>\n

\n

For this tutorial, we will pretend that we are testing a static web application with exactly one html page. This is sufficient to illustrate how you would go about connecting to BrowserStack from the CircleCI container. We will create a repository for the static web application and write a Selenium test to test the page. Our deploy process is simply getting setup with an NGINX server and copying over the html file to the appropriate directory. For the test, we will create a BrowserStack tunnel and access our html page on BrowserStack. <\/p>\n

\n

Detailed Steps<\/h3>\n

1. Check in your application to GitHub
\n2. Create a Selenium test to run on BrowserStack
\n3. Sign up with CircleCI and integrate with your GitHub Project
\n4. Configure CircleCI
\n5. Check-in the circle.yml file<\/p>\n

STEP 1. Check in your application to GitHub<\/strong><\/p>\n

To keep things simple I will add a single html page which we can host later in CircleCI. I will add an html page which we had created earlier as part of Selenium training<\/a> that we conduct. You can get the source from this link<\/a>.<\/p>\n

STEP 2. Create a Selenium test to run on BrowserStack<\/strong>
\nBrowserStack is a cross-browser testing tool, to test public websites and protected servers, on a cloud infrastructure of desktop and mobile browsers. If you are not familiar how to create a selenium test with BrowserStack, you can refer to our earlier post on BrowserStack <\/a>. We have created a “tests\/” directory within our GitHub repository and placed our test in it.<\/p>\n

\r\n\"\"\"\r\nSelenium Test to run on BrowserStack: Visit the Qxf2 Tutorial Page and assert the title\r\n\"\"\"\r\n\r\nimport unittest\r\nfrom selenium import webdriver\r\nfrom selenium.webdriver.common.desired_capabilities import DesiredCapabilities\r\n\r\nclass Qxf2_Tutorial_BrowserStack_Test(unittest.TestCase):\r\n    \"Example class written to run Selenium tests on BrowserStack\"\r\n    def setUp(self):\r\n        desired_cap = {'os': 'Windows', 'os_version' : '7', 'browser': 'Firefox', 'browser_version':'36', 'browserstack.debug': 'true', 'browserstack.local':'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       \r\n    def test_qxf2_selenium_tutorial(self):\r\n        \"An example test: Visit Qxf2 Tutorial Page and assert the title \"\r\n        # The driver.get method will navigate to a page given by the URL\r\n        self.driver.get(\"http:\/\/localhost\/selenium-tutorial-main.html\")\r\n        # Assert the Page Title\r\n        self.assertIn (\"Qxf2 Services: Selenium training main\", self.driver.title)\r\n        # Close the browser window\r\n        self.driver.close()\r\n\r\n    def tearDown(self):\r\n        self.driver.quit()\r\n \r\nif __name__ == '__main__':\r\n    unittest.main()\r\n<\/pre>\n
Note 1:<\/strong> Remember to set the “browserstack.local” capability to “true”
\nNote 2:<\/strong> Replace USERNAME:ACCESS_KEY with your BrowserStack username and access key<\/p>\n
STEP 3. Sign up with CircleCI and integrate with your GitHub Project<\/strong><\/p>\n
You can sign up with CircleCI<\/a> using your GitHub account and give CircleCI permission to access your repository on your behalf. CircleCI supports open source projects with 3 free containers for high build throughput.<\/p>\n
When you add a GitHub repository to CircleCI, CircleCI automatically adds a deploy key that references this repository. Whenever there is a new commit to your repository CircleCI detects and pulls the latest code and runs the test.<\/p>\n
STEP 4: Configure CircleCI<\/strong><\/p>\n
\r\n## Customize dependencies\r\ndependencies:\r\n  pre:\r\n    - sudo pip install -U selenium\r\n    - sudo apt-get install nginx\r\n    # Copy the html page to nginx default public www location\r\n    - sudo cp .\/selenium-tutorial-main.html \/var\/www\/html\/selenium-tutorial-main.html\r\n    \r\n## Running Tests\r\ntest:\r\n  pre:\r\n    # MAGIC HAPPENS HERE\r\n    # Download the browserstack binary file to create a tunnel\r\n    - wget \"https:\/\/www.browserstack.com\/browserstack-local\/BrowserStackLocal-linux-x64.zip\"\r\n    # Unzip the browserstack binary file\r\n    - unzip BrowserStackLocal-linux-x64.zip\r\n    # Run the file with your access key\r\n    - .\/BrowserStackLocal $BROWSERSTACK KEY:\r\n        background: true\r\n    \r\n  override:\r\n    - python tests\/Qxf2_Tutorial_BrowserStack_Test.py\r\n<\/pre>\n
Let us closely examine our YAML file. <\/p>\n
a. The CircleCI environment provides the libraries, languages, and databases needed for most development work. However, if you need to install a particular version of software CircleCI makes it easy to set up your environment to meet your testing needs. In our example we will install NGINX to host our page and Selenium to run our test. We will also deploy our static web application by copying over the file to NGINX’s default public www location.<\/p>\n
\r\ndependencies:\r\n  pre:\r\n    - sudo pip install -U selenium\r\n    - sudo apt-get install nginx\r\n    # Copy the html page to nginx default public www location\r\n    - sudo cp .\/selenium-tutorial-main.html \/var\/www\/html\/selenium-tutorial-main.html\r\n<\/pre>\n
b. Running the test:
\nWe need to perform some actions before we run our tests. CircleCI “pre:” command can be used to run commands before CircleCI’s inferred commands. And this section is where the magic happens. We simply translated the setup outlined here<\/a> into a format CircleCI understands.<\/p>\n
We download the BrowserStack binary<\/a> file<\/p>\n
\r\n wget \"https:\/\/www.browserstack.com\/browserstack-local\/BrowserStackLocal-linux-x64.zip\"<\/em>\r\n<\/pre>\n
Then we unzip the downloaded file to obtain the BrowserStackLocal executable<\/p>\n
- unzip BrowserStackLocal-linux-x64.zip<\/pre>\n
Finally we run the file with our BrowserStack access key. You can look up your BrowserStack access key by simply logging in to your BrowserStack and accessing your account information.<\/p>\n
- .\/BrowserStackLocal $BROWSERSTACK KEY:\r\n        background: true\r\n<\/pre>\n
By default CircleCI runs nosetests when it finds a unittest.py file. However we can override and run custom test commands from your circle.yml file on bash prompt. <\/p>\n
python tests\/Qxf2_Tutorial_BrowserStack_Test.py<\/pre>\n
STEP 5: Check-in the circle.yml file<\/strong>
\nNow once you check-in your circle.yml file, CircleCI will find the new commit to your test and run the test. Make sure the circle.yml file is added to your root directory.<\/p>\n
\"CirclCI_Test_Run_BrowserStack\"<\/a><\/p>\n
\"CircleCI_BrowserStack\"<\/a><\/p>\n
\n
And that’s how you can connect to BrowserStack and run your GUI automation against a CircleCI build container.<\/p>\n","protected":false},"excerpt":{"rendered":"
Problem: How do I connect to BrowserStack from CircleCI’s build containers? Why this post? A recent Qxf2 client was using CircleCI for their continuous integration and deployment needs. Partnering with our client, we had identified that it would be useful to run a minimal set of automated GUI tests as part of their continuous integration and deployment process. The GUI […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40,93,52,30],"tags":[],"class_list":["post-3177","post","type-post","status-publish","format-standard","hentry","category-browserstack","category-circleci","category-continuous-integration","category-selenium"],"_links":{"self":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/3177","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=3177"}],"version-history":[{"count":22,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/3177\/revisions"}],"predecessor-version":[{"id":6378,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/3177\/revisions\/6378"}],"wp:attachment":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/media?parent=3177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/categories?post=3177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/tags?post=3177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}