[DN Scrum Breakfast] Automation E2E Testing with Chimp Framework and WebdriverIO

www.axon.vnfb.com/AxonActiveVietNam
PHOENIX team

CHIMP and Webdriver IO
An option for UI Automation Test

• What is Chimp? Advantages & Disadvantages
• Why Chimp?
• Basic knowledge
• Element Capture
• Cucumber
• Jasmine
• API library (Webdriver IO)
• POM
• Demo
• Installation
• Practice & Discussion
Agenda

Questions & Answers

Copy files from USB

• Situation:
• Automation project for Angular JS site
• What did we do?
• VN team and SF QA to research 2 different tools: PROTRACTOR and CHIMP
• 3 Test cases: Easy, Medium and Hard
• Had a meeting with PO to decide the framework
• What did we choose?
• CHIMP :(
• Why?
• CHIMP script is simpler and easier to understand than PROTRACTOR’s
• Conclusion
• CHIMP and PROTRACTOR are same
• To have demo, you should only have a short and clear script. :)
Why Chimp?

• Chimp is automation test FW to write Acceptance/ E2E
testing using Mocha, Jasmine or Cucumber.js
• Chimp is npm package
• Language: Javascript
• Developed by Sam Hatoum and xolv.io/
• Home page: https://chimp.readme.io/
What is Chimp?

• Built in Node.js
• Works for any web application
• Chimp includes many tools inside it:
• Mocha, Jasmine or Cucumber.js
• Selenium and WebdriverIO
• Chai or Jasmine assertion libraries
• A watch mode
• Write step definitions in a synchronous style
• Support run by command line and work with CI tools
• Run on OSX, Linux and Windows
Advantages of Chimp

• Less documents
• Small community
Disadvantages

• Install Add-on for Firefox to easy catch selectors:
• FirePath
• FireBug
Element Capture

• Install Add-on for Firefox to easy catch selectors:
• FirePath
• FireBug

• Selector … @text:
• Exactly Text
• Partial Text
• Element with text
• Selector … @CSS
• CSS query
• Chain Selectors
• Elements
• Selector … @Xpath
Selector Supports

Selector …@text …@exactly text

Selector …@text …@partial text

Selector …@text …@element with text

Selector …@CSS …@CSS query

Selector …@CSS …@Chain Selector

Selector …@CSS …@elements

Selector …@Xpath

Cucumber
• Cucumber is a framework for writing and executing high level descriptions of your software’s
functionality.
• Cucumber is a tool that supports Behaviour-Driven Development (BDD) - a software development
process that aims to enhance software quality and reduce maintenance costs.
• Cucumber is a framework for defining behavior using a language called Gherkin. The Gherkin syntax
uses a combination of keywords and natural language.

Cucumber

Cucumber - Step Definitions

Jasmine
• Refer: https://jasmine.github.io/2.3/introduction.html#section-
Expectations
• Included matchers:
• The 'toBe' matcher compares with ===
• The 'toEqual' matcher
• Works for simple literals and variables
• Should work for objects
• The 'toContain' matcher
• Works for finding an item in an Array
• Also works for finding a substring

Jasmine
• Included matchers (cont.):
• The 'toThrowError' matcher is for testing a specific thrown exception
• The 'toMatch' matcher is for regular expressions
• The 'toBeDefined' matcher compares against `undefined`
• The `toBeUndefined` matcher compares against `undefined`
• The 'toBeNull' matcher compares against null
• The 'toBeTruthy' matcher is for boolean casting testing
• The 'toBeLessThan' matcher is for mathematical comparisons
• The 'toBeGreaterThan' matcher is for mathematical comparisons
• The 'toBeCloseTo' matcher is for precision math comparison
• The 'toThrow' matcher is for testing if a function throws an exception
• The 'toBeFalsy' matcher is for boolean casting testing

Jasmine…@example

API of WebdriverIO
• Link: http://webdriver.io/api.html

