Will
introduce us to end-to-endtesting using Cypress.
Good.
He's a developed advocate atand former programmer analyst
at the University of Missouri.
And even got it wide, I think, and theweb application accessibility evangelist.
And he does the software instructionand presents all over the place.
And if he stops, you got free coffee.
Yeah, that's right.
Okay,
off you go.
Perfect.
So, as he said, my name is Paul andI'm a developer advocate with, if
you're not familiar with us, uh, weare a cloud application platform.
We remove the complexities of cloudinfrastructure management different than
Carl showed this morning and differently.
Uh, so you can stop finding andworrying about infrastructure.
Instead, focus on building outthe next big, amazing thing.
So whether it's one side or a thousand,whether it's Drupal or WordPress, or
Jengo, or Strap, whatever you need torun, you can run all of them in one
central location no matter the size.
But that's not why we're here.
We're talking about Indian testing,but we can also play crucial
role in your end to end test.
So I will warn you out a lot of contentto cover so we can go pretty fast.
I do know it's right after lunch,you're gonna be sleepy, so I'll also
try to be as entertaining as possibleto make sure that you don't fall asleep.
But I do have some goals for us by, ofthe presentation, I'd like for you to be
able to define what end-to-end testing is.
Be able to recall at least onebenefit of adding into end testing
into your workflow processes.
Uh, at least understand how tounder understand how to understand.
How to install, configure, set up andwrite your first test using Cyprus,
which is a testing framework each,and then have a foundational base to
have a good idea how to write thatsecond, that third and fourth test.
Now, how many of you have needed to builda new feature in Word Trust or in inside?
Right?
How would you go test that?
The feature you just wrote isworking the way you expected.
What's that?
Just shout it out.
It's fine.
Manually, right?
You'd probably go in and you'dlog in, or it's a login feature.
You log in, you would navigate towhere you need to go do something
and then verify that the applicationresponded in the way you end up.
Right.
Well, that's all end-to-end testingreally is it Is testing the application
from the user's perspective.
In totality, we are going to walk throughthe application and try to mimic a real
user in a production-like environment sothat we can verify that what we wrote.
The application is working theway that we anticipate now, it is
a little bit different than otherforms of automated testing, so you've
probably done some unit testing.
If you follow a test driven developmentphilosophy where you write the test,
then you write the code, and you'reconstantly running those tests right as
you write the code to get a final pass.
And so it's at the bottom of the testingpyramid because we do those locally.
We do those all the time, right?
We do those as we develop.
From there, we move into integrationtesting, where we begin testing our code
pieces with maybe other code pieces orour code with third party dependencies
or our code with external services.
We do fewer of those because thosetake more work and effort involved
to get an isolated environment wherewe can test those integrations.
And then at the top we do fewerend-to-end testing because
they are a bit more complex.
Um, it says expensive because you oftenhave to have a separate environment
set up with a web server, a databaseserver, and Redis, and whatever
services you've got in order to mimicthat production-like environment.
And if you have a third partyservice, you're interacting with, if
and when those third party serviceschange, you have to update your test.
Accordingly.
So a little bit more complex,which is usually why we do
a little bit fewer of those.
However, they bring amassive wealth of advantages.
Now it says quality assurance.
Don't think of quality assurance froma code aspect, but think of quality
assurance from a user experience aspect.
Because we are testing the interface,we're testing the entire application
in totality as the user would use it.
So we can ensure with a high levelof confidence when these tests
pass that the user experience.
Hasn't digressed or we haven'tintroduced a bug into production, that
is negatively gonna affect that end user.
With that in mind, because we canrun these things before we merge to
production, there's a higher levelchance that you're gonna identify
or find those regressions in yourapplication that are very hard to.
Find those things that simply don'tsurface themselves until the application
is truly interacting with all thedifferent pieces and parts in place.
And if we can find them before weintroduce them to into production,
it is far cheaper to fix them beforethey hit production than to have
it out there inter or interferingwith your users and then trying to.
Fast, do a hot fix.
Uh, the last is you can alignthese with business requirements.
So if you're getting a new featurerequest, you can go ahead and
begin to write the test to matchthe feature request and have
the customer sign off on those.
And then as you develop that code, onceyou get those passing, you know that you
have met those business requirements.
Alright.
Now there's lots ofdifferent testing frameworks.
Cyprus is not the only one.
There's playwright and puppeteerand just a bunch of them, right.
Uh, Gutenberg used to useCyprus back in, I think, 2019.
Then they moved to Puppeteer,which is backed by Google.
I think they're now on playwright,which is backed by Microsoft.
Which one you choose is fine.
The concepts, the ideaswe're gonna talk about.
Go across all of them.
Just the specifics in how you set upthe tests are gonna be different now.
I chose Cyprus, as you mentioned.
I worked at a university, I'veworked there for 21 years.
I managed 400 plus WordPress websites.
Had to automate all of them and manage'em with an incredibly small team.
And so I had a real.
Uh, appreciation for those toolsthat gave you a fantastic developer
experience and that I could dependon for three to 5, 6, 7 years.
Not every eight, you know, not changingmy tooling every 18 months 'cause
we simply didn't have the budget.
So that's why I chose Cypress because theyhave a phenomenal developer experience.
Their whole philosophy is theywant to get you as a developer.
From installation to firsttest as fast as possible.
They want to get you intotesting as quickly as they can.
So it is an open source frameworkfor open or for end, end testing.
It's open source with anoptional SaaS product.
Um, it is different inthat it uses electron.
It's an electron app, not Selenium.
So they embed your web applicationinside of their testing electron
app, which means it's really fast.
That's why they're able to do thatsetup, that configuration so quickly
is 'cause you don't have to dealwith Selenium and then trying to
interface with different browsers andthen they offer a bunch of niceties.
Things like time travel andtest replay where you can go
back to a test and replay it.
But not just that, you can actually walkbackwards and forwards in time in each
of the steps and see not just how yourapplication changes, but also how you,
if you do any logging to the console,you can walk forward and backwards
and see how those log messages change.
Uh, it also offers auto waiting.
So as you request a page or an endpointor request a dom element, it's gonna
sit there and keep trying until iteither time's out or it finally passes.
And then a very robust set of toolsfor controlling network traffic.
Uh, so you can interceptany request to any endpoint.
Catch it, manipulate the data, letit go on, catch it on the way back,
manipulate it, send it on, or you cancatch it and then send back fake data.
If you have like a third party servicethat doesn't have a sandbox or development
area, or you can actually run thesetests, are you ready to install it?
Yeah, I know you're all sleepy there.
You're gonna see some heads.
Okay, there we go.
So let's install it.
As long as you have node, it is simpleas an installing an MPM package.
So let's go ahead and do that.
So say MPM, install Cypress.
It's gonna go ahead and download itsdependencies, its packages, and build out
the site, the Cypress, the Electron app,based on your particular operating system.
So that's really it.
That's all you have to do to get thatalready installed into your workflow.
Next thing we neededto do is configure it.
To configure it.
We just open it up andit'll auto configure itself.
So let's do NPX Cypress Open.
There it goes.
It brings up that electron app and says,Hey, you don't have any configuration.
Let's get that started.
What do you wanna do?
You wanna do end to testingor component testing?
While we're doing intents,let's go ahead and click that.
It will go ahead then and writeall the configuration files
it needs in the background.
So now I'm already ready to go aheadand start launching some tests.
So, let's say continue.
It does support most browsers.
The only one it seems tobe still missing is Safari.
But since I'm running in Chrome, mypresentation, I'm gonna use Firefox today.
So let's go ahead and bring upthe testing interface in Firefox.
There we go.
Perfect.
Now, just like with the configuration,it came up and it says, all right,
you don't have any testing files.
They call 'em spec files.
You don't have any testing files.
So let's go ahead and get you started.
Let's create a new one.
I'll go ahead and create this oneas first so we can find it easy.
I'll say create that fileand in the background.
Inside my Cypress directory,inside an end-to-end.
It has created that first testing file.
You are a tough audience.
Like you're like nodding.
Yeah.
Yeah, right.
Like I mean how many other devtools do you know that like from
first install to first test, likesets it up for you that fast?
Right now it's not doing much right now.
Right.
So I'm gonna go ahead, I'mgonna change this just so we can
find it later a little easier.
See if I can actually grab that.
I'm gonna call this homepageso we can identify this.
I will save that.
Come back out to our testing.
Let's go ahead and run that.
And there we go.
And now in this case, noticewhere did my mouse go?
Hello.
There's my mouse.
Notice there's that homepagedescriptor that I just changed.
So this is running thattest we just set up.
Now, it's not doing awhole lot yet, right?
It's just gone out to someplace.
So I will mention real quickthat I have a production website
set up for Word Camp Canada.
'cause I happen to love this little WaPo.
So I set one up.
I'm also running thissite locally in D Dev.
Seem I familiar with D Dev and Iknow you mentioned it yesterday.
Paul, good Capital?
No, so it's a localdevelopment environment.
I happen to really like it becauseit doesn't just do WordPress can
do any PHP stack, it can do Pythonstacks, can do all different kinds.
In addition, we have ups.
Sun has an integration with it whereit can read my Upson configuration
files and set up D Dev and also allowme to pull down any of my environment.
So I can clone my productionenvironment locally with all the exact
parameters that I have in production.
So I can begin testing locally thatmimics that production environment.
So I've got this running.
I'm gonna go ahead and grab thataddress, and I'm gonna put that
into our code where we're visitingso that we can see that site.
Live, so let's come back.
Oh, and notice that it is also watching,just like any other kind of watch,
it's watching our test and it's gonnarerun them as soon as I make a change.
So now I've got my site insideof the testing tool, and now
I can begin testing my site.
So I'm gonna go back and I'm gonna dissectsome of these pieces and parts so we
know exactly what I'm talking about.
We come back to my presentation here.
There we go.
There's our first test.
Let's dissect this, thatdescribe piece that you saw me
manipulate to change the homepage.
It's called a describe block in Cyprus.
It is simply a way to categorize yourtests, takes two parameters, a title
that you wanna have, show up in thetesting tool, and then a callback
function where you can put your test.
Or further describeblocks so you can nest.
Describes again to capcategorize your different tests.
Inside of that, I said you can put a test.
So the IT block is whereyou put your tests.
It contains, again, two parameters,a title that you wanna have, show up
for the test to describe what the testis doing, and then another callback.
So if we're testing web applications,what's the first thing we
probably need to do in a test?
Just a page load.
Get the page to load, right?
We need to visit.
So you might have noticed that we wereusing something called side do visit.
Side visit is how we instructthe testing tool to visit some
endpoint or visit some webpage.
Now it does default to a getrequest, but they've already
set it up to follow redirects.
It'll keep following any of thoseredirects until it gets to a 200 response.
Once it gets to that 200 response, it'llcontinue to wait until the page itself.
Fires off a load of it oruntil it reaches some time out.
Now, if I wanted to verify that this pageis correct, in other words, I definitely
didn't get a white screen of death.
It's not something else.
What's something?
I could check?
Title.
The title, right?
So let's go add that.
Perfect.
Thank you.
So I'm gonna go and I'mgonna use something.
See, I can scroll over here a little bit.
I'm gonna use something called si dot get.
And we're gonna grab the title.
Let me flip back over to mypresentation and talk about OC get.
OC GET is very similar to jQueryin that you are asking for some
DOM element inside the dom.
It is going to retrieve those basedon selectors, very similar to jQuery.
And then it's going to yield those DomsBeck next, excuse me, yield those DOM
elements to the next thing in the chain.
Now you can't do chained side dot gets.
That's important.
So it's always gonna search for those doelements from the side dot route, which
almost always is also the document route.
So I can't say side dot, get a div with anID of Maine and then do another side dot
get that looks for things inside of Maine.
There are ways to do that, whichyou can't do that with this.
So this is always gonna startfrom the root and it's also
gonna do that auto weight.
It's gonna continuously try toget this dom element until it
either exists or it times out.
All right, so we've gotten the title.
Now what do we need to do?
Check your letter.
Check it for, correct the correct title.
Right?
So in that case, we're gonna useShould, should is what creates
our validation or our assertions.
It uses chai.
Which is a test driven development,behavior driven development.
That's a longs of words, uh,assertion library, which lets us
use natural language, plain languageto describe what we're looking for.
So in this case, I'll come backover and I'll say, this should
contain, I'll just use that one.
Welcome to, I don't know whatit defaulted to, but let's see.
So I ran that app and what did we get?
Oops.
I point it here, I point it here.
Where?
Oh, that's the wrong thing.
What did we get up there next to passes?
We got a what?
It failed, right?
Because that's not what the title is.
What is the title?
Oops.
Wrong screen.
What's the title?
Come back over.
What's the title?
Word cam.
Word Cam Canada.
Right.
So lemme come back inhere and change that.
So word, whoops.
Too far as the one downside of biggerfonts is, I can't type it all out.
Word Camp Canada.
Now, let's see what happens.
And now what do I get up here?
So where is it?
There I go.
Success.
I got a I, I'm colorblind by the way.
I think that's green.
Is that a green check?
We got a green check, which means then.
You have successfullycompleted your first test.
Yay.
Yeah, you did.
That's your first test.
Now I obviously, that'snot the best test, right?
That's not a little complex or complicatedtest, and I don't know about you, but
the hardest part for me when learningthese new tools or learning a new thing.
Is getting it installed, getting itconfigured, getting it set up and
getting it to do something besideshello world, like something of value.
And so I wanted to make sure you getat least to that point, and I think
that's why Cyrus is really good,because I've done a very good job
of getting you to that first thing.
Because once you've got that ingrainedinto your workflow with at least one
test, how much easier is the second test?
Yeah, that much easier, right?
'cause you've already got it set up.
You've already got it configured.
You, you've seen how atleast some of the parts work.
So let's talk aboutstrategies for second tests.
The hardest part about testing isjust figuring out what to test.
Like it's a little overwhelming.
You're like, I mean, what do I test?
So my suggestion is, the next time youfind a bug in production, write down the
steps that it takes to replicate the book.
Write down every littlething you gotta do.
Now go fix it.
Write down all the steps you'regonna take to go verify you fixed
it, make sure they're the same.
And then begin creating, convertingthose into steps and assertions.
And now you suddenly have a second testthat you can run on a regular basis
to ensure that never happens again.
Or if you're asked to do a newfeature, ask you earlier, how
would you verify that feature?
Well, you'd manually do it,do the same thing, write down
all the little steps you take.
Write down how you'reverifying that it's correct.
Convert those and add that in asa second as part of your process
and just build, iterate on thatjust like you would with any code.
Um, I've got this at the bottom.
This is kind of important and that's testthe happy paths and the unhappy paths.
If you haven't heard of Unhappy Paths,we are thinking in terms of like
testing the login form a happy path.
What I would be a user puts in ausername and password that are correct.
And they get to the adminscreen, and that's a happy path.
An unhappy path is they put in anincorrect username and password.
Where do they go?
Error page.
An error page, or back to the loginform with an error or something.
Right.
So they didn't go in the correctdirection, but we definitely
wanna make sure the application isstill performing correctly, right?
They put in the wrong passwordand still got to the admin screen.
Well, that's not right.
So we want to test thoseunhappy paths as well.
Now, every test should do three things.
I'm gonna come back to thefirst one a couple of times.
With that set up the application state,you need to set up your application to be
able to perform the test that you need.
Then you're gonna take all thoselittle steps, all those elections,
and then you're going to make anassertion or some kind of validation.
It's often referred to as a range, soarrange your application, perform your
actions, and then make assertions,or you might see it as given when.
Then.
So given I'm an anonymous userwhen I visit the homepage, then the
title should be Word Camp candidate.
Number one from this up, the the setupapplication is important because you
want to make sure that you can run all ofyour tests independently from each other.
So one reason Paul mentionedin his talk, right?
These are more complicated tests to run.
They take a little bit longer to perform,so you might wanna run them in parallel.
So we need to be able to runany of these tests individually.
The other thing is you neverwant a test to be dependent on a
previous test, because what if thatprevious test passes incorrectly?
In other words, your test was bad.
But it passed, but the application leftsome state that you didn't want, and
now it's gonna negatively affect thosedownstream of the those other tests.
So we wanna make sure we're always settingup state ahead of time before we run those
tests, and that every test is siloed.
Are you ready to write a second test?
Yep.
Oh, thank you.
Thank you.
Got some enthusiasm.
All right, let's write a second test.
I'm gonna come in here.
We'll create a whole brand new file.
And I'll say second.
Do si And in this one I'll say, uh,describe this will be maybe my off tests.
Off tests.
Oops.
And then we gotta have acallback, which I should have just
accepted, but that's all right.
And then we have to do what after.
Describe we have tovisit before the visit.
Get before the get.
Do an it.
We have to do an it.
We have to describe a test, right?
So I'm gonna say it.
Let's say a can off.
All right, so then wehave another callback.
Alright, now what do we have to do?
Oh, it's telling us we gotta visit, right?
All right, so ahead and visit, andI'm gonna come back just a little
bit so that we can go to the login.
Location.
So we're gonna test the login form.
Now, before I continue, has, cananybody identify an issue that I have
just created between these two tests?
Think in terms of abstraction.
Somebody said it duplicate in the domain.
Yeah, the URL is hard coded, right.
Oh yeah.
Yeah.
And that is currently pointingto my local running instance.
What if I wanna run this in a developmentenvironment or a PR environment, right?
So we wanna make sure we're riding ourtest to be environmentally agnostic.
It doesn't shouldn't matterwhere the tests are running.
We want to be able to run them anywhere.
So we need to talk aboutsome configuration back in
that configuration file.
That Cypress created, we have the abilityto add in additional configuration
values and environmental values.
One of those, which is the base, URLbase, URL, allows you to define A URL that
you want to visit, and then it will prepin it to any calls to Sdot visitor sdot
requests that are relative URLs, whichmeans then I can create my test using
those relative URLs, and then it doesn'tmatter where I run them, I simply have to.
Add that base URL configurationto that specific environment.
So I'm gonna go ahead and do that.
I'm back in here.
I'll open up SI config and Iwill say my base URL is going.
I'll just leave it as local host.
So let's pretend everybody elsein my company uses local host.
I'm the oddball on D Dev, so we haveto talk about environmental processing.
So Cypress has done a really good jobof creating a ca, oh, this is gonna
crash by the way, 'cause I changedit and that place does not exist.
So I'm gonna close out Cypress here.
Sorry.
There we go.
And it's close Cypress.
They've done a very good job ofenvironmental variable processing with
a cascading style, meaning that incypress config we can define things.
Then we can create a side M filethat overrides any of those.
So I could have like a local one.
Then in your environment where it'srunning, if there are environment
variables defined that start withCyprus, uppercase underscore,
and then the variable name, it'lloverride any of the other two.
Or when you open Cyprus, you can pass inconfiguration values to override any of
the others, or it's not even on the slide.
You can, in an individual test overrideany of those others, meaning now you
can set this up to run your local test.
You can run 'em in stagingdevelopment anywhere you need
to and be completely agnostic.
So I'm gonna come back inhere and I'll say, let's do an
export of Cypress Space URL.
So I'll set mine to that D Devlocation, even though the configuration
file is set to local host.
Now let's do NPX start our NPX open.
Excuse me,
we're doing that end to end testing.
We're gonna do it in Firefox.
Come on, on Firefox.
There we go.
There's my second test.
We'll run that.
And do we get to the login page?
You are a tough audience.
Yeah.
All right.
There we go.
Okay.
Okay, so now we wanna test this form.
What's the next thing we need to do?
What's that?
Put in some data, right?
Yeah.
So we need to put information intothe username and the password.
So I'm gonna use whatto get a dom element.
I. I'm gonna use an ID with what?
Function?
Get, get the, decide get.
So notice this is your application.
You can inspect it just like you could ifyou were running it in another browser.
All right, so thisone's called user login.
So I'm gonna come back intoour test and I will say, so you
might scroll over just a bit.
I'll say Side dot get.
And that one was user.
What was that?
User login I said.
Log in.
Oh darn.
Don't want that.
Nor there.
I want that.
Okay.
I don't want that.
It keeps adding more than I want.
Now I will suggest to do a clearbefore you do any typing, um,
because if you have placeholdertext, if something else is still in
there, we just wanna clear that out.
It also seems to make the typing worka little better for some weird reason.
So I'm gonna do a type, and I'mgonna say maybe this is gonna be Bob.
So let's see that run.
All right.
The next thing I need todo is the password, right?
So I'll do another side, do get side get.
This is not user login, but I will comeback and let it complete and do pass.
Don't wanna do a click, but let'sdo a clear and we'll type password.
Looks good to me.
There we go.
And then what's the lastthing we need to do?
I heard a couple things.
I heard enter, I heard click.
Yeah, we got, we got options.
We can do lots of things.
So one thing you can do is youcan use the curly braces and use
a token to stand for key presses.
Wanna do there?
That works.
If you don't like that, we could goahead and do a click of that other
dom element so I could dos, click.
Um, let's see.
I think that one is called WP Submit.
WP submit.
Uh, whoop, not submitting.
Feel free to warn me if I mistypeand we don't want to clear a
password or anything like that.
We wanna do a click.
Let's, let's do click and let'srun that and ta All right.
Good.
Okay, so the next thing is Idon't actually have a Bob user.
I need a Bob user.
So we need to talk about state.
I mentioned state a couple of times.
We need to manage thestate of our application.
In this case, I need a user in orderto be able to test the functionality.
There are a couple ofways that we can do this.
The first is to stub out all data.
It's fast, it's easy.
Uh, you may have seenthat fixtures directory.
That's where you put all that.
Fake data is in the fixtures.
Uh, so if you see it referred to asrequires fixtures, that's what that means.
Um, it's nice because we don't have tohave another environment, we don't have
to have a web server, database, et cetera.
But it's not really an end-to-end test.
We're not really gonna surface those oddissues unless we, you know, just stub out
everything and that's gonna be complex.
The second way we can manage stateis like with a static user, so
I could create the user and thenreuse that user all the time.
And that's good 'cause it'sa real end-to-end test.
But it does require that I set up asecond server environment with a database.
I'm gonna have to seed the database.
I mean, they're gonna have to exportfrom something else and import or have a
SQL file ready to go that I can ingest.
The downside, especially in somethinglike WordPress is as you use a
user, what happens to that user?
Let me rephrase that.
What happens to the informationsurrounding that user internally?
It changes.
It changes, right?
It stores stuff, right?
And so you end up sharing that state,you, you have state mutations, dangling
state, uh, and so it could negativelyIM impact or affect those other tests.
So the last type is to use dynamicstate where you are going to.
Delete the user.
Add the user.
Run your test, delete the user.
You're going to dynamicallycreate the state every time.
Now, that is more complex, right?
'cause you're gonna have todo a setup and a tear down.
That could be, maybe you do animport of the database and then you
wipe it and then do another import.
However you need to do.
But you're gonna have to dosomething to like reset it.
It is also gonna be a little bit more slowbecause you're gonna have to perform all
those actions before you run the test.
For today, I'm gonna go with number two.
I'm gonna do a static user, so I'm gonnatell D Dev to create a new user for me.
So I'm gonna create a user Bobby two.
So it's just d dev exec, run wp, theW-P-C-L-I inside Create me a user.
Come on D Dev, run.
There we go.
So I'm gonna grab that password.
And then I'm gonna come back into mytest and I'll change this to Bobby too,
and I'll change this to the password.
All right.
Is anybody cringing?
Should you be cringing?
Yeah.
What did I just do?
You store the password?
I store the password inplain text in a file.
Do we want to do that?
No, no, we don't wanna do that.
Okay.
So what we're gonna use insteadare those environment variables.
So I'm gonna come back in here and cometo the end of, let's see, end of there.
There we go.
I'm gonna say, all right, Ineed some environment variables.
Oops, back up here.
So I'm gonna create a couple, I'm gonnacreate one called TU for test user, 'cause
I don't wanna have to type out anymore.
And I'll make it Bobby.
And then I'll create anotherone called TUP for the password.
We'll call that one password.
Back in here.
I need to close out my Cypress'cause we're gonna have to rerun.
Yes.
Close.
Let's kill you out.
And because of thatprocessing, what can I do?
'cause of that environmental processing.
What can I do?
Set an environment variable.
I can set environment variables rightnow to tell Cypress that we want
to use those environment variables.
I'm gonna come back in here and wipethis out and say access the Cyprus.
Application and use its environmentvariable and grab the environment
variable that is defined for.
In this case, tu, and I'll dothe same thing for the password.
I'll say Cypress NV password,but that is gonna be TUP.
So if I were to run those now,those would've grabbed the
ones I defined in the config.
Instead, I'm gonna say.
NPX Cypress open and I'm gonna saypass in the environment variables.
TU is BOBBY two and the TU is apassword from previous iterations.
So put in the new one.
Let's tell it to run
ready.
It is into test.
We are going to launch Firefox.
We are going to go to our second test.
Second test.
We're gonna later run.
Put in Bobby two andthe password and ta yay.
All right.
Now how do I, Val, we haven'tgot to the validation yet.
How do I validate that this is correct?
What's that?
Check the UR could check the URLDownside of checking the URLs.
If I started from maybe a differentlocation that redirected me there.
I've got that URL parameter thatsends me back somewhere else.
What else can I do?
Check for a cookie.
We're gonna get there.
Oh, what about, Ooh, there it is.
What does that say?
That's the username, right?
All right, so I could grab this.
I could say, Hey, give me that value.
I'm sorry if this is too small to see, butI can grab that admin bar so I can come
back now in my test and say, all right.
Side dot, get this value, which is pound.
There we go.
And that should be what value shouldcontain that exact same thing.
Hopefully it came all the way over.
Oh, now go back.
Not a value of welcome, but Cyprus dot nvt. So let's rerun that and what do we get?
Yay.
We validated that.
Good.
Alright, we are ready thento write the next test.
So let's say the next test, whatwe want to do is we want to, maybe
they want to do a, uh, they needto be able to add a custom CPT.
Somebody's come back over.
I'm gonna add a new test down here.
So say.
It can add CPT, can add CPT, andlet's do that and let's go here.
Now, normally I would doside dot visit and then maybe
not that we don't want that.
Scroll over.
Let's say maybe this needs to be WP admin.
Edit.
And then normally I'd have like thepost type, you know, to go directly,
but we'll just leave it at this one.
Is this going to work?
Does anybody know?
No.
And the reason is because everytest, Cypress opens up an instance
of the browser in Incognitos, uh,private mode, whatever, and at the
end of the test, what does it do?
Destroys it.
So that means the second testdoesn't have any authentication.
So should I go back uphere and copy all of this?
Inform, oh, you know what?
I forgot to change that, didn't I?
Whoops.
Should I copy all this informationand paste it down in this next test?
No, no, no.
What?
No, I don't wanna do that.
Right?
I need to be able to reuse code, right?
We should always reuse code when we can.
Why are you not selecting?
So let's try this again, soat least let me copy this.
Instead, remember I mentioned itcreates a bunch of supporting files?
One of those files is a commands file,which lets you write your own commands.
So I can say, all right, Cypress commandsadd, and I can add my own custom commands.
So I could say, all right,well let's do WP Login.
It takes a name that you wantto use to call the function.
Then what does it take?
Probably.
Everything's a callback.
It all just uses callbacks all the time.
So now in here I can say I want to usemy code that I previously used, and if
I save that and rerun my test, don't,but wait, I forgot to add it, didn't I?
Oh ho.
Let's go back.
Where's my second test?
Oops, I forgot to add.
So let's get rid of that.
Let's say si dot.
WP login and let's addit into here as well.
SI WP login.
And now what happens?
And we get to the edit screen.
Yeah, right.
But what did I have todo in both of those?
Think that
I, I'd use it again, right?
And I'm still using, in that commandsfile, I'm still using those not
hard coded values, but I'm stillusing the environment values.
What if I want to test multiple users?
Parameters?
What's that?
Parameters.
Parameters, right?
So I can go up here and I can say, okay,this is gonna take a user and password.
Then in here, oh, I don't knowwhat I clicked on, but that's
not what I wanted in here.
I can remove this.
Uh, scroll over and say,no, let's use, oops.
Type the username that's passed in.
Take this one and let's use thepassword that's typed passed in.
Oops, hold on.
Let's just go this way.
Type password.
Then we can do our verificationusing that exact same username
as you're watching me here andlet's say user and now back,
oops, no, back in my test.
Then we can change that out to say Cyprus.
Hold on.
I'm not sure what I did there.
Come down Cyprus env.
Oops.
Wrong place.
Tu and Cypress dot env and TUP.
Oops.
I keep hitting the wrong keys today.
TUP, whoops.
And then I will copy that exactsame piece down to the second one.
I keep hitting some extra command there.
It is hard to do thiswhen my font is so big.
Goodness, where did I put that?
I'm in my commands.
I wanna be here.
Ah, there we go.
Okay, let's just do it this way.
Come down here.
Now let's run those tests.
Five minutes.
Oh, okay.
I'm gonna have to speed up.
Okay.
So wouldn't it be nice ifinstead, so we do two things.
Okay.
So this, hold on, just mademyself all freaked out, so I
had to copy that twice, right?
I do that two times.
I don't wanna do that.
I want to be as efficient as possible.
So just like WordPress, I'mGo ahead and cut this out.
Cypress gives you hooks.
One of those hooks is called a before.
Each hook before each allows you torun some command before each test.
So instead, I could put that thereand then remove it from here.
And now if I save it, my test still works.
All right, so now if you have somethingyou need to do every time, you can add
it in that location so that you're nothaving to replicate that every time.
Now, wouldn't it also be nice if insteadof having to manually go to the form every
time I wanna run a test, wouldn't it benice if I could simply restore a session?
Alright, so Cypressadded that in version 13.
Um, before that it was really hard.
To do this kind of thing, but they'vegiven us the ability to take a session,
save the session data, and thenrecall the session data at any point.
So I'll come back into my commands.
I will grab all of this.
I'm gonna put this inside si dosession and it takes a callback
'cause everything is a callback.
And then I'll put that in there,and then I'm going to give it an
ID of the user from my function orfrom my custom command up there.
So now when I run this test thefirst time, it says I've created,
I've cleared all the sessions Ineed to create a bobby session.
Expand that out.
There it goes.
So it's gonna create, it's gonna go aheadand follow the process of walking through
the form, but the second time we run this,it says, all right, I need a session.
I'm going to restore that session.
So now you don't have to actually do that.
Now I'm gonna speed up just a littlebit because I am running out of time.
I always do this.
Uh, some couple quick prac best practicesif you don't need to involve Chrome.
Or whatever browser, don'tprogrammatically, uh,
create your authentication.
And I've got an exampleof that, uh, over here.
So in here, that is not the right file.
I thought it was.
No, there it is.
I've got that same WP login, butinstead of involving Chrome and getting
elements and walking through the form,instead I'm just gonna do a post.
Two WP login, passing in thevalues and creating that session.
So just, just saves you some time.
Um, one piece or one downsideof using Cypress is you have to
adhere to their opinionation.
Is that a word?
I don't think that's a word.
It's an opinion Variated framework.
There we go.
Uh, so if you're a JavaScriptdeveloper, this piece is a little weird.
You can't save the informationthat is returned from a function
from a cypress function.
You can only use a closureor what they call aliases.
And so that can be a little jarring.
Uh, the other thing is, as I mentioned,make sure you set the state before
test begins, and then try not touse brittle selectors, meaning
that IDs, classes, parent childrelationships, those can all change.
So Cypress suggests data attributeswith some unique value that you
can set on all your elements.
Alright, who can define end 10 testing?
Sure.
Just yell it out.
Anybody, go ahead.
I wait to test our application.
Yeah.
Testing the whole application.
Right.
What's an advantage or abenefit of using end 10 testing?
Reduce cost.
Especially if you can catch those bugs andproblems before they get into production.
Do you feel comfortable installing,configuring and writing your
first test when you get back?
Yeah.
And feel pretty good about solidfoundations to write a second test.
Fantastic.
All right, so then I wanna showyou real quick in the last couple
of minutes, I have a real worldscenario of using this in production.
So, as I mentioned, I do have aWord Camp Canada website that I
have set up, and I also have a,uh, it's on GitHub in repository.
One of the nice things that I like aboutCyprus is they also have a GitHub action.
Do I have three minutes left?
Two minutes, one minute.
I have no minutes left.
Ah, the question.
Oh, I, that's alright.
I got one minute left.
Okay.
So they have an action.
It's well documented, well supported,which means that I can just pass in.
The URL for any environment that Ineed to test and have that run as
part of my C-I-D-C-I-C-D process.
UPSON also has an integrationwith GitHub, where when you create
a pr, it sends us that code.
We clone your production environmentinstantly adding that production, that
PR code to it, and then deploy it.
So that in this case is this piece.
So you can see that this is a clone.
Of my production site.
So then back in the test, in theCIDC process, I can pass in that
URL to Cyprus to run my test.
So in this case, youcan see that it failed.
Why did it fail?
Let's go look.
Says I've got five test pass.
Oh, four test pass, one failing.
Let me hit the summary.
I know I got one.
I'm hurry.
Hurry, we got one failure.
If you integrate your Cypresstesting in GitHub with the Cypress
Cloud, you can go view your failedtest and they do have a free tier.
So I can see down here the testthat failed was the editor can log
in and post, but they should alsobe able to delete their own post.
So if I run that replay, here it goes.
It looks like it was tryingto find the trash can icon and
notice oh yep, trash is missing.
So something that I've introduced hasmessed with the permissions in this,
uh, in whatever I was working on andhas broken the ability for a user to
delete their posts and that fails outthe PR and I know, hey, I can't intro,
I can't go ahead and merge this pr.
Cool.
All right.
I wanted to make sure you saw that.
Awesome.
All right.
I believe that is all the time I have.
So sorry about that.
I ran out.
We don't have time for questions, butfeel free to contact me at any point.
Uh, this should be a QR code in mylink tree or there it is over there.
It's just link dot or link t.ee/gizo.
I'm pretty much gizo like.
Everywhere and there's, there'slike 20 of us in the United States
and we're all related, so you'llprobably be able to find me if
you have any questions afterwards.
Awesome.
Thank
you very much.
Thank you.