Test Case For Webpage Elements

Test Case For Webpage Elements: Suppose you have to take the printout of a web page while working on a project. Sometimes the whole content in 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 in print pages. So the user should be careful while taking the printout of a web page.

Test Case For Print Out Of Webpage

• Check is the print screen is displayed by pressing the Ctrl+P key.
• Check is 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 is the user is able to select Portrait/Landscape orientation.
• Check is the user is able to set the print range.
• Check is that all the buttons on the print screen are working properly.
• Check is the print preview works correctly.
• Check is the foreground and background color do not change.
• Check is the font size is the same as displayed on the screen.
• Check is the texts and images are printed properly.
• Check is the alignment and padding of the page.
• Check is the lists and tables print properly.
• Check is the HTML forms and widgets print properly.
• Check is 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 is the header section added on the website.
• Check the alignment of the header section.
• Check is 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 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 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 on 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 header aligned on mobile view.
• Check logo aligned on the mobile view.
• Check 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 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 logo 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 on the footer.
• Check no spelling mistake for the text on the footer section.
• Check there must be equal space for the elements links, buttons, social links from the top and bottom at the footer section.
• Check no broken link found on the footer.
• Check 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 the copyright section is added on the footer or not.
• Check correct year was added on the footer section or not.
• Check the copyright icon was added or not on the footer section.
• Check size for the copyright icon.

Test Cases For GUI Of Webpage

• Check that all the elements (checkboxes, radio button, text fields, etc) on the webpage are aligned or not.
• Check is the icons on the webpage align on 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 label 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 spellings should be correct on the web page.
• Check the colours for the links added to the text.
• Check the correct page should be open on 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 link 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.