GitHub Open Source Friday, 14 Dec 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Test anything that runs in the browser with Cypress and GitHub Actions

Description

The web has evolved. Finally, testing has to. Join us with Cyrpress maintainer, Gleb Bahmutov, in learning how they put together a GitHub Actions to run fast, easy, and reliable browser tests.

GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.

Gleb Bahmutov is JavaScript guru, image processing expert and software quality fanatic. During the day Gleb is making the web a better place as VP of Engineering at Cypress.io. At night he is fighting software bugs and blogs about it at glebbahmutov.com/blog.

Join bdougie and friends live for Open Source Fridays at https://www.meetup.com/GitHub-Virtual.

0:00 - Start
01:22 - What is Cypress?
3:27 - Why not use Puppeteer of Playwright for e2e testing?
8:12 - Cypress GitHub Action
15:15 - Walkthrough setting up Cypress on a project
17:50 - See Cypress in action
24:52 - Writing a Cypress test
35:55 - Add the Cypress GitHub Actions to a GitHub repo
47:29 - Passing our tests in the GitHub Action
53:00 - How to get involved and contribute to Cypress

As always, feel free to leave us a comment below and don't forget to subscribe: http://bit.ly/subgithub

Thanks!

Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github

About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com

A

All right, hello, hello, hello, sorry, folks, uh I actually had the music muted the whole time, so you weren't listening to any stream beats at all, um but you know we'll figure this out. Eventually, um I'm bw- you probably see me around if you were watching universe at all on the twitch stream. uh I was on the dev track for three days straight. So uh what a great way to sort of end streaming the universe by streaming, one more time uh with uh gleb gleb. You want to introduce yourself and say hello.

B

Hey everyone, I'm claire bachmandev, I'm vp of engineering at cypress, detail and I'm here about to talk about github actions. Apparently.

A

Yes, excellent and folks, uh thanks for, if you're watching us on the stream right now to say hello in the chat, let us know how the feed's looking, uh I do know a delay in my voice, and I had that fix on my other channel and totally forgot to fix that here. So uh bear with me new setup, new camera, new angle and uh yeah, we'll we'll we'll be working through all that stuff. Eventually in the next coming couple weeks, but um gleb you, um you work at cypress, uh correct and.

B

A

That's true, cyprus is something that honestly, I don't even know when it came out like when it came around, but it's just always been around. As far as like the sort of premier choice for ending testing for javascript, um I've used a couple different tools in the past and I'm excited to learn more about it. So do you want to give us like, um like a brief introduction of what cyprus is.

B

Absolutely so imagine you write a web application or a website.

B

Well, at the end of the day, do you know if it's working for your users right not for you on your local machine, not in ci, but actually when your user goes to your web, application tries to use it, so it was always difficult because we didn't have tools that actually could control the browser very well and worked with modern web applications. Very well.

B

So brian mann, six years ago, decided I'm gonna write this tool, I'm gonna do it because he needed something to test his applications, and so he decided to use this new fangled thing that came out called electron where you had electron browser built in, but you could control very well, and so he has done this thing with the test run in the browser and then he expanded it so that you can control chrome and firefox. But the main thing is the end-to-end test runner that works very well with modern web applications.

B

It runs right there in a browser, so it knows when elements appear disappear, become invisible or visible. It has access to all the browser's apis right, so everything you need to write. Good end-to-end tests is in a single package which you just do like: npm install cyprus and you're good to go.

A

Yeah, that's that's awesome and um I I didn't realize it was a that straightforward. So, um using using electron like cyprus is powered by electron. Is that correct.

B

Yes, so when you install cyprus, it's npm package, but it downloads an electron based binary that we build for every platform. Okay and that's right, um so we built you know cyprus for linux, two versions for windows and one for mac, and so when you start cypress, it runs cyprus that comes with built in electron browser.

B

But if you have other browsers installed on your machine, it will find it and it will be able to control it.

A

Gotcha interesting and then how would this compare to? Because what do you say like and then testing and stuff like that, um an interaction with the the web browser like I know about playwright, I think microsoft's playwright and then the the other one, google. I know it's a very similar name, but uh how do those compare yeah, puppeteer yeah? That's what it is. How do those compare the cypress then.

B

So they solve this problem completely differently right. They, for example, puppeteer is a google project, so they decide to use chrome, debugger protocol to control the browser and chrome debugger protocol. If you ever open, dev tools in chrome is super powerful, because the devtools is using chrome, debugger protocol to control the page send commands do everything, so they decided. Why don't we connect to a browser using the same protocol and during tasks control it in general. Puppeteer is not a testing tool. It's browser automation tool, so it's not specifically built for testing.

B

So if you want, for example, to write actual test blocks and before each hooks and after each hooks and add assertions, you need to bring extra packages, so people have to like assemble kind of frankenstein monsters of jest and puppeteer, and maybe something else in order for you to launch your browser and control it and the same play right right, yeah, but cyprus decided different thing. We didn't want to use chrome debugger protocol right because we had technical limitations before and so on. So instead we launched the browser and then we load all our javascript.