API of WebdriverIO (cont.)
• Link: https://chimp.readme.io/docs/cheat-sheet
• The APIs to wait are strong: waitForEnabled / waitForExist/
waitForSelected / waitForText /waitForValue / waitForVisible / waitUntil
• Assert that element exists in DOM:
• const doesExist = client.waitForExist("selector");
• expect(doesExist).toBe(true);
• Assert that element is not in DOM: Use null for second parameter to
keep default wait timeout. Third parameter negates the check.
• const doesNotExist = client.waitForExist("childElement", null, true);
• expect(doesNotExist).toBe(true);

POM - Page Object Model

POM - Page Object Model (cont.)

Installation - Online
• Install Node.js v.6.9.1 from https://nodejs.org/download/release/v6.9.1/
• Add nodejs to user variable and system variable
• User variable: PATH -> C:UsersuserAAAAppDataRoamingnpm
• System variable: PATH -> C:Program Filesnodejs
• Install git: download from https://git-scm.com/download
• Install Chimp globally : start cmd with Administrator permission
• npm install -g chimp
• Add System PATH ->
C:UsersuserAAAAppDataRoamingnpmnode_moduleschimp
• Check Chimp install successfully on cmd : chimp --version -> 0.50.2
• Install VSC from https://code.visualstudio.com/download
• Open VSC and install add-on “Cucumber (Gherkin) Full Support”
• Install FF 55.0.3 from https://ftp.mozilla.org/pub/firefox/releases/55.0.3/
• Open FF and install add-on FireBug and FirePath

Installation - Offline
• Install Node.js v.6.9.1 from installnode6.9.1
• Add nodejs to user variable and system variable
• User variable: PATH -> C:UsersuserAAAAppDataRoamingnpm
• System variable: PATH -> C:Program Filesnodejs
• Install git from installgit
• Install Chimp offline:
• copy files from “installoffline_npmnpm” into
C:UsersuserAAAAppDataRoamingnpm
• Add System PATH ->
C:UsersuserAAAAppDataRoamingnpmnode_moduleschimp
• Check Chimp install successfully on cmd : chimp --version -> 0.50.2
• Install VSC from installvisual_studio_code
• Open VSC and install add-on “Cucumber (Gherkin) Full Support”
• Install FF 55.0.3 from installfirefox_browser
• Open FF, select File->Open File -> Select firebug-2.0.19-fx.xpi from
installfirefox_browser . Then do the same with firepath-0.9.7.1-fx.xpi

Tea break

Demo
TC1 Verify user is able to add/remove to do Tasks
Steps Test Data Expected results
1 Navigate to https://angularjs.org/
2 Go to "Todo" section
- There is a task "learn AngularJS" checked
- "learn AngularJS" text is strikethrough
3 Type a task and click on "add" button Join ScrumBreakFirst - A new task is added to Todo list with uncheck status
4 Uncheck "learn AngularJS" task
- "learn AngularJS" task is uncheck
- "learn AngularJS" text is not strikethrough

Practice
TC2 Verify user can create a Project successul
Steps Test Data Expected results
1 Navigate to https://angularjs.org/
2 Go to 'JavaScript Projects'
3 Click on + icon under Search textbox
4 Enter valid "Name", "Website", "Description"
Name: JavaScript Beginner
Website: https://angularjs.org
Description: I want to learn angularjs
Project is saved successfully, the form disappears:
- Project with description displays in the list
- Name, Website, Description textbox disappears
5 Search for created project JavaScript Beginner
Result displays for project that user's searched
- Project with description displays in the list

[DN Scrum Breakfast] Automation E2E Testing with Chimp Framework and WebdriverIO

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to [DN Scrum Breakfast] Automation E2E Testing with Chimp Framework and WebdriverIO

Similar to [DN Scrum Breakfast] Automation E2E Testing with Chimp Framework and WebdriverIO (20)

More from Scrum Breakfast Vietnam

More from Scrum Breakfast Vietnam (20)

Recently uploaded

Recently uploaded (20)

[DN Scrum Breakfast] Automation E2E Testing with Chimp Framework and WebdriverIO