GitHub Open Source Friday, 9 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: AI-powered visual regression testing with Applitools and GitHub Actions - Open Source Friday

Description

Applitools detect Bugs on apps with automated functional & visual testing. Trusted by hundreds of thousands of developers. @bdougie and @Colby Fayock in learning how to instantly add AI-powered visual regression testing to your site with Applitools Eyes and GitHub Actions.

Thanks!

0:00 - Start
3:01 - Introduction to Applitools
5:01 - Intro the applitools-eyes-action
10:15 - Walkthrough the Action Workflow examples
15:15 - SpaceJelly
17:00 - More Applitools examples
23:02 - GitHub Actions content and use cases
26:39 - Looking at the Applitools Eyes dashboard
37:01 - How to build an action
50:35 - Checking out some stars

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

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

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 welcome, welcome everyone. It's open source friday welcome. I know you've been.

B

Waiting all week.

A

For this and uh we've been pretty consistent in the last couple weeks, not only we've had uh evanu about three weeks ago, we also had paulus from home assistant, and uh we now have colby who's coming on to talk about actually skip. Something gregor was last week uh talking about open source maintenance and management of your repos and then colby is here colby, you want to say hello, yeah, hey everybody.

A

uh Thanks for having me yeah yeah, I'm super excited to have you on, because we we go way back, at least at least till november, I think, or maybe october, I'm not sure when we first met online um but yeah. You just recently took a new role um at apple tools, but rather than me explain what you do and why you're here? Why don't you introduce.

B

Yourself yeah sure, so I'm colby fayak, I'm a developer advocate at appletools. So I work closely with the developer community, trying to do things like building integrations and content. That really speaks towards like the technical uh aspects of things and how to get apple tools up and running. um But generally speaking like, I also focus on building like educational content, for things like react, next.js and general javascript, and I love github actions, which is you know why I'm here and I'm not just saying that, because I'm on here but yeah. That's me in a nutshell:.

A

Yeah, I personally love github actions as well. If you know me from the internet, um I'm b, doug eo- I don't know if I need to uh explain myself or introduce myself but um yeah. I've been working on a lot of action content in the last month and uh what I love is that we're gonna be talking about your action today, but before we jump in, uh I just want to mention everybody. This is live. We are streaming on twitch, twitch.tv github.

A

If you happen to be watching a youtube video, um we cannot allow any url. So if you drop a url into the chat, uh it will get blocked and you'll get uh basically auto banned for 60 seconds so um appreciate it. Someone was put put the put my shoe on the head, which I'm actually wearing socks.

A

I have no shoes inside, so it's just it's a family rule, but uh maybe colby will put an issue on his head, um but also mention we do have a code of conduct so definitely look down below in the description. If you are well well, definitely take a look at that.

A

If you have not got yourself up to speed with that, um because we want to make sure everything is nice and friendly and comfortable with everybody who wants to come through so please be respectful to our guests, be respectful to people in the chat and also we will be asked, answering questions the entire time. So if you have a question drop in a chat, I'll, try to grab it a lot of times, the chat actually answers a question before I can get to it.

A

So I'll acknowledge the people who answer the questions as well, uh and I will do my best to pronounce your twitch handle uh it's about the best of my abilities, so uh no promises.

B

A

It right, um but shout out to uh I'm maple leaf, who gave me the shoe on the head idea. um Maybe if I can grab a newspaper or something maybe that'll be uh that'll be easier um but yeah uh we are gonna, be talking about your action, uh which is apple tools, eyes actions. um So I'm curious. Do you want to? I guess actually would it be perf? Would it be better if we talked about apple tools first and explain that before we jump.

B

A

Yeah sure um so I'll.

B

Wait till we bring that up quick, um I'm struggling.

A

B

There we go so so apple tools is an automated visual testing uh solution. um So what we do in like from a really high level point of view we come in and we take snapshots screenshots of your application and we create a baseline. Where then future test runs will compare those previous screenshots.

A

um But it's required we've gone from pixel by pixel, which is pretty common in the industry.

B

To what we see as a more superior solution, where we actually use ai to kind of intelligently,.

A

Look at those different screenshots, so we can compare.

B

A

Just is a tiny pixel different, but is there something actually important, so that includes things like content regions where you know if you're just writing a new blog post? Maybe you don't want that to flag.

B

A

Test results, but if it's.

B

Actually, something.

A

Important, like the layout.

B

And the navigation like, then, you can.

A

B

Because I know sometimes my browsers.

A

Can have different you'll.

B

Notice, the layouts, because of maybe firefox and they're how they do css yeah.

A

Absolutely so there's a solution. We have called ultrafast test grid.

B

A

It's pretty easy to add a bunch of different browsers into your configuration. That'll stack up and run.

B

Through all these different.

A

B

A

B

Like native and mobile apps, so you can cover you know not just browsers, but a ton of different use cases so make sure that your product is fully covered.

A

Okay, excellent yeah, it looks like we were actually uh playing the uh apple tools audio in the background for everybody. While you were talking so hopefully the uh everybody got exactly what apple tools was all about. uh We can. We can move on for that. If not there's a great video that I I'm more than happy to drop in the chat too, as well, so I'll drop that, uh but do you want to explain um well, while you're here you want to explain the apple tools, eyes action, so um most people actually in the chat.

A

Just let us know if you're familiar with github actions, we can go back and talk about that. But for now, why don't we talk about uh apple tools, eyes, action.

B

Yeah sure so I'll first start off, like we have a ton of different sdks that integrate directly into like pre-existing workflows.

B

So if I'm, using cypress or selenium or even storybook like we have an sdk that can easily fit into that, and you know mostly just work once you configure that, but I also wanted to play around with the idea of what, if we can come up with something like a github action where, if we just drop that right into your workflow file it'll, you know quote just work and it'll go out and you know scrape your or not scrape your content but take snapshots of your website in your application and be able to give you that coverage without really putting in a lot of hard work.

B

Because you know some people might not have a testing solution, or maybe they don't want to pile another library. On top of that, so this is. This is another way to do that. um The way that I'm kind of approaching, that is this kind of first iteration that I put together, is what it'll do is it'll. Take that base url that you can see in the snippet there and it'll actually crawl, your site. So there's a npm package called. I think it's like sitemap generator, where it'll go through in node it'll crawl.

