Open Source isn't Just Good, it's Good Business - DrupalCamp Colorado 2014
Cypress: Where Automated UI Testing Isn't Just for QA · 2019-06-14 · Jill Manager Bob QA Katie...
Transcript of Cypress: Where Automated UI Testing Isn't Just for QA · 2019-06-14 · Jill Manager Bob QA Katie...
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