Name: Save Screenshots of Applications with Puppeteer
Uploaded: 2018-01-26T23:36:12-06:00
Description: 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.

Course Introduction: Testing with Puppeteer and Jest

Setup and Install Dependencies for Testing with Google's Puppeteer

Test HTML Content on a Webpage with Puppeteer

Replicate User Activity with Faker and Puppeteer

Work with Document Cookies in Tests with Puppeteer

Check for Console Logs and Exceptions with Puppeteer

Save Screenshots of Applications with Puppeteer

Handle Page Requests in Tests with Puppeteer 

Visual Differing Tests with Puppeteer and PixelMatch

End to End Testing with Google's Puppeteer and Jest

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. 

https://app.egghead.io/api/v1/lessons/react-save-screenshots-of-applications-with-puppeteer/subtitles

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...

Save Screenshots of Applications with Puppeteer

Share this video with your friends

Course

End to End Testing with Google's Puppeteer and Jest