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

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