B

All our test specs right into the browser itself and we control everything natively well, I mean like using javascript only so now we're adding back native events like we can use chrome, debugger protocol and so on, so we're adding those capabilities. But our tests are much closer to the browser environment than sending commands from outside. Okay chrome, debugger protocol.

A

Okay, excellent yeah. That makes a lot of sense too, and it actually makes it very enticing too, as well, because I've I've picked up playwright and as well as puppeteer, previously just for some one-off interactions, uh trying to sort of automate certain things, and uh I felt like the sort of uh the learning curve.

A

Even though it's pretty straightforward api, the learning curve was kind of high for me uh at the time of what I was trying to accomplish so, like I sort of just moved on to like uh you know what I'll figure out a different way to write these scripts or like.

A

I don't maintain them anymore, mainly because they were just sort of one-off solutions, but that was for more automation and less of testing, uh but thanks for sort of walking through so the differences, and um I wanted to actually learn more about the uh cyprus as a company too, as well, are y'all. You, you mentioned off offstream that you all are based in atlanta, but you're, not based in atlanta, correct.

B

No, so we from very beginning knew that we had to be remote right fully remote, so I'm in boston. We have people in philadelphia, chicago west coast, south america, eastern europe,.

B

We decided that we need to hire everywhere. The talent is yeah right, you cannot live so as a company. We are about 40 people right now and you're like how can 40 people work on the test runner, so we started with test run and we tried to sell license throughout and that didn't work. So imagine you're a company and you're like I need to write tests and then this startup comes and says: pay me for a license, invest all this time and then, if we fold well, you just wasted all this time right.

B

So that was a constant worry, so we decided we're going to give away. Everything is open source, so cyprus is absolutely open. Source project mit license forever right will be forever no future limitations. There is not a you know beta and a pro version of service. No completely. You can use everything yourself fine, but for a company, when you run tests we by default take screenshots on failure. So you know what happened. We take. Video of a whole test run automatically on every platform, nothing to install.

B

So if your company- and you run it in ci- where do all these test artifacts go? Where are all the test results? So we provide that as a service to record that, so you can privately store all the test artifacts from any ci. So that's how we make money. We have a cypress dashboard which is optional completely add-on product, but makes sense for companies and when we like expanded it, we added analytics desperation.

B

You know all through the use of a dashboard and that's how we make money right by providing commercial, separate service for companies that run all of us.

A

Excellent yeah, so you reached out and we we connected about this. um Well sorry, I need to actually share my screen, but we connected uh about this sorry first day on the new stream, but uh uh this is a github action and y'all made the decision to leverage credit of actions to help people incorporate cyprus in their sort of interest into and testing scheme. um Folks, also thanks for the followers too, on the twitch stream. I do have the chat open.

A

So if you do have any questions about cypress or github actions like we, both can probably ask answer questions from either bucket, um but uh so definitely leverage the chat. um But if you don't know about github actions, real quick, uh these are sort of ways to provide automation um to your repositories into your projects. uh These could be web projects or any types of projects, uh but what's really nice about this is that the sort of integration with cypress uh is pretty seamless.

A

um So uh here github actions you can sort of add stuff to your your ci and that's like we'll. Stop the github actions commercial for now, and um but here I I actually wanted to sort of learn more about cyprus and about this action. So do you want to explain sort of what you all are doing with the the get up action here and how it sort of integrates with cyprus.

B

Yes, um so brian, as you know, running tool locally is like the easiest thing you can do right. That's why there's a joke run it like works on my machine yeah, the most important thing from like day, one for me is to set up automated tests on ci on a separate machine where every commit is tested.

B

So I had a lot of experience over the last forever 15 years. Setting up you know, jenkins and travis, and uh gitlab ci like running everything in-house right and using over, like external commercial ci providers. So you give me the name of anything provider and I'll, tell you my experience of it. So from the very beginning we concentrated on making sure cyprus can run on any ci provider like like that right. So we have list of os dependencies.

B

We have uh docker image repository uh on github and on with all our dependencies and then bunch of dark images. Ciphers pre installed from a very first moment.

B

We made conscious decision, but we want to show an example of running cyprus on every side, so I've written examples for hci when we saw github actions which came out what a year two years ago, two.

A

Years ago, yes, a year ago,.

B

Okay, we did we kind of looked. It was like oh wait. This is pretty powerful. I can write my ci code using javascript right, and this is like such a big shift, because when you need to write a ci configuration file right now, every size like copy paste, an example from the docs push it. Oh wait. I forgot a comma, oh wait. This variable doesn't interpolate correctly, oh wait.

B

How do I set up caching here right, and so this constant iteration loop of like this push see if it works, try to fix it, push it again, it's very frustrating, and so we decided to abstract this so github action that we've written well, I've written abstracts all cypress installed. You know shenanigans yeah right, but caching we're running the verification right so that our users don't have to think about it. Like literally right now. In order for you to run cyprus on github actions, it's a single yamas.

B

