Andrey Lushnikov — Modern web testing and automation with Puppeteer

Let's get started, so today we will talk about web

testing

and

automation

with the

puppeteer

and we will divide our talk into a few parts. First I'll introduce you to Puppeteer, then there will be an announcement and then we'll move on to

testing

and we'll start with testing the fundamentals and then we'll delve into some really powerful stuff, we'll conclude our talk by talking about the Puppeteer community, so what is Puppeteer? Well,

puppeteer

is a browser

automation

library that gives you the power of the web to learn GS with puppets, here you can do many different things. you can open pages, you can navigate through them, and you can even evaluate pieces of JavaScript within the context of the page.

You can actually do a lot more different things and we'll look at them later, so this relationship between the browser and the node is encoded in our logo. this browser frame symbolizes Chrome and these green parts with strings attached are the GS node and these strings are the APIs that drive the browser so seeing them is actually much nicer than hearing so let me show you the puppeteer but to This I will first introduce you to Joel's personal products website, so Joel is a web developer, but actually he is a Chrome developer like me and we work together with Joel on Chrome development tools and the puppeteer on this site Web.

Joel sells t-shirts, coffee mugs, stickers, it's always named after him now. My personal favorite is actually this shirt, but it's a little pricey at $50, so I check out Joel's website from time to time in hopes of getting a discount. Turns out this is a perfect task for browser automation, so let me. I show you how I made this whisper speech here. The first thing I do is not install PPM. spits here, there is no need to link, configure or manage the browser installation. I can just install NPM and start coding, so let's code, so this is an OGS script.

The first thing we do in OGS is what we require and here I requested copies here, so now I'm going to put my entire automation script in these parentheses. This is an asynchronous function so you can use the async await syntax of

modern

JavaScript, so let's do something with the first two lines in a browser and open a new page so a speech here works headless. by default, but you can configure it to be useful so you can see what it does. For illustrative purposes, I'll put the browser image of what's happening in a little bit here on the right side of my slides, so here I can say browser frame with a new page and that's exactly what we did, so let's do something else, so next I'll navigate the page to Joel's website and I can see that Joel's website is there.

Now I know the price of Joel's tours. a specific CSS selector so I can use the puppeteer API to freeze the price and actually send it to no GS Council. The last thing you don't forget to do is close the browser, so these are six super simple lines of code with browser automation. I like it. In fact, I had it running for a few days. Let me show you the results. This is the price graph of the old t-shirt. As you see, the price did not go down, in fact, it went up. However, I have one last hope. that certain websites show different prices depending on the browser I use, but the puppet master has been Chrome in all these two years, not anymore.

Today I am happy to present to you the new project we are doing, the puppeteer for Firefox. The image for Firefox is all puppeteer, but for Firefox it is currently in an experimental state, but we are working at full speed with Mozilla to provide the missing functionality. It took the gecko Firefox rendering engine and the Niko Firefox networking stack, so Puppet in Firefox already supports 90% of the Puppeteer API. and Long live the very good 90%, so let me show you how I can transform my script from working with this puppeteer to actually work with the Firefox puppeteer, so the first thing I do again is not install npm on the Firefox puppeteer and similar to Firefox's puppet master perpetual downloads. one browser instance it works with this time, this isn't Chrome but it's obviously Firefox so after I'm done installing I can go to the editor and change just one line instead of requiring the puppeteer.

I need Firefox puppeteer and everything works perfectly, so let me. I show you that the browser has opened and this is a different browser, it looks like Firefox and we have something in the console, but this time it's not the price, so it turns out that Joel's website does not work in Firefox, clearly my automation adventure has failed but we got an important result so Jewel is a great web developer and Firefox is a great web browser but certain things require testing and this website requires cross browser testing so why Joe Didn't you test your website properly?

Joel couldn't come here. but I checked with him and it turned out that Joel was scared. Joel thought that web testing is slow. Joel saw that web testing is complicated and you all thought that web testing is actually failing. Well, Joel was afraid of spending more time maintaining his testing instead of developing his website, that's understandable, but this being a puppeteer talk, we believe that if Joel used a puppeteer known for these fears, it would apply let me explain what first Joe thought that web testing is complicated and could be. but it's not this puppet master because it's very easy to set up, you can just do an NPM install and this is the same NPM library as all the other things out there, like wind or typescript, and these you probably already use, so there's a variety of different testing frameworks like just hava Jasmine Wacha, we all use a few of these and have our favorites and no matter what you use a launcher works there so running and testing locally is good but it's very different to implementing tests for continuous integration.

