Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Why Cucumber(s) make your TYPO3 website better

7,687 views

Published on

The complexity of websites has increased over the last years. Especially technologies like AJaX or JavaScript allow complex behaviours of websites. Testing these features is a tedious and time consuming task. Additionally these features should in best case be tested after each new feature being deployed to the website. Doing this manually is not an option.

By means of a case study it will be shown how several features of a TYPO3 website can automatically be tested with User Acceptance Tests (UAT) using "Cucumber". "Cucumber" uses every day language to describe tests, so these tests can directly be written by the project manager or even the client. This offers the possibility that these tests can be used to describe the required features of a project.

It will also be shown how the described testing scenario can be integrated within a Continuous Delivery process.

Published in: Technology, Education
  • Be the first to comment

Why Cucumber(s) make your TYPO3 website better

  1. 1. Why Cucumber(s) makeyour TYPO3 projectbetterSøren Schaffstein,CEO @ dkd Internet Service GmbHFrankfurt Germany r fo s ble rian uita ta s s ege ki v tal and his ns T a v eg
  2. 2. About Cucumbers
  3. 3. Cucumber
  4. 4. Behaviour DrivenDevelopment (BDD)
  5. 5. What is BDD? Behaviour Driven Development (BDD) Test Driven Development (TDD)
  6. 6. TDD vs. BDDTest Driven Behaviour Driven
  7. 7. TDD vs. BDDTest Driven Behaviour Driven Technical perspective Business perspective
  8. 8. TDD vs. BDDTest Driven Behaviour Driven Technical perspective Business perspective Verification focus Specification focus
  9. 9. TDD vs. BDDTest Driven Behaviour Driven Technical perspective Business perspective Verification focus Specification focus Unit tests Acceptance tests
  10. 10. TDD vs. BDDTest Driven Behaviour Driven Technical perspective Business perspective Verification focus Specification focus Unit tests Acceptance tests “build the thing right” “build the right thing”
  11. 11. TDD vs. BDDTest Driven Behaviour Driven Technical perspective Business perspective Verification focus Specification focus Unit tests Acceptance tests “build the thing right” “build the right thing” Documentation
  12. 12. When should we test? Before development starts
  13. 13. When should we test? Before development starts During development
  14. 14. When should we test? Before development starts During development After development has finished
  15. 15. User AcceptanceTests (UAT)
  16. 16. What is an UAT? The client or user specifies a feature and its behaviour
  17. 17. What is an UAT? The client or user specifies a feature and its behaviour One or more tests are written to verify the intended behaviour
  18. 18. What is an UAT? The client or user specifies a feature and its behaviour One or more tests are written to verify the intended behaviour If all tests pass, then the client will accept the feature as functional
  19. 19. Who should write the tests?
  20. 20. Who should write the tests? Information Architect
  21. 21. Who should write the tests? Developer Information Architect
  22. 22. Who should write the tests? Developer Information Architect Tester
  23. 23. Who should write the tests? Developer Information Architect Project Tester Manager
  24. 24. Who should write the tests? Developer InformationClient Architect Project Tester Manager
  25. 25. Why automated testing is great It’s easy
  26. 26. Why automated testing is great It’s easy It’s fast
  27. 27. Why automated testing is great It’s easy It’s fast It’s cheap
  28. 28. Why automated testing is great It’s easy It’s fast It’s cheap Complex scenarios can be tested regularly
  29. 29. Why automated testing is great It’s easy It’s fast It’s cheap Complex scenarios can be tested regularly External components can be tested regularly
  30. 30. Why automated testing is great It’s easy It’s fast It’s cheap Complex scenarios can be tested regularly External components can be tested regularly It increases the overall quality and robustness
  31. 31. Why automated testing is great It’s easy It’s fast It’s cheap Complex scenarios can be tested regularly External components can be tested regularly It increases the overall quality and robustness Gives a good feeling of control
  32. 32. dkd contactDefault contact formForm validationAddressed contact form
  33. 33. Form aftermath Send a confirmation mail to the sender
  34. 34. Form aftermath Send a confirmation mail to the sender Create a record in the CRM system
  35. 35. Form aftermath Send a confirmation mail to the sender Create a record in the CRM system Temporarily save form data to database
  36. 36. Form aftermath Send a confirmation mail to the sender Create a record in the CRM system Temporarily save form data to database For data protection reasons clear form database entries after a week
  37. 37. Recurring tests Does the website work without “www.”?
  38. 38. Recurring tests Does the website work without “www.”? Are .htaccess protections switched on/off?
  39. 39. Recurring tests Does the website work without “www.”? Are .htaccess protections switched on/off? Does the website contain a legal notice page?
  40. 40. Recurring tests Does the website work without “www.”? Are .htaccess protections switched on/off? Does the website contain a legal notice page? Does the legal notice page contain a VAT-number?
  41. 41. Recurring tests Does the website work without “www.”? Are .htaccess protections switched on/off? Does the website contain a legal notice page? Does the legal notice page contain a VAT-number? Does the search work?
  42. 42. Recurring tests Does the website work without “www.”? Are .htaccess protections switched on/off? Does the website contain a legal notice page? Does the legal notice page contain a VAT-number? Does the search work? Is the standard-functionality of a certain TYPO3 extension provided?
  43. 43. Working withCucumber
  44. 44. First, let’s say what we want!
  45. 45. First, let’s say what we want!
  46. 46. First, let’s say what we want! Given I am on the homepage
  47. 47. First, let’s say what we want! Given I am on the homepage When I click on the contact link
  48. 48. First, let’s say what we want! Given I am on the homepage When I click on the contact link Then I should see the contact form
  49. 49. Smashing.That was already nearly perfect Cucumber.
  50. 50. Smashing.That was already nearly perfect Cucumber. Ghe rkin
  51. 51. Cucumber test structureGiven I am on the homepage
  52. 52. Cucumber test structureGiven I am on the homepage Define the initial situation
  53. 53. Cucumber test structureGiven I am on the homepageWhen I click on the contact link Define the initial situation Do something
  54. 54. Cucumber test structureGiven I am on the homepageWhen I click on the contact linkThen I should see the contact form Define the initial situation Do something Examine the outcome
  55. 55. Scenario: Show default contact form Given I am on the homepage When I click on the contact link Then I should see the contact form
  56. 56. A dash more GherkinScenario: Show default contact form Given I am on the homepage When I click on the contact link Then I should see the contact form
  57. 57. Scenario: Show default contact form Given I am on the homepage When I click on the contact link Then I should see the contact form
  58. 58. Let’s write some tests for ourformScenario: Show default contact form Given I am on the homepage When I click on the contact link Then I should see the contact form
  59. 59. Let’s write some tests for ourformScenario: Show default contact form Given I am on the homepage When I click on the contact link And I wait for 2 seconds Then I should see the contact form
  60. 60. Scenario: Submit the form Given I am on the homepage When I click on the contact link And I wait for 2 seconds And I submit the contact form Then I should see "Thank you!"
  61. 61. Submit the formScenario: Submit the form Given I am on the homepage When I click on the contact link And I wait for 2 seconds And I submit the contact form Then I should see "Thank you!"
  62. 62. Submit the formScenario: Submit the form Given I am on the contact form And I submit the contact form Then I should see "Thank you!"
  63. 63. Scenario: Submit the form without any data Given I am on the contact form And I submit the contact form Then I should see "enter a name" And I should see "enter an email" And I should see "enter a phone number" And I should see "enter a message"
  64. 64. How about form validation?Scenario: Submit the form without any data Given I am on the contact form And I submit the contact form Then I should see "enter a name" And I should see "enter an email" And I should see "enter a phone number" And I should see "enter a message"
  65. 65. Scenario: Submit the form with invalid data Given I am on the contact form When I fill in "email" with "test" And I submit the contact form Then I should see "enter an email"
  66. 66. Email validationScenario: Submit the form with invalid data Given I am on the contact form When I fill in "email" with "test" And I submit the contact form Then I should see "enter an email"
  67. 67. Email validationScenario: Submit the form with invalid data Given I am on the contact form When I fill in "email" with "test" And I submit the contact form Then I should see "enter an email"
  68. 68. Email validationScenario Outline: Submit the form withtypical invalid entries for email Given I am on the contact form When I fill in "email" with "<test>" And I submit the contact form Then I should see "enter an email" Examples: List of invalid entries | test | | not_an_email | | address@no_tld | | no_at_symbol.tld |
  69. 69. A feature has multipleScenariosFeature: Contact form
  70. 70. A feature has multipleScenariosFeature: Contact formAs a website owner I want to have a contactform so that website visitors can easilycontact us
  71. 71. A feature has multipleScenariosFeature: Contact formAs a website owner I want to have a contactform so that website visitors can easilycontact usScenario: Show default contact form Given I am on the homepage When I click on the contact link Then I should see the contact form
  72. 72. A feature has multipleScenariosFeature: Contact formAs a website owner I want to have a contactform so that website visitors can easilycontact usScenario: Show default contact form Given I am on the homepage When I click on the contact link Then I should see the contact formScenario: Submit the form Given I am on the contact form And I submit the contact form Then I should see "Thank you!"
  73. 73. Testing pitfalls Testing the “wrong” state Then I should not see "fatal error"
  74. 74. Testing pitfalls Testing the “wrong” state Then I should not see "fatal error" Testing for content on a page that might change Then I should see "John Doe"
  75. 75. My client doesn’t speakenglish :(
  76. 76. My client doesn’t speakenglish :( Gherkin is available in over 40 languages
  77. 77. My client doesn’t speakenglish :( Gherkin is available in over 40 languagesScenario: Show default contact form Given I am on the homepage When I click on the contact link Then I should see the contact form
  78. 78. My client doesn’t speakenglish :( Gherkin is available in over 40 languagesScenario: Show default contact form Given I am on the homepage When I click on the contact link Then I should see the contact formScenario: Visa standard kontaktformuläret Givet jag är på hemsidan När jag klickar på kontaktlänken Så jag ska se kontaktformuläret
  79. 79. How does Cucumber work?
  80. 80. How does Cucumber work? Write a Scenario in Gherkin
  81. 81. How does Cucumber work? Write a Scenario in Gherkin Cucumber reads each step
  82. 82. How does Cucumber work? Write a Scenario in Gherkin Cucumber reads each stepFor each step you can execute Code: Cucumber = Ruby / Behat = PHP ara yb s ap ck C ro or ting f s we bte
  83. 83. How does Cucumber work? Write a Scenario in Gherkin Cucumber reads each stepFor each step you can execute Code: Cucumber = Ruby / Behat = PHP ara yb s ap ck C ro or ting f s Cucumber reports about the we bte test results
  84. 84. What Output do I get? Cucumber supports different Output formats
  85. 85. What Output do I get? Cucumber supports different Output formatsFeature: Check if the default contact form opens when clicking on the linkKontakt Scenario: Show default contact form # features/testfeature.feature:3 Given I am on the homepage # features/steps/simple_steps.rb:1 When I click on the contact link # features/steps/simple_steps.rb:5 TODO (Cucumber::Pending) ./features/steps/simple_steps.rb:6:in `/^I click on the contact link$/ features/testfeature.feature:5:in `When I click on the contact link Then I should see the contact form # features/steps/simple_steps.rb:91 scenario (1 pending)3 steps (1 skipped, 1 pending, 1 passed)0m14.604s
  86. 86. What Output do I get? Cucumber supports different Output formats
  87. 87. How fast can I
  88. 88. How fast can I Get Cucumber running in under 90 seconds
  89. 89. $ sudo gem install cucumber capybara --no-ri --no-rdoc(::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::)Thank you for installing cucumber-1.1.0.Please be sure to read http://wiki.github.com/cucumber/cucumber/upgradingfor important information about this release. Happy cuking!(::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::)Successfully installed cucumber-1.1.0Successfully installed capybara-1.1.12 gems installed 35s 55s
  90. 90. Install Cucumber$ sudo gem install cucumber capybara --no-ri --no-rdoc(::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::)Thank you for installing cucumber-1.1.0.Please be sure to read http://wiki.github.com/cucumber/cucumber/upgradingfor important information about this release. Happy cuking!(::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::)Successfully installed cucumber-1.1.0Successfully installed capybara-1.1.12 gems installed 35s 55s
  91. 91. $ mkdir -p features/{support,steps} 50s 40s
  92. 92. Create directories$ mkdir -p features/{support,steps} 50s 40s
  93. 93. $ cat > features/contact_form.featureFeature: Check if the default contact form opens when clicking on the linkKontakt Scenario: Show default contact form Given I am on the homepage When I click on the contact link Then I should see the contact form<Press ctrl+d> 40s 50s
  94. 94. Create Feature file$ cat > features/contact_form.featureFeature: Check if the default contact form opens when clicking on the linkKontakt Scenario: Show default contact form Given I am on the homepage When I click on the contact link Then I should see the contact form<Press ctrl+d> 40s 50s
  95. 95. $ cat > features/steps/steps.rbGiven /^I am on the homepage$/ do visit(http://www.dkd.de)endWhen /^I click on the contact link$/ do click_link(Kontakt)endThen /^I should see the contact form$/ do text = Call Back if page.respond_to? :should page.should have_content(text) else assert page.has_content?(text) endend 30s<Press ctrl+d> 60s
  96. 96. Create step definitions file$ cat > features/steps/steps.rbGiven /^I am on the homepage$/ do visit(http://www.dkd.de)endWhen /^I click on the contact link$/ do click_link(Kontakt)endThen /^I should see the contact form$/ do text = Call Back if page.respond_to? :should page.should have_content(text) else assert page.has_content?(text) endend 30s<Press ctrl+d> 60s
  97. 97. $ cat > features/support/env.rb# Capybara configurationrequire capybararequire capybara/cucumberCapybara.default_driver = :seleniumCapybara.run_server = false# set the host of the website you want to testCapybara.app_host = http://www.dkd.de<Press ctrl+d> 20s 70s
  98. 98. Create settings file$ cat > features/support/env.rb# Capybara configurationrequire capybararequire capybara/cucumberCapybara.default_driver = :seleniumCapybara.run_server = false# set the host of the website you want to testCapybara.app_host = http://www.dkd.de<Press ctrl+d> 20s 70s
  99. 99. $ cucumberFeature: Check if the default contact form opens when clicking on the linkKontakt Scenario: Show default contact form # features/contact_form.feature:3 Given I am on the homepage # features/steps/steps.rb:1 When I click on the contact link # features/steps/steps.rb:5 Then I should see the contact form # features/steps/steps.rb:91 scenario (1 passed)3 steps (3 passed)0m18.874s 1s 89s
  100. 100. Run Cucumber$ cucumberFeature: Check if the default contact form opens when clicking on the linkKontakt Scenario: Show default contact form # features/contact_form.feature:3 Given I am on the homepage # features/steps/steps.rb:1 When I click on the contact link # features/steps/steps.rb:5 Then I should see the contact form # features/steps/steps.rb:91 scenario (1 passed)3 steps (3 passed)0m18.874s 1s 89s
  101. 101. Aren’t there already helpfultests? Have a look at https://www.relishapp.com/
  102. 102. Using the righttool for the job
  103. 103. Useful tools we use at dkd Plaintext Editor
  104. 104. Useful tools we use at dkd Plaintext Editor TextMate with Cucumber Bundle
  105. 105. Useful tools we use at dkd Plaintext Editor TextMate with Cucumber Bundle Redmine
  106. 106. Useful tools we use at dkd Plaintext Editor TextMate with Cucumber Bundle Redmine REACTApp
  107. 107. Useful tools we use at dkd Plaintext Editor TextMate with Cucumber Bundle Redmine REACTApp Jenkins
  108. 108. Use REACTApp
  109. 109. Use Jenkins to
  110. 110. What to takehome
  111. 111. What to take home Automate your testing
  112. 112. What to take home Automate your testing Give Cucumber a try
  113. 113. What to take home Automate your testing Give Cucumber a try If you already do these two, connect Cucumber to Jenkins
  114. 114. soeren.schaffstein@dkd.de
  115. 115. dkd development kommunikation designthank you!
  116. 116. Cocktail ingredients| Quantity | Ingredient || 1 l | club soda || 250 ml | gin || 60 ml | lemon juice || 12 slices | lemon || 12 slices | cucumber || 12 slices | sprigs fresh mint |Scenario: Refreshing Cucumber Cocktail Given I have the ingredients When I combine the club soda, gin and lemon juice And I place a lemon slice and a cucumber slice in each of 12 glasses And I add 1 cup crushed ice to each glass And I pour the gin mixture into the glasses and garnish each with a mint sprig Then I should get 12 refreshing cocktails
  117. 117. References
  118. 118. References Cucumber: http://rubygems.org/gems/cucumber
  119. 119. References Cucumber: http://rubygems.org/gems/cucumber Capybara: https://github.com/jnicklas/capybara
  120. 120. References Cucumber: http://rubygems.org/gems/cucumber Capybara: https://github.com/jnicklas/capybara REACT: http://reactapp.com/
  121. 121. References Cucumber: http://rubygems.org/gems/cucumber Capybara: https://github.com/jnicklas/capybara REACT: http://reactapp.com/ Jenkins: http://jenkins-ci.org/
  122. 122. Image Reference 1 Cucumbers: Stephen Ausmus http://www.ars.usda.gov/is/graphics/photos/mar07/d730-30.htm
  123. 123. Image Reference 1 Cucumbers: Stephen Ausmus http://www.ars.usda.gov/is/graphics/photos/mar07/d730-30.htm Cucumber Sandwich: BitBoy http://flickr.com/photos/44124323641@N01/204619671
  124. 124. Image Reference 1 Cucumbers: Stephen Ausmus http://www.ars.usda.gov/is/graphics/photos/mar07/d730-30.htm Cucumber Sandwich: BitBoy http://flickr.com/photos/44124323641@N01/204619671 Cucumber Castle: Bee Gees Album Cover
  125. 125. Image Reference 1 Cucumbers: Stephen Ausmus http://www.ars.usda.gov/is/graphics/photos/mar07/d730-30.htm Cucumber Sandwich: BitBoy http://flickr.com/photos/44124323641@N01/204619671 Cucumber Castle: Bee Gees Album Cover Cucumber Beetle: Scott Bauer http://www.ars.usda.gov/is/graphics/photos/index.html
  126. 126. Image Reference 1 Cucumbers: Stephen Ausmus http://www.ars.usda.gov/is/graphics/photos/mar07/d730-30.htm Cucumber Sandwich: BitBoy http://flickr.com/photos/44124323641@N01/204619671 Cucumber Castle: Bee Gees Album Cover Cucumber Beetle: Scott Bauer http://www.ars.usda.gov/is/graphics/photos/index.html Cucumber Cocktail: Andrew Mccaul http://www.foodnetwork.com/recipes/sandra-lee/lemon-cucumber- cocktail-recipe2/index.html
  127. 127. Image Reference 2 Worker Woman http://www.istockphoto.com/stock-photo-14311527-constructor-woman- with-level-isolated-on-white.php
  128. 128. Image Reference 2 Worker Woman http://www.istockphoto.com/stock-photo-14311527-constructor-woman- with-level-isolated-on-white.php Worker Man http://www.istockphoto.com/stock-photo-15392840-construction- contractor-carpenter-on-white.php
  129. 129. Image Reference 2 Worker Woman http://www.istockphoto.com/stock-photo-14311527-constructor-woman- with-level-isolated-on-white.php Worker Man http://www.istockphoto.com/stock-photo-15392840-construction- contractor-carpenter-on-white.php Concert http://www.istockphoto.com/stock-photo-15502100-concert- performance.php
  130. 130. Image Reference 2 Worker Woman http://www.istockphoto.com/stock-photo-14311527-constructor-woman- with-level-isolated-on-white.php Worker Man http://www.istockphoto.com/stock-photo-15392840-construction- contractor-carpenter-on-white.php Concert http://www.istockphoto.com/stock-photo-15502100-concert- performance.php Questions http://www.istockphoto.com/stock-photo-17686236-decision-making.php
  131. 131. Image Reference 3 Boring http://www.istockphoto.com/stock-photo-9660261-depressed-business- man.php
  132. 132. Image Reference 3 Boring http://www.istockphoto.com/stock-photo-9660261-depressed-business- man.php Various Cucumbers http://www.istockphoto.com/stock-photo-11184335-hanging-by-a- string.php http://www.istockphoto.com/stock-photo-2203742-cucumber-on- white.php http://www.istockphoto.com/stock-photo-11586913-sliced-cucumber-in- stack.php http://www.istockphoto.com/stock-photo-12083382-pickle-jar.php

×