[p5.js 2.0] Add contributor docs for visual tests

[davepagurek]

Increasing access

Visual tests have the opportunity to make it easier for contributors to add tests and improve p5's reliability

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

Feature request details

We currently have some very basic contributor docs for visual testing in the unit testing doc: https://github.com/processing/p5.js/blob/main/contributor_docs/unit_testing.md#visual-tests

• We don't actually have any visuals in the doc! Ideally we would show people what visual tests are doing (e.g. show what the tests are "looking at" and also show what it looks like when tests fail so people know what kind of thing they attempt to protect against)
• The instructions on the main branch need to be updates for 2.0
• We need to add some "best practices", e.g.
  • Keep the size of the canvas for each test small, as we resize them under the hood to make it run fast on CI
  • Try not to pack too much into a single screenshot, you can always call screenshot() multiple times per test!
• Describe what kind of "acceptable" differences we expect between platforms (e.g. if we can, a screenshot from our discussions in the past showing how text can look different on CI)

[davepagurek]

@Vaivaswat2244 you've been working a lot on visual tests recently, if you're interested in this or #7618 we'd love to have your help! No pressure of course 🙂

[Vaivaswat2244]

Sure, would be a pleasure