The image works everywhere, so first it works on Mac Linux or Windows, then if you use continuous integration services like Travis or a player, I hope it works there and in fact, we ourselves use pitch here and test an image on the post where and Travis. Make sure these integrations are seamless if you live on a perpetual cloud, it works on both Google and aja AWS everywhere and a potato starts in a docker container, so we cover that here below. Joe thought that web testing is slow, let's think about it for a moment, why would it be like that?

The web platform is actually very fast and we all work hard to make sure that our tests, our websites are responsive and working correctly. So one of the reasons your test might be slow is because you do this. In reality, many broader instances were opened for each test and there are very good reasons for doing so. This way you can isolate different states between tests, like cookies, local storage index, database, whatever, it's reliable, but it takes resources and time with puppets. I have a great solution for you. There's this nice API called browser context, so browser context gives you all the isolation that you would need on restart and that you would get with restart and browser instances, but it's actually much faster than browser context and 100 times faster than restarting in the browser.

So I would like to encourage you to use browser contacts and for this let me show you how we can use browser context in our tests. This is a typical puppeteer test. It does something: it makes sure the payment button is there, but the important thing. The part is the first and last line. If at the beginning I start a browser and at the end I close it now with a larger context, instead of doing this, I can start the browser once and then at the beginning I will start a new browser context and then clean it up, so this It's a simple change, it doesn't change any functionality but it works and makes our standing tests much faster, so one last concern from Joel was that web tests are unstable and we say that.

The test is unstable if it passes once and fails the other time, so the common solution for this type of problem is to add a round of retries to the tests. This is not very good and is actually a workaround rather than a real solution, so let me give you an example of unstable testing. The first thing we do here is navigate to the Jaws website and then click on a button, the payment button, and then we create the page for the successful payment selector and make sure that the payment proceeds. Now this test is really wonky because firstly the checkout button may not appear after navigation, say for example it is inserted with JavaScript and secondly every time I click the payment button, the payment may not be made by the time I exit the page for success.

Please indicate then, how do you solve this problem? If you are doing web testing before, you might know that one of the solutions is to actually launch somehow for a second because we see it everywhere, but this is actually not a solution. leads us to different problems, so now if my button appears right after the navigation gets too evasive and my test is slow for no good reason and if I run my test on some really slow system in Travis CI under heavy load, for example this second one may not be enough so this test will fail so with Poppy make sure you don't have to do any of this and in fact if you use wait for calls and puppeteer you are doing it wrong, the puppeteer has a set of APIs that we call reactive. api or wave 4 8 guys and with these calls you can expect different events for mutations da for network activity or for completing navigation so let's fix this test using the reactive apis so first we will get this first pause instead of waiting . for a second I can wait for the button type to appear here easy well I can do the same thing with the second pause but I want to show you a little trick so I'm going to do it differently so let me bleed for you okay First the meat. thing, I remove the pause and then before the clip I will start a watchdog process so that the response waiting page returns me a promise that will be resolved every time the response hits the page, pay attention.

I do not evade this promise here, but will wait for it. right after the click so now when I right click at the bottom my test will wait for the response to hit the page and this will remove the flaking here so this is good but this coat doesn't look very nice , actually the response variable is ugly, I don't know the weight, it's easy to get wrong, so I will rewrite the three lines with the old promise pattern that we used in our puppeteer tests like this, so I combined the watchdog Z and the action in a promise Orc, let me show it to you one more time so it looks this good.

I want you to memorize this pattern because we will be using it extensively in our other demos, so let's recap, if Jewel were to use Puppeteer, testing it would be fast because of the browser. context, your test would be reliable because the entire wave for AP is and your test will be really simple to configure and deploy because the puppeteer is very easy to configure, so now that we have the Firefox puppeteer, Joel can use both the puppeteer and the Firefox puppeteer to try. On this website in Chrome and Firefox let's switch gears here and talk about the fundamentals, so these are the fundamentals of automation and all of our automation is based on three big pillars, how we navigate pages, how we evaluate the code within of these pages and how we click. and write things on our web pages and before we start talking about things and how they apply to the puppeteer, I want to show you the PPT of our death.