B

Your website yeah, I think it's sitemap generator, but it'll create crawl. Your website it'll create that sitemap file, uh which is a pretty common format and then inside of the action I use cypress to spin up the to spin up a browser and run through each of those urls and take a snapshot with apple tools. um So the snapshots are really simple.

B

I plan to add more configurations because there's a lot you can do with apple tools rather than just you know like I was saying before: ai and ai powered and as opposed to just simple pixel by pixel snapshots. But you know I'm going to keep adding on to this and be able to build new features.

B

Another thing you can pass in your own sitemap file, so say you don't want it to just crawl every single web page on your website. You can pass in your own sitemap.xml file or even one of the other plans. I have you know, given that I'm big in the jam stack space.

B

I want to be able to take a static directory, so say somebody can come in here and instead of providing a base url or a sitemap url, they can provide a static directory where we can see that we can scrape all the html files in there and then we can spin up a local server and run through that. So it's just giving more options for somebody to be able to drop this in into any workflow as an action and get up and running with visual testing yeah.

A

I love this and um I want to shout myself out one more time, but uh I spent the last month in february doing 28 days of github actions uh because I happen to be doing tons of github action work and the one thing I love about what you just explained, but you wouldn't way more detailed than I even have gotten to so like. If you look at my post, you won't get that much detail. uh So that's definitely thanks for everybody for showing up and getting that sort of experience.

A

That was a deep high level overview right, deep, high level overview. Exactly also, I got some dependencies I need to update, um but I bring this up because I've got this action that I use um and I'll get to a point. Real, quick and what's up marco welcome in the chat. um I've got this lighthouse action and it actually looks at the netlify deploy preview uh directly because nullified you get a predicted uh deploy preview url, which appends the uh the branch name and the name of the site.

A

So you can predict that, so what this action does it actually does a lighthouse ci check um directly in the pr and within their action runner- and I love that so much, and I wanted to do that. Similarly, for, like my versailles appointments as well as my get up pages but well, github pages will work because it's predictive url, but I haven't built that yet, but when you talk about the sitemap generator and using cypress to kind of build that and exp, not the experience.

A

What I'm talking about the environment um now that it's clicking in my head of like if I wanted to rebuild that experience, that's not just netlify specific. I could build that for any sort of experience using things like cypress as well.

B

Yeah and it's interesting, I I probably want to look at your lighthouse thing and borrow ideas from there and yeah back and forth because, like ultimately I wanted, I wanted to be able to have it, so you can configure it. You know, however, you want, but you don't have to go out of your way to do those those types of things. So um you know again just so it just works when you drop it in with whatever your project solution is.

A

Yeah yeah and um speaking of just works. I know we're kind of racing through the uh the conversation, but I kind of want to see it just work. um So you had mentioned before we started that you had a quick demo to be able to show yeah.

B

Sure um did you want to uh so. If you go to my github and I think if you literally just inside of the url, put the word test in front of or yeah that works, I was going to say test in front of the uh repo name, so so test apple tools, eyes, actions, uh that's great naming convention, it was unintentional, but it works pretty. Well.

B

A

Not forgettable.

B

At this point yeah, so I think we can first of all pull up the workflows file yeah and we can see so here I have. I think I have yeah three different examples, the first one.

B

um So what this is gonna do every time a new every time somebody pushes a commit up to main or a new pull request, a targeting main it's going to fire this action, and what it's going to do is it's going to in this first one: it's simply going to take the top level url and run a screenshot on that and the reason by default. It only does the top level. One is, as you can imagine, if you're crawling a site that can get really big.

B

So I want to try to control that so that, if somebody's just trying it out, they don't you know unintentionally ddos themselves or something where.

A

Does the where's.

B

The specifically grab the top level. Is it this right here the base url yeah, so.

A

B

If, if it doesn't have a defined depth, it's going to just simply use that and then use that for the visual testing. But then, as you see in the second example, I have a max depth defined, and so what that'll do is it'll find any link on that top level. Page and it'll also provide visual testing on each of those links. um I think it might be domain specific. I can't remember uh I would imagine so, but that way it's only going one level deep.

B

So it's still going to grab a lot of value off of that site map, but it's not still going to be super deep, but that's configurable. You can really set it up to do whatever you want.

B

um It's just, of course, that's going to scale the more you have more pages to your site, but then, finally, at the end there I just have another simple example: where you're providing your own sitemap file, um you know, sitemap files are really common, so like people specifically maintain those to whatever their preference is so maybe you just want to pass that in and only have those pages checked out, but either way whatever the option is it'll grab that and it'll run the test.

B

Now I'm curious if you're actually able to see the logs on your end. um If you wanted to try going up to the actions tab like you can see all the workflow runs yeah, I should be able to see the logs yep cool. Are you able to click into? I think uh it should be this one yeah cool, so what it's doing here, you can see it's spinning up cyprus and that's where it's starting to run the visual test. So in this example here we see some green check mark and then a few red flags.

B

What that saying is when it visited that page and provided a visual snapshot. It found a difference in that page and it's flagging it so that we know that we can look inside the apple tools, dashboard and figure out what that change was. um Oh nice.

A

Yeah am I able to click this? I need to have access to your um oh yeah, so that's.

B

So that's probably one of the reasons why this one fails because it was a 404.

B

I think I haven't ran it on this specific one in a while- and I just ran it this morning- just to get a um you know something that we can show off. But it's a good use case because you know yeah, it failed and it's something that would flag in apple tools. Yeah.

A

And it's a good thing: it's a good use case to find like if sometimes we name things actually I'm going through. Oh, I just hit my mic, but apologies for that.

A

uh I'm going through some updates in the github hackathon site right now, and that's the thing I've mentioned before, on the stream and on the internet, but um like we're changing the names of different files and different pages and at the moment it's a grid, some maps, so it uses static site generations to develop those things but very easily we're renaming things and finding that, like things are broken um so.

B

A

If you happen to make a lot of changes or you take a lot of contributions from the team, uh it's nice to be able to get another check to see where, where things sort of fall over.

B

