This document outlines an agenda for a workshop on automating testing of Polymer web components. The agenda includes: 1. An introduction to the Polymer framework and web components, which allows defining custom elements like HTML tags. 2. A discussion of unit testing web components with the Web Component Tester tool, which is configured for testing with Mocha and Chai. 3. A session on functional testing web components with Selenium. 4. Time for questions and answers at the end.

1. V o d Q A , B a n g a l o r e 2 0 1 5
AUTOMATING THE POLYMER
WAY!!

2. YOU’LL BE ABLE TO ANSWER……
•What is Polymer framework ?
•What are Web Components ?
•What is Web component tester ?
•What is Shadow DOM ?
•How to automate shadow DOM ?
2

3. AGENDA
•Polymer Framework & Web Components
(Dharmender - 10 mins)
•Unit Testing with Web Component Tester (WCT)
(Shilpa - 10 mins)
•Functional Testing with Selenium
(Dharmender -10 mins)
•Questions/Answers
(10 mins)
3

4. POLYMER FRAMEWORK
4

5. POLYMER WEB DEVELOPMENT FRAMEWORK
•Polymer library is a set of Polyfills that help you create Web Components.
5
•Web Development framework for UI centric web Apps
•Provides a mechanism to simplify the way we define and use complex components
•Customization of core-elements and hosting them
•Prebuilt package of core-elements

6. POLYMER ELEMENTS & SAMPLE APP
•Core Elements: https://www.polymer-project.org/0.5/components/paper-elements/demo.html#core-
toolbar
6
•Sample Application: https://www.polymer-project.org/0.5/components/paper-calculator/demo.html

7. WEB COMPONENTS
7

8. WEB COMPONENTS
•Collection of specifications to develop reusable element
8
•Helps to define custom tags just like HTML tags
•Provides better management of components through:
• Data binding
• Reusability

9. DATA BINDING
•Provides means to bind the complexity pertaining to an component in itself
9
•Eliminates the styling effect on rest of the site
•Better manages the scope of the web component within the overall site

10. COMPONENT SPECIFICATION
•Specification Includes:
10
• Custom Tag name
• HTML Templates
• HTML Import
• Shadow DOM

11. UNIT TESTING & WCT
11

12. WEB COMPONENT TESTER
•Unit Testing tool for Polymer
12
•Configured out of the box with:
• Mocha as a test framework
• Chai as assertion library
•Can run on multiple browsers
•Easy to test Web Components exhaustively

13. FUNCTIONAL TESTING
13

14. SHADOW DOM ?
•Not all browsers support Shadow DOM concept
14
•Elements (WC) are not exposed to the outer DOM structure
•querySelector(), querySelectorAll() fails to get the hook of the element

15. SHOWCASE
15

16. For questions or suggestions:
Write to us @
dharmens@thoughtworks.com
shilpab@thoughtworks.com
THANK YOU