This is an interactive documentation website for the puppeteer that allows you to do fuzzy searches across all of our APIs in our methods in our peer namespaces, you name it on basically everything, so this works offline, if you need it in a airplane, this is a single page app, so it's

modern

and looks like the ones you might have in your settings, so how? Do we navigate to this modern website like before? We can use the page, go and navigate to PTR to develop and this method will return the promise that results will be returned every time the page emits a load event.

Let's try to do it right and it turns out that it wasn't like that. works flawlessly for us, this doesn't look like a documentation site, it's actually a puppeteer upload and stuff, so the first time you access our documentation, it pulls all the github documentation for all the different religious puppeteers and We do this with JavaScript. and we do it after the load event on the page, so this is not what we want here. Fortunately, Appetit allows you to avoid different events with the wave option for weight and treatment, since you can go to the cotto page, let me show you some of the options.can happen so we can navigate to the PTR but in depth, this is a network graph for the VPT, our developer, time flows from left to right and requests are these horizontal lines that happen somewhere and end somewhere the vertical lines. are the events and let me go over them, so the first one is a silly loaded event and told.

This limit is every time the page, the browser loads the main resource of the page and parses the HTML well. This is too early for our case, but sometimes it is useful and you can use it by waiting until you can't download it properly. The second red event is a loading event and we already saw this, this is just the cotto page now, after the loading event, we can see this purer network activity. In reality, these are all these recovery requests that we make to get up and recover the documentation. Now, 500 milliseconds after the last request finishes, there is another event called Network Idol and this is the event we should use if we reject the load.

We will be busier after death and we can do it by waiting until Network Idol 0. Okay, we will cut a page and direct navigation from place to somewhere, but sometimes navigations happen indirectly, so let's talk about clicking and then we click in a link now. On the website, there are different types of navigation that can occur today, so the website can navigate to another place and this is the default value of about 1 0. navigation that we are all familiar with or it could be a internal navigation so every time I click on the link the page scrolls somewhere or it can be a single page navigation.

In this case, the website has a JavaScript snippet that captures my click, re-renders the page, and then uses the History API to update the URL, so let me show you your video. This is me clicking on some links in PPT r dot F, so when I click on a browser or a page, they are actually single page navigations, but when I click on the event emitter link and it takes me to know G as the switching website, so you see a website with different navigations, but they have one thing in common: they all change the URL and this is very important because the change of URL is what the puppeteer considers it to be in the navigation and what the user really considers to be in navigation, so the image allows you to bypass the next navigation with a special API called wave for navigation.

Let me demonstrate how this works in a small example, so let's write the script that navigates to share it with deaf people and clicks on some. links so the first thing I do is start a browser and open a new page and then I browse PPR the Deaf so if I used just the page code I would end up loading things like we saw so I don't want to do this and in your Instead I'll use wait until the network is down, so this is great. Next, I'll use the old promised trick we talked about earlier and click on the first link in the sidebar.

This is the documentation scheme and it will simultaneously bypass the next navigation and this promise takes me to the desired state that you see in the top right corner, there is a documentation scheme, so the puppeteer has different API eyes to drive the navigation, not only you can navigate and weigh the next navigation, you can also track your browser The history stack is going back and forth, so the next fundamental is evaluation and evaluation is really important in browser automation because it allows us to use web APIs to support our automation scripts similar to other browser automation tools.

The puppeteer allows you to do this. but unlike other browser automation tools, the puppeteer lives in a separate process from the browser, all communication between the puppeteer and the browser happens with the death numbers protocol, which means that all communication is actually synchronous So why is this important? Let me explain you. an example, here we can see a simple puppeteer script that navigates Joel's website and then evaluates a piece of JavaScript to count the number of links on the page, so it's really simple and being these and not GS scrip , everything is actually executed within the context of node.js, but there is one exception, so this first argument of the page evaluation function is serialized and passed to the browser, so if e.g.

