User interface layout comparison
In an example implementation, a converted layout design of a user interface of an application may be generated from a layout design of the user interface and a layout design configuration. The converted layout design may correspond to a form factor. A screenshot of the user interface of the application may be captured on a device with the display resolution. In addition, the converted layout design may be compared with the screenshot.
1. A system, comprising:
a generate engine to generate, from a layout design of a user interface of an application and a layout design configuration, a converted layout design of the user interface, wherein the converted layout design corresponds to a form factor having a display resolution;
a capture engine to capture a screenshot of the user interface of the application on a device with the form factor, wherein the screenshot is captured during a predetermined breakpoint of the application; and
a compare engine to compare pixels of the converted layout design with corresponding pixels of the screenshot, and to generate an image differential between the converted layout design and the screenshot.
2. The system of claim 1 , wherein the screenshot of the user interface of the application is captured from a simulator of the device.
3. The system of claim 1 , wherein a run instruction defines the predetermined breakpoint and a task flow to test the application.
4. The system of claim 1 , wherein the converted layout design is a targeted user interface appearance for the form factor interpolated from the layout design.
5. A non-transitory computer readable medium storing instructions executable by a processing resource to cause a computer to:
translate a layout design of a user interface of an application to a plurality of user interface elements based on a layout design configuration;
interpolate each of the plurality of user interface elements to a converted layout design of the user interface, the converted layout design corresponding to a display resolution;
capture a screenshot of the user interface of the application on a device with the display resolution, wherein the screenshot is captured during a predetermined breakpoint of the application; and
compare pixels of the converted layout design with corresponding pixels of the screenshot and generate an image differential between the converted layout design and the screenshot.
6. The non-transitory computer readable medium of claim 5 , further comprising instructions to output a comparison report characterizing the results of the comparison.
7. The non-transitory computer readable medium of claim 5 , wherein the plurality of user interface elements includes layout elements.
8. The non-transitory computer readable medium of claim 5 , wherein the plurality of user interface elements includes basic elements.
9. The non-transitory computer readable medium of claim 5 , wherein the instructions to compare the converted layout design with the screenshot include instructions to calculate the image differential between the converted layout design and the screenshot.
10. A method comprising:
translating a layout design of a user interface of an application to a plurality of user interface elements based on a layout design configuration;
interpolating each of the plurality of user interface elements to a converted layout design of the user interface corresponding to a display resolution;
capturing a screenshot of the user interface of the application on a device with the display resolution, wherein the screenshot is captured during a predetermined breakpoint of the application;
comparing pixels of the converted layout design with corresponding pixels of the screenshot; and
generating a comparison result image, wherein the generating comprises:
generating an image differential between the converted layout design and the screenshot.
11. The method of claim 10 , further comprising generating a map of the interpolation of each of the plurality of user interface elements.
12. The method of claim 11 , wherein the map of the interpolation comprises a series of shapes corresponding to each of the plurality of user interface elements, wherein each shape illustrates an interpolation of the corresponding user interface element to the display resolution.
13. The method of claim 10 , wherein comparing the converted layout design with the screenshot comprises comparing each pixel of the converted layout design with each corresponding pixel of the screenshot.
14. The method of claim 10 , wherein the comparison result image includes an indication of each pixel of the converted layout design and each pixel of the screenshot that differ.