You know like uses, cyphers io, slash, github action, that's it yeah and like this is the basic example and it takes care of everything right. It installs it. If it's necessary to install it verifies it, it caches right, it runs npm installed for you using npm or yarn, depending on what it finds in your repository and it works, and you you never have to think about it right.

B

So our motivation was make our users lives easier and I think, with power of javascript and the innovation of github actions, because I used, I used azure pipelines before and like no offense, but this is stuff.

B

It's just amazing, because um actions run on top of azure pipelines really under the hood. It's the same vms that come up and so on, but it's so much easier to actually just program everything in javascript right, which is kind of unusual, and so this was two years ago we started pretty popular action. We put it on marketplace.

B

I use it myself all the time, because I need an example. For example, of some app I create a repository and I immediately add github action right.

A

B

Just runs like there is no authentication to configure nothing like it's such a winning combination and, to be honest, um microsoft has not paid me any money to say this right, but I'm a big big fan boy of github action so.

A

Yeah, that's awesome, yeah and I mean I'm right there with you. I mean they do pay me a lot of money to uh to say I'm a fan of github actions but uh um yeah so like leveraging, including the the action itself inside your yaml file. That's the first step, but how do you basically like? How would I add test?

A

So if I wanted to test like if someone like clicked a button or whatever or whatever the hell world of cyprus testing is um do I I need to build a separate yaml file or a javascript file.

B

So that that's uh a separate thing right, so we assume that you have uh cypress. Oh.

A

Installed in npm independence.

B

Is right, but you run it once locally and we can go through these steps right. You know brand review today. If you want to, we can start a new repository and when you install cypress- and you run it first time, it will scaffold a couple of example- spec files. So if you want to do that, we can do that and then we can add just copy paste the action, but I show that every basic one and it will run on github actions like from.

A

Okay itself, so.

B

I I do have a project demo.

A

Yeah, so I do have a project that um it's pretty straightforward is the next.js project. So I wonder.

B

A

Perfect we can uh leverage that um I just need to. I need to clean up some stuff- maybe okay, I'm good so yeah. This pool should pull the latest, uh which is main yeah and for context folks. This is this is the project that I have it's just a simple uh nice little digital garden to have links to all my social stuff, uh so we'll work with that and uh real quick.

A

uh Let me set some things up to make sure, since I'm sharing my full screen, I want to make sure I'm not sharing too many things. Passwords, yeah, excellent. Everyone take screenshots.

B

All right! Okay, um if you want to start in a different branch or if you want to work on this one yeah.

A

Let's uh try cyprus we'll go there. Oh, I swear. I know how to use get there. We go so you're saying I get to see npm install cyprus. Do you use yarn or npm here.

B

A

Honestly, I think I don't know what I'm using. I do have yarn. Actually, okay, I I see yarn.

B

So why don't we use? uh Oh, and you also have package lock json, so you have both. So cypress is a dev tool right, so you probably want to do dash capital g, so you save it as a depth. Dependency got it.

B

A

And I I use both npm and yarn in different projects, so I just type the first one I think of and never saying yeah yeah part of the reason why I have both of them in there but yeah just simply adding um yarn, and I want to say I go out on a limb. I have probably have zero tests for this project too as well. So I actually started this from a template from one of my friends actually created so well.

B

We're talking to the next gs team right, so we're adding cypress template there as well. So eventually, when you scaffold nexus, apps I'll, be a template with like cypress pre-configured, but what's happening now. It's downloaded cyprus npm, which downloads, uh whatever operating system cypress binary.

B

I feel like it's downloading cyprus electron package and it will place it on your machine in your like home. Folder, cache, folder, okay. So but you never have to download the same version of fabrics binary again because it's like 100 megabytes.

A

But what, if the, uh if you all ship a new version, does it check to see uh and then validate that and installed in the latest? One.

B

Yeah so it in a cache, it will actually keep different versions of cypress. So if one pack like in a project uses one version, no problem, it will be cached separately and never overwrite it, and then we also have, like you know, cypress prune that will clean up all these binaries because they take ups okay.

B

So the one thing that we want to do right now is probably like see cyprus in action. So why don't you do yarn cypress, open.

B

Open okay, so this is your first time it verified cyprus right and you to open it, and it noticed that brian. You never used cyprus in this project before so. It actually scaffolded bunch of examples right, excellent um by default, and you know you could find we can delete them later, but these are all different spec files, like all different tests.

B

Okay, I notice that on uh okay, when you click on that you know it starts chrome, but it found on your machine and you see browser window open right and you can see in iframe on the right a website. Well, in this case, we use like example.cypress.io yeah, and so it's an actual website right, like you can like you can interact with it. It's it's there.

B

You know uh on the left. You see all extra like what we call command log, so these are all different tests. That's awesome right but finished, and if you click on one for like any one of them, it expands and it shows individual test commands that that just ran, and uh so you can see, but it visited a url cleared cookies got cookies, ran assertions, lots of the green things. So this is end-to-end test. It actually interacted with live website.

A

