Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using Given / When / Then with Cypress

Using Given / When / Then with Cypress

How to get your product owners to write your functional tests, looking at:
- Allowing product owners write the tests and see the whole pipeline
- Moving QA to the front of the pipeline
- Giving devs time back as they have less tests to write
- Less risk with deployments

F27dd959ecd05f9d41ba175c1fba1178?s=128

Callum Silcock

October 04, 2019
Tweet

More Decks by Callum Silcock

Other Decks in Programming

Transcript

  1. HOW TO GET YOUR PRODUCT OWNERS TO WRITE YOUR FUNCTIONAL

    TESTS AKA USING GIVEN / WHEN / THEN WITH CYPRESS !"
  2. WHO ARE YOU? CALLUM SILCOCK FRONTEND PLATFORM ENGINEER @ ATTEST

    (CONTRACT) HTTPS://CSI.LK || GITHUB.COM/CSI-LK
  3. ! "dartah" = data "rehpo" = repo

  4. WHAT ARE WE TRYING TO SOLVE?

  5. .!. .!. .!. ( ) "!!!!!!!!#!$ ( ) "!!!!!!!!!!$ "!!!!!!!!!!$

    "!!!!!!!!!!$ ( ) "!!!!!!!!!!$ "`!'$ % Ticket&!' "`!'$ % % % % Merge % QA % "`!'$ Promote % % %Prd%!!!>% Story %!!!>%Dev%!!>% Branch %!!>% PR %!!!!!!>% STG %!!>%QA %!!!!!!!!>%Production% % % % Bug % % % % % % % % UAT % % % % % &!!!( &!!!!!!!!!!( &!!!( &!!!!!!!!!!( &#!!!!!!!!!( &!!!!!!!!!!( &!!!( &!!!!!!!!!!( )>Tests Pass &>Approval
  6. describe('logging in', () => { it('logs in, () => {

    cy.visit('http://localhost:3000/login'); cy.get('email').type('contact@csi.lk'); cy.get('password').type('hunter2'); cy.get('input[type="button"]').click(); cy.url().should('be', 'http://localhost:3000/dashboard'); }); });
  7. Feature: Testing Ewww regression Scenario: Lack of automation Given I

    am a Frontend Developer When I am forced to manually test Then kill me
  8. Feature: Logging In Tests the user can successfully login and

    log out Scenario: Logging In Sucessfully Given I am on the "login" page When I input my "email" as "contact@csi.lk" And I input my "password" as "hunter2" And I click the "login" button Then I should be on the "dashboard" page
  9. # Given I am on the "login" page import {

    Given } from "cypress-cucumber-preprocessor/steps" Given(`I am on the {string} page`, target => { cy.visit(`https://localhost:3000/${target.toLowerCase()}`) })
  10. <input type="email" name="email" placeholder="Email" data-qa="input-email" /> <input type="password" name="password" placeholder="Password"

    data-qa="input-password" /> <button data-qa="button-login" onClick={() => { setAuthentication(true) history.push("/dashboard") }} > Log In </button>
  11. // Then the "navigation logout" button should "not" "exist" Then(`the

    {string} button should {string} {string}`, (id, assert, assertion) => cy.get(`[data-qa="${type}-${id.replace(" ", "-").toLowerCase()}"]`).should(assert, assertion) //cy.get([data-qa="button-navigation-logout"]).should("not", "exist") ) // Reuse! // Then the "login" button should "be" "disabled"
  12. .!. .!. .!. ( ) "!!!!!!!!#!$ ( ) "!!!!!!!!!!$ (

    ) "!!!!!!!!!!$ "!!!!!!!!!!$ "`!'$ % Ticket&!' "`!'$ % % "`!'$ % % Merge % % %Prd%!!!>% Story %!!!>%QA %!!>% Branch %!!>%Dev%!!>% PR %!!!!!!#!!!!!>%Production% % % % % % % % % % % % % % % % &!!!( &!!!!!!!!!!( &!!!( &!!!!!!!!!!( &!!!( &#!!!!!!!!!( % &!!!!!!!!!!( )>Tests Pass % "!!!!!!!!!!$ )>Approval % % .feature % &>Canary for UAT &!!!!!>% static % % site % &!!!!!!!!!!(
  13. .!. .!. ( ) "!!!!!!!!#!$ ( ) "`!'$ % &!'

    Validate "`!'$ %QA %!#!>% Bug %!!!!!!!!!!>%Prd%<$ % % % % % % % % &!!!( % &!!!!!!!!!!( &!!!( % % .!. % % "!!!!!!!!!!$ ( ) "!!!!!!!!!!$ "!!!!!!!!!!$ % % % "`!'$ % % Merge % % &!>% Branch %!!>%Dev%!!>% PR %!!!!!!#!!!!!>%Production% % % % % % % % % % &!!!!!!!!!!( &!!!( &#!!!!!!!!!( % &!!!!!!!!!!( )>Tests Pass % "!!!!!!!!!!$ )>Approval % % .feature % &>Canary for UAT &!!!!!>% static % % site % &!!!!!!!!!!(
  14. !""""""""""# !""""""""""# .". $ new $ parse .feature(s) $ Static

    $ $( )$wow! $ .feature $"""""""""""""""""""">$ Site $ $!`"'#$ $ test $ $Generator $ %&Prd'( %""""""""""(!""""""""""# %""""""""""( $ $ $ $ Cypress $ $ %"""( '"""">$Dashboard $<""""# $ $ $ $ $ $ ▼ $ $ %""""""""""( $ !""""")# !"""""""# $ !""""""""""# $read $ %& rsync $ s3 $ $ $ Visual $ '"""""$output$"""""">$bucket $ %"""">$Regression$<""""( $ $ $ serve $ $ $ %""""""( %"""""""( %""""""""""(
  15. CONS ▸ Abstracting tests from code ▸ Lack of IDE

    tooling ▸ Lots of tests make for slow builds ▸ BDD Is hard
  16. PROS ▸ Product owners write the tests and see the

    whole pipeline ▸ QA moves to the front of the pipeline ▸ Devs have less tests to write ▸ Less risk with deployments
  17. LIVE TECH DEMO!"#

  18. THANKS GITHUB.COM/CSI-LK/CYPRESS-GWT-EXAMPLE ❤ CALLUM SILCOCK