And break- and it's funny it that was totally like again. It was another unintentional benefit like because, of course like being able to provide visual testing gives that capability, but I never connected it as to also broken pages, because, that's you know, that's realistically uh going to be an issue for projects yeah. Unfortunately, it's an issue for.

A

A lot of my projects.

B

But so this example was the one where it was actually passing in the html file. Now I don't know if you want to click the depth job on the left. I don't know if that actually will show logs for the site crawling, because that might be interesting.

B

um No, so it looks like it didn't, but um so in this example, though this is where I actually crawled the website, if you remember with that parameter of two levels deep. So if you scroll up just slightly there to the to the page logs, those are that's visual, checking all those different pages that were a link on that top level page. So it's it's automated. I don't have to worry about maintaining it anytime. I add a page to site. It's automatically going to get grouped into that.

B

The testing complete side. Note why space jelly.

B

uh So that's just uh one of my websites that I maintain I I put like some tutorials on there and uh space jelly. You know this is completely non-related to any of this stuff, but yeah. um So uh I I've always thought.

B

Jellyfish are cool and I really like space, and I gave my friend that idea for to like commission a logo kind of thing and that's what he came up with and I fell in love with it um shout out to trevor lang if you're watching, but um I love it, nice yeah, I love it. uh I love.

A

uh Applying um a nice cute character to the stuff that you're working on um which like for the most part like you, could be as boring as me and have now I'm just like basically flexing my all my stuff, but you can have like uh just a straight up. Here's a website and here's some code or you could do space jelly.

B

Yeah yeah, I I thought it was pretty cute and uh you know I I think it really. I don't know I just thought it was fun and I wanted something fun to put out there. Yeah yeah sounds good. Sorry, as.

A

You can see I like it. I told.

B

A

Yeah, but actually speaking on that note, you not only um so yeah we'll go back to big back to the apple tools, real quick, but I wanted to actually just bring up the point that you actually have a lot of content uh uh around github action. So, like you got this together, pretty quick because you've only been at apple tools. What less than six months, um which is.

B

A

Very impressive that we have this git of action that we can actually drop like basically drop in um apple tools into our sites, which I do want to do in the future. um But can we talk about some other, your other github action, content and sort of your experience with github actions as a whole? Sure absolutely.

B

um Yeah so like I have my content specifically, but I can also talk again about another apple tool use case and not just to pull over there, because I think it's interesting yeah um so getting to the content in a second, but another use case that we're using it for with apple tools, which I find really uh interesting is, um as you might like, be aware, like when you're helping build developer, integrations and stuff, you want to ultimately provide like examples for those integrations and so, for instance, with apple tools.

B

We have different tutorials, where we show off how you do it with cypress, selenium et cetera, et cetera, and I, as I kind of inherited maintaining that like I realized that kind of keeping up with all those changes, and you know as the sdk changes as other libraries, like those things, tend to break right. So how can I come up with a way where it's automatically checking every time, every time dependent bugs me?

B

How can I make sure that it's still working, so I was able to use github actions where now anytime, there's a pull request. Anytime, there's a security pull request. It's going to run through those tests and make sure that the sdk is still working properly and further on that we're also going to come up with uh another use case where we're going to, I think we're going to run like a daily cron, where we're going to try to upgrade the packages.

B

So um that way we can always pull in the latest version of the sdk and making sure that it's still working with the examples and again it's just this- is providing like a maintenance layer that I don't have to worry about when we're trying to make sure that these examples are always working.

A

Yeah I'd be curious of how you are using actions to pull in packages to maintain those sdks.

B

So I have, uh we haven't done the upgrade portion yet, but um what my plan is is, since you can run really any command line scripts. My idea is that I'll run npm install at latest for the sdk package and then, since there's also that I'm sure you're aware of the package to check the code back in with the github by passing in the github token like that would be the idea, so we would upgrade that package and once it gets checked in, I would think that that would kick off.

B

Another example run and make sure make sure that that works.

A

Yeah yeah, it's um it's a conversation. I've actually had a couple times with um gregor gregor. Who's actually was just on the stream last week. um So that's why I asked about using an action because a lot of.

B

A

Familiar with the this term, github apps, where, if I pull up probot, uh gregor, actually maintains this tool called probot and the difference between github actions and the reason why github actions uh is is so nice because it gives all the bells and whistles for free, there's, no installation, uh but with probot you might get some limitations uh with github actions and the sort of what you can do, especially at forks in um third-party uh users uh with github apps. It actually gives it once you install the github app.

A

It actually gives the permissions to be able to do things like maintain uh files, even maintain actions, so it'd be something to look into. I mentioned it because, if anybody's not familiar, we do have a playlist of all our previous open source, friday guest and I'm struggling to find gregor's specifically gregor's um chat. Well, we actually did talk about this, because what he does is he maintains 25 different repos and those 25 different repos are all automated and maintained through um through a github app and some github actions as well.

B

So that sounds uh so I I've used. I think it's called depth foo before have you heard of that one? It sounds like so every so it's like dependable, but more configure configurable. So I can set it to like um try to keep up to date. uh I think with the fu uh so yeah, okay, oh and.

A

Now I just I'm.

B

Spelling some weird d e: I could double check the spelling, but I think that's it yeah they're right um so like not only will it do security updates uh kind of like the pentabot, but this will also like you can set it to every so often it'll create a pull request within a minor update right that way, you're kind of keeping up-to-date dependencies. So it's really nice yeah, I'm guessing. It sounds like the pro bots similar to that.

A

No probot's, actually, if you wanted to build this, um so if you.

B

A

To build your so similar get a back actions you can build. You have all the pieces to build. Your own integrations interactions with your sdks github uh probiot. Actually is the sort of sort of base layer or the template to be able to build depth, foo or dependable yeah.

B

Was actually built on.

A

Probot, um so that's sort.

B

A

Actually, the pet bot wasn't built on prologue. It was built in ruby, um but the idea of the same approach that they took is similar to like purple, which basically gives you all the bells and whistles up front. So these are some examples. That's really cool, um but no, I was just thinking of um of the sort of maintenance too, as well, because I've been working with uh gregor on this other thing called octoherd and octoherd is the the ability to have your scripts.

A

So if you wanted to run through so outside of just dependency management, imagine you have a template repo and you want to. Basically when you update the template, you want to update all the other repos after the fact that we're based off that template um also recently people change their branch default names.

