🎙 Learning Curve Podcast
August 13, 2020 ᐧ 24m 52s
Puppeteer is this cool headless chrome library that lets you do things on a browser with code. Listen to Brittik and Aravind for all the cool hacky stuff they did using this library.
https://pptr.dev/ - Puppeteer Homepage
Welcome to the learning curve Podcast, where brittik and Aravind share with you everything that they've learned so far about technology startups and remote life.Hello and welcome to the 17th episode of learning of podcast. I am Aravind.And I'm BrittikAnd in this episode, we are going to talk about what we automated using puppeteer. So puppeteer is this headless Chrome, uh, framework that, uh, developers from Google or developers from Crome, built so that you could do tasks that we normally do using a browser, with code. So you can write code to open a website, do some clicks and stuff right Brittik? How, how did you find puppeteer to bePuppeteer is cool. And it's great for automation and making things human less. So you don't spend your time doing things you don't want to do. And, uh, yeah. It's best for automation.
It's best for testing. So anything that you can manually do on Chrome. Not now you can do with puppet. Yeah. And all the functionalities, including, you know, checking how fast, uh, pages loading, how fast your assets are loading and the performance of everything. Everything can be tested using puppeteer, all the Chrome developer tool options that you have.
Are available in puppeteer. So it's basically anything a developer can do with, uh, you know, Chrome. We can do it puppeteer and that opens ups so much about the possibilities that are there that we can automate. Oftentimes there are things that we don't want to do and we don't have to, we can just write a long script and puppeteer, and it could just automate everything that we are doing.
Oftentimes there are things that we don't want to do and we don't have to, we can just write a long script and puppeteer, and it could just automate everything that we are doing.
So let's talk about what we did with puppeteer. Aravind, what was the first thing? When did you encounter puppeteered and why do you use it and for what.
It's a good question. So, uh, if you guys want to check out puppeteer as a cool domain called https://pptr.dev, you can pause this episode here and have a look of what I mean, how the website is.
So I don't know. I don't know how I discovered puppeteer, but maybe on Twitter, like I've used it in a few different ways. So the first thing that I'm going to tell is. Uh, when I was, uh, a core organizer of a meetup group called Vue Hyderabad, we had, uh, uh, task or we had to like design posters for each talk so that we could advertise that on social media and also the speakers who are going to speak in that talk, uh, also to post things on social media.
So, what I did was I wrote up a puppeteer script, which automatically opens up a page and takes a screenshot of the webpage and saves it as a, poster, uh, what I did there was I wrote a bare bones, HTML, uh, design that has HTML CSS page with the title of the talk title of the speaker date of the. Even, and, uh, design it using CSS. And then whenever I run puppeteer, I run this script. It gives this HTML to the puppeteer, opens up the page, takes a screenshot of it and then saves it as an image. So this helped us like speed up the process of generating posters for the talk.I think more than speed up. You eliminated any effort that went into it afterwards? No one needed to do anything. And it would just magically you have a new HTML page and done.
Yeah. So whenever we updated the website of Vue Hyderabad, we could run this script to download all the posters from all of all the talks that this helped us a lot. And. Yeah. The saving time of not, not only mine, but all our organizers of the meetup, we didn't have to think of, or we didn't have to assign this as a separate task to another person and like save up a lot of time. That was my first use case with puppet.
I wonder that there are probably so many tasks that. You know, that can be automated, that people are just doing because you know, that's their job. And especially in things like, I think, uh, you know, SP in testing, many people are still yeah. Doing manual testing. And, uh, I think a lot is, is already being eliminated by using puppet selenium or similar tools.
And I think, I think in a, in a way, it, it makes us two more things fill out. Because we don't have to do these manual things, which we don't enjoy. And most of these things are not really enjoyable things. So just boring stuff. So thank you puppeteer for existing. So it was
your use case. How did you use it?
Well, I'm not going to share what I'm working on. I can tell that it is a, it is a script that I'm writing automation script, and it was purely in vanilla Java script. But I faced a problem where I wasn't able to an input value in an input box program, particularly. And, uh, I was frustrated like, why is this not working?
I would input say 41 in the input text box by changing its value. And, uh, It would show in the text box, like, okay, now it is 41, but when I would press submit it formed, it wasn't taking that value in, and it would just go with the default value and it was crazy. Like, why is this happening? I checked my code and I made sure that there are no bugs, like as far as I could see.
So. Then the only problem was on the client side from the website. I was actually automating the problem was there. So now I had no clue. Why is this not happening? Then I checked keyboard event listener event, and, uh, event docs and MDN. And I found out that it, while I can trigger keyboard events, They won't have the same default functionality as a real user's input.
So say if a person is having an input in Chrome, then it would know that this is a human doing it. Versus when we guys write code to program directly update stuff, Chrome knows that this is, you know, uh, Person and not a person. So that's where the problem was. There was no work around to the us and even the, even the web API docs have a keyboard, um, event.
Uh, it did not. It explicitly said that you cannot do this and you won't have the default functionality. I'll give you an example where like, as a person, if I open a page and I enter 41, and there is an input box, What it was doing in that website was that it was easily taking the input in the input box and I was submitting and it was.
You know, submitting 41, but as a program, it wasn't, it was taking the default value. So I found out that is something. And first of all, I went into puppeteer's, Github page. And that that's where I read that there are two types of events. One is trusted event and one is not trusted. So the ones that. Users generate are trusted.
That is also is trusted flag thing that you can set websites can set to detect bots and prevent them from acting on their website. So. Yeah. So if you, if you have a website and you want to protect it from people like me who create bots, uh, you should use that. Yeah. But popular comes in and then I don't have to worry about this all events that puppeteer generates our trust to demand and to generate, uh, you know, just for testing sake, if you want to generate not trusted event, you can do so, too.
You know, like wrap the code in a certain way, but more or less, it was the same thing. I put mostly everything in puppeteers evaluate function, and it was a bit tricky to pass in variables and, you know, get changed way back. Uh, so the thing is, uh, there are two parts to puppet here. One is the node part and the other part is the website that it is executing.
So. There has to be proper communication with between your node script and the thing you're evaluating. So if I have say a = 10 and you know, like a function, like a global variable, if I have it and it change into 50 inside a function that evaluates in the page, my node node variable a, which was 10 won't know that, uh, you know, It has been changed.
Uh, so yeah, it was pretty cool. A lot of the workflow. Was improved by using puppet.
Do you want to give a short code snippet of puppeteer? Like how to start a browser?
I don't give a code snippet. I would. Just introduce you to the idea. I think a code is better shown, uh, you know, like typed and then later, uh, then spoken about because that's code.
Uh, but I would say it's very basic. You start the browser and
this, do you write in your mode script, right?
Yeah. You have a normal js file. Okay. So. And no, it might be confusing for people. Like, for me, it was like, what is not, I had no clue. I mean, I know it is a packet of mine and stuff, but yeah, I did not use node or I did not, uh, you know, run a JS file through node.
I did not use the note command basically before, so. With puppeteer, you have to do that. First of all, you installed,
uh, you never, uh, because whenever we run NPM start or yarn start, uh, that's what happens under the hood, but yeah, you might never have run node space, file name,
right. Yeah, I never did that. I did use the node playground.
And. The basic gist of it is that you are calling puppet like including puppet, and then you are opening the browser. And then you're saying, go to this page, wait for certain duration. Or you can even wait for certain selectors and tags to appear. See a page has not yet. Loaded yet. So, you know, that selector doesn't exist or if a page has loaded, but, uh, you know, the element is not visible then even that is known.
So all these things puppeteer takes care of you. It's like, there is this person you're telling that person, Hey, you know, when that thing, when you can see that thing, do this. That's exactly what you're telling puppet here too. So it makes life a lot easier. And then in the end, you know, you do like you.
Like before the end, you do the stuff that you want to on the page. And that is done inside the evaluate function in puppet here. And you can easily do, you know, select, uh, all, uh, matching selectors and class names and stuff. And at the end, you close the browser when you're done. And that's, that's puppeteered for you in the least technical way possible.
The API spec is also very simple. I mean, you understand when you see the code. It says page dot or browser new page, which it's that it says that a new page will be open. Not a new tab will be open all of the API. He's almost, uh, it's very understandable.
Aravind, what was like the next, partly now you had link, when was view, like, was it your first project using puppeteer or how do you use it before
I've used it before also, uh, that's how I came to know that data exists and we can do this with puppeteer.
Uh, so what I did before was, uh, I did something, some visual testing at work. So I'm a very bad programmer whenever I make some changes, something that breaks. So I used to work on
A programmer who knows that he's a bad programmer. That is actually a good programmer.
A programmer who knows that he's a bad programmer. That is actually a good programmer.
Thank you for that. I feel good now.
Yeah. So I worked a lot on HTML, CSS, maintaining a. Landing pages are the content part of a website. So whenever I made a change in CSS, uh, with unknowingly, something would break. So when I search what I discovered was a using puppeteer, I could take screenshots of the complete website and compare it against.
An old screenshot. So what happens now is that, uh, I get to know what all changed. So I have a look before I comment or push the changes. I can have a look on what, all things I changed. And if that is a desired change or not, this helped me like figure a fix or catch a lot of things before, even they get tested.
Nice. So you actually programmed eyes, you know, into that script and it sees things that changed.
Cause I was very, I was very lazy or my head overconfidence in my code. So I wouldn't let go test every page because that's humanly not actually possible when you have lots of pages, uh, but you could ask your bot to do it or your testing script to do it.
What happens here is the pictures are, uh, if there is any change, then the pictures are, uh, put side by side. And I get a red highlights on the picture saying this fixes. So the comparison is a pixel to pixel comparison, and there is a slight, a slight window. I mean, if there is a one pixel change, it might not report, but if there is an eight pixel change, it will report.
So there is this consideration of humannes.
See if it has the 12 pixel margin top at the very top on the body, then would everything look red or
Yeah everything would look red.
nice. I'm thinking there are probably other ways to use this. It's so cool to actually. You know, compare each and every pixel off of website or just, just an image. So, uh, mainly could it be used for like, you know, identifying fake images versus, you know, real ones? Probably. Yes. Um, I don't know, overall, it was pretty cooler when I think, uh, to have this tool and let it do so much that.
We can actually replace ourselves. So with the script I'm writing, I can with 700 lines, I can replace what I do. So, I mean, I mean, it's, it's so cool to be able to do that.
Yeah. Even, even if it takes double the time or double the code that you wrote, I think it's worth it because as freelancers, we charge people by hour, so my time is more valuable than we think.
I think it's worth it because as freelancers, we charge people by hour, so my time is more valuable than we think.
Exactly. So, and then sometimes we have to like first time when I thought of using puppet here, I was downloading something videos and I had a subscription and it would end, so I won't have that, but I didn't want to manually download stuff. So I thought I would, you know, write a script for something and get it done.
But at that point it just felt too much, you know, like, okay, Maybe I don't care about this so much to want to download everything. So I didn't download. And many times we have to assess, like, what we want to do is that something repeatable, something we are going to do every day or very often. So if that's the case, then we should definitely write a scrip.
If it's just one off thing, then it's best not to write a script. Or if it's something that's not important or. W very valuable to even that, but I would say to experiment on, you know, and try it, you create a robot for yourself, you know, via the physical robot are expensive and difficult to make a software bot is relatively easy.
And, uh, I would say start by, you know, Going to a page, taking a screenshot and saving it. That would be the easiest way to get started with puppet. Yeah, Aravind, what else? Like when, so these are the two times you use. I remember you telling me, like there was one more instant, very used puppet and it was pretty cool more.
Or was that.
All the three are related to images. So it is not a lot different from the first use case that I told.
No, I remember it was different. It was, I, yeah, you said it was not different, but it was,
I use it for open graph images, open graph images. Are these ones that you get when you share links in Twitter or Facebook, you get a card.
So you can attach a open graph images image to a webpage. Uh, in, in the meta tag, you can have a meta tag in the head. So whenever you share it in social media or on WhatsApp or on telegram and Slack, these open graph images show up. So what I did is I used a puppeteer to run it across all my other pages in my website and generate open graph images, which is just a screenshot of the title of the page and my name.
And like, have it in the,in the same folder
in the image you added your name to.
Yeah. And the imager added my name too.
Nice. So you edited an image using puppet here now? Yeah. Uh,
whenever they generate that screenshot along with the title of the page, I added my name to, and then, uh, took the generated image from it.
And this is like an old way of doing it. I mean, I did it in the past, but now I don't now I use Cloudinary for it, um, something off of the topic, but it interesting, because Cloudinary has this cool image transforms where you can specify a few things in the URL and it will change the image on the fly. We do it for the learning curve website as well.
So we have a base image. Uh, with the learning curve, website logo, uh, the design and all. And then I add the titles for the webpage on the fly, on the fly, in the sense along, uh, you generally have an image tag and in the SRC you give the URL of the image, right? So at that place, you can add a few URL parameters, like question Mark, title.
Uh, as equals two, what the cool things we do with puppeteer and that shows up on the mains when that is. So there's a, and their free tire is very generous. I don't think we ever ran out of the free time. So that is a cool trick for images and manipulating images on the fly.
What do you know what they're using?
Like what tech they're using at the back end or on their end or any specific technologies they are using to make it possible?
I was thinking like, are they also using puppeteered and is it like puppet?
I don't think so. Uh, and, uh, these things are cached, so it won't get generated every time you query. But I think the first time it gets generated and then afterwards, all the requests are made from the cache. So they also save up on their cloud resources.
Nice smart way to not do the same thing again and again. Cool. So this was puppeteer for you, Aravind, do we have any more points on it or,
Oh, I think is what we
start off. We hope you found this useful and, uh, give it a shot. It's fun. Trust me. And, uh, Yeah, that's it. Uh, thank you for listening and stay tuned for the next one.
Have a good time of the day. Bye