Instead of counting the links on the page, I would try to use the page or navigator variables that I have declared, the fuel lines ahead are not going to work, this has a very important implication, so the puppeteer does not share any state with the browser that atomizes, so your atom web page doesn't know if it's automated. or not and, as a result, you may not accidentally or intentionally submit test-specific code to your website; In other words, trying Poppy zero is very, very foolproof, so we move on to the last fundamental topic that I want to discuss today and this is the takeaway.

Injection and input injection is really a cornerstone of browser automation because this is what we do on the web, we click on links and type things and you can actually do input injection in many different ways and one of the ways is to use AAP web. like this event or patch element, click to push the page input and these go directly to the browser's JavaScript engine and fire the event listeners, but in fact this is very different from the real input, the real input comes to various different subsystems within the browser, things like focus selection, so selectors actually enter Pierce into iframes and enter the shadow Dom.

None of those things happen with a mock input, but if I were to use puppets here, all of this will be triggered because the puppeteers input goes through the The same path would be the actual user input, so let me give you an example of how that works, but before there is a set of APIs, configure the image so that each page, each page of puppet 0, have a so-called opening keyboard and a so-called puppeteer mouse. move them and you can press keys and to simplify these things if you have some syntax, which is the page type and the click on the page that allows you to type certain elements and click some buttons, so now let's go to the example, so This time I will do it.

I use puppeteer Firefox and I can actually do this because everything we're talking about here today actually applies to both puppeteer and Patil Firefox, so the first two things I usually do is open a browser and open a new page and this It already looks different because I use a different browser so you can see that the browser frame is Firefox here so now I'm going to navigate to an image that Def and note that I didn't use the veil until Network Idol here because I can do it better instead Instead of waiting for a network to idle, I can wait for the input element to appear on the page and once I've entered the hands, I can type it right away.

Now I can use my old promised trick to press Enter and bypass your upcoming single page navigation. simple and let me show you how it works this is the Firefox browser you type in it and we'll hit enter and navigate so you might think this is slow but it's actually slower otherwise you wouldn't be able to see it and so we wait 200 milliseconds between each key press in this video and this entry, so let's get a little bit of the basics so that the Swiss Puppeteer navigation is fully controlled and you are actually in the driver's seat, can navigate through the pages, and can wait. for the upcoming nominations, so trying this puppeteer is very foolproof because we operate in a separate process and the puppeteer allows you to generate real information in the real way.

Well, these were the basics of testing or actually the basics of web automation and we are ready to move on to the powerful. things so let's talk about testing for the modern web and the modern web is not what it used to be years ago, nowadays every other website is a web application and we all work hard to make sure our websites are efficient and accessible and are a web platform. It's really cool because it allows us to do all these crazy things, but how do we test this? Let's talk about it on a case by case basis, mobile first and today in 2019 and all websites are mobile first and we do it differently. ways we can push fluid layouts or responsive layouts to our websites or we can even push a separate version of the website and this is not optimal but people are still using it correctly so how can I test this manually?

I can choose my phone from my pocket and load my website and make sure it looks reasonable or I can open Vella by tools, go to the device simulation tab and check that my website looks reasonable on different screen sizes, but This is automatic, so how do I make sure my website is reasonable on different screen sizes? The website works long term, so it turns out that it is very easy to do, so please let's write a simple test that ensures that Joel's website works well on an iPhone, so the first thing I do is open a page and use it. a browser context here and as you're probably already familiar, my page looks like a desktop browser here, but with the next line with this I can transition this page from a desktop to an iPhone, so now every time I navigate to an open Joe website within this page.

Joel's website is absolutely certain to have been opened on an iPhone, so now it's trivial for me to make sure the play button is there, so that we are doing a very good job emulating devices. We don't just think about the viewport size, but also about you. it also emulates the user agent display device acceleration horizontal mode and many other things, and what's even better with all these things for 100 different devices that we ship with the puppeteer, so with the device simulation, here you can Be sure that important payment workflow works for you. on mobile devices, so it's good, let's talk about offline mode and offline is a really important issue for certain types of websites, for example, if I'm making a map or a subway map, it's very important for me to work without connection, but it turns out that offline mode is really beneficial for all types of websites, for example, Jewelle on her website shows a big red box notifying the user that she is flying.

