The testing.md file provides an overview of the testing conducted on the Recipe Collective website. It covers code validation, accessibility, performance, testing on various devices, browser compatibility, testing user stories, and user feedback and improvements. Each section describes the tools used, the issues found (if any), and the corresponding test results.
- Code Validation
- Accessibility
- Performance
- Performing tests on various devices
- Browser compability
- Manual Testing
- Summary
W3C Markup Validation is a service provided by the W3C that allows you to validate your HTML code against the official specifications. It checks for syntax errors, improper tag usage, and other issues that may affect the structure and semantics of your web pages. Validating your HTML code with W3C Markup Validation helps ensure that your pages are well-formed and adhere to web standards
All pages passed through the validation and the code was pasted in and I used a filter to remove issues related to the Django templating system.
Tested | Result | View Result | Pass |
---|---|---|---|
base | No errors | ✅ | |
index | No errors | ✅ | |
about | No errors | ✅ | |
register | No errors | ✅ | |
login | No errors | ✅ | |
profile | No errors | ✅ | |
logout | No errors | ✅ | |
home | No errors | ✅ | |
myrecipes | No errors | ✅ | |
favorites | No errors | ✅ | |
cookbook_links | No errors | ✅ | |
list_card | No errors | ✅ | |
pagination | No errors | ✅ | |
recipe_form | No errors | ✅ | |
recipe_detail | No errors | ✅ | |
recipe_confirmation_delete | No errors | ✅ |
W3C Jigsaw is a tool provided by the World Wide Web Consortium (W3C) that allows you to validate and check the correctness of your HTML and CSS code. It helps ensure that your web pages comply with the standards set by the W3C, promoting interoperability and accessibility.
Tested | Result | View Result | Pass |
---|---|---|---|
CSS file | No errors | Result | ✅ |
Whole webpage | When validating the page as a whole, the validator shows some errors linked to Bootstrap v5.0. When validating just my own custom CSS | Result | ✅ |
PEP 8 is a style guide for writing Python code to ensure consistency and readability. It provides guidelines on how to format code, naming conventions for variables and functions, and other best practices. Following PEP 8 helps to improve code quality, readability, and maintainability.
The settings file had one URL that was too long, while the other lines exceeding the recommended length were automatically generated by Django.All other files had no errors and were clear of any issues.
Note: The specific details and validation results for each file can be viewed by expanding the corresponding sections.
The WAVE Web Accessibility Evaluation Tool was used to assess the accessibility of the website. WAVE helps identify potential accessibility issues and provides guidance on how to improve the accessibility of web content.
During the evaluation, the following issues were identified:
-
Errors: The website generated 5 errors, which are related to the Bootstrap footer.
-
Contrast Warning: I received a contrast warning for my primary button, which has white text against a brownish background. It's worth noting that I intentionally chose this design with white text, as it aligns with my overall aesthetic and branding. While I understand that using black text for better readability on the button, I have decided to maintain the white text as a deliberate design choice.
-
Redundant Link Alert: The tool flagged one alert for a redundant link. This alert is due to the tool misinterpreting the {{}} inserted URL pages, mistakenly assuming they are duplicate links. I want to clarify that these links are not going to the same place. This alert does not impact the functionality or accessibility of my website.
By using the WAVE tool, I gained valuable insights into the accessibility of my website. While I have chosen not to address certain errors at this time, I remain committed to creating an inclusive user experience and will continue to explore ways to improve accessibility in the future.
The Recipe Collective website was tested using Google Lighthouse in Google Chrome Developer Tools. The performance scores were evaluated for both desktop and mobile devices. Here are the summarized results:
- Average performance score: 92/100
- The majority of pages received scores above 90/100, indicating excellent performance.
- The Logout page received a score of 85/100 due to preventing back/forward cache restoration, which is intentional to maintain security.
Tested | Performance Score | View Result | Pass |
---|---|---|---|
index | 98 / 100 | ✅ | |
about | 98 / 100 | ✅ | |
sign up | 98 / 100 | ✅ | |
login | 98 / 100 | ✅ | |
profile | 94 / 100 | ✅ | |
logout | 85 / 100 | ✅ | |
cookbook | 83 / 100 | ✅ | |
my recipes | 95 / 100 | ✅ | |
my favorites | 99 / 100 | ✅ | |
recipe details | 98 / 100 | ✅ | |
add recipe | 92 / 100 | ✅ | |
update recipe | 95 / 100 | ✅ | |
delete recipe | 98 / 100 | ✅ |
- Average performance score: 77/100
- The pages showed slightly lower performance compared to desktop, but still maintained a satisfactory score.
- The Logout page received a score of 71/100 due to preventing back/forward cache restoration, which is intentional to maintain security.
Tested | Performance | View Result | Pass |
---|---|---|---|
index | 77 / 100 | ✅ | |
about | 76 / 100 | ✅ | |
sign up | 77 / 100 | ✅ | |
login | 72 / 100 | ✅ | |
profile | 71 / 100 | ✅ | |
logout | 71 / 100 | ✅ | |
cookbook | 80 / 100 | ✅ | |
my recipes | 77 / 100 | ✅ | |
my favorites | 88 / 100 | ✅ | |
recipe details | 72 / 100 | ✅ | |
add recipe | 73 / 100 | ✅ | |
update recipe | 72 / 100 | ✅ | |
delete recipe | 72 / 100 | ✅ |
Overall, the Recipe Collective website performed well in terms of performance, providing a smooth user experience on both desktop and mobile devices.
The website was tested on the following devices:
- Samsung Galaxy Note S20 ultra
- Samsung Galaxy Note S22 ultra
- Apple iPhone 12
- OnePlus 8
In addition, the website was tested using Google Chrome Developer Tools Device Toggeling option for all available device options.
The website was tested on the following browsers:
- Google Chrome
- Mozilla Firefox
- Microsoft Egde
User Story | Action | Expected Result | Pass |
---|---|---|---|
I can create an account so that I can save my recipes | Click on the "Signup" navigation link or the signup button on the landing page | The user should be redirected to the signup form | ✅ |
I want to be able to access the About page so that I can learn more about the purpose, features, and benefits of the Recipe Collective without needing to create an account | Click on the "About" button in the navigation bar on the landing page | The user should be directed to the About page | ✅ |
User Story | Action | Expected Result | Pass |
---|---|---|---|
I can log in to my account | Press the login button either on the landing page or in the navbar | The user should be directed to the login page | ✅ |
I can log out of my account | Press the profile button and then select the logout option | The user should be logged out of their account | ✅ |
I can go to my profile page so that I can see my saved recipes and personal information | Press the profile button on the right side of the navbar and then on Profile in the drop down menu | The user should be redirected to their profile page | ✅ |
I want to be able to navigate through a long list of recipes using pagination so that I can view and interact with the list easily | Scroll down to the bottom of the Cookbook, My Recipes, or Favorites section | If there are more than 9 recipes, pagination is displayed to navigate through the list | ✅ |
I can view all recipes so that I can find new recipes to try | Click on the "Cookbook" link in the navigation bar | The user is directed to the recipe list view | ✅ |
I can click on a recipe so that I can get all details and instructions about it | Click on the recipe title or the info button | The user is taken to the recipe detail page | ✅ |
I can save recipes that I find in my own "cookbook" so that I can find them easily in the future | Click on the heart icon on the upper right part of the recipe detail page | The recipe is added to the favorites page, and a flash message appears confirming that it has been saved to favorites | ✅ |
I can add a new recipe so that I can share it with others and save it for myself | Press the profile button and then "Add recipe in the dropdown navigation bar | The user is directed to the recipe form | ✅ |
I can edit my own recipes so that I can update them if needed | Click on the "Update" button in the upper right corner of the recipe detail page | The user is directed to the recipe form to update the recipe | ✅ |
I can delete my own recipe so that I can remove them if wanted | Click the delete button on the recipe detail page | The user is taken to a confirmation page to confirm the deletion of the recipe. Upon confirming, the recipe is deleted | ✅ |
I can comment on a recipe so that share my thoughts and suggestions | Scroll down to the comment form on the recipe detail card and add a comment | The comment is successfully added | ✅ |
User Story | Action | Expected Result | Pass |
---|---|---|---|
I can view and manage user accounts to ensure the security and integrity of the site and its users | Access the Django admin section and navigate to the user management section | The admin section displays all users and their associated information. The owner can perform actions such as deleting users and managing their comments | ✅ |
I can view and manage recipes to maintain a high standard of content and ensure the quality of the recipes on the site | Access the admin page and navigate to the recipe management section | The admin page allows the owner to view and manage all recipes, ensuring the quality and standards of the content | ✅ |
I conducted user testing with 10 individuals to gather feedback on their experience using the website. I asked them to perform the following tasks and provide feedback on their experience:
- Create an account
- Update the profile
- Add a recipe (1 or more)
- Update a recipe
- Delete a recipe
- Mark a recipe as a favorite
- Comment on a recipe
- Test links
Each participant was encouraged to provide feedback and report any issues or improvements they encountered during the testing process. Below is the feedback/issues reported.
Feature | Feedback | Result | Pass |
---|---|---|---|
Navbar | Some users found the initial profile icon (chef's hat) unclear. Both color and icon was changed to make it more clear that this is a button for the user profile section | ✅ | |
Scrolling Recipes | Some users found the sticky footer annoying. The sticky footer was removed, resulting in a better scrolling experience for recipes. | Removed the sticky-bottom to footer which gives a better experience when scrolling the recipes in the cookbook | ✅ |
Feature | Expected Outcome | Testing Performed | Result | Pass |
---|---|---|---|---|
Logo | Redirects to index.page | Clicked on logo | index page loads | ✅ |
About | Redirects to the about page with login and sign up buttons | Clicked on link "About" | about page loads and shows the login and signup buttons | ✅ |
Login | Redirects to the login page | clicked on link "Login" | loads the login page and form | ✅ |
Sign up | Redirects to to the signup page and form | clicked on the link "Sign up" | loads the sign up page and form | ✅ |
Feature | Expected Outcome | Testing Performed | Result | Pass |
---|---|---|---|---|
Logo | Redirects to the collective cookbook | Clicked on logo | the collective cookbook page loads | ✅ |
About | Redirects to the about page with buttons to "Cookbook" and "My Favorites" | Clicked on link "About" | about page with links to "Cookbook" and "My Favorites" loads | ✅ |
Meal Planner | Link not working | Clicked on link | Nothing happens | ✅ |
Profile image/icon | Triggers the dropdown menu | Clicked on image | The dropdown menu is displayed | ✅ |
Feature | Expected Outcome | Testing Performed | Result | Pass |
---|---|---|---|---|
Profile | Redirects to the profile page with the user's information and editable form | Clicked on "Profile" link | The profile page loads, displaying the user's information and an editable form | ✅ |
Add Recipe | Redirects to the "Add Recipe" page with the recipe submission form | Clicked on "Add Recipe" link | The "Add Recipe" page loads, displaying the recipe submission form | ✅ |
My Recipes | Redirects to the page displaying the user's uploaded recipes | Clicked on the "My Recipes" link | The "My Recipes" page loads, showing the user's uploaded recipes | ✅ |
Favorite Recipes | Redirects to the page displaying the user's favorite recipes | Clicked on the "Favorite Recipes" link | The "Favorite Recipes" page loads, displaying the user's favorite recipes | ✅ |
Logout | Logs out the user and displays a confirmation message | Clicked on "Logout" | The user is successfully logged out and redirected to a page confirming the logout | ✅ |
Feature | Expected Outcome | Testing Performed | Result | Pass |
---|---|---|---|---|
Sign up button | Redirects to the signup page with a registration form | Clicked on the "Sign up" button | The signup page and form are successfully loaded | ✅ |
Login button | Redirects to the login page | Clicked on the "Login" button | The login page is successfully loaded | ✅ |
Feature | Expected Outcome | Testing Performed | Result | Pass |
---|---|---|---|---|
Sign up button | Redirects to the signup page with a registration form | Clicked on the "Sign up" button | The signup page and form are successfully loaded | ✅ |
Login button | Redirects to the login page | Clicked on the "Login" button | The login page is successfully loaded | ✅ |
Feature | Expected Outcome | Testing Performed | Result | Pass |
---|---|---|---|---|
Cookbook button | Redirects to the collective cookbook page | Clicked on the "Cookbook" button | The collective cookbook page is successfully loaded | ✅ |
My Favorites button | Redirects to the page that displays the user's favorite recipes, or shows a prompt to add recipes if there are no favorites | Clicked on the "My Favorites" button | The favorite page is successfully loaded and displays the prompt when no favorite recipes are added | ✅ |
Feature | Expected Outcome | Testing Performed | Result | Pass |
---|---|---|---|---|
Username | Field is required and should be a valid username format | Tested with empty field, invalid format | Error message displayed prompting the user to provide a valid username | ✅ |
Field is required and should be a valid email format | Tested with empty field, invalid format | Error message displayed prompting the user to provide a valid email address | ✅ | |
Password | Field is required and should meet password criteria | Tested with empty field, invalid criteria | Error message displayed prompting the user to provide a valid password | ✅ |
Password confirmation | Field is required and should match the entered password | Tested with empty field, mismatched passwords | Error message displayed prompting the user to confirm the password correctly | ✅ |
Sign up button | If the form is valid, the user is redirected to the login page with a flash message confirming successful registration and a prompt to login. If the form is not valid, an error message is displayed. | Clicked the button with valid and non-valid formats | The button functions as expected, redirecting to the appropriate pages and displaying the corresponding messages | ✅ |
Login text link | Redirects to the login page | Clicked on the "Login" link | The login page and form were successfully loaded | ✅ |
Feature | Expected Outcome | Testing Performed | Result | Pass |
---|---|---|---|---|
Username | The user enters a username | Tested with valid and unvalid username input | The username field accepts and saves the valid input. If invalid it displays an error message | ✅ |
Password | The user enters a password | Tested with valid and unvalidd password input | The password field functions correctly, allowing the user to input a valid password and displays an error message when not valid | ✅ |
Sign up text link | Clicking the text link redirects to the sign-up page | Clicked on the "Sign up" text link | Successfully redirected to the sign-up page with the registration form | ✅ |
Login | If the login form is valid, the user is logged in and redirected to the appropriate page. If the form is not valid, an error message is displayed. | Tested with valid and invalid login form input | The login button functions correctly, logging in the user with valid credentials and displaying error messages for invalid credentials | ✅ |
Feature | Expected Outcome | Testing Performed | Result | Pass |
---|---|---|---|---|
Update | When changes are made and the "Update" button is clicked, the changes should be saved, the user should be redirected to the updated form, and a flash message should confirm the update | Made changes and clicked on the "Update" button | Changes were successfully saved, redirected to the updated form, and a flash message confirmed the update | ✅ |
Feature | Expected Outcome | Testing Performed | Result | Pass |
---|---|---|---|---|
All recipes button | Redirects to the page displaying all recipes | Clicked on "All recipes" button | Successfully redirected to the page displaying all recipes | ✅ |
My recipes button | Redirects to the page displaying user's recipes | Clicked on "My recipes" button | Successfully redirected to the page displaying user's recipes | ✅ |
Favorite recipes button | Redirects to the page displaying favorite recipes or prompt to add favorites if none | Clicked on "Favorite recipes" button | Successfully redirected to the page displaying favorite recipes | ✅ |
Prompt to add favorites | Link redirects to the Collective cookbook page | Clicked on the "Collective cookbook" text link | Successfully redirected to the Collective cookbook page | ✅ |
Add recipe button | Redirects to the page with the recipe creation form | Clicked on "Add recipe" button | Successfully redirected to the page with the recipe creation form | ✅ |
Prompt to add a recipe | Link redirects to the add a recipe form | Clicked on the "add a recipe" text link | Successfully redirected to the add a recipe form | ✅ |
Recipe card title link | Redirects to the recipe detail page | Clicked on the title link of a recipe card | Successfully redirected to the recipe detail page | ✅ |
Recipe card info button | Redirects to the recipe detail page | Clicked on the info button of a recipe card | Successfully redirected to the recipe detail page | ✅ |
Pagination | Displays pagination if more than 9 recipes | Added more than 9 recipes to the list | Pagination is displayed showing the correct number of pages | ✅ |
Page buttons on pagination | Navigates to the correct page | Clicked on page number/next/previous buttons in pagination | Successfully navigated to the correct page based on the button clicked | ✅ |
Feature | Expected Outcome | Testing Performed | Result | Pass |
---|---|---|---|---|
Comment | The comment is displayed with the date and username | Added a comment | The comment is successfully displayed with the corresponding date and username | ✅ |
Update button | Only shown on the user's own recipes. Takes the user to the recipe form with pre-filled fields | Clicked on the update button | Only shown on user's recipes and successfully redirected to the recipe form with the fields pre-filled | ✅ |
Delete button | Only shown on the user's own recipes. Redirects to the delete confirmation page | Clicked on the delete button | Only shown on user's recipes and successfully redirected to the delete confirmation page | ✅ |
Heart icon | Only shown if the recipe is not the user's own recipe. Toggles between adding to favorites and removing from favorites. Displays flash messages to confirm the action | Toggled the heart icon | Successfully toggled between adding to favorites and removing from favorites. Flash messages confirm the action | ✅ |
Feature | Expected Outcome | Testing Performed | Result | Pass |
---|---|---|---|---|
Update | When changes are made and the "Update" button is clicked, the changes should be saved, the user should be redirected to the recipe detail page, and a flash message should confirm the update | Made changes and clicked on the "Update" button | Changes were successfully saved, redirected to the recipe detail page, and a flash message confirmed the update | ✅ |
Feature | Expected Outcome | Testing Performed | Result | Pass |
---|---|---|---|---|
Delete button | Deletes the recipe and redirects to the collective recipe page | Clicked on the delete button | The recipe was successfully deleted and I was redirected to the collective recipe page | ✅ |
Cancel button | Redirects to the recipe detail page | Clicked on the Cancel button | Successfully redirected to the recipe detail page | ✅ |
Overall, the Recipe Collective website performed well in in all testings. The issues identified were acknowledged, and some were not addressed at the time due to design choices.