Details of manual testing of the functions of each feature of the website. Chrome DevTools was used to test the website on different screen sizes.
| Test Label | Test Action | Expected Outcome | Test Outcome |
|---|---|---|---|
| Header links. | Click all links in header on each page. | Each link leads to expected pages from any page. | PASS |
| Logo responsiveness on screens up to 600px wide. | On all pages, resize the screen from 300px to 600px wide paying attention to logo appearance. | Logo will be displayed at the top of the page, centred and at 100% of the page width. The cover text will not be displayed. Border will be displayed on bottom edge of logo container. | PASS |
| Logo responsiveness on screens up to 992px wide. | On all pages, resize the screen from 601px to 992px wide paying attention to logo appearance. | Logo and cover text will be displayed at the top of the page, centred and at 100% of the page width. Border will be displayed on bottom edge of logo container. | PASS |
| Logo responsiveness on screens over 992px wide. | On all pages, resize the screen to over 992px wide paying attention to logo appearance. | Logo and cover text will be displayed at the top-left of the page. The container will be displayed with border on left, bottom and right edges and curved bottom corners. | PASS |
| Navigation menu responsiveness on screens up to 600px wide. | On all pages, resize the screen from 300px to 600px wide paying attention to navigation menu appearance. | Navigation menu will be displayed under the logo, at 100% of the page width with links stacked. | PASS |
| Navigation menu responsiveness on screens up to 992px wide. | On all pages, resize the screen from 601px to 992px wide paying attention to navigation menu appearance. | Navigation menu will be displayed under the logo and cover text, at 100% of the page width with links displayed horizontally. | PASS |
| Navigation menu responsiveness on screens over 992px wide. | On all pages, resize the screen to over 992px wide paying attention to navigation menu appearance. | Navigation menu will be displayed at the top of the page, at 100% of the page width with links displayed horizontally on the right. | PASS |
| Newsletter sign up form input hover. | On all pages, hover the cursor over each of the newsletter sign up form input fields paying attention to the border of the input field. | The input field will be displayed with a 1px wide, solid, dark teal coloured border when the cursor hovers over. | PASS |
| Newsletter sign up form input focus. | On all pages, click inside each of the newsletter sign up form input fields paying attention to the border of the input field. | The input field will be displayed with a 2px wide, solid, yellow/gold coloured border when clicked. | PASS |
| Newsletter sign up form input validation. | On all pages, try to submit newsletter sign up form with required input fields empty. | The form will ask for input for empty required fields. | PASS |
| Newsletter sign up form submission. | On all pages, complete required fields of newsletter sign up form and click submit. | Newsletter sign up form will be submitted and the page newsletter-thank-you.html will be displayed. | PASS |
| Newsletter sign up form responsiveness. | On all pages, resize the screen from 300px to over 1920px paying attention to the newsletter sign up form. | The newsletter sign up form remains horizontally centred, its container responds in height to fit the content and the elements respond to screen width to remain fully visible on page. | PASS |
| Social media links section responsiveness. | On all pages, resize the screen from 300px to over 1920px paying attention to the social media links section. | The social media links will remain horizontally centred at the bottom of the page and spacing between the icons will respond to screen width but remain equal. | PASS |
| Social media links. | On all pages, click each social media link. | Appropriate social media platform websites will open in a new tab. | PASS |
| Body max-width. | On all pages, resize the screen to over 1920px wide. | The body will have a maximum width of 1920px with equal margins on the left and right to centre the content. | PASS |
| 'Home' page hero image responsiveness on screens over 992px wide. | Resize the screen to over 992px wide paying attention to the 'Home' page hero image. | The 'Home' page hero image will be 450px in height and remain horizontally centred as the screen is resized. | PASS |
| 'Home' page hero image responsiveness on screens up to 992px wide. | Resize the screen to up to 992px wide paying attention to the 'Home' page hero image. | The 'Home' page hero image will be a smaller image at 992px and lower than at over 992px, 450px in height and remain horizontally centred as the screen is resized. | PASS |
| 'Home' page hero image responsiveness on screens over 992px wide. | Resize the screen to over 992px wide paying attention to the 'Home' page hero image. | The 'Home' page hero image will be a larger image at 992px and over, 450px in height and remain horizontally centred as the screen is resized. | PASS |
| 'Home' page hero image responsiveness on screens up to 600px wide. | Resize the screen to 600px wide or below paying attention to the 'Home' page hero image. | The 'Home' page hero image will be positioned below the navigation menu and 300px in height. | PASS |
| 'Home' page about section responsiveness on screens up to 992px wide. | Resize the screen to up to 992px wide paying attention to the about section. | 'Home' page about section will be displayed in stacked format. | PASS |
| 'Home' page about section responsiveness on screens over 992px wide. | Resize screen to over 992px wide paying attention to the about section. | 'Home' page about section will be displayed in two columns. | PASS |
| 'Home' page about section images. | Resize the screen from 993px to over 1920px paying attention to the 'Home' page about section images. | The Images will remain at equal height on the page. | PASS |
| Reviews section responsiveness on screens up to 992px wide. | Resize the screen to below 992px wide paying attention to the reviews section. | The reviews will be displayed below the about section, in a stacked format, centred horizontally on the page and fully visible. | PASS |
| Reviews section responsiveness on screens over 992px wide. | Resize the screen to over 992px wide paying attention to the reviews section. | The reviews will be displayed below the about section, in a row, centred horizontally on the page with space between each review and fully visible. | PASS |
| 'Gallery' hero image responsiveness. | Resize the screen from 300px to over 1920px paying attention to the 'Gallery' page hero image. | The 'Gallery' page hero image will remain positioned under the logo, cover text and navigation menu for all screen sizes and remain horizontally centred. | PASS |
| 'Gallery' photos responsiveness on screens up to 600px wide. | Resize the screen to below 600px wide paying attention to the 'Gallery' photos. | 'Gallery' photos will be displayed in one column and sized equally with ratio 1:1. | PASS |
| 'Gallery' photos responsiveness on screens up to 768px wide. | Resize the screen to between 600px and 768px wide paying attention to the 'Gallery' photos. | 'Gallery' photos will be displayed in two columns and sized equally with ratio 1:1. | PASS |
| 'Gallery' photos responsiveness on screens up to 992px wide. | Resize the screen to between 768px and 992px wide paying attention to the 'Gallery' photos. | 'Gallery' photos will be displayed in three columns and sized equally with ratio 1:1. | PASS |
| 'Gallery' photos responsiveness on screens over 992px wide. | Resize the screen to over 992px wide paying attention to the 'Gallery' photos. | 'Gallery' photos will be displayed in four columns and sized equally with ratio 1:1. | PASS |
| 'Gallery' video. | Click the video to play. | Video will play. | PASS |
| 'Gallery' video responsiveness on screens up to 1500px wide. | Resize the screen to below 1500px wide paying attention to the 'Gallery' video. | Video will take up more than 50% width of the page and be centred horizontally. | PASS |
| 'Gallery' video responsiveness on screens over 1500px wide. | Resize the screen to over 1500px wide paying attention to the 'Gallery' video. | Video will take up 50% width of the page and be centred horizontally. | PASS |
| 'Contact Us' page hero image responsiveness on screens up to 992px wide and over 1200px wide. | Resize the screen to below 992px wide and again to over 1200px wide, paying attention to the 'Contact Us' page hero image. | The 'Contact Us' page hero image will be 300px in height, positioned below the logo, cover text and navigation menu and focal point of the image (the wedding cake) will be horizontally centred. | PASS |
| 'Contact Us' page hero image responsiveness on screens over 992px wide and below 1200px wide. | Resize the screen to between 992px and 1200px wide, paying attention to the 'Contact Us' page hero image. | The 'Contact Us' page hero image will be 300px in height, positioned below the logo, cover text and navigation menu and focal point of the image (the wedding cake) will be positioned to the right of the page. | PASS |
| Contact details section responsiveness on screens up to 992px wide. | Resize the screen to below 992px wide, paying attention to the contact details section. | The contact details section will be displayed in stacked format. | PASS |
| Contact details section responsiveness on screens over 992px wide. | Resize the screen to over 992px wide, paying attention to the contact details section. | The contact details section will be displayed in two columns. | PASS |
| Contact form input hover. | Hover the cursor over each of the contact form input fields paying attention to the border of the input field. | The input field will be displayed with a 1px wide, solid, dark teal coloured border when the cursor hovers over. | PASS |
| Contact form input focus. | Click inside each of the contact form input fields paying attention to the border of the input field. | The input field will be displayed with a 2px wide, solid, yellow/gold coloured border when clicked. | PASS |
| Contact form input validation. | Try to submit contact form with required input fields empty. | The form will ask for input for empty required fields. | PASS |
| Contact form submission. | Complete required fields of contact form and click submit. | Contact form will be submitted and the page contact-thank-you.html will be displayed. | PASS |
| Contact form section responsiveness on screens up to 992px wide. | Resize the screen to below 992px wide, paying attention to the contact form section. | The contact form section will be displayed in stacked format. | PASS |
| Contact form section responsiveness on screens over 992px wide. | Resize the screen to over 992px wide, paying attention to the contact form section. | The contact form section will be displayed in two columns. | PASS |
| 'Find Us' page hero image responsiveness on screens up to 600px wide. | Resize the screen to below 600px wide paying attention to the 'Find Us' page hero image. | 'Find Us' page hero image will be 300px in height and a smaller image than on screens over 600px wide. | PASS |
| 'Find Us' page hero image responsiveness on screens between 600px and 992px wide and over 1400px wide. | Resize the screen to between 600px and 992px wide and over 1400px wide paying attention to the 'Find Us' page hero image. | 'Find Us' page hero image will be 300px in height, horizontally centred and a larger image than on screens up to 600px wide. | PASS |
| 'Find Us' page hero image responsiveness on screens over 992px wide and below 1400px wide. | Resize the screen to between 992px and 1400px wide paying attention to the 'Find Us' page hero image. | 'Find Us' page hero image will be 300px wide and the focal point will be positioned on the right of the page. | PASS |
| 'Find Us' page content responsiveness on screens over 992px wide. | Resize the screen to over 992px wide paying attention to the 'Find Us' page content. | The 'Find Us' page content will be displayed in two equal columns. | PASS |
| 'Find Us' page content responsiveness on screens below 992px wide. | Resize the screen to below 992px wide paying attention to the 'Find Us' page content. | The 'Find Us' page content will be displayed in a stacked format. | PASS |
| 'Find Us' page image responsiveness. | Resize the screen from 300px to over 1920px paying attention to the 'Find Us' page image. | The 'Find Us' page image will respond to width of the page by adjusting in width but remain at a fix height. | PASS |
| Google map responsiveness. | Resize the screen from 300px to over 1920px paying attention to the google map. | The google map will adjust in width to remain the full width of the page. | PASS |
| Google map move function. | Use one finger on track pad/touch screen or left click and hold then move cursor to move the map. | The map will move with the clicked point fixed to the cursor until released. | PASS |
| Google map zoom. | Use two fingers or ctrl + scroll to zoom. | The map will zoom in or out. | PASS |
| Google map zoom in and out buttons. | Click the Google map zoom in and zoom out buttons. | The google map will zoom in when the zoom in button is clicked and zoom out when the zoom out button is clicked. | PASS |
| Google map 'view larger map' link. | Click the Google map 'view larger map' link. | The links will open google maps in a new tab displaying the bakery location. | PASS |
| Google map 'directions' link. | Click the Google map 'directions' links. | The links will open google maps in a new tab displaying the bakery location and input to get directions. | PASS |
| Google map 'show satellite imagery' button. | Click the Google map 'show satellite imagery' button. | The google map will be displayed using satellite imagery and the button will now function to 'show street map'. | PASS |
| Google map 'show street map' button. | Click the Google map 'show street map' button. | The google map will be displayed using the street map imagery and the button will now function to 'show satellite imagery'. | PASS |
| 404 error page hero image responsiveness on screens over 1300px wide. | Resize the screens to over 1300px wide paying attention to the 404 error page hero image. | The 404 error page hero image will be 450px in height and remain aligned to the left of the screen when the screen is resized. | PASS |
| 404 error page hero image responsiveness on screens up to 1300px wide. | Resize the screens to between 993px and 1300px wide paying attention to the 404 error page hero image. | The 404 error page hero image will be replaced on screens up to 1300px wide with a version of the image that will ensure the focal point is horizontally centred and will remain aligned to the left as the screen is resized. | PASS |
| 404 error page hero image responsiveness on screens up to 992px wide. | Resize the screens to between 600px and 992px wide paying attention to the 404 error page hero image. | The 404 error page hero image will positioned centrally to centre the image focal point. | PASS |
| 404 error page hero image responsiveness on screens up to 600px wide. | Resize the screens to less than 600px wide paying attention to the 404 error page hero image. | The 404 error page hero image will 300px in height and the focal point of the image will remain horizontally centred as the screen is resized. | PASS |
| 404 error page text responsiveness. | Resize the screen from 300px to over 1920px paying attention to the 404 error page text. | The text will remain horizontally centred and will wrap when the screen is too narrow to display the text in single lines. | PASS |
| Contact thank you page hero image responsiveness on screens up to 992px wide and over 1200px wide. | Resize the screen to below 992px wide and again to over 1200px wide, paying attention to the contact thank you page hero image. | The contact thank you page hero image will be 300px in height, positioned below the logo, cover text and navigation menu and focal point of the image (the wedding cake) will be horizontally centred. | PASS |
| Contact thank you page hero image responsiveness on screens over 992px wide and below 1200px wide. | Resize the screen to between 992px and 1200px wide, paying attention to the contact thank you page hero image. | The contact thank you page hero image will be 300px in height, positioned below the logo, cover text and navigation menu and focal point of the image (the wedding cake) will be positioned to the right of the page. | PASS |
| Contact thank you page text responsiveness. | Resize the screen from 300px to over 1920px paying attention to the contact thank you page text. | The text will remain horizontally centred and will wrap when the screen is too narrow to display the text in single lines. | PASS |
| Newsletter sign up thank you page hero image responsiveness on screens up to 992px wide and over 1200px wide. | Resize the screen to below 992px wide and again to over 1200px wide, paying attention to the newsletter sign up thank you page hero image. | The 'Contact Us' page hero image will be 300px in height, positioned below the logo, cover text and navigation menu and focal point of the image (the wedding cake) will be horizontally centred. | PASS |
| Newsletter sign up thank you page hero image responsiveness on screens over 992px wide and below 1200px wide. | Resize the screen to between 992px and 1200px wide, paying attention to the newsletter sign up thank you page hero image. | The 'Contact Us' page hero image will be 300px in height, positioned below the logo, cover text and navigation menu and focal point of the image (the wedding cake) will be positioned to the right of the page. | PASS |
| Newsletter sign up thank you page text responsiveness. | Resize the screen from 300px to over 1920px paying attention to the newsletter sign up thank you page text. | The text will remain horizontally centred and will wrap when the screen is too narrow to display the text in single lines. | PASS |