Maybe this is not the best solution, but it is informative, so users are helping and we really want to make sure the thing works, so how do we do this right manually? I can go back to using my iPhone and put it in airplane mode or I can open developer tools and hit the offline checkbox in the network panel, but you automatically guessed it, it's puppeteer, so let's write a simple test that ensures that it appears this red box, so the first thing I do is open a page and browse the Jaws website. Now with this line is the page point setting offline mode.

I move the page to offline state, this activates all web APIs. so the tools website can react to the change and if the Jewel website were to issue a network request at this time it will be aborted with a no internet connection error, so now it's easy for me to make sure Without connection. The box is there so this is good and that's how easy I can test offline, but if you're actually dealing with offline, chances are you're using service workers and service workers on these complicated beasts that help us with general purpose caching on the web, so they have massive layers of APIs and they are difficult to work with, so at PPT our developer we use the library called work box to help us configure the Service Worker.

Now the work box itself is not very easy, so it has configuration, so how to do it? We make sure that the job box configures the worker correctly. Nowadays, there is only one way to open the development tools. Go to the application panel and look for a service worker there. Well, it's the puppet master. We can do the same. Let me show you how, so I'll do it. I write a simple test that ensures that the puppeteer has not registered the service worker, so I open a page in the browser to prepare the developer and this time not only does the page navigate but a service worker is actually registered in the context navigation. of the page and I can use this knowledge and the puppet to reactivate the APIs to wait for the service worker to appear and this is it, this is my test, it already validates that the service worker is there and it registers every time I browse to the PPG. done death, this is great, but there is even more once I have this service worker goalimproved, I can attach it and with the worker instance I can evaluate the javascript code within the context of a service worker and this is great, this allows me to do a lot of different things like here, I can validate the stories worker cache, it has my image there, this means that I configure the workbooks correctly, the horizon is unlimited and with this API I can write unit tests for my service workers, this has not been possible before.

So today, please, if you have a service worker on your website, use puppeteer to test it. Okay, service workers are great. Offline mode is great, so what else is great? Assignment is great, so today's Internet is global and its application probably is too and we. I can use mapping for different purposes, for example if I have a map I would like to show users where they are on this map or if I have a news feed on my website I want to split my content so that it shows only the content local, let's say for example I have this type of website, so how do I test today if it works in London?

I know two things first left. I go to the website and enable permissions so my website can query. the user's geolocation and the second on the right, I open development tools and wander around the geolocation in London is now a puppeteer. I can do the exact same things, let me show you how, so the first thing I do before I create a page I'm going to do that. set on my eyebrows in context to use London to grant the permissions, sorry for the jellyfish, so now Joel's website can query the location of je so I can create a page now and I can transition this page to London now every time I browse Joe's website.

Jolla's website can check the general occasion and when she does, she gets London as a result, so I can stick to the price and make sure Joe's website shows pounds. Okay, good job, Joe, so let's talk about the really powerful things that are the network. monitor a network Monitoring has always been a difficult thing in browser automation solutions and the gold standard of a network monitor is actually the depth of the network panel. Here you can see all the activity that happens within the page from requests to responses or status codes. So what if I told you that if you have the same access to the network panel but programmatically it's nicer, then the puppeteer gives you two events, these are requests and responses, and you can subscribe to this to have all the same goodness as have? objects request and respawn, you have many different APIs, you can search for headers, you can query the post data, you can even look at the content when we are, so when we talk about responses, you can check if the responses come from the browser cache or a service worker, so network monitoring is really good, but there are more applications, it is here minus you not only to monitor the traffic but also to modify it and we call this function request interception to prove it.

Let's write a script that replaces every image on the web with the random image of a cat, so this is, for example, what the google.com developer would look like, but first let's understand how it works, so let's say I have a web page a the left and I have a browser, sorry, the server on the right, get in there. is a puppeteer says there is an image on the website and every time there is an image, it issues a network request. Now the puppeteer can intercept this network request and actually inspect it, see that it's coming from the image, and populate it with a cat image.