Oh awesome so um out of some curiosities too, because I've done some intent testing and I just want to shout out uh divster.gotgam it's the saying that he loves cyphers, seen and grow from the start uh and also thinks actions just makes it even more powerful, so shout out to them for dropping out in the chat. um But when I think of indian testing so do I I I need an internet connection for this to work. Is that correct.

B

Well, uh you're testing the example that cyprus.org, so it has to go there. Yes, right, okay and visit them right, just like your browser, but we we want to test your site but you're running locally. Yes right, so I.

A

Can swap that with localhost.

B

Right, so why don't we do that right? Because I think that might be kind of cool, so you you know you can close the browser window.

A

Yeah, it looks like I uh I cancelled. The cypress was that it's fine.

B

Okay, um so you probably want to open, like your code, editor right, so we can write tests.

B

Okay, so when you did the cyprus open it, it noticed that you didn't have any cyprus files, so it scaffolded two things for you: it's a folded, cypress folder right in green. That's where those integrations pack files were so you have integration right. So if you expand with folder you'll find the example. So so my code like yeah- and this is how like a typical test- looks right.

B

Yeah um we use mocha syntax, so we have it and then the name of a test and when inside you have called back- and you have all commands chained of this, like global site object. So if you want to visit the site, you say site visit and give a url. If you want to find element using css selector, it says I get and then selector and notice like in line 16. We found an element and then we clicked on that and cyprus has all these built in things where it says. Do I have this element?

B

No, okay! Let me try again. Do I have this element? No, let me try again, so it doesn't depend on like the way your application is written. So you can use any framework, it's what it does.

A

It sounds like it mimics, the user experience so, like the user doesn't know.

B

A

Database tables are called, but they just know that there's buttons and they can click them.

B

Exactly and it has built-in things so, for example, before it clicks on the button it will check, is my element covered by something else.

B

If yes, I'll, wait and I'll like paul until that model goes away, uh maybe the button is disabled while, like the app is doing something and when it enables it, so the click will wait for the button to be enabled like all these building things like a real user would right. So you don't have to think about things and add all these assertions yeah. That's.

A

B

So you want to write a desktop for your app.

A

Yeah I mean we could write a attest to honestly so you're gonna, my testing skills are kind of rusty. uh I tend to. I tend to do a lot of smoke tests when I do end in testing so like making sure that you know my twitch um twitch uh embed actually shows up on the page or that certain buttons buttons are existing. um I used to have a login button which I removed, but, uh like things like, have make sure the login button actually shows up um things like that. So.

B

Why don't why don't you do simple thing right, like you have a title, keeping it uh 100 on the internet right like.

A

B

We load the page and make sure this text is there.

A

B

A

Like that idea,.

B

And we can, we don't even have to test the local site right. We can, even though, if you want start it locally, we can yeah okay. So why don't we do the following? Maybe invert, cyprus, integration, just delete that examples folder completely all right, like we see how it's integration leave a cypress right, see how you have in cyprus like delete all the spec files, because we don't need those got it, but they kind of show like all capabilities of cyprus by default. So someone yeah and just create like a new spec.

B

There so so, usually like yes, pack, js or anything.

B

Perfect and if you want to type something like it uh and then show it as yup and then the name of the text test would be probably shows title: okay,.

A

B

A

B

A

B

And then a function, yeah callback, where we'll put all commands by the way. If you don't provide a callback function, it will still show the test, but it will show it as skipped right kind of like to do so. You will still see it. It's just you haven't implemented it yeah.

A

Okay, and um did I get this correct um that it's going to have the arguments yeah perfect.

B

It's a callback function, not just an object right, but a callback function like um yeah and inside maybe just do psi. Dot visit.

B

Okay, so one thing uh notice that it actually doesn't stay side right because it's a global.

A

B

Right when you run cypress test, it will be available. So the one thing the nice trick in this javascript project is to do this and I'll post it in your chat. You see this triple slash. Reference types equals cyprus right if you uh just post it. As this comment as a first line in in your file, I put it in a chat or in zoom, so you're.

A

B

Reference types uh and then cool close it, but uh types uh did you spell.

B

Interesting, okay: now do you see this now yeah right? So now it understands everything, because we include typescript definitions, gotcha power, variable, okay! So now uh you even in this javascript project, it all works right out of a box, and so, if you hover over every command, let's say visit, it will actually show like health for this command.

A

That is nice, it's nice to see the benefit of typescript uh in action too, as well. We definitely had some uh previously type scripted powered uh projects, but um I've never actually leveraged vs code to use to see these properly. So it's nice to see the value right there.

B

Cyprus is so old, it's it's written in coffeescript. We now moved it away from to es6 and type because when it first started, right, javascript was in such a bad shape where it was so much easier to program in coffeescript, and so that's historic thing.

A

Yeah yeah I mean I, I did a lot of coffee script back in the day uh and I wanted to take a time out. Real, quick and paul um paul won john um I'm pretty sure I got your last name, one joey. uh He wants to know the take of writing tests outside the main repo. If that's a thing to take into consideration.