A

Imagine going through all your repos updating the branch names to whatever your default branch protection rules, it's more of like this is actually more focused on, like your settings tab and what how you manage your repos in the settings or in your github folder, so yeah. It's really neat. He was on last week to talk about this, so he he's like next level when it comes to managing multiple repos, because he kind of maintains projects on his own um yeah.

A

But uh let me drop in some links in the chat and then we can go back to um talking about apple tools, because uh actually we didn't go, we didn't get into the content either as well, which I I realized.

A

uh But do you want to quickly talk about the sort of your your egghead courses and the other content? You've been sort of sharing around github actions.

B

Yeah sure so, just generally speaking, uh when I first kind of learned about actions like it took a second for me to kind of make, it click like that. It's like a ci cd kind of tool that you can really simply use, but like once it did. Click like I feel like it just opened up a lot of doors for things that you can do right inside of your github project, rather than leaning on like a bunch of third-party services kind of coming in there, which you know, there's a lot of great third party services.

B

But I love that I can just have this workflow file in there, um but it also so with my egg head cord. I think I have where it walks you through creating a custom, github action, um but then on some of, like my youtube channel content and the uh um yeah, we can see that first yeah right there.

B

So the automate um javascript and github actions so that'll actually walk you through um how to create a node scripts and kind of like what I did with my github action for apple tools and it'll actually walk you through how you can create one, because it's really not as bad as it might seem from the outside, because there's a few configuration files but ultimately you're running a node script, and once you have that node script, you can really do whatever you want. So it's it's really powerful.

A

Yeah yeah, that's um so are you using a template to build yours? Are you using the uh the github action toolkit to like? What's the what's the trick when you start going through some of this uh content.

B

So I'm not familiar with the template part of it, but I do use the uh the github action toolkit um for some of like the things like grabbing input, values and um I'm not doing anything crazy yet with it. But.

A

B

The more basic features that you need- okay, and to be clear, this is the uh the repo that you sourced your interactions with for the runners, yeah yeah, so um yeah, so like uh setting grabbing inputs setting outputs, I still haven't found. I still haven't put up a lot of use cases for outputs yet, but um there's a lot of great things that you can do easy.

B

I think I also set up octokid itself in one of I think I did that in a tutorial or something, but um that was nice where I was able to. uh I don't think I did it here, but using octo kit to actually interact with the pull requests and such um that was pretty helpful, but um actually.

A

B

Was the latest uh tutorial on space jelly dot dev? Actually I I walk you through there also creating a new uh github action. Please yeah yeah.

A

So that's where you'll.

B

Actually, spin up octokit, oh very nice yeah, I think probably my the most fun uh action that I've done so far. It's a pretty simple one, but I created this uh action. Template called content reminder where, so, what I'm doing is I'm writing it.

B

On a cron where I I have a file that, where I source all my different rss feeds and even just like static files where um daily this will go out and it'll, just like fetch a random piece of content and send me an email with twilio, because I'm notoriously horrible for tweeting my own content and, like I have a huge backlog of content right so like having that reminder in my inbox is a great way for me to grab that link and then go out and tweet it or something.

A

Yeah, that's uh that's actually pretty genius too, as well, and uh I didn't know you had this backlog content because I don't think I've actually explored space. Jelly, uh no pun intended, uh but uh but I knew about the egghead course, but yeah you've got some some good stuff there and I definitely encoura. I dropped the links, as you were talking to as well. uh Folks. Definitely check out uh that content.

A

If you want to get level up on github actions, um the one thing we didn't do, though, is I wanted to actually see what does it look on on your end for the apple tools dashboard because you had mentioned uh when there's a difference, so I don't know if you have.

B

That uh I know I gave you a share link.

A

um But I'd love to see what it looks like, especially at that four or four like what. What what I would expect. If I logged into the dashboard and saw that.

B

A

Just pull it up, okay, so you can show whatever you want: yeah, okay, cool and then folks, if you have any questions like about github actions uh about apple tools, just now is the time. Definitely let us know and uh we're happy to sort of uh field. Those and hopefully get you an answer.

B

So like this one particularly so this is the apple tools, eyes dashboard, and this is really when you first get into the dashboard. This is going to show you all. Your latest uh test runs.

B

So what that means is uh when brian was running the action or when we were looking at the logs like that was one test run where it went out and viewed the different, the differences for the site, so in particular here, like you, can see the space really ones where it went out and it took a snapshot of the website, and you know here there was no. So it looks like that was the first baseline image, but there was no differences, so it you know it's green and it's passing because there's no issues there.

B

um I think the browser is too wide for me here. um Let me refresh the page, but.

A

Let's go to you have an amazing amount of tabs too as well. I know I know.

B

I need to exit out of here, um but so I think I just accidentally failed that one myself, but besides that point um so like if we go to another one where it's actually failing like we can see here now. One thing I want to kind of caveat this with is this is not using like any of the cool ai tools or like uh content, regions and stuff, but, as you can see here like we're it's showing that difference.

B

Let me see if I can zoom in yeah, so like it's, showing that difference where I I never re-ran these tests and approved it after I um made some adjustments to the footer like here. I added more links to the bottom of each blog post and like changed up how the footer looks. So it's flagging that so that I know that it's it's broken right now. In this event, in this case, I actually intended it to be that way.

B

So it's you know I would approve this and I by just like hitting this thumbs up here um but like if that wasn't the case. I now have that example, where I can say: no, that's not good uh that'll go back to uh you know, then the developer or whoever can go back and fix it or you know, figure out what we need to do to resolve it. Let me see if I have any other examples: uh yeah helps from um yeah so like another, one is like.

B

We have storybook integration, which is like super easy, like you, just literally need to run um a single script and it'll go through and capture all of your different components, but here um like this, is going through and capturing all the different components of a storybook, and that's all automated, like you literally, don't have to set up anything for a storybook integration.

B

um What I wanted to also show which I don't know if I have a test- run ultra fast, batch, okay, so like in this example, you can see the os here like where you one of the questions earlier was: can you do different browsers right so here in this example like we're doing uh here, we're doing linux and chrome, chrome on linux or or it looks like this- was out of pixel 2 and we have an iphone x and you know we're doing all these different uh devices, which you know this is this, makes it so much easier to do cross browser testing so that you can have those snapshots and understand where things are actually failing.

