From the course: Learning Playwright

Unlock this course with a free trial

Join today to access over 24,200 courses taught by industry experts.

Visual testing in Playwright

Visual testing in Playwright

From the course: Learning Playwright

Visual testing in Playwright

- [Instructor] Another popular way to test web applications is through visual testing. The concept here is while the test is in a certain state, you take a screenshot of the page or certain elements on the page and save them as a snapshot. This snapshot is a part of the repository. It is used as a baseline image to compare future screenshots against. This can be a useful strategy to use depending on the application and context you're testing in. Let's build out an example of a visual test using the home.spec.ts we've been working on. We'll add two different visual tests within each describe block. The syntax is as easy as adding the .toHaveScreenshot with a name assertion to a test file. We'll add one for auth and one for no auth, so let's start at the top. We're going to create its own test block. (keys clicking) Test, we're going to call this "visual test", async. We're going to pass in ({ page }), we're going to do an await expect (page) .toHaveScreenshot, and we're going to give…

Contents