A

B

So imagine you're just trying to evaluate cyprus. Well, it's quite you know a big tool, so you don't want to put it right in the main repo and have everyone install it when we do npm install or yarn install yeah. So it's completely fine to kind of investigate it and do proof of concept with your tests in a separate repository, oh right,.

A

Yeah, because you can actually call it your own site.

B

Live but after a while, it would become hard to keep it up to date and in sync with main code. Our philosophy is that, with time, you really want to update the test and the code at the same time. So when you push with commit it runs the test against that code and keeps it in sync. But it's fine to start it in a separate repository.

A

Okay, interesting yeah and I could even see like if I only wanted to run tests like on netlify urls, um like being able to actually leverage that new url uh and see when that changes yeah. I could, I honestly could see getting really crafty with the I'm sure the cypress community has uh already solved those problems, so I don't need to solve those all, but I think we'll solve this test and try to um yeah. I guess.

B

So what do we want to test? Do you want to start site the site locally, which, in in a separate terminal and test like local host profile,.

A

Yeah, let's do that.

B

A

um I could start my uh my next server and then we can uh practice that too, as well. So I've got the okay 3000, so.

B

Here's the best practice take that url and go to the vs code and open cyprus.json. So we had cyprus, which is the thing and cyprus.json file, but we scaffold it, and this keeps like all the global settings yeah in this case of the settings that you want to change. It's called base, url single word: is it a capital like this? Does it matter? uh It's it's like base url, it's like camel case right.

B

um Yes, okay and surrounded by double quotes. Yep, uh yeah, okay, add a double quote around this.

A

That makes this a json file.

B

A

B

Save it and now inside the title, spec, you can do side visit and because we put the base url, you can just say uh no, no, no, it will be added automatically. Oh.

A

B

Slash yeah, oh so.

A

B

String yeah got it, put the tip and now start cyprus in another terminal and let's see if it works, and so this leave it right, yeah and then.

B

The moment of truth every time right, yes, it's a moment of truth.

B

A

Excellent yeah I this is nice because I remember using like tools like night. What I think was night watch. Was it um there's a couple other ones back in the day, probably four years ago uh that was leveraging and it was. um It was a lot there's a lot of setup and I I would probably only just get enough to like test the title and then move on, but I like that, there's a lot of built-in stuff too, as well- and I wonder, is this.

B

All right now, if something is not going right,.

A

Yeah, I wonder oh.

B

That's interesting: it just took a while from next.

A

Oh, you know what it is. um I've got a lot of uh functions that are running to build the site the first time, so um that might actually slow the test down.

B

But but notice this right so visit was smart enough. I think by default will up to 60 seconds yeah right for the page to completely load and visit will fail if your server doesn't respond, if it doesn't respond to something like text.html or if it doesn't respond to something like 200 status code, if unload event doesn't fire, if there are any errors thrown out like by default, it already checks your it's like a smoke test right now, yeah.

B

So now we can see this loading right, so we want to check if keeping it on the internet. Is there yeah? So the best thing for this is probably to use side that contains command. Okay, all right, and so don't close. Anything just go straight to your editor, yep and just say after that. Like next line side that contains.

B

And then just the text that you wanted yep.

A

And then, if I hit.

B

A

Will this update here.

B

Wait wait wait go to a browser, yeah, a browser that is already running yes, okay notice. This.

A

B

There yeah and so here's a cool thing when you hover over command. It actually uh shows the element of the found. You see. It's highlighted, yeah.

A

B

Know that you didn't accidentally found the text somewhere else yeah and another thing: it's a live application in that iframe. But when you hover over different commands, you will notice that we actually take dump snapshots when we notice something has changed. So you will see your application, how it looked at that particular moment right in time. So you'll you'll see how it worked. All right.

A

Yeah, that is a pretty nifty and um I could see I could see why people a lot of people are sort of excited about cyprus. um So I'm curious at this point since we have like the like, we have roughly about 25 minutes and folks thanks for joining in and saying hello, um I think uh diverse.

A

I, these these twitch handles are super hard to say out loud, but uh I'm gonna, just power through and say diverse. The got gam uh note applications how easy to set up uh cypress test asking for a friend. um I think we literally just set up some cypress tests and this isn't. This is an xjs application, so it is powered by node. um But hopefully that answers your question and then sean saying he loves the uh the cypress ui.

B

Thank you I I would say for a node application. You might think how easy it is to test the code, not the website, because the code that's running in node, like access the file system right right now, cyprus is not built for that. We only test code that runs in the browser actual website, and you can also unit test any code that can run in a browser yeah. So like no file system access from your test, you can access node, but it's a different thing. uh So we test everything with runs in browser brian.

B

Let's see, github action in action.

A

Yeah, I feel like we should be taking action with github actions- yeah um pun intended, so I should be able to I'm hypothetically. I should be able to grab this basic action and it would run my basic test that I have already.

B

