senchacon 2016: how sencha test helps automate functional testing of ext js modern apps - rastislav...
TRANSCRIPT
Case Study: How Sencha Test Helps Automate
Functional Testing of Ext JS Modern Apps
Rastislav Kanócz, CTO, profiqJakub Janoška, software engineer, profiq
Testing of modern Ext JS applications
• Run modern applications anywhere, test everywhere
• Many test frameworks available, which one to use?
2
Presentation objectives
• Case Study: How SenchaTest helped us to automate functional testing of Ext JS Modern apps
• Demo
• Tips
3
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
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
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
Integrated test environment
7
Demo II. – Integrated test environment
• Execution of tests in the cloud
• Continues integration
• Running tests via CLI (STC)
• Storing test results
8
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
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
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 …
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 monthsSencha 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)
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
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
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