B

um You know in this instance again like there wasn't any issues, but if it found something it's going to flag that for us, and we know that we're you know good to go, which you know it's not going to provide that level of detail for you if you're, just doing simple like um like imagine if you're just doing like you're testing that a particular element is there, like, you might be missing the entire context. That element might be completely off the page.

B

You don't know that, but because this is actually what the user sees it's going to actually be able to compare that really well yeah.

A

Yeah and I like the fact that the the different devices are available for you for testing, I used to have a pixel before I lost it in brazil, uh long story, but I specifically used it. So I could do some pwa testing and stuff like that and uh yeah. I I don't want to carry two phones ever again, because it's hard to keep track of, especially the one that you don't really use. uh You only use for programming, um yeah.

B

A

Really cool to see- and I like the the fact that you can do that.

B

Yeah and the thing that that's great is so coupling it with tools like cypress or tools, like uh you know, anything where you can interact with those pages on the browser, so um in this instance, in this particular test case like uh what we're doing is inside of cyprus, we're clicking on the login button. Now this is just a you know, a simple static page that we have as the demo, but we're clicking on this, so that it goes to this next page, so we're actually testing those interactions, not just one-to-one things.

B

We're actually testing did that login request work now. Imagine that with like end-to-end workflows, where you want to capture that entire process and it'll capture all those different browsers for that.

A

Excellent yeah appreciate you giving us the I guess eyes on the uh the apple tools, uh dashboard too as well. There we go, but can you clarify apple tools, eyes, actually is it's a product within apple tools.

B

Yeah so like the I we have, the is sdk eyes is the product, and then the ultra fast test skirt is like, on top of that, where it's going to actually go through and um provide a lot of the additional capabilities. On top of it.

A

Excellent and uh there's some questions coming in too as well. I've I want to actually propose this question to you, which uh does rom. I think I got that right. I think I'm gonna, if not that's what your name should be. uh Where would you say that uh github actions shine like where would you from all the content you've done like? What do you think it really shines within your developer, workflow.

B

Yeah, so I think for me personally the thing that, like the the everyday task that everybody can get behind, is simply running tests for your project, so like it's so easy to automate your test like if you already have a test suite going like you, don't have to have that, where somebody's going to have to manually run it every time or do a commit hook where that could be really slow for the developer experience right. So the way you're setting this up is like every time it gets pushed out to gab.

B

It's gonna run those tests for you. I think that's like the the most core example of like how this immediately becomes helpful for people, but you know coupling like taking off from there like they're like I have that content reminder thing where, because I can run it in cron mode, I'm just daily doing a task that I want. So it's really any kind of code task that you want to perform um in some kind of automated way, like it's a great tool for doing that.

A

Yeah I I've given a couple talks on this too, as well.

A

Just recently in florida, florida jay asked to meet up um they reached out to me, and I spoke in florida, uh but they uh my examples, always go into like github built a tool, so you could basically build some new features onto github, uh so like updating changes or visual testing and stuff like that, probably stuff that github is not going to really address within your repository, your yeah, within the framework of what you're looking for, but what I love about it like I like to automate stuff within the repository so like.

A

If I know that every single time a pr is opened or every time I pee it, rather every time a pr is merged. I know I'm going to need a change log being able to do something like I have a web hook that follows whenever something's merged in the main branch and then generate that change log automatically. For me, because that's one thing you you don't know when to uh you, don't keep up with sort of tweeting out your own content. I don't keep up with keeping proper documentation. So if I have opportunities.

B

To automate a piece of.

A

That I will do that and uh yeah definitely check out my content. I've got lots of examples on that.

B

Like going back to the open source example like when somebody does create a pull request, you have no idea. Sometimes you have no idea where that request is coming from or what it's doing so like having that github action set up on your account like when somebody creates a pull request. It'll automatically run those tests like you can even run like linting and prettier. If you want to format those changes like that way, it's whatever you have to put your eyes on it, you're not wasting your time testing if it works.

B

First, you're, just making sure that you know the code actually works with those tests.

A

Yeah- and uh I do have an example too- that um I'm gonna mention it to you, because you're doing a good job of making content. So if you want to take this and run with it, um I've got an example where I have uh so. This is a workshop. I I run and I'll be running this at all things. Sorry open source 101 at march 30th this week or sorry this month, and uh I have an example where we have linting that that happens. So we sort of walk through this yeah. So here we go.

A

We got the node code formatter, it's a whole other github action that we're just gonna introduce right now in the middle of the conversation. uh But what it does is it links your code for you, just as you do it in prettier, uh but imagine someone that hasn't had prettier setup or you're dealing with contractors and their environments are completely different. uh It actually takes that and then it actually commits it back up upstream to your your pr interesting.

A

So you will get a change from the formatted from the uh uh the github action to, let you know hey. They forward match your code for you, so like one thing that I I hate doing is like sitting in the conversations and trying to discuss linting when we should be discussing the actual code itself. Like does the code.

B

A

Is the code arc like? Is it architectured in the way that we think it would survive, code smells and all this other stuff? But yet we we get really focused on like double quotes or single quotes in javascript, and I think it's valid like you should make that decision. But you should make the decision once uh so. When you ask.

B

A

Where github actions shine, it shines in those areas where you just do out of the box things that you're not able to do. You know I can't convince everybody to use vs code. I can't convince everybody to use this thing. um I guess you can. If you get a jetbrains license, everybody uses jetbrains and we're we're off to the races but yeah. Unfortunately, not everybody wants to code the same way, I'm trying to convince everybody to move to them and it's just not working.

B

Yeah one way I like to put that is like you're, making the robots being the bad guy right. So.

A

B

Don't have to have the tension in those conversations of a code review where you have to nitpick on those little things because they are important, like you said, but you know we don't need that in a code review like we just need to look at the major functionality, so it helps so much with that.

B

A

uh I wanted to take a step back and look at the go back to the action we originally started, the conversation with um because we didn't really get into. We mentioned the toolkit um to be able to interact with the actions, but uh I wonder if you're able to get provide some insight into well one I'll get to the proper repo, um but some insight to how.