Now, if there is a stylesheet, it issues another request. well we can intercept it we can see it's coming from the stealth ship and we have nothing to do with the style sessions so we can let it go so the page gets the original content so let me show you the code for this and it's in actually very simple this is all the code that does this so the first thing I enable is request interception and every time I enable request interception I have to subscribe to the request and I have to continue or cancel or fulfill certain requests so that here you can inspect. the request comes from the image so I can respond with the cat image otherwise it will just let it go to the servers so it's really easy and we actually did this and tidy up the web for a while it's enabled cation and this is what wither the Comb would look like with this functionality actually looks better, so that all has to do with testing.

It turns out that request interception is perfect for mocking the server, so Jules' website has this logic that handles request failures every time we make payments, in this case. It will show the red button below the image. Now I can write a test that validates this behavior using a request interception. Let me show you how. The first thing I do is open a page and enable request interception there. Now I subscribe to request event and for every request I check it goes to the payment endpoint and if it is I will just upload it and if not I will continue.

Now whenever I browse the Jaws website the website loads fine but when I click. the checkout button fails so I can make sure the checkout file selector appears on the page. This is just the tip of the iceberg for request interception and there are many other things you can do with it. It's a really powerful technology, but we don't have time to cover all of this, so let's go ahead and move on to performance testing and today when we talk about performance, or you do Google Lighthouse and we get this course, all we do is information from PageSpeed, so we show it here. automate some of these things and let me show you how, so the first thing and our favorite is a page metrics API and this cooley them for the total time the page collected is the JavaScript or the number of Dom nodes on the page or number of frames, but in our opinion it is the most important.

If this Jay has a size used on the hip, this actually gives you the total size that the page consumes in the browser's memory, so next time someone complains about certain browsers consuming too much memory, check that maybe be your website. that is somewhat leaking to the world, so we recommend having rates in your CI so that the next trace is from Chrome in this technology that was developed for Chrome engineers you will at least see everything that happens inside the browser, such as all the processes , all the threads, the GPU process layout that makes up everything.

They are there in the trace, so we expected it, but it turns out that web performance experts love Chrome trace and use it, so before you could only use dev tools or Chrome trace to record the trace, It was completely manual, but today you can use it. launches here to record traces for certain scenarios, for example, here I have a simple test case and I arrive at Joe's website and select several certain elements on the website. Now I can enable tracing before this scenario and let it go to trace that JSON file and I can stop it right after this scenario is completed.

Now after running it, I can get the JSON trace and open dev tools or use some automated tools to parse my trace, so the trace is really powerful, but the coverage is very important and we care about it. code coverage because we want to see less for our users, make our websites work faster and today you can use code coverage and Chrome developer tools. It's inline, so at any given moment you can see what pieces of javascript or css your page is now using. Puppeteer, you have the same programmatic access to code coverage, similar to tracing, you can start coverage before a certain scenario and you can stop it after, so this is good, use it and use it in your CI, make sure you don't ship things extensive. so we move on to our last topic, our last feature that I want to talk about is accessibility and accessibility is very important today on the web, but it is very difficult, so assistive technologies have a steep learning curve , so it is actually difficult to validate and test your website, with puppeteer we believe that we can improve the world and give you the API to test assistive technologies, so puppeteer has this page dot accessibility dot snapshot that returns um chrome accessibility 3, so this accessibility tree is actually a foundation for all the assistive technologies that I want to see web content, things like voice over or switches, everyone uses them, so let me show you what this tree looks like, like this which here I take a snapshot of Chou's website and send it here to reduce this tree a little bit, but you can see that there is a name and there is a hierarchy, so on the website I have a picture of a t-shirt and a button that says "way", so this is good, let's use it in the test and make sure Joel's website displays correctly. assistive technologies, so the first thing I do is open a page and then navigate to Joe's website.

Now I can exit the button and I can get the accessibility tree that points to this button. Now I can make sure that the button has a name and that it is appropriate and if it works it means that my website works well in assistive technologies. Now accessibility trees can be tiring to look at but they are a lot of fun so we created a special tool called accessibility viewer so this tool gets the accessibility tree and renders it back as HTML so it's easy for us see if our website is actually accessible and if it looks reasonable through assistive technologies, so we have a video of certain websites displayed through this accessible browser, so this is Joel's website and it has a image and document in this is Google has a search entry that looks reasonable, there is also their website, it is also very reasonable, so if you want to be a support technologist and want to do testing for the web like we do, This tool is available online, it is called HTML Accessibility Renderer and it is available in our Google Chrome Lab repository.

