Kakunin E2E framework showcase

ADAM POLAK
PHP DEVELOPER
JS DEVELOPER
E2E DEVELOPER
E2E DEVELOPER
JS DEVELOPER
TOMASZ GÓRSKI

KAKUNIN WORKSHOPS
AGENDA
▸ HOW TO INSTALL AND CONFIGURE KAKUNIN?
▸ HOW TO NAVIGATE BETWEEN PAGES AND
VALIDATE CURRENT PAGE?
▸ HOW TO INTERACT WITH ELEMENTS AND
VALIDATE CONTENT?
▸ HOW TO FILL IN, CHECK OUT ITS VALUES AND
VALIDATE FORMS?
▸ HOW TO CHECK EMAILS CONTENT?
▸ HOW TO DEBUG KAKUNIN?

KAKUNIN WORKSHOPS
▸ HOW TO EXTEND KAKUNIN WITH CUSTOM STEPS?
▸ HOW TO HANDLE NON-BUILT-IN FORM FIELD
TYPES?
▸ HOW TO ADD SCENARIO SPECIFIC HOOKS?
▸ HOW TO CONNECT DIFFERENT MAILING SERVICE?
AGENDA

WHAT IS KAKUNIN?
KAKUNIN WORKSHOPS

WHAT IS KAKUNIN?
▸ PROTRACTOR EXTENSION
▸ GHERKIN AS A PROGRAMMING LANGUAGE
▸ BUILT-IN STEPS TO SOLVE MOST COMMON CASES
▸ EASLY EXTENDABLE
▸ HANDLES ANGULAR AND NON-ANGULAR APPS
OUT OF THE BOX
KAKUNIN

WHAT ARE WE GOING TO
TEST?
KAKUNIN WORKSHOPS

INSTALATION
HOW TO INSTALL?
{
"name": "workshop",
"version": "0.0.1",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}
cd kakunin-workshop
mkdir kakunin-workshop
npm init

INSTALATION
HOW TO INSTALL?
npm install webdriver-manager 
npm install protractor 
npm install kakunin
{
...
"scripts": {
...
"kakunin": "NODE_ENV=prod kakunin"
},
...
"devDependencies": {
... 
"webdriver-manager": "12.0.6",
"protractor": "5.1.2",
"kakunin": "1.0.1"
}
}

INSTALATION
HOW TO INSTALL?
npm run kakunin init
cd step_definitions 
ln -s ../node_modules/kakunin/dist/step_definitions/elements.js kakunin-elements.js
ln -s ../node_modules/kakunin/dist/step_definitions/debug.js kakunin-debug.js
ln -s ../node_modules/kakunin/dist/step_definitions/file.js kakunin-file.js
ln -s ../node_modules/kakunin/dist/step_definitions/form.js kakunin-form.js
ln -s ../node_modules/kakunin/dist/step_definitions/email.js kakunin-email.js
ln -s ../node_modules/kakunin/dist/step_definitions/generators.js kakunin-generators.js
ln -s ../node_modules/kakunin/dist/step_definitions/navigation.js kakunin-navigation.js

INSTALATION
HOW TO INSTALL?
npm run kakunin
Scenario:
If you can see this in console then hook is working properly.
✔ When I visit the "page" page
✔ And I generate random "name" as "myName"
✔ Then my matcher "e:name" matches "v:myName"
✔ And my matcher "e:name" matches "Bob"
1 scenario (1 passed)
4 steps (4 passed)
0m00.757s

INSTALATION
HOW TO RUN A SINGLE SCENARIO?
npm run kakunin -- --tags @someTag
npm run kakunin -- --tags="@someTag and @otherTag"
npm run kakunin -- --tags="@someTag or @otherTag"
npm run kakunin -- --tags="not @someTag"

NAVIGATE BETWEEN
PAGES
KAKUNIN WORKSHOPS

