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 the printout of a web page. Here are some of the web page layout lists, designing a web page layout element of website, different website elements like header & footer, find 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 of the 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 is the layout of the print screen is displayed properly.
• Check if the user is able to select Portrait/Landscape orientation.
• Check if the user is able to set the print range.
• Check that all the buttons on the print screen are working properly.
• Check if the print preview works correctly.
• Check is the foreground and background colors do not change.
• Check if the font size is the same as displayed on the screen.
• Check is the texts and images are printed properly.
• Check the alignment and padding of the page.
• Check if the lists and tables print properly.
• Check is the HTML forms and widgets print properly.
• Check if the full page is printed without cropping the text.
• Check is the characters and paragraphs are printed properly.
• Check is 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 on 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 links text should be readable or not.
• Check the logo of the website added on the header is aligned or not.
• Check the same header used on whole website pages.
• Check 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 on click on the link on the header the correct page should be open.
• Check the home page should be open on clicking on the logo on all pages.
• Check on the mouse hover color changes or not for the link added on the header menu.
• Check selected header links should remain ACTIVE to inform the user about the clicked screen/page.
• Check search bar is added to the header menu or not.
• Check header and body section should not look the same. The header and body section must distinguish.
• Check icon color should also change on mouse hover on the header if icons are added.
• Check dropdown options added on header shown on mouse hover or click.

Header For Mobile view

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

Footer Test Cases Section

• Check the footer section aligned at the end of the page.
• Check there should be no extra white space at the end of the footer on high screen resolutions.
• Check 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 on click on the logo home page should be open.
• Check on click on the links 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 must be 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 subscribe button present or not.
• Check validation on the email field for subscribing to the newsletter added or not.
• Check an error message shown on blank input on click on the Subscribe button.
• Check confirmation message should be shown if the user subscribed successfully.
• Check mouse cursor changes from a pointer to 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 that all the elements (checkboxes, radio buttons, text fields, etc) on the webpage are aligned or not.
• Check if the icons on the webpage align with the web page.
• Check that placeholder text on the input field is present and visible or not.
• Check 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 is the font color for the content on the web page is as per the requirement document or not.
• Check the placement and position for the error message shown 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 or not.
• Check titles on all web pages.
• Check there should not be 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.
• Check 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 which can make a web page layout better. In this blog post, we have discussed the web page elements like Header, Footer, and GUI web page layout test cases.

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