This document contains Checklists to help you test your WordPress Web-pages and Theme
To test any reference design to WORDPRESS site we need to test both markup i.e User Interface and its dynamic functionality. Below mentioned are some useful and mandatory steps which we need to follow
1. First, we need to test the mark validation of the page as per W3C standard. Use the URL https://validator.w3.org that is given by W3C . There are 3 ways to test the markup validation of a page
I. By using the URL: – Enter the URL in the address bar and click on check button to get the result.
II. By file upload: – Here you can upload your file and click on check button to get the result.
III. Direct Input: – Here we can direct paste our HTML code and click on check to get result.
→ Here pass and fail reports will be available after clicking on check button
2. Then we need to check the CSS standard with help of W3C CSS Validation URL
(https://jigsaw.w3.org/css-validator/). Here we have same steps like mark-up validation.
→ Here pass and fail report will be available after clicking on check button
3. In respect to validation, there is another validation option which is not required by most of the clients but in the case, client has asked for Section 508 and other validations then we can use URL as (http://achecker.ca/checker/index.php).
→ Here pass and fail report will be available after clicking on check button
4. After checking all these aspects, now we need to check the UI i.e. layout as per the client™s given reference. Validate the developed layout as per the given reference based on Logo positioning, text positioning, font size, font family, alignment, etc. and pixel perfection.
I. To check the layout, we can take the help of Photoshop in case reference is in psd, jpg or png. With the help of Photoshop, we can pick font size (Only PSD), font color (Only PSD), dimension of the layout, etc. Also, we can check the pixel perfection of a web page.
II. Same as PSD, we can compare other formats too.
III. Check the Image quality; images should not be blurred, stretched and of low quality.
IV. Check the viewport dimensions.
5. Check the page for cross-browser compatibility on popular browsers like Internet Explorer, Google Chrome, Mozilla Firefox, etc. with different screen size.
6. Check the printable view of page in the case of client request.
7. CSS Technical tests
I. Always check for external stylesheets that were used while development
II. Check for not use of !important in CSS styling
III. Check for not use of @import in plain CSS
IV. Check for browser-specific hacks
8. Check if the favicon icon is there or not and its setting from back-end admin panel.
9. Correct the grammar and spelling of all pages (For this, you can take the help of word or Spelling check browser add-on).
10. Check all links in all pages are working properly.
11. Check audio and video items are correct and formatted properly with optimized speed.
12. Check Images are correct and have been optimized for the web (resize all large images).
13. Check header (or company logo) is linked to home page in case user is on any page.
14. Check website should work in multiple browsers. i.e. cross-browser compatibility should be there.
15. Check all the images have alt tag.
16. Check if the page load time is 3 seconds or less.
17. Check all external hyperlinks open in a new tab.
18. Check all the forms are submitting data correctly.
19. Check all the forms are emailing to correct address.
20. Check all the forms display correct message or redirection on submit.
21. Check JavaScript is free from errors. For this, we can user JSLint online tools.
22. Check and confirm Site Title and Site Tagline are correct.
23. Check social sharing icons are working properly.
24. Check code for SEO Semantic. There should be only one H1 tag in page, alt text should be there with every image and there should not be any 404 code showing in page.
25. In the case we are migrating from an old site to a new website, check old website™s URLs are 301 redirected to new URLs.
26. Check all the required license for font, plugin/script. Also, check if the images are on file or not.
27. Check the Load Speed with help of GT Metrix and page speed as per standard page load timing and grade. https://gtmetrix.com/
28. In the case of Responsive Web Design(RWD), check the design with different devices like android phone, iPhone, iPad, iPod.
Some General Rules for Testing Desktop / Responsive Web Design
- Images, controls, and text are properly aligned
- Highlight and color changes have been stated by Hover and selection
- An ideal clickable area
- Consistency in color, shading, and gradient
- The padding should be correct around the edges
- Images, frames, text, and controls do not run into the edges of the screen
- Consistency in font size, color, and style for each type of text
- Proper scrolling and display of typed text (data entry)
- Feasible readability of the pages on all resolutions
- The horizontal bar should never be visualized in the page
- Content shown as ˜important™ requires to be visible in all the breakpoints
- Breakpoints “ The adaptation of the layout has been required by each breakpoint along with the modules that are volatile in their positioning and rules. Another possibility is to have a fluid layout, with text and images that fit proportionately in relation to the width of the page.
- Modules “ The positioning of modules should be checked properly to ensure a perfect layout while expanding/ shrinking the browser window or rotating a mobile device. Often few of the modules disappear as the user switched from desktop to mobile. Hence, exactly knowing which modules should be displayed in which viewport is a must thing to do.
Points to check in WP Theme (Functional Testing)
- Get complete understanding of project from respective PM/TL/Developer.
- Check installation and configuration of Theme by installing it. Checking the URL https://codex.wordpress.org/Using_Themes can be a great help
- Enable debugging information: Leaving undefined variables and other such nuisance creating elements all over the place is often seen among the developers. PHP might take it lightly by default, but they annoy and may cause other problems down the road. Making sure that WP_DEBUG is ready to true in wp-config.php is a way to avoid such instances.
- Check Theme Option panel and its reflection at the user™s end.
- Test table prefix: Installing a custom table prefix helps in two ways. First, it ensures that you don™t need to hard-code database queries. Secondly, it gives you an additional layer of security. It is a known fact that the default is wp_, so choose 239Jd_23eKSmCM892_Vuhwedp as your prefix to add a mini password to your database.
- WordPress Theme Check (run by WordPress community developers) is a significant tool that ensures that your theme is perfect. Firstly, Theme Forest runs this tool over the theme submitted by you, and in the case of error found, your theme will be rejected. The major functions that this tool checks are incorrect text domains, hidden files, legacy functions, required functions and attributes, and much more.
- Utilizing this plugin is the best way to assure your theme is conforms to the WordPress compliance level by 100%. https://wordpress.org/plugins/theme-check/
- Check if 404 page is created and customized properly or not.
- Check and confirm admin email address is correct.
- Check form auto-responders are working correctly.
- Check and confirm permalink settings are not Default for SEO purposes.
- Perform Unit Testing Data for WordPress Themes and Plugins: Unit testing is such a practice that is highly recommended for the developers who create software for other people to use. Essentially, it uses a set of control data to put your code through the paces. To make sure that your theme is going to offer a seamless experience to the users, performing tests prior its release would be a wise move. The process of unit testing is made easy by WP Test. Import the test data in your test site. Download it through this link https://codex.wordpress.org/Theme_Unit_Test
