Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Automatic Functional Testing with Selenium and SauceLabs

Joseph Chiang
February 04, 2016

Automatic Functional Testing with Selenium and SauceLabs

Build automatic functional testing environment easily (Tool used: Selenium Webdriver, Grunt,

Joseph Chiang

February 04, 2016
Tweet

More Decks by Joseph Chiang

Other Decks in Technology

Transcript

  1. FUNCTIONAL TESTING
    automatically with Selenium
    @josephj6802

    View full-size slide

  2. 'VODUJPOBMUFTUJOHJTBRVBMJUZBTTVSBODF 2"

    QSPDFTTBOEBUZQFPGCMBDLCPYUFTUJOHUIBU
    CBTFTJUTUFTUDBTFTPOUIFTQFDJDBUJPOTPGUIF
    TPGUXBSFDPNQPOFOUVOEFSUFTU
    What’s FT?
    IUUQTFOXJLJQFEJBPSHXJLJ'VODUJPOBM@UFTUJOH

    View full-size slide

  3. Functional Testing in Stackla
    .BOVBM1BTTJWF5FTUJOHXIFOGFBUVSFDPNQMFUFVTFSSFQPSUT
    Can u borrow me
    your iPhone 5?

    View full-size slide

  4. Headless vs. Selenium
    Headless Browser
    ˙'BTUFS/PHSBQIJDPVUQVU
    ˙&BTFPGVTF+VTUBOFYFDVUBCMFCJOBSZ
    ˙-JNJUFE0OMZ8FCLJUBOE(FDLP
    Selenium
    ˙7FSZ4MPX"MXBZTPQFOTSFBMCSPXTFST
    ˙%JDVMUUP4FUVQDPNNXEJFSFOU7.T
    ˙$PWFSBHFFWFOGPS1IBOUPN+4

    View full-size slide

  5. Misunderstandings
    Only available in Firefox
    Need to write Java for Selenium test cases
    or use Selenium IDE to record
    /P BMMUIFNBKPSCSPXTFSTTVQQPSUOPX
    /P ZPVDBOVTFUIFQSPHSBNNJOHMBOHVBHFZPVMJLF
    (Probably true in Selenium 1.0)

    View full-size slide

  6. BOFYFDVUBCMFMFUIBUBDUTBTBCSJEHFCFUXFFO4FMFOJVNBOEUIFCSPXTFS
    Selenium 2.0
    Selenium 1.0 + = Selenium 2.0
    8FC%SJWFS
    *OUFSOFU&YQMPSFS%SJWFS 'JSFGPY%SJWFS $ISPNF%SJWFS 4BGBSJ%SJWFS 0QFSB%SJWFS
    3VCZ
    /PEFKT
    1)1
    npm install selenium-webdriver
    gem install selenium-webdriver
    composer.phar require facebook/webdriver

    View full-size slide

  7. Manipulate Chrome w/ Node.js + ChromeDriver
    Get Feet Wet!
    $ISPNF%SJWFS
    var webdriver = require(‘selenium-webdriver'),
    expect = require('expect'),
    driver = new webdriver.Builder().forBrowser('chrome').build();
    driver.get('http://stackla.com');
    driver.getTitle().then(function (title) {
    expect(title).toBe(“Stackla - Social Media Aggregator“);
    });
    driver.quit();
    %PXOMPBE$ISPNF%SJWFS
    1VU$ISPNF%SJWFSUPZPVS1"5)
    *OTUBMMUIFSFRVJSFEQBDLBHF T

    8SJUFTDSJQU
    3VOJU
    Tip: Node.JS 4.x

    View full-size slide

  8. Scalability
    4FMFOJVN(SJET
    #VJMEZPVSPXO

    View full-size slide

  9. Scalability
    $MPVE4FSWJDF
    8IZCVJMEPVSPXO 6TF
    .PVOUBJO7JFX 64
    .VNCBJ *OEJB
    ,VVSOF #FMHJVN

    View full-size slide

  10. Trial Run with

    View full-size slide

  11. Manual Testing
    ˙CSPXTFS04DPNCJOBUJPOT
    ˙*OEJWJEVBM7.T
    ˙5FTUMPDBMBOETFSWFSCFIJOESFXBMM
    CZFTUBCMJTIJOHBUVOOFM
    IUUQTTBVDFMBCTDPNCFUBNBOVBM

    View full-size slide

  12. Manual Testing
    #FIJOESFXBMMPSMPDBMIPTU /PQSPCMFN

    View full-size slide

  13. Automated Testing
    IUUQTTBVDFMBCTDPNCFUBEBTICPBSEUFTUT

    View full-size slide

  14. My Tools
    Browser testing on SauceLabs
    1SPWJEF"1*CZCSPXTFSHMPCBMWBSJBCMF
    5SJHHFSUPSVOBMMUFTUDBTFT
    #VJME5VOOFM
    #VJME8FC4FSWFS
    "MMJOPOFUFTUGSBNFXPSL
    Jasmine
    4FMFOJVNCJOEJOHTGPS/PEF+4
    Webdriver.io
    Grunt
    0OEFNBOECVJMET7.T #SPXTFS1MBUGPSN

    SauceLabs

    View full-size slide

  15. exports.config = {
    user: process.env.SAUCE_USERNAME,
    key: process.env.SAUCE_ACCESS_KEY,
    updateJob: true,
    specs: ['./tests/*_test.js'],
    capabilities: [{
    browserName: 'firefox',
    version: 37,
    name: 'Firefox Selenium tests',
    build: 'build-' + process.env.TRAVIS_BUILD_ID,
    'tunnel-identifier': process.env.TRAVIS_JOB_NUMBER
    },{
    browserName: 'chrome',
    version: 43,
    name: 'Chrome Selenium tests',
    build: 'build-' + process.env.TRAVIS_BUILD_ID,
    'tunnel-identifier': process.env.TRAVIS_JOB_NUMBER
    },{
    browserName: 'internet explorer',
    version: 11,
    name: 'IE Selenium tests',
    build: 'build-' + process.env.TRAVIS_BUILD_ID,
    'tunnel-identifier': process.env.TRAVIS_JOB_NUMBER
    },{
    browserName: 'safari',
    version: 6,
    name: 'Safari Selenium tests',
    build: 'build-' + process.env.TRAVIS_BUILD_ID,
    'tunnel-identifier': process.env.TRAVIS_JOB_NUMBER
    }],
    baseUrl: 'http://localhost:8585',
    framework: 'jasmine',
    reporter: ‘spec'
    };
    ./wdio-saucelab.conf.js
    // browser - webdriver instance
    describe('Index Page', function() {
    it('should have title', function* () {
    yield browser.url('/index.html');
    expect(yield browser.getTitle()).toBe('Browser
    Testing');
    });
    it('shoud have Stackla widget', function* () {
    yield browser.url('/');
    expect(yield browser.isExisting('.stackla-widget'));
    });
    });
    ./tests/index_test.js




    Browser Testing


    Browser Testing
    hash="5663ac9e3843f" data-ct="" data-alias="josephj.stackla.com"
    data-ttl="30" style="width: 100%; overflow: hidden;">
    <br/>(function (d, id) {<br/>if (d.getElementById(id)) return;<br/>var t = d.createElement('script');<br/>t.type = 'text/javascript';<br/>t.src = '//assetscdn.stackla.com/media/js/widget/<br/>fluid-embed.js';<br/>t.id = id;<br/>(document.getElementsByTagName('head')[0] ||<br/>document.getElementsByTagName('body')[0]).appendChild(t);<br/>}(document, 'stackla-widget-js'));<br/>


    http://localhost:8585/index.html
    Need to build a web server and tunnel
    $ wdio wdio-saucelab.conf.js

    View full-size slide

  16. Automated Build
    USJHHFSJOHCVJMECZHJUQVTI

    View full-size slide

  17. TravisCI
    My Tools
    Delegating testing task to CI Server
    1SPWJEF"1*CZCSPXTFSHMPCBMWBSJBCMF
    5SJHHFSUPSVOBMMUFTUDBTFT
    #VJME5VOOFM
    #VJME8FC4FSWFS
    "MMJOPOFUFTUGSBNFXPSL
    Jasmine
    4FMFOJVNCJOEJOHTGPS/PEF+4
    Webdriver.io
    Grunt
    0OEFNBOECVJMET7.T #SPXTFS1MBUGPSN

    SauceLabs

    View full-size slide

  18. Enable Build
    https://github.com/josephj/browser-testing

    View full-size slide

  19. Whenever user makes git push
    Set environment variables for SauceConnect
    Settings

    View full-size slide

  20. language: node_js
    node_js:
    - "4.1"
    before_script:
    - npm install grunt-cli -g
    - npm install webdriverio -g
    - npm install jasmine -g
    addons:
    sauce_connect: true
    branches:
    only:
    - master
    - gh-pages
    script:
    - grunt test:saucelabs
    Config File
    ./travis.yml

    View full-size slide

  21. https://travis-ci.org/josephj/browser-testing
    Let’s Build!
    $ git push

    View full-size slide

  22. Todo List
    ˙$PNQBSFEJFSFOUTFSWJDFT
    ˙#SPXTFS4UBDL 5FTUJOH#PU
    ˙3FBEUIF8FC%SJWFS*0"1*
    ˙IUUQXFCESJWFSJPBQJIUNM
    ˙8SJUFUFTUTGPS4UBDLMB8JEHFU
    ˙*OUFHSBUFX#BNCPP#VJME
    ˙1VMM3FRVFTUNJHIUCFBHPPEUJNJOH

    View full-size slide

  23. Pricing
    Unlimted Automation Testing
    but slow with 1 parallel VM
    Better speed but with limited time
    Fastest and quiet enough time

    View full-size slide

  24. Google Trends
    BrowserStack is the most
    popular one

    View full-size slide

  25. Resources
    ˙#FTU1SBDUJDFGPS3VOOJOH5FTUTXJUI4BVDF-BCT
    ˙IUUQTXJLJTBVDFMBCTDPNEJTQMBZ%0$4#FTU1SBDUJDFTGPS3VOOJOH5FTUTXJUI4BVDF-BCT
    ˙*OTUBMMJOHBOE$POHVSJOHUIF4BVDF-BCT1MVHJOGPS#BNCPP
    ˙IUUQTXJLJTBVDFMBCTDPNEJTQMBZ%0$4*OTUBMMJOHBOE$POHVSJOHUIF4BVDF-BCT1MVHJOGPS#BNCPP
    ˙#BTJD)551"VUIFOUJDBUJPO
    ˙IUUQTXJLJTBVDFMBCTDPNEJTQMBZ%0$4#BTJD)551"VUIFOUJDBUJPO
    ˙*OKFDUJOH$PPLJFTUP#ZQBTT"VUIFOUJDBUJPO%JBMPHT
    ˙IUUQTXJLJTBVDFMBCTDPNEJTQMBZ%0$4*OKFDUJOH$PPLJFTUP#ZQBTT"VUIFOUJDBUJPO%JBMPHT
    https://github.com/josephj/browser-testing

    View full-size slide