B

This was actually built sure, um so I think we can dig in right inside. Do you want to start from the top so yeah so I'll? Preface this with the reason. So if you want to go into the docker file first like this, is the entry point in the application, and you know I'm I'm not a docker guy.

B

I don't know what I'm doing really, but the reason why I went with the docker approach is because I was having a hard time figuring out how to get the cypress environment up and running properly, with all the things that are needed and like the caching mechanisms- and you know I talked to gleb over at cypress- and he mentioned- maybe snipers can create a function that they export to install cypress right in node, which would be great.

B

um I haven't gone that far yet, but this provides me a way to spin up an environment where I know that I can run my action code and it's gonna work. So really what this does it points to the sh file which, if you wanna, go to the sh file yeah the entry point would oh, is it in source? No, no! No, it was there. It was yeah under the cypress file.

B

Oh there we go yeah there we go, so I don't know why again so, like again, this is a simple one like we go into the workspace directory um here, I'm actually cloning, the apple tool, size action. The reason I'm doing that is because, when we're working in somebody else's workspace- and then we create the environment. On top of that, I want to be able to pull on that action code that I can use to run it now. I maybe that's not the best way to do it.

B

I'm sure there's a better way to do it. But again, this is how I figured out.

A

B

But then we install the dependencies for that and then we finally run the script and that's where the meat of it's going to be. If we want to head over there, yeah.

A

And the the actual javascript file itself.

B

Yeah yeah, okay, um so here this is where we start to pull out the action score and really I'm only using the core for this one, because um since it's not like super complex right now, what I'm really only using it for is getting the input values so yeah. We can even see right at the bottom of the screen there that I'm grabbing the api key.

B

I'm grabbing the different configuration variables so that people can set their base url, but really just so that people can configure it from the outside when they all they want to do is drop it in their workflow file.

B

So a lot of the top, probably most of the script, is actually just grabbing the input values because then, as we get towards the bottom, we're the middle. Rather, this is where I actually do the the site map generation.

B

So once we have that base url and we kind of determine what kind of depth you want to do, we'll run that sitemap generator function which will generate that file or if you already have your file, provided I'm going to get that site map so that we can use it but either way at the end of the day, you're all we're ultimately going to have a pages to check variable, which is going to have an array of all the pages that we want to go through.

B

Okay. So as we get down to the bottom here, um so this is where we actually run cyprus and a scripted way. So they have this method run which allows us to pass in the configuration that we have. A lot of this is boilerplate and I actually kind of got the idea of and learning how to do.

B

This by uh jason langsdorff actually put together a visual testing plug-in for netlify, which was really cool, um but he did something similar here where you pass in the configuration um and then you kind of pass in these environment variables, because because it's it's, uh you know we can't set our own arguments to a function that don't exist like we create these environment variables so that we can later access them in the cypress environment. And that includes the things like the app name, which is really just like a title.

B

The batch name, it's another label, um and then we get some more apple tools, specific configurations. Okay, again, I want to add more things to it, but that's at the core level of what's going on with that.

A

Yeah, so I think the uh for the sake of getting this working and having an example like this is this is great and I'm sure I could see where you could sort of pull the levers and add the new functions and um expose more of the apple tools api, but yeah. This is um yeah for for me who has built actions, this is readable and writes javascript.

A

I hope that folks, uh if you do have questions um this is open sourced, so I highly recommend you drop it a star. Give it a fork open an issue, appreciate that um and then then we're able to uh you know continue letting open source win.

B

Yeah- and I I do want to show you one more thing- yeah, because I want to show the actual cypress test. So if you go back up to the top level and you go to the cypress directory yep and then integration and then the eyes, so the cool thing about this is this is a really short and sweet file. So literally, all we're doing is we're taking those pages to check the array and we're looping through it, and we open up eyes on each of those urls and we pass we.

B

So we open the eyes kind of like you, imagine a camera lens or your your eye. Yeah we check the window grab the page and then we close the eyes and that's all you do like. If you even want to integrate this into your own cypress workflow like that's all, you have to do to get up and running. So it's it's really nice and short and sweet, and just passing in the configuration into apple tools. uh That's awesome cause like I don't have.

A

uh I know daryl just uh dropped in the chat. I really need to learn. Cyprus, I feel like gleb, was actually on the stream back in december, so I learned cyprus when glove came on the stream. Okay, um actually added it to my bdugi live site and uh that's as far as I got, I wrote two tests and basically have not gone back to writing more tests. um I just need more code, just in general on that site, um but definitely need more tests, but I like that.

A

I can basically have not only cyprus but also, I can also add apple tools to my my site and get some of that visual testing as well.

B

Yep yep there's not there's not a whole lot that you have to add to get it and again. This is just the base level like we talked about before about like the different browsers that you can test and, of course I want to eventually be able to have that configurable, but, like this gets you so much with just this little snippet.

A

Yeah and I wanted to grab the uh the link folks are asking about my workshop that I've mentioned in passing. um I will drop it in I'll drop in the chat so that way, y'all can catch it. uh I won't actually find the.

B

Actual workshop.

A

But essentially I I what I just showed colby. I walked through that uh with the I think we had 200 people last time. We did it last year, um which was a lot of fun uh if y'all. If you just want to learn about open source, I highly recommend checking out this event. It's free for everybody who wants to register, uh and you get a lot of sort of aspects um I went to.

A

Last year I went to an open source design, um talk or workshop, where I learned about design um in open source and how to sort of establish.

B

A

Is yeah some good stuff.

B

But yeah I.

A

Love the theme.

B

A

Yeah yeah, they do a good job. Actually, todd uh todd and the red hat folks have been in partnership with this, and they do a good job of sort of you know encouraging people to be open source. I love that there's an event that is actually just focused on 100 that um and it's all beginner focus too as well. To also point that out. That's awesome.

A

Excellent um yeah, so yeah, that's pretty pretty like approachable uh the one thing I don't want to ask about the the dockerfall, I'm not even ask amazingly just mention, uh because not only people are aware of this, uh because I know you mentioned I'm not a big docker person. I literally learned docker uh well, I knew docker before, but I started using docker more heavily because of github actions, um but I I started off this conversation with a um with my links to there.