Yes, but remember what you did before right, you had to use yarn to install yeah, you had to start application and uh so fine. So what what I've done? In my repository when I was doing this github action was provide examples, so this is pretty common case to use yarn right, it's pretty common case to start application and then run the test. So you notice like right above basic.

B

We have a long list of examples right like how to do things like start server before running the test is right there right like right in the middle. So if you search for like slightly lower.

A

B

Yep, so you wanna, like click on start server right. So this is the action that probably is more appropriate for us yeah. So basically, you can configure the github actions using with and then provide settings in that action. So in this case our action understands that if you pass start, you probably want to execute this in the background and then cyprus will run the test and then github actions will clean up all those background processes. So I think we should probably do something like this. Let's see, yeah.

A

And I can put my my next dev, which I think actually is my mpn start I might have had that set up.

B

A

B

A

Yeah but uh I'm gonna go ahead and add this to my actions. Folder yeah, which I have in my workflows, and I have one action already so we'll go ahead and add another file and call it cyprus. So I remember that is what it is.

A

And then I had some yeah. I promised to check this and I think npm start higher.

A

Where are my scripts? There we go. Actually I don't have start. I just have npm yeah. Well yeah. I do have start. Oh there. It is next start yeah, which um yeah we'll just go with that. We'll just leave it as this, because I don't.

B

Know if I actually need.

A

I don't really need the dev server running, but.

B

Only I would think that do we want to use yarn to install- probably yes, so to use yarn um you we have to look at the readme of action. I already forgot. I think it it. It looks if you have yarn.log file and if yes, uh if you search for yarn.

A

B

We're a bunch of let's see if it, let's just see if it works. Okay,.

A

Yeah, it says the waffle. The unlock file is found. Okay, so it should be fine by default.

B

Okay: okay, let's commit and push it.

A

Excellent, so I know that I can do a terminal uh if it doesn't show I'm not really a vs code user. I've been practicing it for the past uh couple months, uh I'm more of a vim person. So all these files are good to add these uh json in the cypress folder. Yes, yeah.

B

So we definitely modified package.json right, we added cypress depend yarn, lock, automatically generated and cypress has cyprus, folder and type json, and you added you have workflow file by the way. I'm I'm a big fan of having multiple workflow files, like don't put everything in one workflow, just keep them separate.

A

I'm a big fan because I've seen people uh put it all in one and actually so github actions does have a limit of how big your your file can be like um uh as far as like kb's and I've actually seen people hit that limit. So there we uh that's also another good reason to separate that stuff as well uh yeah. It looks like the chat's starting to pick up a bit too as well um order pizza if the test pass.

A

Actually, I need to write that actually um I learned from hashicorp that they actually have a way to provision pizza. The domino's api is actually.

B

A

For anybody who is who is who cares.

B

By the way, um so one thing we use to actually test our action right, so github has bunch of stuff for testing actions but they're all kind of like you know stuff, not scaffold like sandbox yeah right things, and then you kind of make sure the right calls are made. I I believe- and I've used it in my own actions, but for this particular github action. If you look at our repository right, we do something else. If you look at our github workflows, folder uh like if you scroll all the way up right.

B

So if you look at our close boom, we actually run this action in a bunch of scenarios where every scenario is a subfolder in examples and the way you use local action notice like, for example, firefox on line 32..

B

So this is an example: how to run cypress test in a firefox, because github action environment by default has firefox pre-installed, just like chrome right browser, so we actually do uses and then local file path. So this repository test itself in a different scenarios like complete thing all right and that's how we kind of know that it works yeah.

A

Yeah excellent and uh I've just pushed up my um I guess I can start.

B

Yeah yeah look at the actions right like.

B

A

B

Workflow was configured on push right, so it should already be running.

A

Oh, you know what yeah you're right, um so I don't need to create a pr.

B

All right, so if you click on actions, oh I see it's running.

A

B

Yeah, I see our new visualizer ui.

A

Yes, just launched this week, uh we'd also click through and see yeah the job running as well.

B

Okay, so setup job is uh varana. Oh that doesn't look right.

A

Yeah, it looks like next start failed, see, I think I'm gonna have to use next dev um I've actually never used next start. I know it's actually built in a template, but I think I'm gonna need to uh switch that out. This is something interesting.

B

Before you do that right, yeah notice, how cyprus actually gives you an error, it says: okay, when I started, I know that you define base url, so we tried binging that url a couple.

A

B

Right and it has not responded, um so this is interesting, because your server probably takes a little bit longer than we expected.

A

Yeah and I think.

B

We noticed that too, when.

A

We first opened it. It took a little bit to do the build, which I should definitely fix later, but uh for now.

B

It's fine if you go to our action, because it's such a common use case right for the initial server to take a while to build and transpile everything. If you look at our examples, you can actually wait for url to respond.

B

So if you go back to the readme file and search for weight like radio, you can just see how it says: wait on yeah.

A

B

Just add this as a parameter to our action and then it will start you serving a background being that url for updating up to like a minute or two all right and once it responds, then it will kick off cyprus, excellent. We can just try that all right, yeah.

A

