Automated Frontend Testing
•Download as ZIP, PDF•
48 likes•11,619 views
A talk about my frontend testing framework: http://github.com/NeilCrosby/frontend-test-suite/tree/master
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Automated Frontend Testing
Similar to Automated Frontend Testing (20)
More from Neil Crosby
More from Neil Crosby (11)
Recently uploaded
Recently uploaded (20)
Automated Frontend Testing
- 1. Automated Frontend Testing NeilCrosby (Image from “The Korean Robot” - http://www.flickr.com/photos/zebrapares/1344995547/)
- 2. Who am I? @NeilCrosby European Frontend Architect for Search at Yahoo! I help look after frontend code quality.
- 3. What’s this talk about? • Automatically and regularly testing frontend code against known standards. • Why? What? How? Where?
- 5. Why test? • We all want to write code that works. • Testing improves reliability. • Repeatedly testing minimises regressions. • Automatic testing can pick up “dumb-ass” mistakes.
- 6. That sounds lovely • Normally that doesn’t happen though. • Normally what happens is...
- 7. 1. We build things. They adhere to our standards.
- 8. 2. We go to the pub.
- 9. 3. Later, we add more code.
- 10. 4. Our code stops adhering to our standards.
- 11. 5. Things become less easy to maintain.
- 12. 6. Bugs creep in.
- 13. 7. We go to the pub in despair.
- 14. 8. Repeat.
- 15. So... • Test automatically and often. • By adhering to a known standard, and constantly testing against it, it becomes easier to spot problems with the code that we're writing.
- 16. And that saves money Fewer bugs == Less time fixing bugs == More time developing new features.
- 18. What’s normally tested Backend Frontend In-Browser (API, functions) (HTML, CSS, JS) (Functional) Validators, JsLint, *Unit Selenium YSlow etc. Sometimes Automatic via CI Manual automatic via CI Adhoc, when Well defined Fairly well defined remembered
- 19. Why not use Selenium? • Selenium tests code after it’s been interpreted by the browser. • Good for functional testing, not so good for testing discrete units of code.
- 20. Discrete Units? • I’m looking at testing the quality of our HTML, CSS and JavaScript. • It should all adhere to a known standard.
- 21. So we’re testing what? • The code that leaves the server. • Before it is interpreted by the browser.
- 22. What should we test? • Currently I’m testing against: • W3C HTML Validator validator.w3.org • W3C CSS Validator jigsaw.w3.org/css-validator • JsLint jslint.com
- 23. Validation is a dirty word • People don’t like the word. • They always ask “what if?”.
- 24. Custom DTD • Custom DTDs can help you create your own internal standard.
- 25. Custom DTDs are Easy <!ENTITY % HTML.strict SYSTEM quot;strict.dtdquot;> %HTML.strict; <!ATTLIST OL %attrs; -- %coreattrs, %i18n, %events -- start NUMBER #IMPLIED -- starting sequence number -- >
- 27. How do I do this testing? • I’ve been writing a test suite! • http://github.com/NeilCrosby/frontend- test-suite (CC Attribution-Share Alike)
- 28. Currently in Phase 1 • Tests can easily be run against known units of HTML, CSS and JavaScript. • I’m using phpunit as the framework.
- 29. HTML Testing • By default tests against HTML 4.01 Strict. • Test against custom DTDs. • Module and full page testing. • Test files, URLs or strings.
- 30. CSS Testing • By default tests against CSS 2.1. • Known exceptions to the standards can be allowed to pass validation. • Test files, URLs or strings.
- 31. JavaScript Testing • Test against any configuration JsLint allows. • Test files, URLs or strings.
- 32. Add to your CI • Run these tests in your hourly builds. • Run them as a pre-commit hook.
- 33. Be a good citizen • You’ll be running these tests frequently. • Set up your own local versions of the HTML Validator, CSS Validator and JsLint. • Instructions available on the web.
- 34. Running these tests • If you need to test a simple site, it’s easy - pass a config object to TheCodeTrainEasyFrontendTestSuite. • Otherwise, write custom TestCase extensions (still not hard).
- 35. Including the Suite require_once( 'TheCodeTrainEasyFrontendTestSuite.php' );
- 36. Creating the Tests class SomeTestSuite extends TheCodeTrainEasyFrontendTestSuite { public static function suite() { return parent::suite(array( ‘html’ => array( ... ), ‘css’ => array( ... ), ‘js’ => array( ... ), )); } }
- 37. Creating the Tests class SomeTestSuite extends TheCodeTrainEasyFrontendTestSuite { public static function suite() { return parent::suite(array( ‘html’ => array( ... ), ‘css’ => array( ... ), ‘js’ => array( ... ), )); } }
- 38. Creating the Tests class SomeTestSuite extends TheCodeTrainEasyFrontendTestSuite { public static function suite() { return parent::suite(array( ‘html’ => array( ... ), ‘css’ => array( ... ), ‘js’ => array( ... ), )); } }
- 39. Creating the Tests class SomeTestSuite extends TheCodeTrainEasyFrontendTestSuite { public static function suite() { return parent::suite(array( ‘html’ => array( ... ), ‘css’ => array( ... ), ‘js’ => array( ... ), )); } }
- 40. The ‘html/css/js’ arrays ‘html’ => array( ‘validator’ => ‘http://yourvalidator’, ‘tests’ => array( ‘http://someurl.to/test’, ‘file://some/file/to/test’, ‘<p>Some string to test</p>’, ), ‘options’ => array( ... ) )
- 41. The ‘html/css/js’ arrays ‘html’ => array( ‘validator’ => ‘http://yourvalidator’, ‘tests’ => array( ‘http://someurl.to/test’, ‘file://some/file/to/test’, ‘<p>Some string to test</p>’, ), ‘options’ => array( ... ) )
- 42. The ‘html/css/js’ arrays ‘html’ => array( ‘validator’ => ‘http://yourvalidator’, ‘tests’ => array( ‘http://someurl.to/test’, ‘file://some/file/to/test’, ‘<p>Some string to test</p>’, ), ‘options’ => array( ... ) )
- 43. The ‘html/css/js’ arrays ‘html’ => array( ‘validator’ => ‘http://yourvalidator’, ‘tests’ => array( ‘http://someurl.to/test’, ‘file://some/file/to/test’, ‘<p>Some string to test</p>’, ), ‘options’ => array( ... ) )
- 44. The Options Array ‘options’ => array( ‘doctype_override’ => ‘<!DOCTYPE HTML SYSTEM quot;http://site/doctype.dtdquot;>’, ‘document_section’ => TheCodeTrainHtmlValidator::HTML_CHUNK, ‘document_section_position’ => TheCodeTrainHtmlValidator::POSITION_HEAD )
- 45. The Options Array ‘options’ => array( ‘doctype_override’ => ‘<!DOCTYPE HTML SYSTEM quot;http://site/doctype.dtdquot;>’, ‘document_section’ => TheCodeTrainHtmlValidator::HTML_CHUNK, ‘document_section_position’ => TheCodeTrainHtmlValidator::POSITION_HEAD )
- 46. The Options Array ‘options’ => array( ‘doctype_override’ => ‘<!DOCTYPE HTML SYSTEM quot;http://site/doctype.dtdquot;>’, ‘document_section’ => TheCodeTrainHtmlValidator::HTML_CHUNK, ‘document_section_position’ => TheCodeTrainHtmlValidator::POSITION_HEAD )
- 47. The Options Array ‘options’ => array( ‘doctype_override’ => ‘<!DOCTYPE HTML SYSTEM quot;http://site/doctype.dtdquot;>’, ‘document_section’ => TheCodeTrainHtmlValidator::HTML_CHUNK, ‘document_section_position’ => TheCodeTrainHtmlValidator::POSITION_HEAD )
- 48. Options? • Custom doctypes, full page or module, position on page. • Options can also be given for individual tests. array( ‘file://some/file/to/test’, array( your_options ) )
- 49. Running these tests > phpunit SomeTestSuite PHPUnit 3.3.1 by Sebastian Bergmann. ......... Time: 7 seconds OK (9 tests, 9 assertions)
- 50. Some failures ....F..... Failed asserting that Array ( [0] => Array ( [line] => 7 [errortype] => [error] => syntax of attribute value does not conform to declared value [original_line] => <label for=quot;quot;>Some label</label> ) ) is false.
- 51. Some failures .....F.... Failed asserting that Array ( [0] => Array ( [line] => 1 [errortype] => parse-error [error] => Value Error : display (http://www.w3.org/TR/CSS21/ visuren.html#propdef-display) inlin is not a display value : [original_line] => p ) ) is false.
- 53. Where’s this used? • Yahoo! - SearchMonkey • TheCodeTrain.co.uk’s WordPress theme.
- 54. It’s found problems • Security holes. • Form usability issues. • Other suspect HTML.
- 55. The Future!
- 56. Phase 2 - The Future • Test for things a simple DTD check can’t pick up on. • CodeSniffer. • Whitelisting sections of code - e.g. adverts. • Basic accessibility testing - working with the experts at Yahoo!.
- 57. Available Online • This talk: http://icanhaz.com/aft • The Code (please fork and contribute): http://github.com/NeilCrosby/frontend- test-suite • Twitter: automated frontend testing, @NeilCrosby • My blog hub: http://neilcrosby.com
Editor's Notes
- I’m also lazy.
- Unfiltered data labels pointing to non-existent input elements