A

We go build your own github action without a docker file, um not a lot of people aware of this, but we have this feature called composite run steps, uh and this actually allows you to put all that sort of bash scripting directly into action.yaml file, which we didn't actually take. A look.

B

A

uh So I do encourage you call me if you, if you want to back out of the sort of docker rabbit hole, um you can definitely check that out, um but as I can actually even show an example too as well, but I did want to take a look at your action.yaml because not a lot of folks are aware of that.

B

As well yeah, no that's great and nothing against docker is just like. I have a hard time understanding like working between the different environments. So that's you know, that's why it's a little bit of a bear for me.

A

Yeah yeah daryl mentioned a really good point that not most debs are not great at docker, except we just the goal is really consistent environments uh and the thing about that is that github, what we're trying to do with this? um uh Well, I already lost my link. uh What we're trying to do with this is uh give you that consistent environment without you needing to leverage docker if you're not really familiar with it. So um that's awesome here the similar to how, when you run actions, you can have a run step that runs bash.

B

It's like well you're installing.

A

That cypress um caching or I'm not forget what it was already. uh You can actually do that sort of setup here, interesting yeah.

B

So definitely worth a look.

A

um And then also my blog post, I do go through details on how to migrate a docker action into a composite run, step action which is essentially delete. The docker file. Add it to the action.yaml, that's awesome, uh yeah and then the daryl uh follow up on his question. Github actions ran using docker actions 1.0, so that was the sort of the one way to do it uh that changed.

A

When actions 2.0 came out, which was, I don't know, if we really and with in the world of github actions, I don't know if we actually spend a lot of time really focusing on version numbers, um because we don't. um I went and realized that there was like a second version yeah in 2019 in the fall of 2019. We uh actually not the fall. It was the spring. That's when we added ci as part of the the functionality of the action, so actions did not ship with ci, originally in 2018.

A

uh So when 2019, when 2019 versions of actions came out, uh we made it possible that you didn't have to use a docker file as well when running actions, awesome yeah and again they both work just as well. The one caveat is like, depending on how much work you're doing in docker and setup it could take longer. You can actually use a lot of built-in caching and stuff like that, with github's uh runners. By going the composite run steps so usually your discretion you'll definitely pull the levers play with it and see if it works.

A

B

Yeah and when I was talking to glub about that, like he made a good point like I- and I didn't realize how much that github, actually ships with the environment like I know the aws cli, is there by default and like he was mentioning that there's browsers by default. So like that's a lot of like basic things that people can use when they're working with their sites, it's awesome.

A

Yeah the the feature- and I didn't mention I was gonna say like I mentioned before- but I didn't mention this, but every time I talk about actions, I mention this. The the whole point of actions is so that github can give you some tools and then get out of the way. um So.

B

A

The action hosted action, runner environment, we're giving we're giving the minutes we're giving the environment so that way, you can take it and run with it, uh and if it doesn't work for you, you can always do a self-hosted version. uh You can pull out the docker. You could do whatever you would like to do to make it work for you. So I love.

B

A

Questions with open source, maintainers and learning their issues and their problems, and seeing if I have an answer for it, if I don't, I love talking to the pm team and saying hey this open source project could use xyz. Would you like to put xyz into the runner.

B

Yeah- and I think it's great because like because you can run node scripts or you know whatever scripts, you want like there's so many possibilities of what you can do. Yeah yeah.

A

Yeah good times and uh folks, it seems like we're our chat's getting live here uh livelier now. So if you have questions about github actions, apple tools, if you have questions about colby and uh how he's making that purple white in the background, um definitely chat's open for questions. uh This is open source friday. So, if you just joined us github, we host open source, maintainers action creators contributors uh to talk about their projects and give them a place to you know get those shiny stars.

A

uh Just kidding stars are great, uh but on that note actually uh did you have anything else. You want to add about the action. uh I did have a another off off the cuff uh random question, but I didn't want to interject it and get you off the rails.

B

No, I don't think I think in particular. You know, I think, uh I'm I'm excited to kind of pour more time into building out features with it like. I was talking about the static directory thing, um so it's just you know, be able to figure out ways because, like ultimately, github doesn't have the context of the application beyond what you give it right.

B

So if I need to figure out ways to do that, config in a configurable way for people, so um you know figuring that as I go along, but it's it's a cool challenge and I'm having a lot of fun with it.

A

Yeah- and I would encourage anybody who also is doing um a lot of this action work building stuff for your company like colby's doing I do encourage you to check out the github support community as well. um It might not just be as clear, but if you do want to talk about, github actions just go into the ecosystem tab, and then we have lots of questions that are unanswered.

A

We have a lot of questions that are answered so, if you're, just sort of like trying to figure out hey brian mentioned this thing, I forgot what it was called I'm using docker, but I don't want to ask those questions here. Our support team, our pm team, our engineering teams are all in here answering questions for you, so um I do encourage you to just definitely check that out so moving on.

A

I did want to ask you about one thing that honestly, I I used to ask this to all the people who came on the open source friday, uh which is github stars um a lot of folks like they. They have questions about, get upstars and I'm doing a whole. Just I'm building a whole nother project um outside of github, where it encourages you to contribute to open source, it's called opensoft and uh it has a new feature.

A

I've been building for the past couple weeks on stream, where, based on your interactions with github, it will basically suggest contributions that you can make. That's that's the highlight. That's.

B

A

um I haven't got that far yet, so it's really cool, but it's right now. It's just an idea uh in a database I just have. I have a database of some projects that I'm going to be doing some weird checking with um and uh the question. uh I don't know how to academ uh get a package replacement, npm registry. The answer is no npm registry exists, get a package that exists because there are other use cases that are needed uh for packages, especially in the enterprise world.

A

If you want to host packages for your organization, uh it's a little different approach so think outside javascript for pack github packages, um man, it's like I'm doing my job, just 24 7 all the time. um So I actually wanted to uh a lot of people. Don't know this. You can actually go into github stars and I'm going to put your name, which I think I spelled it correctly and I can.

B

A

Stuff that you, uh you have starred so, which is uh kind of closes out. The conversation like to ask you questions about the stuff that you've been starring on github.

B

That's fun yeah, so.

A