Let's do let's try.

B

A

We'll make sure this is 3000 as well.

B

Yep, okay, I think this would be.

A

Not the best uh commit message, but we'll we'll run with it.

A

Excellent, it's fine. It's fine trigger our new actions and I'm still getting used to this uh dark mode. uh This might not not a popular opinion, but I'm not a fan of dark mode. Just in general, I love light mode, um but you know we gotta wait. I gotta find bugs so I need to. I need to use this thing.

B

It's a little bit too dark a little too high contrasty, you know yeah, I think, like maybe slightly less dark would be nice. I'm a big fan of vs code, dark mode right in dark teams, yeah.

A

B

Big fan of a browser duck mode.

A

Yeah this, uh this is easy on the eyes and I think everything you need to see um is there and it has a nice contrast between the different levels of where you're looking.

B

A

um I think we have a lot more iterations that are coming down the road uh we actually have um well we're calling it- uh I guess code, name color mode, uh but be able to do like, um like the contrast for red, green colorblind or accessibility.

A

That's all going to be built in so you could actually leverage different, not just dark mode and light mode, but you'll be able to leverage different modes.

B

I've heard about that. That's really nice.

A

Yeah- and I think we um honestly- I don't know if we even announced that, but anyway, it's out there.

B

A

Yeah, I think our ceo actually did mention on twitter.

B

So the one thing you notice that um it installs things right, um wait it I think. Look it says: exit status, one from next start.

A

Yeah, I think next start.

B

A

Not gonna not gonna work for us I'll need next dev.

B

Because I think there's some extra uh but ground cover you probably, then you have to do like uh yarn yard install no like yarn next death, because next is a locally defined dependency. So why don't you try it from a terminal? Let's, let's see if it works locally, we see our next dev all right, because we don't have anything um installed globally.

B

I think you started in a in a second tab all right uh this one.

A

B

Cypress: okay, okay, okay! So now try your next.

B

Dev, okay, this this seems like that's the command to be yeah.

A

I think I'm gonna run with this one and then uh yeah here we go doing it live.

B

So if you look at the examples in our repo, you will see um how you can, for example, store screenshots videos right like on use on github, so that oh.

A

B

You're leveraging the artifacts.

A

B

Yes yeah, so you will download the zip. The only thing there is that the screenshots will be generated. If a test fails, then it takes screenshot automatically at that particular, and so you'll see the commands like the website.

B

uh Videos are always generated right, so, if you do instead of a yarn, cypress open, if you decide you are in cyprus, run that's the command that runs. You know headless browser right and just save the video.

A

Yeah, I think paul was actually mentioning this uh as well, that you can prevent merges if they fail, um which this uh conditional here is. um You can do whatever you want, after a failure, um so.

B

A

Is uh these? So basically, I guess, as you were explaining uh if this fails, that screenshot will get uploaded um right to the actual failure which is nice, like um it's a nice little feature, I guess that not a lot of people, think of the sort of like the green and the red or the the.

B

A

The bad, um so that's a nice little addition there.

B

I I've been looking at uh expression, syntax for github actions. It's pretty powerful, like you can set output variables, use them in other jobs and stuff like it's. I it's nice it's! So if this is a v2 right of github action, the first syntax but yeah when it just came out like we I I wasn't big fan at all, but now it's all good.

A

Yep looks like we're getting some.

B

Okay, yeah yeah yeah. I see what it says, starting right.

A

Excellent yeah. I actually picked this site because I was thinking it would be a simple example and then, as I am seeing this I'm like oh yeah, there's actually a lot of complicated things happening in the build that I probably should have grabbed my other site. um That was a little more simpler, but you know you live and you learn.

B

What is say, module not found something.

A

uh It's because all right, so it's because I'm using relay that's actually doing persistent queries. So when I said this is a complicated example, this actually is a complicated example. um So I'll need to actually run relay before this, uh which is a nice um now we can either. We only have roughly 10 minutes. We can either dig in and do this so I can grab. I can copy and paste and do this in the easier project. No.

B

We're already there right yeah. Why.

A

B

Instead of localhost right test, the production site that you have yeah actually.

A

That's a great idea, change.

B

Url in cyprus, js in cyprus, json file and instead of localhost just set your actual.

A

Yeah, that's actually a good idea, um but the fact that we're already there it's going to make me uh want to finish this later, absolutely and feel free to ping.

B

Me on any of our chat channels on twitter and with base url. You can override, for example, even in your yaml file for environment variable, so you'll you can build in your local site tested. So in this case we don't need anything here like we don't need. Any public block is gone right. Yeah um you can override so that you run local site deployed and then say test this side and maybe even run like just subset of tests, like some small.

A

Okay, so with the base url, because, like what, what and practice I've had before, is that you don't like testing live. Urls has always been a super like a big challenge, so it seems like you can. Actually, you could have tests running on the base uriel, uh which is localhost and test running on the live.

B

A

As well, um which is yeah pretty elegant,.

B