NAVIGATE BETWEEN PAGES
PAGE OBJECT
const { BasePage } = require('kakunin');
class MainPage extends BasePage {
constructor() {
super();
this.url = '/';
}
}
module.exports = new MainPage();

SCENARIO - NAVIGATING
Feature: Load main page
Scenario: Load main page as homepage
Given/When I visit the "main" page
The name of a page object ﬁle. For this case there has to be a ﬁle "main.js" in pages directory.

SCENARIO - CHECKING OUT ON WHAT PAGE WE ARE
Then the "main" page is displayed
The name of a page object ﬁle. For this case there has to be a ﬁle "main.js" in pages directory.

SCENARIO - DEBUGGING
Give/When/Then I wait for "20" seconds
Give/When/Then I pause

WHAT ABOUT URL WITH PARAMETERS ?
/suppliers/some-supplier-id/clients/some-client-id
/suppliers/:supplierId/clients/:clientId
...
this.url = '/suppliers/:supplierId/clients/:clientId';
...

PAGE CONTEXT
Then the "main" page is displayed
EVERY BUILT-IN STEP (EXCEPT NAVIGATION
ONES) WILL HAVE AN ACCESS TO MAIN PAGE
OBJECT.

INTERACTING WITH
ELEMENTS
INTERACTING WITH ELEMENTS

Then the "showActive" element is visible
The name of a selector from current page object ﬁle.
ELEMENT VISIBILITY

SELECTORS
▸ deﬁnes access to element
▸ support for protractor locators 
http://www.protractortest.org/#/api?
view=ProtractorBy
▸ support for angular only attributes

SELECTORS
▸ id attribute, custom attribute, custom class, unique class - GOOD
▸ for angular app: ng-model, ng-repeat - GOOD
▸ html tag - BAD
▸ angular validation classes (ng-valid, ng-pristine etc) - VERY BAD

SELECTORS
this.mySelectorName = $('.css-selector');
this.mySelectorName = $('html-tag');
this.mySelectorName = $('html-tag.css-selector');
this.mySelectorName = element(by.repeater('project in projects'));

Then the "showActive" element is visible
ELEMENT VISIBILITY - PROBLEM
THE ELEMENT MUST BE VISIBLE RIGHT AWAY.
IT DOES NOT WAIT FOR ELEMENT TO BE
VISIBLE.

When/Given/Then I wait for "visibilityOf" of the "showActive" element
ELEMENT VISIBILITY - SOLUTION
uses protractors expected conditions internally, for example
visibilityOf
invisibilityOf

ELEMENT VISIBILITY - WHAT ELSE?
When/Given/Then the "showCompleted" element is present
When/Given/Then the "showCompleted" element is not visible
When/Given/Then the "showCompleted" element is not present

When I fill the "myForm" form with:
| fieldSelector | value to be used |
Form selector
Input selector
this.myForm = $('.add-todo');
this.fieldSelector = $('.add-todo input[name="add-todo"]');
FILLING UP FORM

Then the "myForm" form is filled with:
| fieldSelector | value to be used |
Form selector
Input selector
CHECKING OUT FORM VALUE

WHAT ABOUT DIFFERENT FIELD TYPES?
▸ supports all of the basic html field types (radio, checkbox, textarea, select, file, text)
▸ allows to add custom made handlers for field types

HOW ABOUT SUBMITTING ?
When I click the "addTodoButton" element
The name of a selector from current page object ﬁle.

CUSTOM STEPS
OUR STEP
Given I am logged in as an "submitter"
User role

CUSTOM STEPS
CUCUMBER 2.0 - STEP DEFINITION
const { defineSupportCode } = require('kakunin');
defineSupportCode(({ Given }) => {
Given(/^I am logged in as an "([^"]*)"$/, function (user) {
return Promise.resolve();
});
});

CUSTOM STEPS
ACCESS PAGE FROM CODE
const myPage = browser.page.myPage;