B

Anything here sort of jumps out at you, so that top one was interesting to me um the uh so I I really like to use um man I'm trying to. Can you scroll down a little bit, so I can see what the um this is amazing, who thinks of this right right right, um uh but it was yeah.

B

So I'm a big fan of scss and okay part of the issue that this person was trying to solve was that so, if you're, using something like typescript- or- I think even like you know, css and js like you, don't get the same uh type generation tools and stuff like you get uh when you use scss. So this person came up with a solution where you kind of write inside of your scss, like js doc, where you define those props and what it can do to change the styles and you get this auto generation.

B

I thought it was a really cool idea, because I haven't seen something like that yet, and you know as an scss fan, something like that is valuable, but yeah. I just thought that was neat excellent.

A

uh Honestly, I'm stuck on this is that supposed to be freddie, mercury, I'm like trying to. I think so! That's that's how I take it yet this is excellent. uh I'm gonna give this a star because not that I need this, but I just think the the effort that they put into their um their readme.

B

Is worth the star, so everybody uh if you're interested in.

A

Learning more about scss or sas, um I love sas yeah. I used to use it a lot back in when I first started in the web development program. That program when I started using web development like seriously and actually building projects that people used um sas was huge and I used it pretty much in everywhere. I touch and I've sort of fallen off the train, mainly because I start a lot of new projects, and it's just it's more work to try to get everything set up the way I want it to and like sas.

B

A

Included in a lot more of these uh frameworks and boiler points, so I've sort of followed off the sash train. um I use post.

B

A

At this point now,.

B

Okay yeah, I I created like my own, so I use an xjs a lot, so I created like my own starter, where I have it already all bootstrapped and stuff, but um yeah like I haven't ever hit. The like. I know, there's definitely a lot of benefits with something like css and js, but I don't think I've ever hit the limitations of sas because, like a lot of times, I'm working with a small team or something where it doesn't really hit. Those uh um you know limitations as much.

A

Yeah excellent and it looks like you're uh just looking at your other stuff. Oh final space, api that scene, oh.

B

Yeah, let's stick into.

A

B

One have you heard: have you heard of final space? I have not heard of final space. It's it's! My favorite cartoon uh olan rogers, it's an amazing! So it's like a it's like an epic space journey and I love it so much. But um this uh this person put together uh an api for it. You know I'm sure, you've seen like the pokey api yeah.

A

Like those kind.

B

Of things but yeah.

A

The game of thrones.

B

Yeah yeah, so there was never a final space api and um now we have one.

A

Yeah, honestly, is this:.

B

Like uh is this on cartridge network? Where is it? um Where is this? um So it's on tbs, but now I think they put the the first two seasons up on hbo max, um so it's yeah and I think other countries have it on netflix um but yeah. It's a tbs show, but it's it's so like if you're into like that kind of, like animated, uh shows.

A

B

It's space adventure, it's so great. Is it like off the wall like adventure time it's not that off the wall, but it's definitely.

A

B

Goofy and fun, but it's like it also has like the serious note, because it's like a real space journey that it's kind of going through for the seasons. It's okay. I definitely think if that sounds at all interesting, I definitely think you should check it out. You.

A

Know I'm always worth the uh because I love watching like stuff. I can turn my brain off uh while I'm uh writing code. uh So, like I, I watched a couple of the adventure time movies. I just watched adventure time back in college um in like real, like what was it the real show. um Anyway, I watched pretty much a lot of those adult swims type stuff and.

B

A

What I put on like, if I'm doing late, night coding and I just need to like turn off my brain but also stay awake, so I can finish this.

B

A

uh That's like easily my go-to.

B

On the opposite, I every single morning I watch cartoons, but I have that kind of stuff. In the background, like I just watched, live.

A

B

And now I just do now I'm doing batman beyond I. I love it. Wow wow, yeah, you're living.

A

Every every eight-year-old's dream uh you're living right, which is uh pretty awesome and you're streaming on twitch, which.

B

Is every eight year old stream? uh Well, I don't know about eight-year-olds.

A

But um yeah they're, bigger.

B

A

But yeah colby uh we're pretty close to time. Did you have anything that you wanted to um shout out before we sort of like end the stream and then walk into uh you know the rest of our day, jobs.

B

Yeah um definitely check out apple tools. uh You know, there's there's a lot of awesome things. There check out my action. Let me know what you think about it. um Ultimately, I want to make it as easy as possible possible for people to just drop that into their projects. I'd love to hear what people think um but yeah uh check out my other stuff, I'm on I'm at colby, fayoke, everywhere, uh twitter youtube, et cetera, et cetera, so github nice.

A

Nice for the consistency apologize for.

B

A

Who's on uh on twitter, who always gets my mentions.

B

Yeah, you gotta be consistent throughout everyone. Yeah yeah yeah.

A

B

For me, because you know who else is colby fayok.

A

Yeah no they're, only one one, and only uh and then before I sign off. I just want to shout out and say that we are doing this every friday. Darrell thanks for showing up uh thanks for showing up and helping us with the um with uh we actually been doing a stream uh with my colleague, who's in australia, we're building this integration, which I wanted to have today, uh but it's called git twitch. Whenever you start a repo it, uh it basically has an animation on the screen.

A

uh We will start doing some interaction, chat, integra actions uh for the github.

B

A

And I would just want to point out our next stream if you, the question, is: how often do you stream fridays and um our next week we'll be talking with uh gina, actually who's, the maintainer of octo print, there's a lot of octo's but octoprint, uh which is a web interface for your 3d printer?

A

So uh that's next week and then the week after we're talking to um iffy talking about prosemirror, uh actually re-mirror, which is a cms, I go basically the cms that you see in github, where you can actually anyway he's basically re rebuilding the github uh cms for like your markdown as a reusable component everywhere in react. um So that's a great conversation actually implementing in my open source project um sort of it's kind of broken, uh but I'm looking forward to that conversation. So uh we do have a meetup page.

A

It's a good github virtual meetup. If you did want to get notifications uh for the at the moment, meetup is working for us. um So that's why we uh that's we why we do that, uh but yeah. That's awesome! So colby thanks again and everybody else in the chat.

B

Thanks for having me.

A

Yeah uh stay saucy.