Page Comparison

When there are webpages that do not work, the following information is needed.

...

Get a screenshot of the webpage that is not working

1. Ideally the screenshot would include the error.

2. Browser type and version

   1. How to

...

The page URL

1. Where to look for this

...

A detailed description of the problem (i.e., cannot be, “…customer can’t get to a page”)

1. Put in example

Look for an error in the developer console.

...

A page not rendering correctly may refer to three broad categories:

1. Incomplete Or Delayed Page Load

   1. The page ‘hangs’ or doesn’t load all the components (e.g., missing images, buttons, links). It may also refer to a marked increase in the time to load all the page elements.

2. Layout Distortion

   1. Page elements load, but the layout appears distorted, with misaligned, overlapping, or skewed page elements.

3. Non-Functional Features or Functions

   1. The page loads successfully, but interactive elements, such as buttons or links, do not respond when clicked.

...

When addressing page rendering issues, follow the items below to gather the relevant information.

1. Describe the Issue and Reproduction Steps:

   • Provide a detailed description of the rendering issue, including any specific actions or steps needed to reproduce it.

2. Capture a Screenshot of the Page

   1. Include the relevant area or element where the rendering issue occurs.

3. Document Environment and Page Characteristics

   • Browser Type and Version: Specify the browser being used, such as Chrome, Firefox, Safari, or Edge, along with the exact version number.

   • Operating System: Identify the operating system on which the issue is observed, such as iOS, Android, or Windows, including the version if possible.

   • Device Type and Configuration: Mention the device type, such as phone, tablet, laptop, or desktop, and any relevant configuration details, such as screen resolution or orientation.

   • Page URL: Provide the specific URL or webpage address where the rendering issue occurs.

4. Use the Developer Console to Identify Errors:

   1. Open the browser's developer console to inspect and identify any possible errors related to the rendering issue.

      1. How to Open the Browser Console on Chrome, Safari, Firefox, and Edge

   2. Windows - xxx

   3. Android - xxx

Get a detailed description of the problem (i.e., cannot be, “…customer can’t get to a page”). The description should in

...

1. Take a screenshot of the browser console, look for red text indicating an error

   1. Take a screenshot of the browser console, focusing on any error messages or red text that indicates an issue.

2. Copy the Browser Console Text:

   1. Select and copy the text from the browser console, specifically the error messages or relevant information. Use the keyboard shortcut Ctrl+A to select all the text and Ctrl+C to copy it.

3. Include Information when you open a support ticket here.:

   • Paste the copied text (Ctrl+V) into an email or word processor document to preserve the details.