Visual FlexUnit (VFU) is a FlexUnit extension that allows you to do automated testing of components’ visual appearance using “visual assertions”. In a nutshell, a visual assertion asserts that a component’s appearance is identical to a stored baseline image file. These visual tests can be run in either a GUI or an Ant-based build process.

I created VFU during my recent internship at Allurent. We’re releasing it as open source on Google Code under the MIT license. Its home page is here.

Why should you be interested in VFU? Here’s an extract from its main documentation page:

Why Is This Useful?

Regression Testing

By adding visual tests to your build process you can be assured that any changes to your codebase, or to the Flex/Flash framework, that effect the appearance of your components will be noticed immediately.

Testing For Cross-Platform Rendering Differences

While Adobe has done a great job of making Flash & Flex a write-once / deploy-anywhere platform, there may be differences in how images render:

  • Between the Flash Player and the AIR runtime
  • Between Windows, Mac, and Linux
  • And, of course, between the many combinations of these variables

To date our limited testing has only detected a) differences that aren’t visually noticeable, and b) differences in very unusual cases that you would never use in the real world. Still, it doesn’t hurt to check. By running regression tests on multiple platforms you can be assured that any unseemly differences in component rendering will be brought to your attention quickly.

(end of extract)

We invite you to play with VFU and would love to get your feedback. You can either enter issues into Google Code or add a comment to this post. While it looks as though this could be a very useful tool, at this point we haven’t worked with it enough to assert that visual assertions belong in your toolkit. :) Let us know what you think!

The following people contributed greatly to this project, and made my work on VFU both easier and extremely educational. Thank you!:

Finally, I should mention that Allurent is an extremely smart and competent company, at the forefront of Flex development, and a really nice group of people. I learned an incredible amount working there, including a great deal about using Ant to implement automated build processes. (I’ll be blogging shortly about the Ant build process that I’ve included with VFU.) If you get an opportunity to work with Allurent, I suggest that you grab it.

4 Responses to “Announcing Visual FlexUnit – A Visual Testing Extension for FlexUnit”

  1. Doug Schmidt Says:

    Nice work. I’ve just finished integrating the Antennae build scripts into our internal build system.

    I haven’t looked into ARC-FlexUnit though. Can you describe how Visual FlexUnit differs from ARC-FlexUnit? Is it a superset that adds the visual differencing, or does it do something else that ARC-FlexUnit is not able to handle.

  2. Douglas McCarroll Says:

    Doug,

    I’ve updated VFU’s build process wiki page at http://code.google.com/p/visualflexunit/wiki/VFUBuildProcess with some info on arc-flexunit. Hopefully the new notes will clarify its role in the build process.

  3. 一些flex的开源项目 at 屎样年华 Says:

    [...] 2. 可视化Flex单元测试框架visualflexunit: Announcing Visual FlexUnit – A Visual Testing Extension for FlexUnit [...]

  4. yuchao Says:

    First I should say thanks to you guys’ hard work for this.

    I met a problem that I can not using the screen shot way to cut the image for baseline, there are always color different between the image I got from the screen shot and the image vfu got. It’s really wired, I can not get why this happens. The pixels more than 95% are different in 5-15 RGB, like #2a4b3c(vfu got from the UI component) and #2e4a39(I got from screen shot).

    BR,
    YuChao

Leave a Reply

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word