CUSTOM STEPS
BASE PAGE METHODS
visit()
click(elementSelectorName)
isDisabled(elementSelectorName)
isPresent(elementSelectorName)
isVisible(elementSelectorName)
isOn()

CUSTOM STEPS
BASE PAGE METHODS
getNumberOfElements(elementSelectorName)
scrollIntoElement(elementSelectorName, optionalIndexForArrayElement)

CUSTOM STEPS
BASE PAGE METHODS
fillForm(formData)
[
[
'fieldSelector',
'fieldValue'
]
]
checkForm(formData)
[
[
'fieldSelector',
'fieldValue'
]
]

CUSTOM STEPS
BASE PAGE METHODS
fillField(fieldSelector, fiedlValue)
checkField(fieldSelector, fiedlValue)
EVERY METHOD RETURNS A PROMISE

CUSTOM STEPS
USER PROVIDER
this.userProvider.getUser(userName);
accounts: {
userName: {
accounts: [
{
email: 'some@email.com',
password: 'somePassword'
}
]
} 
}

CUSTOM STEPS
USER PROVIDER
this.currentUser = {
account: {
email: 'some@email.com',
password: 'somePassword'
},
type: "userName"
}

HOOKS
HOOK DEFINITION
const { defineSupportCode } = require('kakunin');
defineSupportCode(({ After }) => {
After(() => { 
return Promise.resolve(); 
});
});
defineSupportCode(({ After }) => {
After('@someTag', () => { 
return Promise.resolve(); 
});
});

HOOKS
HOOK DEFINITION - EXECUTE REMOTE JS CODE
protractor.browser.executeScript('your js code to be run inside a browser');

HOOKS
HOOK DEFINITION - CLEAR COOKIES
protractor.browser.manage().deletAllCookies();

HOOKS
RESTORE APP STATE
FIXTURES_RELOAD_HOST=http://192.168.99.100/app_e2e.php/_e2e/load_fixtures
@reloadFixtures

CUSTOM HANDLERS
INTERFACE
isSatisfiedBy(element, elementName) {
}
handleFill(page, elementName, desiredValue) {
}
handleCheck(page, elementName, desiredValue) {
}
getPriority() {
return 1000;
}

CUSTOM HANDLERS
HANDLER SERVICE - ADDING NEW HANDLER
const { handlers } = require('kakunin');
class MyHandler {}
handler.addHandler(new MyHandler());

CUSTOM HANDLERS
CUSTOM SELECT HTML
<div class="form__field serviceMarket form__field--danger">
<label class="form__label form__label--required">Service Market</label>
<div class="Select Select--single is-clearable is-focused is-open">
<div class="Select-control">
</div>
<div class="Select-menu-outer">
<div role="listbox" class="Select-menu">
<div style="overflow: visible; width: 0px;">
<div aria-label="grid" class="ReactVirtualized__Grid ReactVirtualized__List
VirtualSelectGrid">
<div class="ReactVirtualized__Grid__innerScrollContainer">
<div class="select__option" data-e2e="/app_e2e.php/service_markets/
80a06089-2f94-4992-8f7c-1d30fc7b8a3e">SME Services</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

CUSTOM HANDLERS
CUSTOM SELECT HTML - SELECTED OPTION
<div class="form__field serviceMarket">
<label class="form__label form__label--required">Service Market</label>
<div class="Select Select--single is-clearable has-value">
<input type="hidden" name="serviceMarket" value="/app_e2e.php/service_markets/
80a06089-2f94-4992-8f7c-1d30fc7b8a3e">
</div>
</div>

TRANSFORMERS
A WAY TO GENERATE OR TRANSFORM VALUES FROM 
HUMAN READABLE VERSION TO APP USABLE.

TRANSFORMERS
g:generatorName:param1:param2:param...N
AVAILABLE TRANSFORMERS
d:dictionaryName:dictionaryKeyName
v:variableName

