Automated Cross-Browser Testing via Sauce Lab

After I create the website, I have to test it with vary browsers and vary platforms it is a real pain in the ass. So now I found the solution to handle this task without install browsers or create new vms.

There are many clouds that provide the services for cross-browser testing such as CrossBrowserTesting, SauceLabs and so on. For this tutorial I will use SauceLabs cause it give 90 hours and 8 concurrent sessions for free account.

Topic


  1. Gethering Access Key on SauceLabs
  2. Create a test script
  3. Prepare the test framework
  4. Watch the test executed on SuaceLabs

Gethering Access Key on SauceLabs


  1. Create an account or login with GitHub account
  2. Go to login page and login with your account
  3. Now you got your dashboard
  4. Click on your account at the buttom left –> My Account my-account
  5. Scroll down to Access Key Columnaccess-key
  6. Click show and then fill your passwordpassword
  7. Now you got the access key for remote testingaccess-key2

Create a test script


This step, I will use selenium builder to create test steps. The selenium builder is a powerful tool to create and export the test script to vary languages including java, javascript, c# etc and it also has plugin for github, CrossBrowserTesting and SauceLabs for remote testing and uploading the codes.

  1. Open Firefox and install selenium builder (Firefox plugin)
  2. Restart Firefox
  3. Go to Tools –> Web developer –> Launch Selenium Builder
  4. Install Sauce for Selenium Builder plugin
    by click manage plugin –> click install “Sauce for Selenium Builder”
  5. Click back, then start recording the test step and edit some steps such as pause
  6. Stop Recording
  7. Go to menu Run –> Run on Sauce OnDemand
  8. Fill Username, Access Key and select browsers that you would like to test
  9. Click OK to run tests
  10. Meanwhile you can see the testing on SauceLabs
  11. Wait untill all tests is done
  12. Now export test to javascript by going to menu File > Export…
  13. Click export to Node.JS – Selenium-WebDriver

Prepare the test framework


This example I will use JS-Grunt-Mocha-Parallel-WebdriverJS framework for run testing above.

  1. Install Node.js
  2. Install Grunt Globally
    npm install -g grunt-cli
  3. Clone JS-Grunt-Mocha-Parallel-WebdriverJS

    git clone https://github.com/saucelabs-sample-test-frameworks/JS-Grunt-Mocha-Parallel-WebdriverJS.git
  4. Install Node modules
    npm install
  5. Project stucture description
    JS-Grunt-Mocha-Parallel-WebdriverJS
      └── .git
      └── node_modules
      └── test <--- create test script in here
          └── map_example
          └── Main.java
      └── util
          └── helpers.js
      └── .gitigore
      └── Gruntfile.js <--- setting up browser environments in here
      └── Jenkinsfile
      └── package.json
      └── README.md
  6. Empty test directory and create new test spec file by copy the test steps from the exported JavaScript
  7. Update the test emvironment in Gruntfile.js
  8. Setting up Sauce Credentials
    Windows

    $ set SAUCE_USERNAME=<your Sauce Labs username>
    $ set SAUCE_ACCESS_KEY=<your Sauce Labs access key>

    Linux or OSX

    $ export SAUCE_USERNAME=<your Sauce Labs username>
    $ export SAUCE_ACCESS_KEY=<your Sauce Labs access key>
  9. Running Tests
    npm test
  10. Meanwhile you can see the testing on SauceLabs
  11. Wait util all test is done and see every things are green….
    testrunning-cmd

Watch the test executed on SuaceLabs


While we are executing the test scripts, we can see the test is running on SauceLabs website and also we can watch the test is executing on the web browsers in real time.

  1. Go to SauceLabs Dashboard
  2. SauceLabs will display the test case is running…saucelab-dashboard-runtest
  3. Click on the test instant to watch your test executing in real-timetestrunning
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s