Test Case For Webpage Design Elements

Test Case For Webpage Design Elements: Suppose you have to take the printout of a web page while working on a project. Sometimes, the whole content on the page will not be printed as the contents at the end of the margin are cut off, or the images are not displayed properly.

Alignment issues and padding issues may also appear on print pages. So, the user should be careful while taking a web page printout. Here are some of the web page layout lists, designing a web page layout element of the website, different website elements like header & footer, finding webpage design elements, How to find good web page layout, and sample web page layout.

Test Case For Print Out Of Designing A Web Page Layout

Here are some test cases for Designing A Web Page Layout or webpage design elements.

• Check if the print screen is displayed by pressing the Ctrl+P key.
• Check if the print screen is displayed by clicking the ‘Print’ option in the File menu.
• Check that the layout of the print screen is displayed properly.
• Check if the user can select Portrait/Landscape orientation.
• Check if the user can set the print range.
• Check that all the buttons on the print screen are working properly.
• Check if the print preview works correctly.
• Check if the foreground and background colors do not change.
• Check if the font size is the same as displayed on the screen.
• Check that the texts and images are printed properly.
• Check the alignment and padding of the page.
• Check if the lists and tables print properly.
• Check if the HTML forms and widgets print properly.
• Check if the full page is printed without cropping the text.
• Check that the characters and paragraphs are printed properly.
• Check that the header and footer are printed properly.

Test Cases For Header

The header section for a website is very important in displaying the major functionality of your website. Header section decide.

• Check the header section added to the website.
• Check the alignment of the header section.
• Check if the icons are aligned with the text if added to the header.
• Check icons added should be related to the link text.
• Check whether the link’s text is readable or not.
• Check whether the logo of the website added on the header is aligned.
• Check the same header used on all website pages.
• Check that the header is sticky on the whole page or fixed as per requirements and design.
• Check whether all links should be opening on the header or not.
• Check by clicking on the link on the header; the correct page should be open.
• Check that the home page should be open by clicking on all pages’ logos.
• Check whether the mouse hover color changes for the link added to the header menu.
• Check that selected header links remain ACTIVE to inform the user about the clicked screen/page.
• Check whether the search bar is added to the header menu or not.
• Check that the header and body section do not look the same. The header and body section must be distinguished.
• Check icon color. If icons are added, it should also change on mouse hover on the header.
• Check the dropdown options added to the header shown on mouse hover or click.

Header For Mobile view

• Check the header is aligned on the mobile view.
• Check the logo is aligned on the mobile view.
• Check the sidebar added for the mobile view to display all links.

Test Cases For Footer Section

• Check the footer section aligned at the end of the page.
• Check that there should be no extra white space on high-screen resolutions at the end of the footer.
• Check whether the element is aligned at the footer section or not.
• Check footer section should be the same for all pages.
• Check the logo shown at the footer.
• Check the logo is aligned on the footer.
• Check from any page and click on the logo. The home page should be open.
• Check by clicking on the links; the correct pages should be loaded.
• Check all social links with icons added to the footer.
• Check for no spelling mistakes in the text on the footer section.
• Check there is equal space for the elements links, buttons, and social links from the top and bottom of the footer section.
• Check no broken link is found on the footer.
• Check whether the subscribe to the newsletter section is present or not.
• Check the subscribe to the newsletter email field with the subscribe button present.
• Check validation on the email field for subscribing to the newsletter added or not.
• Check an error message shown on blank input when clicking the Subscribe button.
• Check confirmation message should be shown if the user subscribed successfully.
• Check that the mouse cursor changes from a pointer to a hand on the link.
• Check whether the copyright section is added to the footer or not.
• Check correct year was added to the footer section or not.
• Check whether the copyright icon was added or not on the footer section.
• Check the size of the copyright icon.

Test Cases For GUI Of Webpage

• Check whether all the webpage elements (checkboxes, radio buttons, text fields, etc.) are aligned.
• Check if the icons on the webpage align with the web page.
• Check whether placeholder text on the input field is present and visible.
• Check the layout for the webpage on cross-device testing.
• Check the responsiveness for all the elements labeled text, field, checkboxes, or radio buttons on different browsers while testing cross-browser testing.
• Check whether the font size for the content on the webpage is readable or not.
• Check whether the font color for the content on the web page is as per the requirement document.
• Check the placement and position for the error message on the webpage according to design.
• Check the color for the error messages, warnings, and info messages.
• Check proper padding and spacing between different elements on the web page. ( label text and check box, buttons devs, etc.)
• Check image should not be blurred and visible on the webpage.
• Check banners or images should be shown and aligned on mobile devices. And should not be trimmed.
• Check the text on the images should be readable.
• Check the spelling should be correct on the web page.
• Check the colors for the links added to the text.
• Check the correct page should open after clicking on the link.
• Check the headings on the content.
• Check whether the validation is on the fields added or not.
• A confirmation message is shown on the popup or alert in case of delete functionality on the web page.
• Check titles on all web pages.
• Check there should not any broken links present on the web page.
• Make sure there should not be any broken images should not be shown on the web page.
• The order of the values on the dropdown list should be sorted as required.
• Check 404 page is designed or not.

Conclusion:

Here we have discussed the different web page elements that can improve a web page layout. This blog post discusses web page elements like Header, Footer, and GUI web page layout test cases.

During your validation, if you found some new test cases, you can inform us in the comment section, and we will be happy to update our blog post.