Test Center

The PixelStack’s Test Center lets you preview your dynamic designs with different data inputs.
This ensures that your designs look as expected across various scenarios before you publish them. It helps you maintain consistency and avoid unexpected results.

Key Benefits

• Avoid Unexpected Results: See how data changes impact your design in real-time.
• Ensure Consistent Design: Test with multiple data sets to maintain a consistent look.
• Faster Iteration: Quickly see the impact of design changes, speeding up the design process.
• Save Time: Reduce manual checking and debugging.
• Publish with Confidence: Ensure your designs work as intended, improving the final result.

Step-by-step example

Let’s walk through a typical example of how to use the Test Center. In this example, we’ll create some test cases for a blog post’s open graph image.
The design is based on Open Graph Image template .

1. Open Test Center

   Open your design in the PixelStack editor. Click on the Test button, located at the top-right corner. This will open the test center.

2. Create Test Case

   1. Select title from the Object dropdown.

   2. Select text from the Property dropdown.

   3. Input “My First Blog Post” as the value.

   4. Select author-name from the Object dropdown.

   5. Select text from the Property dropdown.

   6. Type “John Doe” as the value.

   7. Click Create.

3. Preview

   You will see the first case in the preview screen, showing the rendered image with the data from the created test case.
   You can make changes to the data of any of the test cases and see the results updated on the preview instantly.

4. Create more test cases

   You can create more test cases for the different scenarios where your design will be be used.
   And also Think about edge cases, like very long or short titles, or missing author information. By thoroughly testing your design with various data inputs, you’ll be confident that it will render perfectly every time.