Why Cucumber(s) makeyour TYPO3 projectbetterSøren Schaffstein,CEO @ dkd Internet Service GmbHFrankfurt Germany            ...
About Cucumbers
Cucumber
Behaviour DrivenDevelopment (BDD)
What is BDD? Behaviour Driven Development (BDD)    Test Driven Development (TDD)
TDD vs. BDDTest Driven   Behaviour Driven
TDD vs. BDDTest Driven              Behaviour Driven Technical perspective    Business perspective
TDD vs. BDDTest Driven              Behaviour Driven Technical perspective    Business perspective Verification focus      ...
TDD vs. BDDTest Driven              Behaviour Driven Technical perspective    Business perspective Verification focus      ...
TDD vs. BDDTest Driven                Behaviour Driven Technical perspective      Business perspective Verification focus  ...
TDD vs. BDDTest Driven                Behaviour Driven Technical perspective      Business perspective Verification focus  ...
When should we test?      Before development starts
When should we test?      Before development starts        During development
When should we test?      Before development starts         During development    After development has finished
User AcceptanceTests (UAT)
What is an UAT? The client or user specifies a feature and its behaviour
What is an UAT? The client or user specifies a feature and its behaviour One or more tests are written to verify the intend...
What is an UAT? The client or user specifies a feature and its behaviour One or more tests are written to verify the intend...
Who should write the tests?
Who should write the tests?                              Information                                Architect
Who should write the tests?            Developer                              Information                                A...
Who should write the tests?            Developer                              Information                                A...
Who should write the tests?            Developer                                      Information                         ...
Who should write the tests?             Developer                                       InformationClient                 ...
Why automated testing is great It’s easy
Why automated testing is great It’s easy It’s fast
Why automated testing is great It’s easy It’s fast It’s cheap
Why automated testing is great It’s easy It’s fast It’s cheap Complex scenarios can be tested regularly
Why automated testing is great It’s easy It’s fast It’s cheap Complex scenarios can be tested regularly External component...
Why automated testing is great It’s easy It’s fast It’s cheap Complex scenarios can be tested regularly External component...
Why automated testing is great It’s easy It’s fast It’s cheap Complex scenarios can be tested regularly External component...
dkd contactDefault contact formForm validationAddressed contact form
Form aftermath Send a confirmation mail to the sender
Form aftermath Send a confirmation mail to the sender Create a record in the CRM system
Form aftermath Send a confirmation mail to the sender Create a record in the CRM system Temporarily save form data to datab...
Form aftermath Send a confirmation mail to the sender Create a record in the CRM system Temporarily save form data to datab...
Recurring tests Does the website work without “www.”?
Recurring tests Does the website work without “www.”? Are .htaccess protections switched on/off?
Recurring tests Does the website work without “www.”? Are .htaccess protections switched on/off? Does the website contain ...
Recurring tests Does the website work without “www.”? Are .htaccess protections switched on/off? Does the website contain ...
Recurring tests Does the website work without “www.”? Are .htaccess protections switched on/off? Does the website contain ...
Recurring tests Does the website work without “www.”? Are .htaccess protections switched on/off? Does the website contain ...
Working withCucumber
First, let’s say what we want!
First, let’s say what we want!
First, let’s say what we want! Given I am on the homepage
First, let’s say what we want! Given I am on the homepage When I click on the contact link
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 f...
Smashing.That was already nearly perfect Cucumber.
Smashing.That was already nearly perfect Cucumber.                        Ghe rkin
Cucumber test structureGiven I am on the homepage
Cucumber test structureGiven I am on the homepage Define the initial situation
Cucumber test structureGiven I am on the homepageWhen I click on the contact link Define the initial situation Do something
Cucumber test structureGiven I am on the homepageWhen I click on the contact linkThen I should see the contact form Define ...
Scenario: Show default contact form    Given I am on the homepage    When I click on the contact link    Then I should see...
A dash more GherkinScenario: Show default contact form    Given I am on the homepage    When I click on the contact link  ...
Scenario: Show default contact form    Given I am on the homepage    When I click on the contact link    Then I should see...
Let’s write some tests for ourformScenario: Show default contact form    Given I am on the homepage    When I click on the...
Let’s write some tests for ourformScenario: Show default contact form    Given I am on the homepage    When I click on the...
Scenario: Submit the form    Given I am on the homepage    When I click on the contact link    And I wait for 2 seconds   ...
Submit the formScenario: Submit the form    Given I am on the homepage    When I click on the contact link    And I wait f...
Submit the formScenario: Submit the form    Given I am on the contact form    And I submit the contact form    Then I shou...
Scenario: Submit the form without any data    Given I am on the contact form    And I submit the contact form    Then I sh...
How about form validation?Scenario: Submit the form without any data    Given I am on the contact form    And I submit the...
Scenario: Submit the form with invalid data    Given I am on the contact form    When I fill in "email" with "test"    And...
Email validationScenario: Submit the form with invalid data    Given I am on the contact form    When I fill in "email" wi...
Email validationScenario: Submit the form with invalid data    Given I am on the contact form    When I fill in "email" wi...
Email validationScenario Outline: Submit the form withtypical invalid entries for email    Given I am on the contact form ...
A feature has multipleScenariosFeature: Contact form
A feature has multipleScenariosFeature: Contact formAs a website owner I want to have a contactform so that website visito...
A feature has multipleScenariosFeature: Contact formAs a website owner I want to have a contactform so that website visito...
A feature has multipleScenariosFeature: Contact formAs a website owner I want to have a contactform so that website visito...
Testing pitfalls Testing the “wrong” state Then I should not see "fatal error"
Testing pitfalls Testing the “wrong” state Then I should not see "fatal error" Testing for content on a page that might ch...
My client doesn’t speakenglish :(
My client doesn’t speakenglish :( Gherkin is available in over 40 languages
My client doesn’t speakenglish :( Gherkin is available in over 40 languagesScenario: Show default contact form    Given I ...
My client doesn’t speakenglish :( Gherkin is available in over 40 languagesScenario: Show default contact form    Given I ...
How does Cucumber work?
How does Cucumber work?   Write a Scenario in Gherkin
How does Cucumber work?   Write a Scenario in Gherkin   Cucumber reads each step
How does Cucumber work?    Write a Scenario in Gherkin    Cucumber reads each stepFor each step you can execute Code:  Cuc...
How does Cucumber work?    Write a Scenario in Gherkin    Cucumber reads each stepFor each step you can execute Code:  Cuc...
What Output do I get? Cucumber supports different Output formats
What Output do I get?  Cucumber supports different Output formatsFeature: Check if the default contact form opens when cli...
What Output do I get? Cucumber supports different Output formats
How fast can I
How fast can I  Get Cucumber running in under  90 seconds
$ sudo gem install cucumber capybara --no-ri --no-rdoc(::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (::...
Install Cucumber$ sudo gem install cucumber capybara --no-ri --no-rdoc(::) (::) (::) (::) (::) (::) (::) (::) (::) (::) (:...
$ mkdir -p features/{support,steps}                                      50s                                            40s
Create directories$ mkdir -p features/{support,steps}                                      50s                            ...
$ cat > features/contact_form.featureFeature: Check if the default contact form opens when clicking on the linkKontakt   S...
Create Feature file$ cat > features/contact_form.featureFeature: Check if the default contact form opens when clicking on t...
$ cat > features/steps/steps.rbGiven /^I am on the homepage$/ do  visit(http://www.dkd.de)endWhen /^I click on the contact...
Create step definitions file$ cat > features/steps/steps.rbGiven /^I am on the homepage$/ do  visit(http://www.dkd.de)endWhe...
$ cat > features/support/env.rb# Capybara configurationrequire capybararequire capybara/cucumberCapybara.default_driver = ...
Create settings file$ cat > features/support/env.rb# Capybara configurationrequire capybararequire capybara/cucumberCapybar...
$ cucumberFeature: Check if the default contact form opens when clicking on the linkKontakt  Scenario: Show default contac...
Run Cucumber$ cucumberFeature: Check if the default contact form opens when clicking on the linkKontakt  Scenario: Show de...
Aren’t there already helpfultests? Have a look at https://www.relishapp.com/
Using the righttool for the job
Useful tools we use at dkd Plaintext Editor
Useful tools we use at dkd Plaintext Editor TextMate with Cucumber Bundle
Useful tools we use at dkd Plaintext Editor TextMate with Cucumber Bundle Redmine
Useful tools we use at dkd Plaintext Editor TextMate with Cucumber Bundle Redmine REACTApp
Useful tools we use at dkd Plaintext Editor TextMate with Cucumber Bundle Redmine REACTApp Jenkins
Use REACTApp
Use Jenkins to
What to takehome
What to take home Automate your testing
What to take home Automate your testing Give Cucumber a try
What to take home Automate your testing Give Cucumber a try If you already do these two, connect Cucumber to Jenkins
soeren.schaffstein@dkd.de
dkd     development     kommunikation     designthank you!
Cocktail ingredients| Quantity | Ingredient           || 1 l       | club soda           || 250 ml    | gin               ...
References
References Cucumber: http://rubygems.org/gems/cucumber
References Cucumber: http://rubygems.org/gems/cucumber Capybara: https://github.com/jnicklas/capybara
References Cucumber: http://rubygems.org/gems/cucumber Capybara: https://github.com/jnicklas/capybara REACT: http://reacta...
References Cucumber: http://rubygems.org/gems/cucumber Capybara: https://github.com/jnicklas/capybara REACT: http://reacta...
Image Reference 1 Cucumbers: Stephen Ausmus http://www.ars.usda.gov/is/graphics/photos/mar07/d730-30.htm
Image Reference 1 Cucumbers: Stephen Ausmus http://www.ars.usda.gov/is/graphics/photos/mar07/d730-30.htm Cucumber Sandwich...
Image Reference 1 Cucumbers: Stephen Ausmus http://www.ars.usda.gov/is/graphics/photos/mar07/d730-30.htm Cucumber Sandwich...
Image Reference 1 Cucumbers: Stephen Ausmus http://www.ars.usda.gov/is/graphics/photos/mar07/d730-30.htm Cucumber Sandwich...
Image Reference 1 Cucumbers: Stephen Ausmus http://www.ars.usda.gov/is/graphics/photos/mar07/d730-30.htm Cucumber Sandwich...
Image Reference 2 Worker Woman http://www.istockphoto.com/stock-photo-14311527-constructor-woman- with-level-isolated-on-w...
Image Reference 2 Worker Woman http://www.istockphoto.com/stock-photo-14311527-constructor-woman- with-level-isolated-on-w...
Image Reference 2 Worker Woman http://www.istockphoto.com/stock-photo-14311527-constructor-woman- with-level-isolated-on-w...
Image Reference 2 Worker Woman http://www.istockphoto.com/stock-photo-14311527-constructor-woman- with-level-isolated-on-w...
Image Reference 3 Boring http://www.istockphoto.com/stock-photo-9660261-depressed-business- man.php
Image Reference 3 Boring http://www.istockphoto.com/stock-photo-9660261-depressed-business- man.php Various Cucumbers http...
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Why Cucumber(s) make your TYPO3 website better
Upcoming SlideShare
Loading in...5
×

Why Cucumber(s) make your TYPO3 website better

6,886

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,886
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • * married to Simone* traveling - photography - scuba diving - LEGOs\n* photography, LEGO, scuba diving, traveling\n
  • * married to Simone* traveling - photography - scuba diving - LEGOs\n* photography, LEGO, scuba diving, traveling\n
  • * married to Simone* traveling - photography - scuba diving - LEGOs\n* photography, LEGO, scuba diving, traveling\n
  • * married to Simone* traveling - photography - scuba diving - LEGOs\n* photography, LEGO, scuba diving, traveling\n
  • * married to Simone* traveling - photography - scuba diving - LEGOs\n* photography, LEGO, scuba diving, traveling\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Cucumber Sandwich, a type of sandwich\n
  • Cucumber, a community in West Virginia, USA\n
  • Cucumber (TV series), a Canadian children's television series originally broadcast in the 1970s\n
  • Cucumber Castle, a 1970 album released by the Bee Gees\n
  • Cucumber beetle, a type of beetle.\n
  • Sea cucumber, a type of animal\n
  • Cucumber (software), a Behavior Driven Development tool.\n\n
  • \n
  • \n
  • \n
  • write tests first then develop\n
  • write tests first then develop\n
  • write tests first then develop\n
  • TDD example: add-function 2+3=5\nBDD example: I’d like to add 2+3 and get 5\nIn this talk we will explore BDD a bit further\n
  • TDD example: add-function 2+3=5\nBDD example: I’d like to add 2+3 and get 5\nIn this talk we will explore BDD a bit further\n
  • TDD example: add-function 2+3=5\nBDD example: I’d like to add 2+3 and get 5\nIn this talk we will explore BDD a bit further\n
  • TDD example: add-function 2+3=5\nBDD example: I’d like to add 2+3 and get 5\nIn this talk we will explore BDD a bit further\n
  • TDD example: add-function 2+3=5\nBDD example: I’d like to add 2+3 and get 5\nIn this talk we will explore BDD a bit further\n
  • TDD example: add-function 2+3=5\nBDD example: I’d like to add 2+3 and get 5\nIn this talk we will explore BDD a bit further\n
  • TDD example: add-function 2+3=5\nBDD example: I’d like to add 2+3 and get 5\nIn this talk we will explore BDD a bit further\n
  • TDD example: add-function 2+3=5\nBDD example: I’d like to add 2+3 and get 5\nIn this talk we will explore BDD a bit further\n
  • TDD example: add-function 2+3=5\nBDD example: I’d like to add 2+3 and get 5\nIn this talk we will explore BDD a bit further\n
  • TDD example: add-function 2+3=5\nBDD example: I’d like to add 2+3 and get 5\nIn this talk we will explore BDD a bit further\n
  • TDD example: add-function 2+3=5\nBDD example: I’d like to add 2+3 and get 5\nIn this talk we will explore BDD a bit further\n
  • TDD example: add-function 2+3=5\nBDD example: I’d like to add 2+3 and get 5\nIn this talk we will explore BDD a bit further\n
  • 1: definition is clear between you and the client. Calculation can be done\n2: developers know what to develop and see if they break something\n3: make sure everything stays functional (externals can change: flickr example)\n
  • 1: definition is clear between you and the client. Calculation can be done\n2: developers know what to develop and see if they break something\n3: make sure everything stays functional (externals can change: flickr example)\n
  • 1: definition is clear between you and the client. Calculation can be done\n2: developers know what to develop and see if they break something\n3: make sure everything stays functional (externals can change: flickr example)\n
  • 1: definition is clear between you and the client. Calculation can be done\n2: developers know what to develop and see if they break something\n3: make sure everything stays functional (externals can change: flickr example)\n
  • 1: definition is clear between you and the client. Calculation can be done\n2: developers know what to develop and see if they break something\n3: make sure everything stays functional (externals can change: flickr example)\n
  • 1: definition is clear between you and the client. Calculation can be done\n2: developers know what to develop and see if they break something\n3: make sure everything stays functional (externals can change: flickr example)\n
  • \n
  • \n
  • Feature: contact form Behaviour: \n* Name, email, message field\n* email may not be blank\n* form must be saved to database\n
  • Feature: contact form Behaviour: \n* Name, email, message field\n* email may not be blank\n* form must be saved to database\n
  • Feature: contact form Behaviour: \n* Name, email, message field\n* email may not be blank\n* form must be saved to database\n
  • Feature: contact form Behaviour: \n* Name, email, message field\n* email may not be blank\n* form must be saved to database\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Video: Contact form: Happy Path\n
  • Video: contact form validation\n
  • Video: addressed contact form\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 1 & 2: tend to get forgotten\n
  • 1 & 2: tend to get forgotten\n
  • 1 & 2: tend to get forgotten\n
  • 1 & 2: tend to get forgotten\n
  • 1 & 2: tend to get forgotten\n
  • 1 & 2: tend to get forgotten\n
  • 1 & 2: tend to get forgotten\n
  • \n
  • \n
  • \n
  • Explain what we want in plain english\n
  • Explain what we want in plain english\n
  • Explain what we want in plain english\n
  • Explain what we want in plain english\n
  • Explain what we want in plain english\n
  • Explain what we want in plain english\n
  • Explain what we want in plain english\n
  • \n
  • \n
  • Each Cucumber test starts without knowing about other tests\n
  • Each Cucumber test starts without knowing about other tests\n
  • Each Cucumber test starts without knowing about other tests\n
  • Each Cucumber test starts without knowing about other tests\n
  • Each Cucumber test starts without knowing about other tests\n
  • Each Cucumber test starts without knowing about other tests\n
  • Each Cucumber test starts without knowing about other tests\n
  • Introducing the “Scenario” keyword\n
  • Ok this was a simple example. But what when it get’s more complicated. Is it still easy?\n
  • Ok this was a simple example. But what when it get’s more complicated. Is it still easy?\n
  • Ok this was a simple example. But what when it get’s more complicated. Is it still easy?\n
  • Just write the important stuff in the tests\n
  • Just write the important stuff in the tests\n
  • Just write the important stuff in the tests\n
  • \n
  • I don’t test the other validation options for two reasons:\n* keep the test short and simple\n* test only one thing at a time (to keep things atomic)\n
  • I don’t test the other validation options for two reasons:\n* keep the test short and simple\n* test only one thing at a time (to keep things atomic)\n
  • I don’t test the other validation options for two reasons:\n* keep the test short and simple\n* test only one thing at a time (to keep things atomic)\n
  • I don’t test the other validation options for two reasons:\n* keep the test short and simple\n* test only one thing at a time (to keep things atomic)\n
  • I don’t test the other validation options for two reasons:\n* keep the test short and simple\n* test only one thing at a time (to keep things atomic)\n
  • feature\n
  • feature\n
  • feature\n
  • feature\n
  • feature\n
  • \n
  • \n
  • \n
  • And yes, it’s available in “pirate english”\n
  • And yes, it’s available in “pirate english”\n
  • And yes, it’s available in “pirate english”\n
  • And yes, it’s available in “pirate english”\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • PDF, JSON\n
  • PDF, JSON\n
  • PDF, JSON\n
  • PDF, JSON\n
  • PDF, JSON\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Redmine = Backlog\nReactualize = User Stories\nJenkins = Worker\n
  • Redmine = Backlog\nReactualize = User Stories\nJenkins = Worker\n
  • Redmine = Backlog\nReactualize = User Stories\nJenkins = Worker\n
  • Redmine = Backlog\nReactualize = User Stories\nJenkins = Worker\n
  • Redmine = Backlog\nReactualize = User Stories\nJenkins = Worker\n
  • Redmine = Backlog\nReactualize = User Stories\nJenkins = Worker\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Now’s the time to ask your questions\nIf you’d like to have a more detailed discussion with me, feel free to visit me at the dkd booth today at XXX or send an email\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "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

    ×