> For the complete documentation index, see [llms.txt](https://docs.puppetry.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.puppetry.app/testing-techniques/css-regression-testing.md).

# Visual Regression Testing

CSS like any other source code needs refactoring. We work to improve code readability and reusability, to make CSS faster to execute. We try alternative solutions (like switching from flexbox to grid). As we are done with the code changes we need to ensure the app’s “look & feel” didn’t alter. It can turn out quite a challenge if do it manually – the app may consist of dozens of pages that need to be tested for every defined viewport breakpoint. Here you can take advantage of Puppetry. All what you need to do is to create tests visiting app pages for given breakpoint viewports and call `page.assertScreenshot` or `TARGET.assertScreenshot` method. 

![CSS regression test case](/files/-LtzD8VFzQ6YpFZ7v-MG)

Just before starting refactoring we run the tests with "update comparison images" flag on.

![Update comparison images checkbox is on](/files/-LtzDYmYVRxgM2cANqfY)

Since we have no assertions the report is "green". However during the run Puppetry creates screenshots of every requested page (or target) and keeps them as original for further comparison. 

![Test report](/files/-LtzDHko8QXC_hiAhANV)

Now we can do the refactoring. In order to see how it really works we are going to consider a case were refactoring breaks the existing styles. 

Well, let's say we has the following styles applied to the heading in banner section:

```css
body {
  color: white;
}
.banner h1 {
  font-size: 48px;
}
```

During refactoring we decided that general rule for typography would be:

```css
h1 {
  color: black;
}
```

Thus we didn't think that it would also apply for banner heading, which inherits currently color from body.

So we run the test and this time with  "update comparison images" set off.

![Update comparison images checkbox is off](/files/-LtzDMil3lw1m5o2We7L)

The test report informs about a failure. It also provides the expected (original) screenshot and the actual and tries to build a diff image. 

![CSS regression test report](/files/-Lu26CBPT7lZbWBHhFTu)

![Diff image](/files/-Lu26FuLOxO3vUX2n2be)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.puppetry.app/testing-techniques/css-regression-testing.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.