And github actions? Oh so my favorite thing about github action is combining with github pages, because in in your workflow you can say on deployment event. If status is successful, that means if, when github pages have deployed, you get a notification work your workflow around and then you can run like some smoke test against that using cyprus and you can get url even even hard-coded or from that deployment event to github pages. So I have blog posts showing that.

A

Okay, excellent yeah. I like doing a lot of uh experimenting with github pages. One of my examples in my talk um two days ago, at github universe, was storybook and uh storybook being the component design system for building components in your front. End app- and I I leveraged github pages originally to have a separate deployment for just a storybook that was separate from my main.

B

A

Which I have half set up on this buggy live site, but the beauty of this is that I'm leveraging netify for that. I could actually leverage the same deployment pipeline for netlify but deployed at two different sites. uh Thanks for the github actions too, as well, which has been uh wonderful well.

B

If you use netlife, they have their own netified, build.

A

B

Now, right where they can run the build and I've written that if I cyprus plugin for that build, so it runs the task there and because, when that, if I build plugin system knows that uh deployed url, it will just pass it to the plug-in. So you don't even have to think about the url but you're testing it. You can test local.

A

Yeah, that's beautiful yeah because they have those atomic deploys and uh do you have integration with for cell as well.

B

Yes, so for versailles, if you run on github actions, if a deployment event is very just go to my blog and I'll show how you can test the deploy site and test the preview as well, so you can do a full circle. Okay! Well, we seem to be running the tests right, yeah.

A

B

Easier when you're.

A

You're not worried about compiling uh persistent queries in graphql.

B

Yeah so right now it found like it's using the built-in electron 87 right on the side, all passed right. If we stored with video as an artifact, we could have downloaded. You know watched it.

A

Yeah, oh that's amazing, too, as well, because uh so artifacts stay up to on get your github blogs for up to 30 days, so it's it'd be amazing. To have these artifacts actually be uploaded so that way, if you have a project, that's constantly iterating um or you're practicing. What is it um agile methodology always ship uh which is honestly yeah? That's what you wanted to be doing. um You can always go back and say: hey someone broke something or something changed.

A

Let's go back to our previous iteration and see what happened, how we, how we got to this point.

B

I like, if you store those videos, imagine you have a failed test run. You.

A

Download video.

B

And when you go to a previous successful test, run download.

A

B

And just play them side by side and see where things diverge and that'll be clear. Oh, like oh, wait like this player did not load. So that's why everything is off.

A

B

A

Yeah, I love that and honestly too as well. The fact that you have this and as an action, it's open source, cyprus is open source. uh Folks can I mean this is open source friday, so you could actually dig in and if you have an example, it sounds like I. I threw out vercell and netlify, but it sounds like those examples are solved, um but yeah. If you have an example, it seems like um opening up issues and seeing if you all can uh contribute to that sounds like a great way to get involved.

B

Absolutely you'll find the source code for the action right where it's you know. It's set up for testing when you open pull requests like all those examples run, so we're not accidentally going to break bunch of users and it's all version after at the end. So in our example, you use like github action, slash v2, which is like the latest yeah published of v2 in. um If you really want to be specific, you can put a commit there, so you lock yourself the specific version of our actions so but for sure, like everything is immutable.

B

So it's up to you how strict you want to be in respect to versioning and what action you want to use.

A

Yeah- and I I appreciate you uh walking through this with me- um I had not- I mean, as I mentioned earlier, I might have said it on stream. I said it before when we started this call I haven't tried cypress out but like to get started, seem pretty trivial. um What wasn't trivial is my build command, my build system. So that's what got us hung up, but I have enough information to actually make that work. I know it's gonna, it's I can make it work. It's just.

A

I didn't think I had 10 minutes, it'd, probably take a little more than 10 minutes to troubleshoot, um but yeah. I have cyprus in my site. I'm not I've got a pr. So I'm going to be merging that later today uh and I appreciate you gleb uh walking through this process with me, uh I'm curious. If people want to get involved um with the cypress community uh or as well as like outsiders into projects, do you have anywhere that you? We can point them to.

B

Yes, go to cyprus website. We have links to all documentation our examples. Everything just find cyprus at ao. There is a link to docs right and we we do have a lot of documentation and you can find everything for it. And if you have any questions, we have a chat channel. We have discord channel, I'm answering everything on twitter and everywhere. So don't be a stranger.

A

Excellent yeah, so folks, uh thanks for sitting around with us and doing open source friday, these are streams we do on fridays, we'll be taking a break for the the holidays that are happening. So everybody happy hanukkah, if you celebrate that which I think started this week and uh happy other holidays as well, and we're gonna we're gonna have a really cool lineup, starting in hopefully february. um So if you have not yet definitely hit the subscribe button hit the like button uh follow and um clip. Hopefully this is like step one of our conversations.

A

Well, we would love to have you on in the future, talk more about action, so we can talk more about more details about cyprus, but uh thanks so much for coming along for the ride and sharing all your information with us.

B

I appreciate opportunity and everyone stay safe and healthy, excellent.

A

All right, everybody stay saucy.