Well, this was it for the accessibility community, so Puppeterer started in 2017 and during these two years it gained a lot of attention from developers. Today, Puppeteeer is used in many companies. for example, Google, but not surprisingly here, neither Netflix, nor for that matter Facebook. Facebook uses tone here to drive its performance analysis. There are many other companies, but it is very difficult to get permission to put them on the slide, so believe me, but not only companies but also people. use puppets here, so if you have any questions and are interested in synchronous communication about puppeteer, please enter our slack channel.

We have a lot of people, over 2,000 people there, who are ready to help. Now the community not only accepts the puppeteer but also contributes everything. Our documentation is full of beautiful examples and code snippets. All of this is done with the help of over 100 external collaborators who help us support our dogs. The community not only maintains our documentation but also takes care of the core functionality, so more than 20% of all patches - the very essence of the library - are actually contributions from the external community and we are very proud of this. Now these people contribute to the puppeteer because they do many different things.

This puppeteer, for example, limits the size. You just bite here to evaluate how much memory. that the Lord of the page every time he visits the website of it, this helps the developers to be aware of the size of the page. Penthouse calculates critical CSS or just the CSS that is needed to display the page. This is important because it allows people to send less CSS and make websites faster for all of us, this use not only in their tools but also in services choose Puppet in their API, so check that Lee allows you run short scenarios that walk through your deployed worksite websites and make sure these workflows actually work.

These scenarios are written with bits here and you can also generate these scenarios. Lee really is an extension that tracks all interactions with the page and turns them into puppeteer script so it's easy for you and there's also a browser or less that's basically a Chrome as a service, it manages the Chrome instance somewhere horrible and magical and allows you to connect to the browser. It's prettier than the Connect API, so today it's safe to say that Meteor started a new wave of next-generation web tools. GitHub has many projects that depend on Puppeteer, more than 30,000, one NPM has around 2,000 dependencies on Puppeteer, so that's it.

Let me make a briefsummary, so the first segment here is the official API to drive browser automation for Chrome. We are very happy. with our collaboration is Mozilla and bring Firefox to the puppeteer family and the latest modern web is testable and testable right now so test your websites especially if they have real users so thank you you can contact me on Twitter or send me an email, they can destroy information. wonderful, would you like to join me in the conversation? I had no idea you can do so many things. We are actually using Puppet for code coverage and also for critical CSS, and yes, this turned out to be really useful.

This has been amazing and I had no idea you could actually get in his way and test service workers like this. This is brilliant. We have like 25 questions or so, so I hope you'll also be available in the area a day later. but some and they came up quite a bit or have you tried running the Poop Attune service architecture like Amazon Lambda? Is there a problem or memory limitation? Yes, Amazon has this limitation for package size and there is a specific package from the puppeteer community called Chrome AWS lambda that packages the beach here and ships a custom headless instance of Chrome that is only 34 megabytes, so It's a well supported scenario and people use it a lot, okay, I can put Nikita asking and work as a puppeteer with remote control. browsers, for example, sitting on Selenium Grid, but yes, and then the same questions in Russian, yes, okay, so Selenium Grid uses a different protocol to talk to the browser, so this one would not work, but the puppeteer can connect remotely and this is what the browser uses. is a specific API for this use case.

Any news from the Safari front. We have a prototype of WebKit. It's not a pure Safari suite because it's hard to achieve maximum continuous integration, but Linux would be nice too. Okay, as for memory, how can I feel sorry for the property? of Firefox compared I didn't compare well, some people confuse why the network is idle zero and don't add not only the network idle, there is also a network idle that allows you to wait only two request events and this is the answer, you have WebSocket open or something like that, also a lot of questions about any relationship between puppeteer and selenium, shouldn't this project be merged or will puppeteer swallow so many?

