Skip to main content

Visual Component Testing Review Workflow

Main Review Workflow#

Learn the Screener workflow for reviewing UIs. Each UI state under test has one of the following statuses:

UI StateDescription
NewHas not been reviewed yet.
ChangedHas changed visually when compared to its accepted baseline.
AcceptedIs visually the same as its baseline OR has been reviewed and accepted by a team member.
RejectedHas been reviewed, found to have defects, and rejected by a team member.

1. Start Reviewing.#

When a test has a New or Changed UI state, it will show a Review button:

Component Review Button

Clicking Review will display a list of your UI states filtered to only those needing review.

To start reviewing, click on the first UI state:

Component Review State

2. Review UI State.#

You'll then be presented with screenshots of the selected UI state:

Component Review Screenshot

If a baseline exists, a side-by-side view will be displayed with the baseline screenshot on the left-hand side and the current screenshot from the latest build on the right-hand side.

Changed UI states will include highlights of visual changes directly overlayed on the screenshots.

Tips
  • Learn how to [ignore changes].
  • Learn how to [view change details].

3. Accept or Reject#

After reviewing the UI state, you can either:

  • Accept: if the screenshots are as expected, which will set the current as the new baseline (keyboard shortcut = Shift + Up Arrow); or
  • Reject: if defects are found which need to be fixed (keyboard shortcut = Shift + Down Arrow).

To Accept or Reject, you can use the aforementioned keyboard shortcuts or select from the status dropdown:

Component Review Accept

4. Continue Reviewing#

Continue reviewing the remaining UI states. You can navigate by clicking on the next/previous arrows (pictured below) or by using keyboard shortcuts (next = Right Arrow; previous = Left Arrow):

Component Review Next

Use the Accept All button to quickly set all filtered UI states to accepted.

5. Review Complete#

When all UI states have been reviewed, the filtered state list will be empty:

Component Review Complete

The build status will be updated to Success when all UI states have been accepted.

The build status will be updated to Failure when there are rejected UI states.

Testing Against Multiple Devices and Resolutions#

Screener provides the ability to test responsive designs across various devices and resolutions.

To test against multiple resolutions and/or devices, add the resolutions option to your screener.config.js file, with an array of resolution items.

Each resolution item in the array is either:

  • A string in the format: <width>x<height>.
    • Example:
      '1024x768'
  • An object with deviceName and optional deviceOrientation properties.
    • Example:
      { deviceName: 'iPhone 6' }
      Supported deviceName value options (click here to expand):
      • iPad
      • iPad Pro
      • iPhone 4
      • iPhone 5
      • iPhone 6
      • iPhone 6 Plus
      • iPhone 7
      • iPhone 7 Plus
      • iPhone 8
      • iPhone 8 Plus
      • iPhone X
      • Galaxy S6
      • Galaxy S7
      • Galaxy S8
      • Nexus 4
      • Nexus 5
      • Nexus 5X
      • Nexus 6P
      • Nexus 7
      • Nexus 10

Example config using resolutions:

module.exports = {  ...
  resolutions: [    '1024x768',    {      deviceName: 'iPhone 6'    },    {      deviceName: 'iPhone 6 Plus',      deviceOrientation: 'landscape'    }  ]};