Visual Testing with Figma Designs

Prerequisites

Before you begin, ensure that you have referred to:

• Documentation on configuring visual testing.

---

Visual Testing Using Figma

1. From the left navigation bar, go to Create Tests > Test Cases.

2. Create a test case or open an existing test case.

3. Click the Kebab menu next to the test step, and then select Enable Visual Testing from the dropdown menu.

4. Click Update Step.

5. Hover over the test step, and then click the Camera icon. This will open the Visual Difference – Figma section.

6. In the Base Line Image section, click Add Figma Designs.

7. In the Add Devices section, select the Browser and Resolution from the dropdown menus.

NOTE

1. For Android and iOS, you need to select a mobile device with the necessary resolution.

2. The same Browser and Resolution configured in visual testing must be selected during the Ad-hoc Run for accurate results.

8. In the Frame Link text box, enter the Figma frame link, and then click Refresh to verify.

NOTE

Ensure that the Figma frame dimensions match your target device resolution.

9. Click Save.

10. Execute the test case. In the test step result, click the Camera icon, and then select the Visual Difference – Figma tab to view the visual testing results.

NOTE

For detailed insights, click AI Insights. You can copy these insights for quick sharing.

---