How'd you like to listen to dot net rocks with no ads? Easy?
Become a patron For just five dollars a month you get access to a private
RSS feed where all the shows have no ads. Twenty dollars a month will
get you that and a special dot net Rocks patron mug. Sign up now
at Patreon dot dot net rocks dot com. Hey Carlin Richard Here. As
you may have heard, NDC is back offering their incredible in person conferences around
the world, and we'd like to tell you about them. NDC Oslow will
be me twenty first through the twenty fifth. Go to NDC Oslo dot com
to register. NDC Copenhagen is happening August twenty seventh through the thirty first.
The early bird discount for NDC Copenhagen ends June second. Go to NDC Copenhagen
dot com for more information. NDC Porto is happening October sixteenth through the twentieth.
The early bird discount for dc Porto ends July twenty first. Go to
EDDC Porto dot calm to register and check out the full lineup of conferences at
NDC Conferences dot com. Hey, guess what it's Donn Rocks. Wow,
I'm Carl Franklin and I'm Richard Campbell. What do you know? Just happened
again? It's so strange. I know eighteen hundred and forty three times that
we've done this stupid show. I think it's that stupid. But you know,
it's not that I haven't done that many. I'm a slacker. I'm
the new guy. We were just talking about podcasts and the pod in podcast
I always have to explain to you know, and well, that's because there
are no iPods anymore, right, Like that product's gone. That's right,
that's what it stood for. It was iPods where the where the device of
the day. Yeah, it's just like you know, Microsoft had Channel nine,
which was based on United Airlines Channel nine, where if you're flying United
you could switch a Channel nine you could listen to. The United doesn't do
that anymore. So like nobody knows what Channel nine means. It's gone.
It's just funny. People people would say, hey, have you heard about
podcasts, and I say no, no, no idea. Really it's just
a little weird. All right, let's roll the crazy music for better no
framework awesome? All right, man, what do you go, all right,
well, I'm talking about the dot Net Show, which is a video
show that I do. It's presented by Devi Express, right, and it's
all about Maui right now. And I don't mean their tools, just general
Maui stuff. And I started building in zamorin Forms. I started building a
dot net rocks mobile podcasts in a podcast a client app right for iOS and
Android. And then when Maui came out, I started rebuilding it because there
was no converting it. That was just silly. Different approach, different approach,
different projects, structure and everything. So we just started over and we
got to four episodes on that and then the app doesn't really look all that
great right now, but it's functional, right, So I figured this is
the time to start the process of publishing to the app store. What is
involved, you know, of moving parts, lots of moving parts, And
I realized that I'll be an update hell forever. Yeah, but you got
to start somewhere. So this, you know, this is episode eighteen forty
three. So if you get eighteen forty three popped up me, that'll bring
you to a YouTube video where I go and register yes, brand new accounts
in Google Play you know, a Google developer and in Apple developer through the
two app stores. Yeah, the two app stores. So I'm starting from
scratch, and both of them require a waiting period where you have to get
approved, and so the following week then we'll pick up where we left off.
We're just going to go through the entire process, warts and all.
Yeah, get right through it until you see your thing appear in the store
and exactly and then start looking at updating it and how much fun that is.
Absolutely I can't wait for that. That's going to be the show,
right, Okay, you've published it well? And also like, what if
they turn you down? Right? Like I almost tempted to put in something
inappropriate in it just to see if they will turn it down. Oh,
Richard, don't get me any ideas, because you know it's all an experiment.
In the test, man, you might as well try test the limits
of the system. Well, I am really interested in what happens when you
want to update, right, because I know that there's pain around that.
I've heard the time is the whole thing, especially when the Apple updates their
OS and it breaks your app and all you need to do is recompile and
redest why but that still takes time. Yeah, we had that problem with
the last app that we had, which, by the way, it is
no longer out there, so it's gone yeah yeah for various reasons. But
this is going to be our dot net rocks app, and I'm going to
document the whole process of publishing it and getting it in the app store.
Awesome, That's what I'm doing. Okay, so part one, No it,
learned it, love it. Who's talking to us today? Richard grabbed
a comment of the show sixteen fifty nine, the one we did with one
Jennifer Wooddell. I remember Jell. Yeah, we were talking about modernizing Angular
apps and it certainly dug into Cypress and a bunch of other testing frameworks so
forth. But that was back in twenty nineteen, so that's the before time.
As we say in New England, she's Wick, it's Matt. Yes,
it's true. She Wick Wick, It's Matt. And the comment comes
from Red Dorian, who says, I have worked with Cyprus in Anger for
more than a year, and this is now three years ago or four years
ago, and I feel safe enough to comment on its usage performance. I
wouldn't consider it replacement for unit tests. It has greater functionality in the end
to end testing or automating user testing. As with all testing, there was
a balancing act of how much testing you do, and the more testing you
do with Cyprus, the longer your builds can take. And I'm talking adding
anywhere between five and twenty minutes to a build. As you gain more experience
with it, you learn where and what to test. But it's definitely an
a compliment to unit testing with Karma, but not necessarily an alternative. Again
four years ago, so the tools of evolved. The infancy of a technology
is a factor that definitely needs to be taking a new account before jumping on
the latest and greatest. Such is the cost of living on the bleeding edge.
The cost of living on the bleeding edge is bleeding. Amen, did
you just do that yourself? You had that in or is that actually okay?
Little commentary, little editorialization there, But well, Red, we're about
to introduce you to the newer versions of Cyprus because things have evolved, and
it's great that you were on board back in the twenty nineteen twenty twenty because
it's always good to have a view back of the player. Things started and
I appreciate your thinking around how you mix stuff up, and that the price
of testing. You know that that additional time is worth it because it makes
feel more reliable software. Absolutely. So a copy of music code By is
on its way to you. And if you'd like a copy of music codey,
write a comment on the website at dot net rocks dot com or on
the facebooks. We publish every show there, and if you comment there and
everybody little show, we'll send you copy of music cod by. And by
the way, music to Codeby has another brand, music to flow by,
that's not just for developers, And I will also build an app for that
and put that in the app store once I get the dot net rocks thing
in there. That's gonna be fun. And you know, you can definitely
follow us on Twitter if you want to. But I think the cooler place
to hang out these days is masteredon Sir Richard and I are both there.
I'm at Carl Franklin at tech Hub dot social and I'm Richcampbell at Masterdon dot
social. So send us a tute and join join the tutors. All the
tutes, yeah, all the tutes. And you know, I think I've
resigned myself to not making up a joke. Right there, I'm done.
That joke is done. Send us a tute. That's about it, all
right, So let us introduce Eli here. Eli Lucas is the head of
developer Ecosystem at Cyprus and has been doing software development for over twenty five years.
After spending the first fifteen years doing dot net development, Eli moved more
to the front end world and has been drinking the type script kool aid ever
since. Lately, he's been focused on sharing techniques on producing better quality software,
with testing at the heart of it. He lives in Denver with his
wife and four kids, and when not developing, can be found taking his
chaos on tour around the Colorado Mountains and probably breathing more heavily than you want
him to. Because I've been to Denver. I kudn't even breathe now.
Actually it was in Breckinridge that I really lost my breath. That's above Denver
and it yes it is anyway. Welcome Eli, thanks guys, pleasure to
be here. It's one way to keep four kids settled down, deprived them
of oxygen and make them run around the coolest combination. Yeah, we actually
we actually do that every year. We take them up. We go up
for a week during the summer to Breckon Ridge every year. So it's good
there you go. Breckon Ridge was so cool. They have the in the
grocery stores. They have containers of oxygen that you can buy for a couple
of bucks. And you know, anytime you feel like you just put that
on and you feel better. It's crazy nice. Yeah, pressurized oxygen in
the grocery store. Three thousand meters up, that's legit. Oh yeah,
it's fourteen thousand feet something like ten thousand. Yeah ten. Denver's nine thousands.
So I thought Breckon Ridge is abound. Denver was five. Yeah,
okay, mile High City. That's why it's to Mile High City. Yeah,
all right, okay, correct me on my math. That's right.
It's been a while. As I said, I was oxygen deprived when I
was there. You make too many memories that stuck around. Um Eli,
tell us about Cypress and what it is. I mean, we've talked about
it on the show before, but I'd like you to explain it for everybody
who may not have heard about it. Yeah. Absolutely, So for those
of you who may not know what Cypress is we are a free, open
source utility that you can use to test anything that runs inside of the browser.
And so our bread and butter has been pretty much in testing. That's
what people primarily know us. For a few years back. We came onto
the scene as being a quick, easy way to get into intesting up and
learning inside your apps. Okay, and I guess it's in the category of
testing tools. But as it works, as it works inside the browser,
does it integrate with IDEs? How does that work? So the primary way
that people work with Cypress is through our tool that you download and install.
And to kind of go back into like how you get started with Cyprus is
that it's an MPM installation that you install and to you typically your front end
portion of your project, and then once you fire it up, it opens
up a desktop application that you can use to start running your tests and whatnot.
And so there might be like plugins and whatnot out there that you can
use inside of your ide, but our primary interface is through this desktop application
that you use. All right, very cool, and so do you have
any answer to the message that Richard read there? It was granted four years
ago, but I mean I take it things have changed a little bit.
Yeah four years ago. Man, so much has changed since then. And
if I recall, like the context around the message was around unit testing,
maybe something about comparing testing type tools. Yeah, he was just saying that
he's doing unit testing elsewhere, Yeah, right, not doing testing with Cyprus,
which I wouldn't disagree with. Yeah. Yeah, So that's one of
the things, Like with Cypress you can really test anything that runs inside of
the browser, and so if you're testing to your front end code, your
JavaScript that runs inside of the browser, you can definitely do so with Cyprus.
It's not necessarily what we come out and advertise that's possible, but you
can do it. What you would typically use for something like that is like
just Right or Mocha directly to do those types of things, and the test
runners to do unitype tests are probably better suited, like Jess is probably better
suited for unit testing than cypresses. Right. Well, I guess suppose an
advantage as you get if you wanted to do unit testing with Cyprus is that
now you're all underneath one tool, with one set of APIs, one one
learning curve to get everything done. As they say in the enterprise world,
one throat to choke. Is that inappropriate? I don't know. I don't
think so. It's a term, it's a term we use. It's pretty
accurate. Yeah, all right, But yeah, if we go back to
the timeframe that Red's talking about, that late twenty nineteen early twenty twenty,
you really are talking about even before V one of Cyprus or maybe or maybe
just V one V two. Yeah, it was, it was towards the
earlier days. I'm not just sure what version would have been out because we
come out with versions fairly rapidly. Yeah, it's yeah, impressive. So
you guys had a major version number three version version numbers last year, ten
eleven and twelve, Like, right, are you changing that much? Um?
It's mostly well, so we follow semantic virgion Ingum, so when we
come up with something that needs to be released that's going to require people to
either update their codes or our epis are changing, you know, basically we're
releasing. A breaking change is when we determine when we have to do a
major version versus some type of shipping schedule. We do know towards the end
of last year, because I think we released V eleven in like December and
then V twelve like a month or two later in January February. Wow,
and that was pretty quick even for us, but it's what we needed to
do to kind of like hit some of these feature releases that we wanted to
do. But the big one was V ten ok, and that was the
one where we had a major UI refreshed because pretty much the UI hasn't changed
at all since the Cyprus was originally released, and so the UI of the
application got a total rehaul. But along with that, we released a new
type of testing that you do with Cyprus called component testing. Okay, so
what do you mean when you say component testing? Yeah, so specifically we're
talking about the front end framework ceter, component based, so your Angular React
view, any of these ones that kind of promote a component of an architecture
where you break down the UI of your application and to small components that are
usable across the app and so being able to test those on their own,
not necessarily depending on a given page exactly. Yeah. So you're taking those
components, you're mounting them in isolation from them the rest of the app,
and then that way you can write tests that are just specifically for that widget
versus like normally what you would have to do if you want to write test
to it somehow throw it into the context of another page where it's going to
be used. I we've built test pages with all of the components on it
and then written the tests around that test page. It creates its own kind
of hell. Yeah, yeah, and so this component testing is to get
you out of that hell and to bring you to the light, all right,
Yeah, being able to test the street. Like when I think componentization
of controls, I think React especially. It's good at them like that seems
to be there one of their claims to fame. It is very much that
component mindset of style, function, all of that is all sort of bundled
together. Yeah. On the JavaScript side, most of the um all the
modern JavaScript frameworks subscribe to some type of component based architecture, right, and
so we have official support for Angular, View, React and spelt okay,
and then we also have the ability for the community to make their own mounting
libraries because it is an open source project. Yep, it is an open
source project, and we have a pretty vibrant community and ecosystem of people developing
plugins for Cyprus, right, and so we are um a couple of minor
releases back, we exposed an API that if you're a community like so,
for instance, Quick is a newer front end framework that's coming out quic qu
i k i k because games are hard, yeah, and did Neslee give
them any problems? Isn't that that's chocolate drink? Yeah, let me let
me double check that suspelling? But q q w i k qwik Yeah,
because spelling things is hard, it is. Yeah, yeah, and searching
for things like that is even harder. Oh yeah, no kidding. Try
having a podcast with a period and beginning with the period is the first character,
Like, what could go wrong? I'm I'm and I'm adding these all
of the show notes, so I need I do want to find them all
just so that folks can can look them up easily on the show. Yeah,
but yeah, it's good to have Quick in there. I haven't looked
it. Quick. It's another one. Yeah. So a Quick is being
headed up by somebody who was one of the founders of Angular Misco. Yeah
Misco. He's from the Angler team is working on Quick along with some of
my old colleagues. I used to work out a coming called Ionic and some
of my old college Ionic are also working on it. Yeah, all right,
because there was the Ionic framework back in the day too, not that
it's gone away, No no Ionic store around. Yeah, um, but
yeah, that's that's an example of another like you know, really new.
I think they just released their first RC a couple of weeks ago, but
they're kind of disrupting the front end industry with yet another JavaScript framework, but
making massive strides and performance and developer experience and all that fun stuff. But
now the folks at Cyprus no longer have to debate do we add quick support.
The API means if Quick ones to be supported in Cyprus, they can
do it themselves exactly. Yeah, And we were actually working with the Quick
team and their developer advocates and whatnot to get the library written and we're promoting
it together. But yeah, because when we work on our own mounting library
that is an efficient officially a part of the product. There's a lot to
go along with that. We have all the documentation, all of our examples
like show it also. Yeah, but that's what it takes for folks to
be successful with it, right. It's like you guys who got a template
where here's the things you need to do so someone can use Cyper successfully with
your web framework exactly. I like it, you know, it's it speaks
to our responsible approach to allowing people to be successful with their tools. Yeah,
definitely, because goodness knows, we don't have enough jab script frameworks.
Did I say that loud? I'm sorry? I apologize, all right.
So the component testing is obviously a big piece and being able to do that
discreetly other particular kinds of testing that I mean, you guys are famous for
end to end yep. So, like I said, d end is primarily
what we're known for. We're making a splash in the component testing scene.
M Something else that's really interesting that is starting to gain a lot of interest
that you can do with Cyprus is api testing, okay, And so we've
had the ability because we have a method that you can use to make HTTP
requests to a back end server inside of our API for the longest time,
and people have been using that to write integration style tests to a backend API.
So you make the requests and then you can check the content checked the
status codes and the headers and all that fun stuff to make sure that you
expect them to be what they are. But we had a community member make
a new plug in that's called the Cypress plug in API that actually gives you
a nice interface that shows you the contents of the body, the headers,
all this other fun stuff. And so if you ever used something like Postman,
it's kind of taken Postman but putting it inside of the Cypress Testing application.
And so you use it, not only are you getting the benefits of
like visualizing your API requests, but at the same time you're getting a set
of tests that go along with it as well. Nice so sort of sets
the standard for all the things you should be testing on an API. Yeah,
and did that get introduce in ten as well? So that is a
community plug in, right, I think it requires v ten because it has
its own UI that comes along with it and whatnot. And so yeah,
that makes sense, okay, And I found Phillip's repository for it, so
yeah, just include that in the show notes too. The people can go
and grab it. Yeah, I Philips one of our great ambassadors. Yeah,
it's awesome and it just so it seems to me like ten because you
created tooling around letting the community be more effective with you is why it's such
a big version. So what happened in eleven and twelve? Okay, So
the big thing was with Cyprus eleven. So Cyprus ten released the beta version
of Component Testing right, and Cyprus eleven brought Component Testing out of beta into
general availability, and with that there were some API changes and stuff that we
wanted to make to get it out. Cyprus twelve was a bit bigger of
our release, and that I saw a couple of features that our community have
been asking for for a real long time. And so one of them was
the way that Cyprus is architected is that when you write your tests, instead
of like driving like a web browser via like a protocoler or anything like that,
we actually take your test code and inject it inside of your application.
Okay, and so the test code has direct access to all the HTML and
the buttons and the elements and the dom right that would but because of the
way that we're running, we had security issues when you had to go to
another domain to do something. Yeah. Yeah, that makes sense because it
looks like code injection, right, yep. Yeah. The only difference between
you and a regular man in the middle of the track is you're the good
guys. Otherwise it's the same thing. So we figured out a way that
we could actually get around that, and that's what we call side dot origin
is the new API and with side dot origin inside of your test when you're
up out ready to transfer to new domain. So a common use case for
this is third party authentication, right, and so you click a log in
button you're going to go over to like Google or an auth provider like off
zero or Opta, and inside of your code you use site dot origin.
You're like, hey, I'm about we're about ready to make an origin change
to this new domain name. Everything that's inside of the side out origin block
execute inside of that new domain name, and so they'll take that code,
put it into the new one, and then when you come back to your
website, you exit the site origin and you're able to do that. But
this makes it possible because we had a limitation before that you couldn't go to
a new domain and do anything. You had to like work away, work
yourself around it programmatically. But now you can actually just use the website like
a normal user would. Yeah, that was my next question is how much
JavaScript does one have to know to effectively use Cyprus. Yeah, and so
writing your tests in Cyprus is either written with JavaScript or type script. But
we've written the API in a way that it's more like I like to think
of it as like a DSL, the domain specific language into testing. And
so we have an API that is very fluent and chains off of each other,
and so when you write the test, they kind of read a lot
like English. And so the first thing that you're going to want to do
is like select something inside of your site, and so you'll use a selector
and a method to do so. And the primary way do you do that
is with the get method, and so you say side dot get and then
you pass in some type of selector. And the selectors are a lot like
j C Ray selectors, and so you can select via class name, via
ide, via elements, attributes and whatnot. We have best practice guides on
how to do this in a good way. But then you select your element
and then you take some type of action on it. And so like let's
say you select a button and now you want to do something. You want
to click it, and so you call the click method, and then after
that you want to run an assertion, and so you have the assertion that
is should and so you say dot should and then you say like should have
been clicked or you know, text should equal whatever result you're expecting to be.
But when you're looking at the code itself, it's very English like.
And because of that, we have a lot of kind of QA teams that
aren't necessarily developers, but they just know enough to go in there and be
able to write test with Cyprus. And if your app becomes really big and
you're constantly adding functions and functionality, that QA team is going to have to
grow too, isn't it um? Yeah, And so we got we do
have certain ways to be able to organize your your code, and we have
a mechanism that we call custom commands, and this is where you can create
your own command method that chains off of the side object and so you can
actually use it as part of its fluence and tax. But one example might
be like you need to log into your app. That's a common thing that
you have to do, so you don't want to put that code in every
single test that you need to do that in, and so you can create
a custom log in command that will do your login for you, and then
you can say side out log in, and then you can say dot get
the avatar that shows that you locked in. Okay, so wait a bypass
that now. And I've played with Cypress, I think we use the recorder
primarily. Is that still a thing? Yep? Yeah. So it's called
Cypress Studio, and it's an experimental feature right now, has been since it
came out. So there's a flag that you have to turn on and side
of the configuration. But with that you can use it to record your actions
against a website. And so you can go through do a bunch of clicking,
and then at the very end you can write click on something and add
an assertion. You could be like this tech should equal what I expected to
be and I will overrecord that, right, And it's just writing a DSL
under the hood for you. Yep. Yeah. It actually takes a Cypress
code, puts it inside of a JavaScript file along with all your other tests,
and then from there that can get you like, you know, eighty
percent of the way that are to a complete test. And from there you
can just go and modify the JavaScript directly. Right now, the tool doesn't
go back and modify an existing test. It's previously recorded, right so not
re entrant. It just generates your initial impact paths and then you tweak it
correct. Yeah, that's fair. Yeah, that was one of that was
one of those things. And so in Cyprus ten, since we redid the
entire UI, one of the shortcuts that we took was actually getting rid of
to Cyprus Studio, right, And we got a ton of feedback from that.
I think a lot of people were relying on the on the recorder man
like that's yeah, yeah, what'd you replace it with? One of the
subsequent releases, we did put that back in there, so there we go,
Okay, well, what were you going to replace it with something?
What was the idea? So it's a it's a it's always been an experimental
feature since it's first came out, and that's because, like, while it
is useful, we do know that it has quite a bit of limitations as
far as like usually you do have to go in and kind of modify the
code to get it to do exactly what you wanted to do, and you
can't, like I said, you can't change previous tests with it. So
expectations were too maybe yeah, yeah, And so it's it's one thing that
we find is that it's a great learning tool because you can use it and
go through and do things and then see the code that is writing for you
and be like, Okay, that's that's how you do this, and right,
this is how you Yeah, provided to the code you're generating is the
best practice code. Yeah, then you're going to teach us best practice code
just by starting to generator. But I love this hole getting over the blank
screen syndrome. So Rana write a test. Here's the blank screen. Have
a good time being able to use the recorder. Sort of lay down the
initial template. This is the page, here are the fields, here's the
assertion. Go. Now you go in and say, all right, well,
I want to tinker with the log in this way, and I want
to deal with this thing that way, and like there's a bunch of tweaking
you do. But at least you're starting with a template. And guys,
hold that thought for this very important pause, for these very important messages.
We'll be right back. Hey, guess what, it's Dot at Rocks.
I'm Carl Franklin. That's my friend Richard Campbell. Hey, and we're talking
to Eli here about Cyprus. And my next question, if you haven't guessed,
is any plans to support Blazer oh man, so web assembly all up,
Like, how do you support testing and web assembly? Yeah, or
even Blazer components server components. Yeah. So it's a multi multi faceted questions.
So on the one end, with end in testing, Cyprus can testing
anything that runs inside of the browser. Sure, And so if you fire
up a development server and you hit a Blazer web app, and even if
it's running web assembly, it's going to run inside of the browser and you'll
be able to do it that way. The more interesting question is doing component
testing web Blazer, because typically what we will do is we will load up
the component inside along with our test code and mount to component directly, and
then you can modify any of the properties or inputs that are going into the
component and mess around with its API directly, which could be a challenge a
Blazer like we could probably figure it out. We haven't heard a whole a
lot of interest with that yet, but I have definitely thought about it,
um and the and the more interesting challenge might be if it's just a flat
out server based Blazer app, right, or everything's rendered Yeah, an server,
Yeah, exactly. That That's that's an interesting dilemma, isn't it,
Because there are some testing frameworks for Blazer, but they're like b unit is
a unit testing framework Blaze. Yeah, end to end tasting of a Blazer
app. That's an interesting problem needs to be done. Just a question of
what you know, what can you hook to snapshot testing? You know Simon
crops tools good for that, Verify right, just comparing code. But and
and Richard's observation about web assembly, does that throw a monkey wrench in your
plans? I No, I don't think so, because we we use real
browsers to run our tests with, and so there are browsers that are installed
locally on on the system that you're using to test it. One of the
one of the very first questions you get as you're firing upside press is like,
hey, what browser do you want to test in? Right? And
so we have support for all the Chromian based browsers, so Chrome and Chrome
and Edge, mainly support for Firefox, and then recently here recently we also
have experimental support for safari um, so that that's another flag that you have
to turn on to be able to use it. That was another feature that
Redness knows it needs to be testing. It's waiting for that comment. Yeah,
so as he said, Safari Richard's brow furrow did and he was like,
oh, dang it. But anyway, Yeah, so but web assembly
is interesting because you know, the code's running in that little sandbox, and
the only JavaScript that you can look at is what's outside the sandbox, and
uh, you know who knows what it's written in. Yeah, and for
that it should be probably into intesting is going to be the best of it,
because then the Cypress tool is just going to interact with the HTMLA that
gets outputted from the Blazer app however, directly, which is easier in some
senses. Yeah, so testing the Cypress is very black box like. Cypress
really should not know a whole lot about the internals that's going on. It's
a proper point of abstraction. I don't want to know it's all implementation details.
You should be testing your application just like your user or would actually use
it. Right order. That starts to break down a little bit as with
component testing, because with component testing, you need to know a little bit
about how your application works. You need to know like what framework it's written
in, how to pass in properties to the components and whatnot. But really,
as soon as you haven't mounted. It's just like an into intest.
It gets rendered inside of the browser and then you can start. It's the
plumbing of forcing a rendering so that you can test it. It's crossing into
the line, poking underneath the cupboards a little bit to say, yeah,
I need to I need you to make one of these for me so I
can beat on it. That's a bit more specific. I mean you almost
wonder if web assembly the standard is going to evolve to provide for capabilities,
for more testability and so forth, and in that level, I mean,
it's not there yet, but I can see that being the path because I
think WA has particular application in like internal apps and things like that where they
want they want to developers to work in the environment they know, and they
want that code to be well tested. So I imagine it's going it's going
to continue evolve. That's a lot of moving parts. I mean, how
much how much impact do you have when a browser does an update, Like
how does that affect Cyprus? Um? Not a whole lot, especially with
how frequently they all come out with newer versions nowadays. Um, it's pretty
rare. That will be like, oh, now browser came out and broke
everybody's tests that we're using that browser. That's a bad day that that is
something on your desktop. It's a little bit harder to control your browser versions
or whatnot. But if you're running your tests in like cic D, yeah,
we actually Cypress actually provides Docker images that you can use along with your
CSD that has browsers included with it, and so if you needed to set
like a browser or a certain version, you can just use that darker image
for it and nice. So one of the gotchas of modern web programming,
especially with spas, right with single page applications, is that elements just come
and go. You know they're there, and then they're not there, and
when you create them, they're not there. You have to wait before they
render, before they show up. So does Cypress have any issues with spas
in particular? You know, what if the IDs are dynamically generated? God
forbid? I mean, I don't know who would do that, but you
know I can think of evil ways to to to throw a monkey wrench in
there. Um, do we you have to add specific attributes to things in
order to find elements and what happens if they're not there? I mean how
do you handle those things? Yep, okay, yeah, So I'll tackle
that in two parts. I would say the first part, like how how
to handle things when they're not there? Might be like one of the virginal
reasons why Cyprus was invented. I like that because because for Cyprus UM and
the and the testing solutions that were out there, this was like one of
the very big problems. You try to select something wasn't there, and then
all of a sudden your tests it feel and so you'd have to put in
these weights into your code. Ye be like, hey, I did the
API request, Let's wait a second for everything to show up. Oh it's
not there yet. Let's wait another second. Set time out ten milliseconds,
call myself, yeah, like you millisecond optimism, right, Like you know,
maybe it might be a minute. You got to go and actually render
the page. And so this may this made the reading or writing and reading
the code more complex than what it needs to be. And then also just
introduce this level of flakiness to the test, like sometimes it's going to work,
sometimes it's not going to work. Cyprus with its API has built in
waiting and retriability, right, nice, And what I mean by that is,
if you say hey, using the CYPRESKIP method, if you say hey,
go get me a button with like maybe some particular text like loggin.
If that doesn't exist yet, Cyprus is going to wait up to four seconds
for that to actually pass. That's enough time, and so that gives yeah,
that's usually enough. And that's completely configurable too. You can do it
at a global level, you can do it at a test level, but
one would argue if it's more than four seconds, it's not going to happen.
The customer left anyway, nobody cares about your rendering. But along with
that, we also have built in retriability, and so let's let's say we
have a scenario where we're looking and at a list of users and we go
to delete one of the users. So we delete the user, we hit
the delete button, and now we're waiting for the road to disappear. And
so we're going to write a test that says, hey, get me this
row and it should not exist anymore. Right, well, initially it might
still exist, sure, but we're going to notice that, and we're going
to wait and then retry the assertion again up to four seconds. And for
some reason yeah, and for some reason, that dam element is still there
after four seconds and we failed to test to be like, yeah, you
said you're going to delete this record, but the team actually get deleted,
right, But it did eventually, lead just took a ten seconds to know
how to rerender it has gone. That's that's very very cool, and you
need that kind of stuff because spas man, they're just a whole different beast
than your standing a lot of latency in them. Yeah, and just like
the dynamic nature of them things, they're there and then they're not there,
and then they're there again. Yeah, and then their ideas changed. Okay.
Yeah. In the second the second part was about IDs and how do
you actually find your elements. So what we actually recommend is you don't use
constructs like IDs or class names to find the elements if your application. I
have two schools of thought. I have the official Cypress best Practices guide,
and then I have what I think is best practices. Not give you the
Cypress version first. Okay, the Cypress version is to use a special attribute
data attribute like data dash test ID to go and find the particular elements that
you're looking for. That's great. It doesn't exist for any other reason yet
exactly right, hide away from the rest of the system. I like that.
Yeah. And the problems with using something like ID is that a developer,
sometimes a developer and a tester or two different people. Developer may not
necessarily know this idea is being used for something. They might change it.
And then also the test break. Then also you have class names have the
exact same problem. But then a lot of the times with our JavaScript libraries,
those class names are being dynamically generated and have like goods at the end
of them stuff like that, So those aren't reliable to use either. And
also we moved from Bootstrap you know, point zero to Strap seven and all
the class names have changed. Yeah everything boom, yep. Yeah, so
I get I love it. I mean you're basically saying this attribute is for
this purpose only and that's it. We're not going to share any other attribute
or construct with anyone else, right, makes sense? Yeah? And so
in the React ecosystem, the most popular way to test React components until Cyprus
takes over, is called React Testing Library. I don't know if you've caught
that. Listeners thought a mid drink. I almost did a spittake until becoming
revolution dot dot dot. Just let that one hang in there, all right.
The Yeah, React testing library, they have a philosophy that the way
that you select elements should be around the same way that a real user would
find an element on the screen, and a real user could at the same
time be something like a screen reader. And so because of that, instead
of using something like a data dash attribute like I just said, you might
use something like the role that the attribute, the ARIA role that the attribute
plays, and so like button and so you could say like, hey,
get by a roll button versus like get me a button element directly, because
your button may not actually be a button element. It might be an anchor
tag, or it might be a customed divtag that's made to look like an
holement or something like that. Role. Yeah, but if but if you
set up your ARIA attributes correctly, you would have given that divtag an aria
dash roll button. And then there's an advantage that you get to writing your
writing your test with this philosophy, and that is that you kind of like
have built in accessibility as well, right sure, Um, So there is
another library called Cypress Testing Library that takes the testing library methods and makes them
available inside of the Cypress apium attation to the SI dot whatever fluent interface and
that is what I like. Okay, that's the ELI test uh philosophy.
Yeah, and who makes the cypers testing library? Um, it's an open
source community. UM so it's actually a part. So the testing library is
a larger organization that kind of exists over the smaller libraries. So like React
Testing library, Cypress Testing library, or is an Angular testing library or view
testing library, all these libraries that um subscribe to the API live under testing
library. Yeah. Yeah. Can we test features that involve things outside the
browser, Like what if we're doing some signal our stuff and going browser to
browser and you know, what if we're doing something that accesses the local system
that you know, download the file or something like that. Um ye,
is there any way to do that? I mean anything that the browser does,
Um, you should be able to do inside of Cyprus. So what
about two browsers. What I'm saying, what if you've got some to two
browsers at the same time is going to be more difficult just because we only
load up inside of one browser. Okay, So but something that you can
do to perhaps get around that is we have some network mocking and intercepting built
in, and so it's kind of like a like a stubbing library, okay,
where you can stub out network requests, and so if you're making a
web soccer requests, you can stub that out and provide values for it instead
of it actually talking to a second browser for real. Okay, But there's
any way that I can you know, open one browser and then do something
and then open another browser, get the result of that, and orchestrate both
of those things under one test. I mean, there's probably a way.
I think the challenge would be to be able to orchestrate that workflow and get
it to like give you like reliable results, right, make it reliable.
That's what I would be already about. That sounds like a challenge for a
similar listener who wants to do a pull request. That's what I'm thinking.
Make a contribution, Make a contribution, yeah, because you are taking contributions.
Yeah, And speaking of that, where do we go to take contributions?
Here? Where's the what's the website? Where's the GitHub repo or whatever?
For the Cypress Yeah, for the Cypress open source or just Cyprus in
general. Yeah, the Cypress open source Okay, So we're at GitHub,
so gethub dot com, slash Cypress dash io couldn't be easier. And there
you can find the main Cypress project and tons of example applications and the documentation.
Okay, well pretty much all this stuff that we do is open source
and including the docs. And so if you notice something like in our doc
set roun like, you can go in and open up a pr and help
fix up the docks as well, make submit it to the docs, prove
great explanations. That's great. So what about large scale testing? So I
built up a big test suite Now it takes hours to run. Is there
tooling to allow me to spread this across multiple workloads and try and speed things
up. So the Cyprus app itself, like I said, it is free.
It's open source, it always will be free. You can take it
and use it to your hearts extent. We do have our commercial service how
we make money. It's called Cyprus Cloud and it's for larger projects that are
growing, and it's to help you scale and give you analytics into your testing
suite. Okay, and a few a few of the things that it as
is what you're just saying, Richard, is you can use cypress cloud to
scale out you're testing across multiple instances to get parallel into your tests. Yeah,
it's strangely. We were always big on the being able to run the
entire test back in fifteen minutes because give enough time to the developer to stretch,
declare they are a god, and this god needs coffee, Go get
coffee, and by the time they got back from coffee, the test results
are in and they were not a god after all. But the point being,
the code still in their head when they get the testing report back,
rather than having to figure out like why did this fail? It's current enough.
Like we at one point, I think our test week was running over
a weekend, and so by the time you've got your test results it was
Monday, and anybody could have written that code on Friday. You have no
clue. So it's I really appreciate that the power of when we can rapidly
do the tests and get it into the hands of the developer, that they
can they while the coast on their head. They respond fast. Yeah.
Yeah, that's the whole purpose of setis Cloud. It's about optimizing human time
versus machine time, right, and so we do that sometimes by optimizing machine
time, like spreading the workload over or we have a feature called smart Orchestration
that will run your tests in a in a manner that makes more sense.
Like, for instance, if for some reason you had a failure and then
you make a change and then you upload it. With smart Orchestration, it
will actually run that failure first to make sure if passes, versus you having
to wait till like if it was like test nine nine a thousand that failed,
you don't have to kill the entire suite to go through again. Yeah,
so some smart Yeah, it's smart things to put the problems should up
front, keep that cycle time down. Yeah. And I'm looking at the
pricing like that's pretty reasonable. You consider how much the test edition of Studio
costs back in the day for the business, this product being three thousand dollars
a year for forty devs. That I'm not going to argue with that.
That's pretty powerful stuff. And you only have to beat down one bad bug
and you paid for your test suite for the year. Gay, you know
that that's I look at that number and go you can burn that in a
weekend with four davs tearing their hairs out trying to fix a problem, right,
Like, if the tool can nail that down, at least let your
roll back so you keep your weekend and you'll figure it out on Monday,
or can actually get it too fixed so that they don't they don't spend the
whole weekend of fighting it. I'm all for that, yep. Indeed awesome.
So what's next? What's on the horizon for you? Cyprus thirteen?
Cyprus thirteen yep. So right now, we're definitely looking at ways to make
the developer experience of Cyprus better, and so that's a big focus of upcoming
thirteen release, which is probably gonna be slated for the fall sometime. So
we're looking a lot of API changes for stuff that the community is looking for.
But only one major version every year, how slack? Yeah your reputation,
Yeah, well your marketing people do only once that logos to make.
But yeah, also continuing like to make the developer experience of component testing better,
because that's one thing that people originally fell in love with the Cyprus is
that the developer experience, like writing test before was kind of painful, not
really all that fun. You can get up and running testing with Cyprus in
like minutes, and it's a little relaxing to sit there and be able to
write like tests over and over that aren't like stressing you mentally that are passing
and all that kind of fun stuff. And so that's we're kind of really
die hard at just making it as simple as possible to write tests. Very
good, all right, Anything that we missed that you want to mention any
shout outsh no, I don't think so, Okay, Yeah, awesome,
Eli, Thanks thanks a lot. This is good stuff and great and thanks
for answering our questions and it sounds like a great product again. Absolutely,
guys, my pleasure, all right, and we'll talk to you next time
on dot net rocks. Dot net Rocks is brought to you by Franklin's Net
and produced by Pop Studios, a full service audio, video and post production
facility located physically in New London, Connecticut, and of course in the cloud
online at pwop dot com. This is our website at d O t n
et r ocks dot com for RSS feeds, downloads, mobile apps, comments,
and access to the full archives going back to show number one, recorded
in September two thousand and two. And make sure you check out our sponsors.
They keep us in business. Now go write some code. See you
next time you got a chad metal band.