Automated UI Acceptance Workflow for iQIYI Mobile Apps

In the mobile Internet era, capturing user attention, improving visual comfort, and reinforcing brand recognition have become core UI design goals. As UI design becomes increasingly fine‑grained, complex, and diverse, maintaining high fidelity from design mock‑ups to actual devices has become a critical focus for design and development teams.

The iQIYI mobile development team, following a philosophy of innovation and efficiency, built an end‑to‑end product that covers UI design, annotation, development, debugging, and full‑process acceptance. This platform standardizes and automates the entire workflow, significantly improving UI fidelity and development efficiency.

The focus of this article is the UI automation acceptance dimension, sharing the team’s exploration and practice.

After the UI acceptance platform was completed, the process became standardized and automated. Designers experienced a 50% increase in acceptance efficiency, eliminating manual measurement and bug annotation, and achieving pixel‑level acceptance quickly. Collaboration costs between designers and engineers were reduced, and overall mobile app UI quality improved.

The workflow is presented in three stages: page measurement, page acceptance, and acceptance reporting.

Page Measurement aims to accurately discover UI controls and extract attributes such as size, width/height, and background color. The design team requires 100% measurement accuracy. Two solutions were evaluated:

Sketch plugin + client‑side acceptance SDK : the SDK is embedded in the app to call control APIs for measurement, while the Sketch plugin extracts control data from design files.

AI image control recognition : image‑recognition algorithms identify and measure controls from screenshots.

The comparison table shows that the Sketch‑plugin + SDK approach offers 100% control recognition with high precision but requires platform‑specific adaptation, whereas the AI approach avoids multi‑platform adaptation but has about 30% recognition error and cannot fully meet strict acceptance standards. Consequently, the production environment adopted the Sketch‑plugin + SDK solution.

Page Acceptance consists of two modes:

Personalized acceptance mode : designers manually click matching controls in the design and development pages, compare them, mark errors, and save.

Automatic acceptance mode : users select matching regions, and algorithms automatically evaluate all UI controls within those regions.

The main challenges are establishing a one‑to‑one relationship between design and development controls and determining the correct spacing relationships. To address these, the acceptance process is divided into three stages: preprocessing, relationship building, and control comparison.

Preprocessing cleans, unifies, and merges data from design and development pages, normalizing screen sizes, removing redundant views, and smoothing differences caused by varying devices or fonts.

Relationship Building uses two algorithms:

Control matching algorithm : combines position, type, and neighboring control information to compute a match score, establishing a one‑to‑one mapping.

Spacing selection algorithm : sorts possible spacings by minimal distance and selects the smallest absolute spacing as the control’s spacing.

Control Comparison compares each control’s style and spacing based on the relationships established in the previous stage.

The two acceptance modes were compared in a table, showing that personalized mode excels in precision and accuracy but has average efficiency, while automatic mode offers excellent efficiency but lower precision.

Acceptance Report is generated automatically after the evaluation, providing a multi‑dimensional, traceable report that includes problem priority, description (actual vs. expected style), and fix status, enabling engineers to track and resolve issues efficiently.

In summary, the platform has achieved a 50% improvement in UI acceptance efficiency. Future plans include further refining the platform based on designer and engineer workflows, extending automation beyond UI acceptance to the entire design‑to‑deployment pipeline, and continuously improving efficiency and quality across the whole development chain.