Cypress: Where Automated UI Testing Isn't Just for QA · 2019-06-14 · Jill Manager Bob QA...

Justin JamesJustin JamesJustin James

Cypress: Where

Automated UI

Testing Isn't

Just for QA

JillManager

KatieDeveloper

BobQA

Acme Consulting

BillClient

World class coffee

1 day

1 day

after another bad release

1 day

after another bad release

Jill gets a call

BillClient

JillManager

taking too long to deliver!

JillManager

BillClient

you have too many bugs!

JillManager

BillClient

I am losing money!!!

oh no! we are so sorry!

JillManager

BillClient

I will get this fixed

JillManager

BobQA

KatieDeveloper

houston, we havea problem!

JillManager

BobQA

KatieDeveloper

Bill is angry!

JillManager

BobQA

KatieDeveloper

we are taking

too long!

JillManager

BobQA

KatieDeveloper

we have too

many bugs!

JillManager

BobQA

KatieDeveloper

we need to

fix this ASAP!

JillManager

BobQA

KatieDeveloper

why is stuff escaping QA?

we are doing the best we can

JillManager

BobQA

KatieDeveloper

we havelimited resources!!!

JillManager

BobQA

KatieDeveloper

takes days JUST totest happy path

JillManager

BobQA

KatieDeveloper

developers needs to test better!

JillManager

BobQA

KatieDeveloper

woah, Bob!!

JillManager

BobQA

KatieDeveloper

we are testing

as much as we can

JillManager

BobQA

KatieDeveloper

we are just as constrained!

JillManager

BobQA

KatieDeveloper

can we automate the testing?

maybe!

JillManager

BobQA

KatieDeveloper

IF

we can find a tool

JillManager

BobQA

KatieDeveloper

ISN'Tdeveloper focused

JillManager

BobQA

KatieDeveloper

DOESN'Tcreate brittle tests

JillManager

BobQA

KatieDeveloper

ISN'Tslow to create tests

JillManager

BobQA

KatieDeveloper

ISN'T slow to run tests

JillManager

BobQA

KatieDeveloper

so far we haven't found anything

JillManager

BobQA

KatieDeveloper

Bob, we might be able to help

JillManager

BobQA

KatieDeveloper

been hearing a lot about Cypress

JillManager

BobQA

KatieDeveloper

they tout it as faster

JillManager

BobQA

KatieDeveloper

brittle resistant

JillManager

BobQA

KatieDeveloper

and easy to create tests

JillManager

BobQA

KatieDeveloper

however, automating tests,

will take longer

JillManager

BobQA

KatieDeveloper

but,will reduce QA time

JillManager

BobQA

KatieDeveloper

while,

increasing confidence in our releases

JillManager

BobQA

KatieDeveloper

BUUUUTTTT,what will I do!!

JillManager

BobQA

KatieDeveloper

I LIKE and NEED my job

JillManager

BobQA

KatieDeveloper

there will be plentyof work for you

JillManager

BobQA

KatieDeveloper

stress testing

JillManager

BobQA

KatieDeveloper

exception testing

JillManager

BobQA

KatieDeveloper

security testing

JillManager

BobQA

KatieDeveloper

accessibility testing

JillManager

BobQA

KatieDeveloper

using UI in weird and unexpected ways

JillManager

BobQA

KatieDeveloper

writing tests

JillManager

BobQA

KatieDeveloper

that is a lot of work ☺

JillManager

BobQA

KatieDeveloper

Jill,we need you

to give us time

JillManager

BobQA

KatieDeveloper

done!

JillManager

BobQA

KatieDeveloper

lets do this

before we lose Bill

Let Your Nerd Be Heard

Who Am I?

Testing

Pyramid

UI

Testing

Pyramid

DEMO TIME

some things you can do

Things to Do

<><>

cy.visit('/unknown').location('pathname').should('eq', '/unknown');

Visit Url And Verify Path

<><>

cy.get('.addBtn').should('contain', 'Add');

Get Element

<><>

cy.get('[data-cy="addBtn"]')

Get Element With Data-Cy Attribute

<><>

cy.get('[data-cy="addBtn"]').click();

Click Element

<><>

cy.get('[data-cy="todoInput"]').type('Todo Test Item');

Type Into Input Field

<><>

cy.get('[data-cy="todoInput"]').type('Todo Test Item{enter}');

Type Into Input Field

<><>

cy.get('[data-cy="todoInput"]').clear();

Clear Input Field

<><>

cy.get('[data-cy="todoItems').should('have.length', 2);

Check Length Of Elements

<><>

cy.get('[data-cy="todoItems"]:first')

cy.get('[data-cy="todoItems"]').eq(1)

Get Element By Position

<><>

cy.get('[data-cy="leftMenu"]:first').should('have.attr', 'href').and('include', '/unknown');

Verify Href Value

<><>

cy.get('[data-cy="emailValidation"]').should('be.visible')

Element Visible

<><>

cy.get('[data-cy="emailValidation"]').should('not.be.visible')

Element Not Visible

<><>

cy.get('[data-cy="signupBtn"]').should('not.be.disabled');

Element Enabled

<><>

cy.get('[data-cy="signupBtn"').should('be.disabled');

Element Disabled

<><>

cy.server();cy.route({

url: '/user/identity',status: 200,method: 'GET',response: {},

}).as('identity');

Mock XHR Response

<><>

cy.wait('@identity');

Wait For XHR Call

DEMO TIME

How Do I Get Started?

<>

{"viewportWidth": 1000,"viewportHeight": 600,"baseUrl": "http://localhost:4200","blacklistHosts": ["*fonts.googleapis.com"]

}

Configure View Port Size

<><>

cy.percySnapshot();

cy.percySnapshot('Screenshot Name');

Take Screenshot

DEMO TIME

<><>

cy.visit('/unknown');

cy.injectAxe();

cy.checkA11y();

Accessibility Testing using Axe

<><>

cy.visit('/unknown');

cy.injectAxe();

cy.checkA11y();

Accessibility Testing using Axe

<><>

cy.visit('/unknown');

cy.injectAxe();

cy.checkA11y();

Accessibility Testing using Axe

<><>

cy.visit('/unknown');

cy.injectAxe();

cy.checkA11y();

Accessibility Testing using Axe

DEMO TIME

CI/CD For The Win

Process

Cypress and Angular DevOps Tutorial

Tomorrow

Additional Resources

Connecting After PresentationConnecting After Presentation