Method and system for automatic test website layout
Method and system to automatically verify the layout of a webpage on various screen sizes. The method includes retrieving screen size data associated with the webpage. The method further includes determining anchor points for the webpage based on the retrieved screen size data. The method also includes rendering the plurality of elements of the webpage based on the retrieved screen size data and the determined anchor points and identifying a respective location of each of the plurality of elements of the webpage to verify the layout of the plurality of elements of the webpage. If an error in the layout of the webpage is detected, a visual and/or audio alert is sent.
1. A system, the system comprising:
a processor; and
a memory coupled with and readable by the processor and storing therein a set of instructions which, when executed by the processor, causes the processor to verify a layout of a plurality of elements of a webpage by:
retrieving screen size data associated with the webpage, wherein the retrieved screen size data indicates one or more supported screen sizes for the webpage;
determining anchor points for the webpage based on the retrieved screen size data, wherein the determined anchor points specify borders of the webpage, and wherein the determined anchor points are specific to each of the one or more supported screen sizes for the webpage;
rendering the plurality of elements of the webpage based on the retrieved screen size data and the determined anchor points;
identifying a respective location of each of the plurality of elements of the webpage;
verifying the layout of the plurality of elements of the webpage based on anchor points and the respective location of each of the plurality of elements of the webpage; and
in response to detecting an error in the layout of the plurality of elements of the webpage resulting from a change in screen size, collapsing two or more elements into an expandable menu, wherein the error in the layout of the plurality of elements of the webpage comprises at least one of: at least one of the two or more elements not being within the determined anchor points, the two or more elements overlapping, and at least one of the two or more elements shifting downward in the layout of the plurality of elements.
2. The system of claim 1 , wherein retrieving the screen size data associated with the webpage further comprises:
parsing the screen size data from a Cascading Style Sheets (CSS) meta query associated with the webpage.
3. The system of claim 1 , wherein retrieving the screen size data associated with the webpage further comprises:
parsing a Hypertext Transfer Protocol (HTTP) header to retrieve the screen size data associated with the webpage.
4. The system of claim 1 , wherein verifying the layout of the plurality of elements of the webpage further comprises:
determining a relative location of each of the plurality of elements of the webpage to determine that each element has a correct relative location.
5. The system of claim 1 , wherein verifying the layout of the plurality of elements of the webpage further comprises:
determining if any element of the plurality of elements of the webpage overlaps another element of the plurality of elements of the webpage.
6. The system of claim 1 , wherein verifying the layout of the plurality of elements of the webpage further comprises:
determining a location of each element of the plurality of elements of the webpage; and
determining if the location of any element of the plurality of elements is not located within the determined anchor points.
7. The system of claim 1 , wherein rendering the webpage based on the retrieved screen size data further comprises:
rendering the webpage based on a starting screen size; and
successively rendering the webpage by increasing the starting screen size pixel by pixel until a screen size equal to one of the one or more supported screen sizes is reached.
8. A method to verify a layout of a plurality of elements of a webpage, the method comprising:
retrieving screen size data associated with a webpage, wherein the retrieved screen size data indicates one or more supported screen sizes for the webpage;
determining anchor points for the webpage based on the retrieved screen size data, wherein the determined anchor points specify borders of the webpage, and wherein the determined anchor points are specific to each of the one or more supported screen sizes for the webpage;
rendering the plurality of elements of the webpage based on the retrieved screen size data and the determined anchor points;
identifying a respective location of each of the plurality of elements of the webpage;
verifying the layout of the plurality of elements of the webpage based on anchor points and the respective location of each of the plurality of elements of the webpage; and
in response to detecting an error in the layout of the plurality of elements of the webpage resulting from a change in screen size, collapsing two or more elements into an expandable menu, wherein the error in the layout of the plurality of elements of the webpage comprises at least one of: at least one of the two or more elements not being within the determined anchor points, the two or more elements overlapping, and at least one of the two or more elements shifting downward in the layout of the plurality of elements.
9. The method of claim 8 , wherein retrieving the screen size data associated with the webpage comprises parsing the screen size data from a Cascading Style Sheets (CSS) meta query associated with the webpage.
10. The method of claim 8 , wherein retrieving the screen size data associated with the webpage comprises parsing a Hypertext Transfer Protocol (HTTP) header to retrieve the screen size data associated with the webpage.
11. The method of claim 8 , wherein verifying the layout of the plurality of elements of the webpage comprises determining a relative location of each of the plurality of elements of the webpage so that each element has a correct relative location.
12. The method of claim 8 , wherein verifying the layout of the plurality of elements of the webpage comprises determining if any element of the plurality of elements of the webpage overlaps another element of the plurality of elements of the webpage.
13. The method of claim 8 , wherein verifying the layout of the plurality of elements of the webpage comprises:
determining a location of each element of the plurality of elements of the webpage; and
determining if the location of any element of the plurality of elements is not located within the determined anchor points.
14. The method of claim 8 , wherein rendering the webpage based on the retrieved screen size data comprises:
rendering the webpage based on a starting screen size; and
successively rendering the webpage by increasing the starting screen size pixel by pixel until a screen size equal to one of the one or more supported screen sizes is reached.
15. A non-transitory, computer-readable medium comprising a set of instructions stored therein which, when executed by a processor, causes the processor to verify a layout a plurality of elements of a webpage by:
retrieving screen size data associated with the webpage, wherein the retrieved screen size data indicates one or more supported screen sizes for the webpage;
determining anchor points for the webpage based on the retrieved screen size data, wherein the determined anchor points specify borders of the webpage, and wherein the determined anchor points are specific to each of the one or more supported screen sizes for the webpage;
rendering the plurality of elements of the webpage based on the retrieved screen size data and the determined anchor points;
identifying a respective location of each of the plurality of elements of the webpage;
verifying the layout of the plurality of elements of the webpage based on anchor points and the respective location of each of the plurality of elements of the webpage; and
in response to detecting an error in the layout of the plurality of elements of the webpage resulting from a change in screen size, collapsing two or more elements into an expandable menu, wherein the error in the layout of the plurality of elements of the webpage comprises at least one of: at least one of the two or more elements not being within the determined anchor points, the two or more elements overlapping, and at least one of the two or more elements shifting downward in the layout of the plurality of elements.
16. The non-transitory, computer-readable medium of claim 15 , wherein retrieving the screen size data associated with the webpage further comprises:
parsing the screen size data from a Cascading Style Sheets (CSS) meta query associated with the webpage.
17. The non-transitory, computer-readable medium of claim 15 , wherein retrieving the screen size data associated with the webpage further comprises:
parsing a Hypertext Transfer Protocol (HTTP) header to retrieve the screen size data associated with the webpage.
18. The non-transitory, computer-readable medium of claim 15 , wherein verifying the layout of the plurality of elements of the webpage further comprises:
determining a relative location of each of the plurality of elements of the webpage to determine that each element has a correct relative location.
19. The non-transitory, computer-readable medium of claim 15 , wherein verifying the layout of the plurality of elements of the webpage further comprises:
determining if any element of the plurality of elements of the webpage overlaps another element of the plurality of elements of the webpage.
20. The non-transitory, computer-readable medium of claim 15 , wherein verifying the layout of the plurality of elements of the webpage further comprises:
determining a location of each element of the plurality of elements of the webpage; and
determining if the location of any element of the plurality of elements is not located within the determined anchor points.