Using Given / When / Then with Cypress

by Callum Silcock

Slide 1

Slide 1 text

HOW TO GET YOUR PRODUCT OWNERS TO WRITE YOUR FUNCTIONAL TESTS AKA USING GIVEN / WHEN / THEN WITH CYPRESS !"

Slide 2

Slide 2 text

WHO ARE YOU? CALLUM SILCOCK FRONTEND PLATFORM ENGINEER @ ATTEST (CONTRACT) HTTPS://CSI.LK || GITHUB.COM/CSI-LK

Slide 3

Slide 3 text

! "dartah" = data "rehpo" = repo

Slide 4

Slide 4 text

WHAT ARE WE TRYING TO SOLVE?

Slide 5

Slide 5 text

.!. .!. .!. ( ) "!!!!!!!!#!$ ( ) "!!!!!!!!!!$ "!!!!!!!!!!$ "!!!!!!!!!!$ ( ) "!!!!!!!!!!$ "`!'$ % Ticket&!' "`!'$ % % % % Merge % QA % "`!'$ Promote % % %Prd%!!!>% Story %!!!>%Dev%!!>% Branch %!!>% PR %!!!!!!>% STG %!!>%QA %!!!!!!!!>%Production% % % % Bug % % % % % % % % UAT % % % % % &!!!( &!!!!!!!!!!( &!!!( &!!!!!!!!!!( !!!!!!!!!( &!!!!!!!!!!( &!!!( &!!!!!!!!!!( )>Tests Pass &>Approval

Slide 6

Slide 6 text

describe('logging in', () => { it('logs in, () => { cy.visit('http://localhost:3000/login'); cy.get('email').type('[email protected]'); cy.get('password').type('hunter2'); cy.get('input[type="button"]').click(); cy.url().should('be', 'http://localhost:3000/dashboard'); }); });

Slide 7

Slide 7 text

Feature: Testing Ewww regression Scenario: Lack of automation Given I am a Frontend Developer When I am forced to manually test Then kill me

Slide 8

Slide 8 text

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 "[email protected]" And I input my "password" as "hunter2" And I click the "login" button Then I should be on the "dashboard" page

Slide 9

Slide 9 text

# 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()}`) })

Slide 10

Slide 10 text

{ setAuthentication(true) history.push("/dashboard") }} > Log In

Slide 11

Slide 11 text

// 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"

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

!""""""""""# !""""""""""# .". $ new $ parse .feature(s) $ Static $ $( )$wow! $ .feature $"""""""""""""""""""">$ Site $ $!`"'#$ $ test $ $Generator $ %&Prd'( %""""""""""(!""""""""""# %""""""""""( $ $ $ $ Cypress $ $ %"""( '"""">$Dashboard $<""""# $ $ $ $ $ $ ▼ $ $ %""""""""""( $ !""""")# !"""""""# $ !""""""""""# $read $ %& rsync $ s3 $ $ $ Visual $ '"""""$output$"""""">$bucket $ %"""">$Regression$<""""( $ $ $ serve $ $ $ %""""""( %"""""""( %""""""""""(

Slide 15

Slide 15 text

CONS ▸ Abstracting tests from code ▸ Lack of IDE tooling ▸ Lots of tests make for slow builds ▸ BDD Is hard

Slide 16

Slide 16 text

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