Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Save Screenshots of Applications with Puppeteer

    Tyler ClarkTyler Clark

    In this lesson we are going to take a screenshot and a pdf of our application. We'll add this to conditionally run when one of our tests fail. This way we can see what our test was seeing when it failed. These screenshots can help debug why tests fail.

    reactReact
    puppeteerPuppeteer
    jestJest
    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:01 sometimes, it can be helpful to save out screenshots when tests fail. This makes it easy to see what the test was working with at the time the error happened. We can test this out inside of our NAV loads correctly test. We'll add this if check, where we'll check the length to equal three.

    00:15 We screenshot the page. Then, we'll update our test to be three. Perfect. Now, this test should fail, because we still have four LIs in our app.

    00:26 Now, it will save a screenshot to our directory called, "Screenshot.png." If we run our test script in our terminal, we can watch our test fail, as well as watch for our screenshot to be added to our directory here.

    00:40 As you can see, the test failed because it had four LIs. We can configure our screenshot method to take on some other configurations. Some of them are full page as a bool, quality as a number 0through 100, and clip as an object. Full page, when it's true, it takes a screenshot of the full scrollable page. Its default is false. Quality is the quality of the image 0to 100.

    01:11 Then, clip takes an object which specifies a clipping region of a page to screenshot. Now, we can also make a PDF of the page by doing page.pdf. Then, it itself can have some configurations like scale, format, and margin. Now, scale is a number, and it refers to the web page rendering.

    01:33 The default is one. Format is referring to paper format. If it's set, it takes priority over any width or height options that is passed to it. The default is letter. Margin, which is referring to the paper margins...

    Discuss

    Discuss