System and method for web page rendering test automation suite

• US 9,076,072 B2
• Filed: 09/30/2013
• Issued: 07/07/2015
• Est. Priority Date: 10/11/2012
• Status: Active Grant

• Current Assignee: Salesforce.com, Inc.
• Original Assignee: Salesforce.com, Inc.
• Inventors: Hayek, Neil, Li, Ang
• Primary Examiner(s): Do, Anh
• Application Number:
  US14/042,412
• Publication Number:
  US 20140105491A1
• Time in Patent Office: 645 Days
• Field of Search: 382/165, 382/181, 382/218, 382/221, 345/568, 430/17, 430/292, 430/293, 435/174, 435/183, 435/219, 709/203, 709/219, 709/222, 705/39, 705/40, 704/270.1, 704/256, 704/260, 713/2, 530/350, 977/773
• US Class Current: 1/1
• CPC Class Codes: G06F 16/9577 Optimising the visualization of content, e.g. distillation of HTML documents
• CPC Class Codes: G06F 16/958 Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Abstract

Methods and systems are provided for testing visual elements in a rendered web page. The method includes defining a gold image at a first point within a web application, taking a screen shot of an actual image at the first point during execution of the web application, and comparing the gold image to the actual image and generating a difference image based on the comparison. The difference image may include a first region highlighting a first difference between the gold image and the actual image within an area common to both images, and a second region highlighting a second difference between the gold image and the actual image which is not within an area common to both images.

Claims

1. A computer-executable application embodied in a non-transitory medium for operation by a computer processor for implementing a method of testing visual elements in a rendered web page, the method comprising:

defining, with the computer processor, a gold image at a first point within a web application;

taking a screen shot of an actual image at the first point during execution of the web application with the computer processor; and

comparing, with the computer processor, the gold image to the actual image and generating a difference image based on the comparison;

wherein the difference image comprises;

a first region highlighting a first difference between the gold image and the actual image within an area common to both images; and

a second region highlighting a second difference between the gold image and the actual image which is not within an area common to both images.

2. The method of claim 1, wherein comparing comprises comparing the gold image to the actual image on a pixel-by-pixel basis.

3. The method of claim 1, wherein the first region is highlighted using a first color, and the second region is highlighted using a second color which is not the first color.

4. The method of claim 1, wherein the gold image is substantially rectangular having a height A and a width B, the actual image is substantially rectangular having a height C and a width D, and the difference image is substantially rectangular having a height which is the greater of A and C and having a width which is the greater of B and D.

5. The method of claim 4, wherein highlighting comprises creating a visual contrast using at least one of color, shading, font, and stylization.

6. The method of claim 1, wherein the rendered web page comprises a plurality of nested web elements, and further wherein defining the gold image comprises identifying a subset of the web elements for inclusion in the gold image.

7. The method of claim 1, wherein the second region comprises a first portion highlighting an area present in the gold image but not in the actual image.

8. The method of claim 7, wherein the second region further comprises a second portion highlighting an area present in the actual image but not in the gold image.

9. The method of claim 8, wherein the second region further comprises a third portion highlighting an area that is not present in the actual image and not present in the gold image.

10. The method of claim 9, wherein the first region is highlighted using a first color, the first portion is highlighted using a second color, the second portion is highlighted using a third color, and the third portion is highlighted using a fourth color.

11. The method of claim 1, wherein taking the screen shot of the actual image comprises masking an element which is expected to be in the actual image but which is not in the gold image.

12. The method of claim 1, wherein:

defining a gold image further comprises creating a gold image data file corresponding to the gold image;

taking a screen shot of the actual image further comprises creating an actual image data file corresponding to the actual image; and

comparing comprises automatically, without end user interaction, comparing the gold image data file with the actual image data file on a pixel-by-pixel basis.

13. The method of claim 1, further comprising:

evaluating the difference image to determine whether the first difference is acceptable; and

if the first difference is acceptable, replacing the gold image with the actual image.

14. The method of claim 13, further comprising fixing the first difference if the first difference is unacceptable.

15. A computer-executable method of testing a block of code used for rendering a web page, comprising:

defining, with a processor of a computing system programmed to perform the computer-executable method, a gold image at a predetermined point within the code block;

taking, with the processor of the computing system, a test image of a rendered web page at the predetermined point;

comparing, with the processor of the computing system, the test image to the gold image;

producing, with the processor of the computing system, a DIFF file comprising at least one difference between the test image and the gold image based on the comparison; and

displaying a DIFF image based on the DIFF image file;

wherein displaying the DIFF image comprises;

displaying the elements common to the gold image and the test image using a first visualization; and

displaying the at least one difference in a second visualization different from the first visualization.

16. The method of claim 15, wherein the first visualization comprises a first color, and the second visualization comprises a second color.

17. The method of claim 15, wherein the web page comprises a plurality of nested web elements, and further wherein defining the gold image comprises prompting a test designer to select a subset of the web elements for inclusion in the gold image.

18. Computer code embodied in a non-transitory medium for operation by a processing system for performing the steps of:

defining a gold image comprising a subset of web elements associated with a web page to be rendered;

taking a screen shot of the rendered web page;

comparing the screen shot to the gold image to obtain common elements between the gold image and the screen shot; and

displaying the common elements between the gold image and the screen shot in a first color and simultaneously displaying the differences between the gold image and the screen shot in a second color.

19. The computer code of claim 18 configured for operation in a multi-tenant on demand computing environment.

20. The computer code of claim 18, wherein comparing comprises automatically, without end user interaction, comparing the gold image with the screen shot on a pixel-by-pixel basis.