TRANSFORMERS
GENERATORS
const { generators } = require('kakunin');
class ProjectUrlGenerator{
isSatisfiedBy(name) {
return this.name === 'projectUrl';
}
generate(params) {
return Promise.resolve('http://some-url.pl');
}
}
generators.addGenerator(new ProjectUrlGenerator());

TRANSFORMERS
DICTIONARIES
const { dictionaries } = require('kakunin');
class ProjectTypesDictionary{
constructor() {
this.values = {
'myServiceMarket':'/service_markets/80a06089-2f94-4992-8f7c-1d30fc7b8a3e'
};
this.name = 'projectTypes';
}
isSatisfiedBy(name) {
return this.name === name;
}
getMappedValue(key) {
return this.values[key];
}
}
dictionaries.addDictionary(new ProjectTypesDictionary());

EMAILS
CONFIGURATION
email: {
type: 'mailtrap',
config: {
apiKey: '81279e9fb9351ebdf7aefef89e6a5701',
inboxId: '203459',
url: 'https://mailtrap.io/api/v1'
}
},
clearEmailInboxBeforeTests: true
mailer_host: smtp.mailtrap.io
mailer_user: efb44191c15785
mailer_password: 821a734f231165
mailer_port: 2525
mailer_default_from: example@example.com

EMAILS
CHECKING EMAILS - FILTERS
▸ currentUser - checks if email was sent to current logged user, requires integration with Kakunin User
Provider
▸ subject - allows to check email subject
▸ html_body - allows to check content of email
▸ ﬁle - allows to check attachments, it's type, name and size
ALL FILTERS SUPPORT MATCHERS

REGULAR EXPRESSIONS
REGULAR EXPRESSIONS

REGULAR EXPRESSIONS
CUSTOM REGEX
module.exports = {
matchingStoreId: '(STORE-[0-9]{6}-[0-9]{4})',
emailSubject: '(Join Our Store - STORE-[0-9]{6}-[0-9]{4}‫اﻟﯿﻨﺎ‬ ‫اﻧﻀﻢ‬ -)'
};
USAGE
r:matchingStoreId

CONTENT VALIDATION
CONTENT VALIDATION

CONTENT VALIDATION
VALIDATE ELEMENT CONTENT
Then there are "equal 1" "todos" elements
uses chai.js expectations
equal X
above X
between X Y
at least X

CONTENT VALIDATION
REQUIRES LIST SELECTOR

CONTENT VALIDATION
this.todos = $$('ul li');
this.todos = element.all(by.css('ul li'));

CONTENT VALIDATION
Then there is element "myElement" with value "r:notEmpty"
Then there is element "myElement" with value "t:some text"
Then there is element "myElement" with value "f:isClickable"

ALLOW TO VALIDATE FILED VALUE, BUT ALSO
BEHAVIOUR (FOR EXAMPLE IF ELEMENT IS 
CLICKABLE)
CONTENT VALIDATION

CUSTOM MATCHER
const { matchers } = require('kakunin');
class MyMatcher {
isSatisfiedBy(prefix, name) {
return prefix === 'm:' && name === 'pending';
}
match(protractorElement, matcherName) {
return protractorElement.getText().then((value) => value === 'pending');
}
}
matchers.addMatcher(new MyMatcher());
CONTENT VALIDATION

FILE DOWNLOAD
CONTENT VALIDATION

CONTENT VALIDATION
FILE DOWNLOAD
Then the file "fileName.extension" should be downloaded
downloaded ﬁle name, the same as the one normally have in browser

CONTENT VALIDATION
FILE DOWNLOAD - CLEAR DOWNLOAD DIRECTORY
@downloadClearAfter
@downloadClearBefore

Kakunin E2E framework showcase

Recommended

More Related Content

What's hot (20)

Similar to Kakunin E2E framework showcase (20)

More from The Software House (20)

Recently uploaded (20)

Kakunin E2E framework showcase