Oh, there's an ethical dramatic question, yeah, I shouldn't ask that question, okay, yeah, a lot of other things, but maybe I also have a couple of things that are really interesting at this point, so if you want to test, imagine that you're working in a pretty legacy environment, where you have a lot of legacy code and everything, and you don't really have proper testing in place, like maybe. a bit there, what would you start if you want to go online and make testing a substantial part of your deployment routine? Would you identify the most critical cases where things are pretty broken or would you look for something common and common?

You suspect we just start with a testing strategy, okay, so testing should grow organically if no one uses your project and you don't have much risk, you just can't do any testing, but figure out where you're going to make money from these critical scenarios. It requires testing and you have to edit there all the time. I suposs you are well. I was also wondering about device emulation. Obviously, it's one thing if you test on devices in the browser and another if you test on a real device. Yes. You also have CPU throttling and memory throttling available through a puppeteer, so CPU throttling is not available, but you can read it through the dev tools protocol, if people who they require it we can edit, we are open to everything, okay, yes, it has been incredible.

I like how quickly the project alone grew so well and probably not many people using it perpetuate that work, that's pretty notable, so what's in the works, what's coming next should be a great update of important features going to, we are currently focusing on Firefox and Firefox collaboration and also working on supporting out-of-process iframes in Chrome, so this is a big internal refactoring, okay, okay, as we speak, they arrived more questions, is there any way? a beauty, is there a way to test submission forms that are protected by reCAPTCHA? See people like to capture, there is, there is, okay, that was a very quick answer to a good question and how can we test smooth cursor movement for a specific route and speed like? rendering at this point rendering phone rendering performance or cursor movements, well, here Alex asks about cursor movements, so you can, there is an image mouse and you can move it however you want, we can do it, we need between locations, okay, you thought of many. stuff at this point, yes, do you have any best practices for organizing Chrome Firefox testing across multiple browsers with puppeteer?

Yes, this is probably a topic for another talk, although that's fine, but you can check out the puppeteer tests and we currently test in both Chrome and Firefox. tests you the same test two brothers, okay there are also the last questions, actually something that I was thinking too, Michael wonders, so we also talk a lot when it comes to testing some people who use Cypress, so where Do you see that the puppeteer works better? Does Cypress work better? Is it possible to mock API requests using a Cypress-like puppeteer, what are the use cases? So Cypress is a really good project and it's not just a project, but more of a product, so it gives you all this developer experience, like a dashboard and a testing framework, we don't have there.

Whoever this puppeteer is, we're much lower level so you'll have to use the chest or something else to make your tests, so I think these are different niches when it comes to requesting taunts. I think we do a better job because they use probable electrons. and we're directly on Chrome's network service, so we have more direct access to the internals of the browser and when things don't work, we can fix them, since we're Chrome contributors, we care about things, right? It's also very interesting to me. seeing things that are normally hard to test like disability testing, like automating accessibility testing or even things like visual regressions that we end up with CSS just to keep things from breaking and everything somehow, yeah, it's really interesting See that.

This is a bit touching, we can do a lot of things, but still, when I think about testing CSS, it's always like this miraculous thing that everyone talks about how it's just at this point to compare visual differences or we can do better. that if you want to, let's say, make sure that your next deployment doesn't break the introduction, so I think you know the way to go here is actually with visual regression testing and that's what we're actually doing in Chrome when you test CSS so it doesn't come up with anything better, yeah, but then you end up with banner changes, okay, you can exclude that, oh yeah, but it's still like mapping because sometimes you have to, if you want to match, let's say it we do totally with time in curious ways.

If you want to test, say, whether the preview you get in Chrome is similar to the preview you get in Firefox and similar to the preview you get in Safari, sometimes because the color scheme is not the color, the rendering of the color is different and ends with only differences. although there is no real difference, yes of course you will know, yes I know the problem and you could also have the same situation if you run tests on different platforms because the representation of the math course is very different from everything else, so the way we do it Currently in Chrome we have pure platform testing expectations, so when it comes to different browsers, there is no reason for us to expect their rendering to be similar, so we should have different expectations for different browsers.

It's interesting that they grouped them together and yes. So there's still a lot of work to do or are you pretty comfortable with the way it's popular? You can do much better. I think we're all looking forward to that, so thank you very much for the session.