Skip to main content
CSS is fun and cool and I like it.

Articles Tagged visual testing

It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
6 Articles
{
,

}
Link

Getting Started with Front End Testing

Avatar of Chris Coyier
Shared by
Chris Coyier

Amy Kapernick covers four types of testing that front-end devs could and should be doing:

  1. Linting (There’s ESLint for JavaScript and Stylelint and/or Prettier for CSS.)
  2. Accessibility Testing (Amy recommends pa11y, and we’ve covered Axe.)
  3. Visual Regression Testing (Amy recommends Backstop, and we’ve covered Percy.)
  4. End to End Testing (There’s Cypress and stuff like jest-puppeteer.)

Amy published something similar over on 24 ways, listing out 12 different testing tools. … Read article “Getting Started with Front End Testing”

Our Notes   /   Read at www.javascriptjanuary.com
Video

#178: Percy Catches Visual Changes in any Workflow

Avatar of Chris Coyier
Author
Chris Coyier
Comments
Go to Comments

I wanted to make sure you understand exactly what Percy can do for you, hence the title. When you commit a change to your websites Git repo, like in a Pull Request workflow most of us live in, Percy will let you know if that change causes any visual changes to your site. It will show you exactly what those changes are: what pages, what media query breakpoint, what browser, etc.

It’s rather amazing.… Read article “#178: Percy Catches Visual Changes in any Workflow”

Article

Testing for Visual Regressions with Percy

Avatar of Paul Ryan
Author
Paul Ryan
2 Comments
Go to Comments
It’s a Herculean task to test UI for each and every change to code. We have Percy to help save the day! And it’s really the best friend we have for testing unexpected outcomes that impact design and layout.
Video

#166: Learn to Integrate Visual Testing with Percy

Avatar of Chris Coyier
Author
Chris Coyier
Comments
Go to Comments

Did you know that you can set up a review system so that every pull request you make shows you exactly what has changed visually on your site?

That’s exactly what Percy does. It assumes what you have on master is correct (configurable) and, when you do a pull request, it literally takes screenshots and compares them to the screenshots of what is on master. If anything has changed, it lets you know, just like unit or integration tests would. … Read article “#166: Learn to Integrate Visual Testing with Percy”

Article

Visual Regression Testing with CSS Blend Modes

Avatar of Sarah Drasner
Author
Sarah Drasner
3 Comments
Go to Comments

Last week I saw Una Kravets give a very inspiring talk at Generate Conf about using CSS Filters and Mix Blend Modes. One demo in particular got my attention because Una showed us how we could overlay two layouts on top of each other and use blend modes to spot all the differences between them.

I was pretty excited about this idea and got to thinking: could we create visual regression testing with just one line of CSS? Turns out … Read article “Visual Regression Testing with CSS Blend Modes”