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.