Simplifying identification of potential non-visibility of user interface components when responsive web pages are rendered by disparate devices

A method of testing responsive web pages, said method comprising:

• instructing a browser to display a responsive web page in a first viewport of a first size, wherein said browser in response renders said responsive web page in said first viewport of said first size, said responsive web page containing a plurality of components;
• examining a data structure generated by said browser to determine whether each of said plurality of components is visible or non-visible within said first viewport when said browser renders said responsive web page in said first viewport;
• generating a visibility report indicating whether each of said plurality of components is visible or non-visible in said first viewport;
• receiving a second input indicating a desired overlapping of each component of said plurality of components with other components of said plurality of components;
• and
• creating a non-conforming overlapping report indicating which one of said plurality of components are non-conforming in said first viewport with respect to said second input.

A non-transitory machine readable medium storing one or more sequences of instructions for enabling a system to test responsive web pages, wherein execution of said one or more instructions by one or more processors contained in said system enables said system to perform the actions of:

• instructing a browser to display a responsive web page in a first viewport of a first size, wherein said browser in response renders said responsive web page in said first viewport of said first size, said responsive web page containing a plurality of components;
• examining a data structure generated by said browser to determine whether each of said plurality of components is visible or non-visible within said first viewport when said browser renders said responsive web page in said first viewport;
• iteratively performing said instructing and said examining for rendering said responsive web page in a plurality of viewports including said first viewport, each viewport being of a corresponding size in respective iteration;
• and
• generating a visibility report indicating whether each of said plurality of components is visible or non-visible in said plurality of view ports including said first viewport,
• wherein said visibility report is in the form of a two-dimensional matrix, with said plurality of viewports along a first dimension, and the plurality of components along a second dimension,
• wherein each cell of said two-dimensional matrix at the intersection of a specific viewport and a specific component indicates whether said specific component is visible or non-visible when said responsive web page is rendered in said specific viewport.

A non-transitory machine readable medium storing one or more sequences of instructions for enabling a system to test responsive web pages, wherein execution of said one or more instructions by one or more processors contained in said system enables said system to perform the actions of:

• instructing a browser to display a responsive web page in a first viewport of a first size, wherein said browser in response renders said responsive web page in said first viewport of said first size, said responsive web page containing a plurality of components;
• examining a data structure generated by said browser to determine whether each of said plurality of components is visible or non-visible within said first viewport when said browser renders said responsive web page in said first viewport;
• generating a visibility report indicating whether each of said plurality of components is visible or non-visible in said first viewport;
• receiving a second input indicating a desired overlapping of each component of said plurality of components with other components of said plurality of components;
• and
• creating a non-conforming overlapping report indicating which one of said plurality of components are non-conforming in said first viewport with respect to said second input.

A digital processing system comprising:

• a processor;
• a random access memory (RAM);
• a machine readable medium to store one or more instructions, which when retrieved into said RAM and executed by said processor causes said digital processing system to test responsive web pages, said digital processing system performing the actions of:
• instructing a browser to display a responsive web page in a first viewport of a first size, wherein said browser in response renders said responsive web page in said first viewport of said first size, said responsive web page containing a plurality of components;
• examining a data structure generated by said browser to determine whether each of said plurality of components is visible or non-visible within said first viewport when said browser renders said responsive web page in said first viewport;
• iteratively performing said instructing and said examining for rendering said responsive web page in a plurality of viewports including said first viewport, each viewport being of a corresponding size in respective iteration;
• and
• generating a visibility report indicating whether each of said plurality of components is visible or non-visible in said first viewport,
• wherein said visibility report is in the form of a two-dimensional matrix, with said plurality of viewports along a first dimension, and the plurality of components along a second dimension,
• wherein each cell of said two-dimensional matrix at the intersection of a specific viewport and a specific component indicates whether said specific component is visible or non-visible when said responsive web page is rendered in said specific viewport.

A digital processing system comprising:

• a processor;
• a random access memory (RAM);
• a machine readable medium to store one or more instructions, which when retrieved into said RAM and executed by said processor causes said digital processing system to test responsive web pages, said digital processing system performing the actions of:
• instructing a browser to display a responsive web page in a first viewport of a first size, wherein said browser in response renders said responsive web page in said first viewport of said first size, said responsive web page containing a plurality of components;
• examining a data structure generated by said browser to determine whether each of said plurality of components is visible or non-visible within said first viewport when said browser renders said responsive web page in said first viewport;
• generating a visibility report indicating whether each of said plurality of components is visible or non-visible in said first viewport;
• receiving a second input indicating a desired overlapping of each component of said plurality of components with other components of said plurality of components;
• and
• creating a non-conforming overlapping report indicating which one of said plurality of components are non-conforming in said first viewport with respect to said second input.