Testing AJAX Applications with Selenium Patrick Lightbody Gomez, Inc.

Transcription

1 Testing AJAX Applications with Selenium Patrick Lightbody Gomez, Inc.

2 Agenda Four demos: basic Selenium, Google Maps, Dojo, and Scriptaculous Learn to speak Selenese Testing AJAX Selenium Remote Control Tips & Tricks

3 Quick Poll Audience: Testers? Developers? Managers? Mix? Continuous integration: Yes? No? Compile only? Unit tests? Functional tests? Toolkit: Home-brewed? Using a framework? Using multiple frameworks?

4 A Growing Problem Browser fragmentation Application fragmentation Functionality impact Performance impact

5 About Selenium A cross-platform browser automation tool. Written primarily in JavaScript. Supports tests written in JavaScript, Selenese, or just about any programming language. Has several sub-projects (Core, IDE, RC, Rails, etc) Is part of OpenQA, the home of many other open source QA tools.

6 Crash Course Best way to get started with Selenium is to use it... DEMO

7

8

9 Getting Fluent in Selenese

10 Selenese Language A simple language that is structured like Fit. Has three core components Actions - the things that actually control the browser Accessors - how you work with data in the browser Element Locators - how you identify data in the browser Has limited support for variables, but no control structure.

11 Actions Are where your command actually does something. Most actions typically take one or two arguments: an element locator and possibly a value. All actions have an additional AndWait sisteraction.

12 Action Examples Action Target Value check open some_checkbox google.com type username fred_flinstone

13 Accessors Are always data related. Typically take only one argument: an element locator. Have seven permutations: store (locator, variable) verify and verifynot (locator, pattern) assert and assertnot (locator, pattern) waitfor and waitfornot (locator, pattern)

14 Accessor Examples Action Target Value verifyvalue username fred_flintston e waitforelementpresent some_div assertvisible error_box

15 Element Locators Go hand-in-hand with actions and accessors Have a syntax of: [locator_type =] locator_value Are the trickiest part of Selenium, but most powerful

16 Element Locator Types Type id name identifier dom xpath link css Returns an element... with the specified ID with the specified name with the specified ID or name that is returned by the eval d JS that is represented by the XPath of type a and surrounds given text that is represented by given selector

17 Default Locator Strategy dom, if the locator starts with document. Example: click document.forms[0].elements[4] xpath, if the locator starts with // Example: verifyelementpresent //img[contains close.gif )] identifier, for all others Example: click btng

18 Variable Support Allows for basic logic in your scripts. Use the storexxx permutation of the accessors: storevalue namefield firstname storeeval Mr title asserttextpresent ${title} ${firstname} Does not pretend to be full-featured... if you need complex tests, you probably need a more complex language.

19 Testing AJAX

20 No longer page-centric The A in AJAX makes testing much more interesting. We ve seen the AndWait variations of commands but what about when there never is another page load (Google Maps, Yahoo Mail, and at least partly almost every new web app)? DEMO?

21 AJAX Toolkits You can test any application written on any AJAX toolkit with Selenium, but... Some toolkits make it easier than others. You can compensate for the more difficult frameworks by writing your own user extensions.

22 Dojo Selenium isn t aware of your widget IDs Give your widgets HTML IDs If the widget isn t under your control, there are other options... DEMO

23 Scriptaculous Autocompleter use waitforvisible to pause until the options appear keypress is required to simulate typing in characters (different from type DEMO

24 Ext Unlike Dojo, the HTML elements all have IDs... Unfortunately, they are not predictable (extgen245, ext-gen500, etc) Result: Don t use Ext s IDs - use techniques like you would with Dojo

25 Selenium Remote Control

26 Advanced Selenium Selenium RC solves three problems: Cross-site scripting restrictions are painful in this composite world (ie: Hotmail -> MS Passport). Not easy to automate the process of running your tests on many browsers (continuous integration). Selenese is a very basic language that offers no reuse and no control structure. Selenium IDE only works on Firefox and Selenium Core requires you to modify your AUT.

27

28 Getting Started with Selenium RC Treat like a daemon process (httpd, sendmail, etc). java -jar selenium-server.jar The client drivers simply issue HTTP GET commands to the server

29 Sample HTTP Traffic cmd=getnewbrowsersession&1=*firefox&2= cmd=open&1=/ cmd=type&1=q&2=goog cmd=clickandwait&1=btng cmd=clickandwait&1=link=google Finance

30 Tips & Tricks

31 Development Tips Give your elements IDs! (Design for testability) Make application state easy to reset. Invest in fixtures. Use good tools: Firebug, Selenium IDE, XPath Checker. Try writing your own tests and feel the pain. Be prepared to refactor tests just as often as you do with code.

32 Selenium IDE Tips When in doubt, try in Selenium IDE Use all the features of Selenium IDE: autocomplete helps you learn the commands Logs tab help you debug issues and get help in the forums Reference tab documents every single command Find button helps you determine if your locator is correct

33 Avoid Tight Coupling //table[3]/tbody/tr[1]/td[4] session_ _search_results = images/logo.png ] //a[@href = ]

34 Avoid Tight Coupling //table[3]/tbody/tr[1]/td[4] session_ _search_results = images/logo.png ] BAD! //a[@href = ]

35 Embrace Loose Coupling //td[text() = ISBN XYZ ] //div[contains(@id, _search_results )] //img[contains(@src, logo.png )] link=login

36 Embrace Loose Coupling //td[text() = ISBN XYZ ] //div[contains(@id, _search_results )] //img[contains(@src, logo.png )] link=login GOOD!

37 Commercial Options Reality QA: RealityCheck - run your Selenium scripts on any browser/os RealityView - check out your site design on any browser/os Takes screenshots and a movie of each step along the way. Supports advanced test refactoring and analysis.

38 Questions? You can also me at if you have additional questions.