Learn how Sencha Test helped profiq, a software engineering service provider, to automate and track verification of modern Ext JS applications and their various components on multiple web browsers and devices. You will also learn tips and tricks that can speed up the development cycle of your JavaScript applications, including how you can leverage Sencha Test and its APIs.

1. Case Study:
How Sencha Test Helps Automate
Functional Testing of Ext JS
Modern Apps
Rastislav Kanócz, CTO, profiq
Jakub Janoška, software engineer, profiq

2. Testing of modern Ext JS applications
• Run modern applications anywhere, test everywhere
• Many test frameworks available, which one to use?
2

3. Presentation objectives
• Case Study: How SenchaTest helped us to automate functional testing of Ext
JS Modern apps
• Demo
• Tips
3

4. The case
• Sencha’s Ext JS modern framework (demo: Ext JS Calendar)
• Tested on multiple devices in parallel
• Tested on multiple web browsers in parallel
• Tested and Test results tracked and stored daily
4

5. Sencha Test for Ext JS modern apps
• Fit for the purpose
- Unit and end-to-end functional testing tool
for Ext JS applications
- Rich set of powerful APIs
- Comprehensive test reporting
5

6. Sample code for selection of row in dataview:
describe('Email list', function(){
describe('email selection', function () {
it('should select 3rd row when clicked on 3rd email', function () {
if(Email.isPhone) {
ST.dataView('inbox')
.visible()
.itemAt(2)
.click()
.selected()
.dataView()
.and(function(view){
var selValue = view.getSelection().get('from');
expect(selValue).toBe('Tammi Merrill');
});
}
});
});
});
Demo I. – test on any device
• Execution of tests on connected
devices
- SSID: SenchaCon-profiq
- http://demo.profiq.com:8800
• Run tests via GUI
• Showing a code sample
• Going through test results

7. Integrated test environment
7

8. Demo II. – Integrated test environment
• Execution of tests in the cloud
• Continues integration
• Running tests via CLI (STC)
• Storing test results
8

9. Sencha Test code:
ST.grid('searchusers grid')
.rendered()
.rowAt(order)
.click()
.and (function(row){
selectRow = row;
})
.grid()
.selectedAt(order)
Selenium webdriver + python:
def test_selectRow(self):
self.browser.find_element_by_xpath("//span[contains(text(), 'User Result')]").click()
WebDriverWait(self.browser,
5).until(EC.visibility_of_element_located((By.XPATH,"//div[contains(text(), 'Alma
Allen')]")))
record = self.browser.find_element_by_xpath('//div[@class="x-panel user-grid x-
tabpanel-child x-panel-default x-grid"]//table[' + str(order) +']]')
record.click()
try:
record.get_attribute("class").index("selected")
except ValueError:
self.fail ( "not selected" )
…
Tip 1 - Effectiveness of testing
using Sencha Test
• Built-in support for modern Ext JS
components
- See code example
- Rich and extensible APIs
• Ext JS aware Event Recorder
• No config. outside of tool required
• Simple flow to configure test
execution
• Connecting all devices and
emulators via Parking lot

10. Tip 2 – Test development
• Built-in support for test debugging available
- Single spec level
- Debug console hook
• We use it to develop tests supporting
multiple platforms and troubleshoot
issues
• In case APIs for latest components are
missing we suggest implementing using
ST.element(), ST.component()
10

11. Tip 3 – Test execution
• Real HW vs. parallel
Cloud base execution
- 5x longer test execution
time for mobile emulators
in Browser Farm vs. real
mobile devices
- Make use of
Concurrency config for
parallel test execution in
Browser Farm
11
• Tests do not execute
on mobile devices
when those enter to
sleep mode or get
locked
- Turn off sleep mode and
PIN lock
• Screen comparison
tolerance too
sensitive
- Tests failing even on 1px
difference
• Still very useful for us to
uncover CSS style or
Charts (Ext JS 5+
canvas based) type of
issues
… and many more …

12. Tip 4 – Cost / Value
• Scope
• Value proposition
12
TESTS SPECIFIED TESTS AUTOMATED
TEST AUTOMATION
RATIO
Sencha Ext JS modern 338* 168 50%
Sencha Ext JS classic 623* 60 10%
DEVELOPMENT
EFFORT
MAINTENANCE
EFFORT / MONTH
MANUAL WORK
SAVED / MONTH
RETURN ON
INVESTMENT
Sencha Ext JS modern 150 Days 2 days 30 Days within 5 months
Sencha Ext JS classic 20 days 1 days 6 days within 4 months
* Complete set of tests being executed on multiple platforms (all supported web browsers, multiple types of mobile devices)

13. KEY TAKE AWAYS
• Sencha Test is the right fit for Functional testing of Ext JS applications
• Easy to setup and get started for developers and test teams and even in CI
environment
• Good Return on Investment, if automation
used on the long run
13

14. 14
Thank you for your attention!
rastislav.kanocz@profiq.com
jakub.janoska@profiq.com

15. Please Take the Survey in the Mobile App
• Navigate to this session in the mobile app
• Click on “Evaluate Session”
• Respondents will be entered into a drawing to win one of five $50 Amazon gift cards

17. Tip 3 – Screen comparison – UI testing
• Used for CSS type issues and charts verification
• Built-in support in Sencha Test brings
- More efficient test execution
- Easier issues analysis
- Decreased test maintenance
17
Expected Actual Difference