Improving Web Application Quality - SenchaCon Roadshow 2017

Learn how you can improve the quality of your Ext JS applications using Sencha Test. We’ll demonstrate how you can take advantage of the new Selenium WebDriver integration to test both single page and multi-page applications. We will also demonstrate how you can automate your testing efforts by utilizing our integrations with CI (continuous integration) environments and cloud-based browser farms.

Speaker: Olga Petrova

Transcript

2. Improving Web Application Quality Olga Petrova
3. Agenda • Sencha Test for - Developer - QA Engineer - DevOps Engineer • Sencha Test features • Demo
4. Roles • Developer • QA Engineer • DevOps Engineer
5. Developer Tom
6. Tom’s dreams • Less bugs • Easy refactoring • Better code understanding • Better code design
7. Tom’s problems • Application complexity • Asynchronous nature • Hard to mock • Short release time
8. Sencha Test for Tom
9. Test types • Unit tests • UI Unit tests • Functional tests
10. Unit Testing • Models • Stores • Controllers • Setup and Teardown • Test before PR
11. UI Unit Testing • UI components • UI component sets
12. Functional Testing • Solid piece of application functionality that includes several UI components and classes
13. Runtime environment In-Browser • Single-page application • Run application and tests in browser • Run in several browsers simultaneously Web Driver • Multi-page application • Run tests outside of the browser using WebDriver • Test any web applications
14. Sencha Test API • Component/Element future wrapper - ST.grid() - ST.component() - ST.element() • Calls that wait for the component to be in a certain state - .rendered() - .disabled() • Actions - .click() - .type(’mytext')
15. Sencha Test API • Assertions - .expect('value').toBe('test-username') - .expect('innerHTML').toContain('my-container') - .expect('visibility').toBe('visible') - .get('height') .and(function () { expect(this.future.data.height).toBe(200); }))
16. Sencha Test API • New features for WebDriver tests: - ST.execute - ST.navigate
17. Sencha Test Inspector • find component locators • paste locators directly into the test code or create page object
18. Sencha Test Page Object • clean separation between test code and component locators • single repository for the components on the page
19. Developer’s Demo
20. QA Engineer Alice
21. Alice’s dreams • Easy test writing automation • Good code coverage • Defense against regressions
22. Alice’s problems • Uncontrollable environment • Application complexity • Asynchronous nature • Short release time
23. Sencha Test for Alice
24. Application Testing • Black Box • Mimic user behavior
25. Runtime environment Web Driver • Multi-page application • Run tests outside of the browser using WebDriver • Test any web applications
26. Event Recorder • Faster test creation • Improved element locator strategies lets to avoiding the use of dynamic IDs • Choosing component locator strategy • Editing values in recorded script
27. Visual Screen Comparison • Visual comparison of application screenshots generated in different browsers: - ST.screenshot • Fixed screen size settings for visual testing
28. Code Coverage • Build-in integration with Istanbul
29. QA Engineer’s Demo
30. DevOps Engineer Steve
31. Steve’s dreams • More confidence in the code, less fear about releases • Easy releases automation • Be able to release at any time
32. Steve’s problems • Integration of automated tests into CI environment • Short release time
33. Sencha Test for Steve
34. Selenium server and Browser farms • Integration with browser farms • Integration with Selenium WebDriver • Embedded Selenium Server and Browser (Chrome)
35. Archive Server • Review and Analyze Test Results from Multiple Runs • Remote and Local Archive Servers
36. ALM Integration • Publish bugs directly to the JIRA project • Ignore false negatives • Review the latest bug status
37. Continuous Integration CI • Integration with Jenkins and Team City • Command Line Interface (CLI) • Store results from multiple Continuous Integration (CI) runs
38. Continuous Integration • True automation - Let the machine do the heavy lifting • Run Tests at every stage • Integrate with build systems • Run tests on multiple environments - QA - Staging - Production • Leverage browser farms
39. DevOpts’s Demo
40. What’s in Sencha Test 2.1? • Inspector • Page Object • External Libraries • Local Archive Server • Generation of screenshots by running tests from Sencha Studio • ALM Integration
41. Sencha Test 2.1 http://sencha.com/products/test/