Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to Protractor

4,405 views

Published on

Introduction to Protractor.

Published in: Engineering
  • @subs I do it manually XD
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Ah slide 23 listed protractor-utils as public though the repo was missing. No worries. The other question was about quickly making slides with code diffs. I was wondering if you found an automated way to do that or if it manual. I am still looking for a way to simplify that. I'll eventually build one. Thanks!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @subs Hi, `protractor-utils` can be used only internal company. This's a sharing for our company, so I put it on my slide. Secondly, I guess that you're asking about the sample code, right? I do have some example when I was sharing, but not put on the github, if you want them, reply and I can send to you.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for sharing this presentation. It's one of the more concise yet complete demonstrations of chai+chaiAsPromised. I have been testing for a while and missed `only` and `skip` having only used `xdescribe` and `xit`.

    Two questions though.

    * I can't seem to find the version of `protractor-utils` you are using. There is only one on github/npm, and none on bitbucket.
    * Are the code diffs for the slides manually created or was there a you used to prepare those? Very helpful.

    Thanks!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Introduction to Protractor

  1. 1. Ideal Test,Scripts Selenium,Server protractor.conf.js Actual Browser,Drivers
  2. 2. Setup $ npm install protractor
  3. 3. Setup $ npm install protractor $ npm install yo $ sudo ynpm i -g generator-ypr -otractor $ cd your-repo-dir $ yo yprotractor:existing $ ynpm update
  4. 4. Setup $ npm install protractor package.json }, "devDependencies": { "less": "1.7.3", "jslint": "0.5.2", "mojito-cli": "0.1.2", "yahoo-arrow": "~0.5.1", "yhint": "*", "chai": "^1.9.0", "chai-as-promised": "^4.1.0", "mocha": "^1.19.0", "protractor": "1.1.x", "protractor-utils": "0.2.x" }, $ npm install yo $ sudo ynpm i -g generator-ypr -otractor $ cd your-repo-dir $ yo yprotractor:existing $ ynpm update
  5. 5. Setup $ npm install protractor package.json }, "devDependencies": { "less": "1.7.3", "jslint": "0.5.2", "mojito-cli": "0.1.2", "yahoo-arrow": "~0.5.1", "yhint": "*", "chai": "^1.9.0", "chai-as-promised": "^4.1.0", "mocha": "^1.19.0", "protractor": "1.1.x", "protractor-utils": "0.2.x" }, $ npm install yo $ sudo ynpm i -g generator-ypr -otractor $ cd your-repo-dir $ yo yprotractor:existing $ ynpm update $ git clone xxx.git && cd xxx $ ynpm i
  6. 6. Setup $ npm install webdriver-manager $ webdriver-manager update --standalone $ webdriver-manager start $ npm install protractor $ git clone xxx.git && cd xxx $ ynpm i $ webdriver-manager status $ npm install yo $ sudo ynpm i -g generator-ypr -otractor $ cd your-repo-dir $ yo yprotractor:existing $ ynpm update
  7. 7. $ npm install protractor Run $ git clone xxx.git && cd xxx $ ynpm i $ protractor tests/spec/ protractor.conf.js -- seleniumAddress="..." -- baseUrl="..." protractor.conf.js
  8. 8. $ npm install protractor Run $ git clone xxx.git && cd xxx $ ynpm i $ protractor tests/spec/ protractor.conf.js -- seleniumAddress="..." -- baseUrl="..." Using the selenium server at http://10.82.57.93:4444/wd/ hub 1..2 ok 1 Page onload test should match store title not ok 2 Universal header shoppingcart checking after click items ... ... # tests 2 # pass 1 # fail 1
  9. 9. Test,Scripts mocha Protractor API 1.3.0 Chai%Asser*on%Library
  10. 10. mocha Protractor API 1.3.0 Chai%Asser*on%Library describe('Page onload test', function () { it('should match store title', function () { }); });
  11. 11. mocha Chai%Asser*on%Library Protractor API 1.3.0 /* global browser, $, it, describe, before */ describe('Page onload test', function () { it('should match store title', function () { }); }); browser.get('/'); browser.getTitle()
  12. 12. mocha Protractor API 1.3.0 Chai%Asser*on%Library /* global browser, $, it, describe, before */ var chai = require(‘chai’), expect = chai.expect, chaiAsPromised = require(‘chai-as-promised’); chai.use(chaiAsPromised); describe('Page onload test', function () { it('should match store title', function () { }); }); browser.get('/'); expect( browser.getTitle() ).to.eventually.equal('');
  13. 13. mocha Chai%Asser*on%Library Protractor API 1.3.0 describe('Page onload test', function () { var node, present; it('store logo should exist', function () { node = element(by.css(‘.ylogo’)); present = node.isPresent(); console.log(‘present: ’, present); expect(present).to.equal(true); }); });
  14. 14. mocha Chai%Asser*on%Library Protractor API 1.3.0 describe('Page onload test', function () { var node, present; it('store logo should exist', function () { node = element(by.css(‘.ylogo’)); present = node.isPresent(); console.log(‘present: ’,present); expect(present).to.eveutually.equal(true); node.isPresent().then(function (_present) { console.log(‘_present: ’, _present); expect(_present).to.equal(true); }); }); });
  15. 15. mocha Chai%Asser*on%Library Protractor API 1.3.0 describe('Page onload test', function () { var node, present; it('check if link works', function () { node = $(‘.ylogo’); node.getAttribute('href').then(function (_linkUrl) { browser.getCurrentUrl().then(function (curUrl) { expect(_curUrl).to.contain(_linkUrl); }) .then(function () { node.click(); }); browser.wait(function () { return browser.getCurrentUrl().then(function (_curUrl) { return _curUrl === _linkUrl; }, TIMELIMIT); }); }); });
  16. 16. mocha Chai%Asser*on%Library Protractor API 1.3.0 describe('Page onload test', function () { var node, present; it('check if link works', function () { node = $(‘.ylogo’); node.getAttribute('href').then(function (_linkUrl) { linkUrl = _linkUrl; return browser.getCurrentUrl(); }).then(function (curUrl) { expect(_curUrl).to.contain(_linkUrl); }).then(function () { node.click(); .then(function () { browser.wait(function () { return browser.getCurrentUrl().then(function (_curUrl) { return _curUrl === linkUrl; }, TIMELIMIT); }); }); });
  17. 17. mocha Chai%Asser*on%Library Protractor API 1.3.0 describe('Page onload test', function () { var node, present; it('check if link works', function () { node = $(‘.ylogo’); protractor.promise.all([browser.getCurrentUrl(), node.getAttribute('href')]) .then(function (_res) { curUrl = _res[0]; linkUrl = _res[1]; node.click(); browser.wait(function () { return browser.getCurrentUrl().then(function (_curUrl) { return _curUrl === linkUrl; }, TIMELIMIT); }); }); });
  18. 18. Tips only skip describe.only('Test task A', function () { it('sub-task 1', function () {}); it('sub-task 2', function () {}); }); describe('Test task B', function () { it('sub-task 1', function () {}); }); describe('Test task C', function () { it.only('sub-task 1', function () {}); it('sub-task 2', function () {}); }); describe('Test task D', function () { it('sub-task 1', function () {}); it('sub-task 2', function () {}); });
  19. 19. Tips only describe.only('Test task A', function () { it.skip('sub-task 1', function () {}); it('sub-task 2', function () {}); skip only%only%is%only }); describe('Test task B', function () { it('sub-task 1', function () {}); }); describe.only('Test task C', function () it.skip('sub-task 1', function () {}); it.skip('sub-task 2', function () {}); it('sub-task 2', function () {}); }); describe('Test task D', function () { it('sub-task 1', function () {}); });
  20. 20. Tips $ protractor tests/spec/protractor.conf.js --seleniumAddress=... --baseUrl=... --specs=tests/spec/test/universal.spec.js --suite=uni protractor.conf.js
  21. 21. before beforeEach after afterEach Tips describe.only('Test task A', function () { var hambgNode; beforeEach(function () { hambgNode = $('.header .myStore '); }); it('sub-test 1', function () {}); it('sub-test 2', function () {}); }); describe('Test task B', function () { beforeEach(function () { hambgNode = $('.header .myStore '); }); it('sub-test 1', function () {}); });
  22. 22. Source mocha Protractor API 1.3.0 Chai%Asser*on%Library

×