1. Vaadin TestBench CSCI 3130 WINTER 2015

2. What’s TestBench  A toolkit for testing user interfaces  Based on Selenium  Written in Java; interacts with HTML/CSS/JavaScript

3. Installing TestBench  Already installed with Vaadin!  Create a text file called “.vaadin.testbench.developer.license ” in your home directory  Put the license key you are given into that file.

4. Installing TestBench  Already installed with Vaadin!  Create a text file called “.vaadin.testbench.developer.license ” in your home directory  Put the license key you are given into that file.

5. Running JUnit Tests in Eclipse  Just Right-Click the test file you want to run, then “Run As…” then “Unit Test”

6. Running JUnit Tests in Eclipse  Just Right-Click the test file you want to run, then “Run As…” then “Unit Test”

7. Code Coverage  A measure of how much of your code is run when you execute a test  Eclipse can easily generate a report  But you’ll want to run all your tests at once

8. Code Coverage  A measure of how much of your code is run when you execute a test  Eclipse can easily generate a report  But you’ll want to run all your tests at once

9. Code Coverage  A measure of how much of your code is run when you execute a test  Eclipse can easily generate a report  But you’ll want to run all your tests at once

10. Code Coverage  A measure of how much of your code is run when you execute a test  Eclipse can easily generate a report  But you’ll want to run all your tests at once

11. Code Coverage  A measure of how much of your code is run when you execute a test  Eclipse can easily generate a report  But you’ll want to run all your tests at once

12. Code Coverage  A measure of how much of your code is run when you execute a test  Eclipse can easily generate a report  But you’ll want to run all your tests at once

13. Creating your first TestBench Test  It’s already done!  A test is generated when you make a new Vaadin Project

14. Creating your first TestBench Test  It’s already done!  A test is generated when you make a new Vaadin Project

15. How does testing work? 1. Creates a browser 2. Opens the application’s page 3. Looks for HTML elements 4. Makes sure the elements are right

16. Vaading Testing Architecture UI Display UI Control Business Logic ClientServer TestBench Standard JUnit

17. Components and Elements  A widget by any other name…  Components are what you use for laying out your UI (on the server)  Each component has a corresponding element for testing (on the client)

18. Components and Elements

19. Element Selectors  Let you find an element on a page  Can be chained together  Based on jQuery  Start with $  Typically end with a first(), all() or get(index)

20. Element Selectors  Let you find an element on a page  Can be chained together  Based on jQuery  Start with $  Typically end with a first(), all() or get(index)

21. Using IDs and CSS classes  Instead of relying on layout to find elements, give important elements an ID.  Group important elements together with a CSS class.

22. Using IDs and CSS classes  Instead of relying on layout to find elements, give important elements an ID.  Group important elements together with a CSS class.

23. PageObject pattern  Move all of the layout details to a separate class  Test cases will call methods to retrieve certain elements

24. Sample Project  Accessed at  https://github.com/dyule/card _trainer https://github.com/dyule/card _trainer  Running at http://mega.cs.dal.ca:8080/ca rd_trainer http://mega.cs.dal.ca:8080/ca rd_trainer