Phabricator task

Introduction

The following guidelines aim at providing simple and direct instructions for contributors wanting to sign off any implementation tasks that introduced or modified Codex components via manual testing.

In the context of the Codex project, manual testing is subsidiary to the automated functional, visual and accessibility testing processes integrated in the library. Nevertheless, the following practices are fundamental for maintaining the quality of components, as they can help identity first-hand issues that could otherwise remain undetected.

🔍 Testing approach and process

At any stage of implementation of a Codex task that involves visual or interactive changes, the team members (Designer, Engineer or Test Engineer) might need to review affected components with respect to the scenarios with the aim of identifying any missed requirements. The goal is to test early as much as possible, to reduce any redesign efforts later in the development stage.

When a task needs to be manually signed off, there is the need to evaluate the following:

1. In case a new component has been added to the Codex library: that the component follows the visual and interactive requirements provided in the Figma design specifications (see example), and that the acceptance criteria defined in the ticket is met.
2. In case a library component has been updated or fixed: that the changes meet the visual and interactive definitions provided in the specs and/or the task’s acceptance criteria; and that no other properties were altered as a result of said changes.

To verify the functional behavior and evaluate the components’ visual features against the mentioned design specs and acceptance criteria, designers, engineers and/or testers will interact with components directly. They’ll need to trigger the different states using any of their available device(s), just like end-users would do. Nevertheless, it’s recommended for manual testers to use browser inspection capabilities too in order to verify the value of CSS styles, as a way of supporting visual detection.

Where to test Codex changes

🔵 Active patch

In case that the patch containing the changes that need to be tested hasn’t been merged yet, you can access the staged Codex demo page in a Netlify build.

To access the build, simply add the patch number to be reviewed in the following URL (replacing “PATCHNUMBER”):

**https://PATCHNUMBER--wikimedia-codex.netlify.app/**

The patch number (which is appended to the patch’s URL) can be easily found in Gerrit:

Or extracted from the link provided by gerritbot in the relevant Phabricator ticket: