Skip to content

Latest commit

 

History

History
1513 lines (956 loc) · 49.8 KB

TESTING.md

File metadata and controls

1513 lines (956 loc) · 49.8 KB

Manual Testing

The site was built, tested and validated on the Chrome browser only.

Supported Browsers and Screen Sizes

Bootstrap v4.6 was used for building the site - see the supported browsers and devices

  • Bootstrap is compatible with:
    • Chrome 45+
    • Firefox 38+
    • Safari 9+
    • Opera 30+
    • Edge 12+
    • IE 10+
    • Android 4.4+
    • iOS 9+

Mobile devices

Generally speaking, Bootstrap supports the latest versions of each major platform’s default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) are not supported.

Desktop browsers

Similarly, the latest versions of most desktop browsers are supported.

Testing Against User Stories

"As a user, I would like to _____________________________"

  • add, update or delete items from shopping bag

    • All users are able to view, add, edit or delete their own bag items:
      • View

      - Add

      - Delete

      - Edit

  • keep my information secure

    • Users need to register with a unique username and password in order to create a profile page. This profile page is a history of their prior orders.

    • Security is provided by the django-allauth app. The allauth app is stored in the root templates folder of the project.

  • use the site without logging in

    • Users can buy items, without registering or logging in:

  • order and pay for products

  • as a logged in user, see my order history

Test Cases

These cases are included in order to help the next developer understand the design of the site and how to extend it. They document the look and functionality of each page. All pages and features will function and look the same whether on desktop, tablet or mobile, except for the

  • absence of the branding ClickCollect and hamburger menu for mobiles and some tablets

    When the menu icon is selected, it reveals a sliding down panel listing the menu options. Select an option to navigate to the appropriate page.

  • number of product cards displayed across the screen:

    • desktops tend to show four cards across

    • tablets tend to show two cards across

    • mobiles tend to show one card across

Test Case Logs

The defensive programming is included with the django-allauth in order to build a more secure app. This is an integrated set of Django applications addressing authentication, registration, account management as well as 3rd party (social) account authentication.

The following logs detail the testing carried out:

Top Header Section

  • Results

  • Screenshots

    • Step 1

    • Step 3

    • Step 5

    • Step 6

    • Step 7

    • Step 8

    • Step 9

    • Step 10

    • Step 11

    • Step 12

    • Step 13

    • Step 14

    • Step 15

    • Step 16

    • Step 17

    • Step 18

    • Step 19

    • Step 20

    • Step 21

    • Step 22

    • Step 23

    • Step 24

    • Step 25

    • Step 26

    • Step 27

    • Step 28

    • Step 29

    • Step 30

Home Page

  • Results

  • Screenshots

    • Step 1

    • Step 3

    • Step 5

    • Step 6

Products Page

  • Results

  • Screenshots

    • Step 3

    • Step 4

    • Step 5

    • Step 6

    • Step 7

    • Step 8

    • Step 9

    • Step 10

    • Step 11

    • Step 12

    • Step 13

    • Step 14

    • Step 15

    • Step 17

    • Step 18

    • Step 19

    • Step 20

    • Step 21

Product Detail Page

  • Results

  • Screenshots

    • Step 4

    • Step 5

    • Step 6

    • Step 7

    • Step 8

    • Step 9

    • Step 10

    • Step 11

    • Step 12

    • Step 13

Shopping Bag Page

  • Results

  • Screenshots

    • Step 1

    • Step 3

    • Step 4

    • Step 5

    • Step 6

    • Step 7

    • Step 8

    • Step 9

    • Step 10

    • Step 11

Checkout Page

  • Results

  • Screenshots

    • Step 1

    • Step 3

    • Step 4

    • Step 5

    • Step 6

    • Step 7

    • Step 8

    • Step 9

    • Step 10

    • Step 11

    • Step 12

    • Step 13a

    • Step 13b

    • Step 14

    • Step 15a

    • Step 15b

    • Step 15c

    • Step 15d

    • Step 15e

    • Step 15f

    • Step 16

    • Step 17

    • Step 18a

    • Step 18b

    • Step 19a

    • Step 19b

    • Step 20a

    • Step 20b

    • Step 21

    • Step 22

    • Step 23

    • Step 24

    • Step 25

Sign Up (Register) Page

  • Results

  • Screenshots

    • Step 1

    • Step 3

    • Step 4

    • Step 5

    • Step 6

    • Step 7

    • Step 8

    • Step 9

    • Step 10

    • Step 11

    • Step 12

    • Step 13

    • Step 14

    • Step 15

    • Step 16

    • Step 17

    • Step 18

    • Step 19a

    • Step 19b

    • Step 20

    • Step 21

    • Step 22

    • Step 23

    • Step 24

Sign In (Login) Page

  • Results

  • Screenshots

    • Step 1

    • Step 3

    • Step 5

    • Step 6

    • Step 9

    • Step 10

    • Step 11

    • Step 12

    • Step 13

    • Step 14

    • Step 16

    • Step 17

    • Step 18

    • Step 19

    • Step 20

    • Step 21

    • Step 22

    • Step 23

Profile Page

Due to having exceeded 85% of the monthly usage limit for the S3 AWS Free Tier in one week, the rest of the testing will be carried out on Localhost rather than on Heroku.

  • Results

  • Screenshots

    • Step 1

    • Step 3

    • Step 4

    • Step 5

    • Step 6

    • Step 7

    • Step 8

    • Step 9

    • Step 10

    • Step 11

    • Step 12

    • Step 13

    • Step 14

    • Step 15

    • Step 16

    • Step 17

    • Step 18

    • Step 19

    • Step 20

    • Step 21

    • Step 22

    • Step 23

    • Step 24

    • Step 25

    • Step 26

    • Step 27

    • Step 28

    • Step 29

    • Step 30

    • Step 31

    • Step 32

    • Step 33

    • Step 34

    • Step 35

Product Management: Product Add Page (ADMIN login)

  • Results

  • Screenshots

    • Step 1

    • Step 3

    • Step 4

    • Step 5

    • Step 6

    • Step 7

    • Step 8

    • Step 9

    • Step 10

    • Step 11

    • Step 12

    • Step 13

    • Step 14

    • Step 15

Product Management: Product Edit Page (ADMIN login)

  • Results

  • Screenshots

    • Step 1

    • Step 3

    • Step 4

    • Step 5

    • Step 6

    • Step 7

    • Step 8

    • Step 9

    • Step 10

    • Step 11

    • Step 12

    • Step 13

    • Step 14

    • Step 15

    • Step 16

Sign Out Page (Logout)

  • Results

  • Screenshots

    • Step 1

    • Step 3

    • Step 4

    • Step 5

    • Step 6

    • Step 7

    • Step 8

    • Step 9

Subscribe to Newsletter Page

  • Results

  • Screenshots

    • Step 1

    • Step 3

    • Step 4

    • Step 5

    • Step 6

    • Step 7

    • Step 8

    • Step 9

    • Step 10

    • Step 11

    • Step 12

    • Step 13

    • Step 14

    • Step 15

    • Step 16

    • Step 17

    • Step 18

    • Step 19

    • Step 20

Blog Pages

  • Results

  • Screenshots

    • Step 1

    • Step 3

    • Step 4

    • Step 5

    • Step 6

    • Step 7

    • Step 8

    • Step 9

    • Step 10

Test Case Template provided by Thomas Hamilton on GURU99

Code Validation

HTML

0 errors and 1 warning were detected by W3C Validation for pages:

CSS

0 errors and 0 warnings were detected by Jigsaw (W3C) Validation for:

JavaScript and jQuery

0 errors and 7 warnings were detected by JSHint for:

Python

0 errors and 5 warnings were detected by CI Python Linter for:

  • custom_storages.py

  • manage.py

  • bag/

    • apps.py

    • contexts.py

    • urls.py

    • views.py

    • templatetags/bag_tools.py

  • blog/

    • admin.py

    • apps.py

    • models.py

    • tests.py

    • urls.py

    • views.py

  • checkout/

    • admin.py

    • apps.py

    • forms.py

    • models.py

    • signals.py

    • urls.py

    • views.py

    • webhook_handler.py

    • webhooks.py 1 warning

  • click_collect/

    • settings.py 4 warnings

    • urls.py

  • home/

    • apps.py

    • urls.py

    • views.py

  • products/

    • admin.py

    • apps.py

    • forms.py

    • models.py

    • urls.py

    • views.py

    • widgets.py

  • profiles/

    • apps.py

    • forms.py

    • models.py

    • urls.py

    • views.py

  • subscribe/

    • admin.py

    • apps.py

    • forms.py

    • models.py

    • urls.py

    • views.py

Site Audit

Desktop audits

Many of the audit issues are caused by use of third party frameworks and libraries e.g. Bootstrap, jQuery, FontAwesome, Stripe, etc. See the PDF reports for more details.

Mobile audits

Compatibility

The majority of testing and validation was carried out on the Chrome browser with a Windows 10 desktop, but to ensure that a broad range of users can successfully use this site, it was also tested with other browsers in both desktop and mobile configuration.

  • Chrome v.114
  • Edge v.115
  • Firefox v.106
  • Safari v.13
  • Opera v.99

The results are shown below in a testing matrix:

The original Excel version created by Tim Nelson, can be found here.

Bugs Found

  1. Missing product images

    • When the site was first deployed to Heroku, the drinks product images were missing.

    • Error message for href link: This XML file does not appear to...

    • The images were incorrectly named in the products section of the Django Administration dashboard.

    • Solved by correctly naming the images in Django Admin

  2. Favicon not displaying on Heroku

    • Heroku was returning a 404 response because it could not find the favicon on Amazon S3.

    • Solved by moving the favicon into the root static folder.

  3. Misaligned page titles and horizontal rules

    • Solved by ensuring all titles were centred.

  4. Future features for the app were visible

    • Some future features (new arrivals, clearance, deals) not required at the moment were still showing in the product manage section.

    • Solved by adding CSS to not display those options.

  5. No minimum text length for input fields

    • The card details form has no minimum text length rules for the phone number and address fields.

    • No action required. It was decided that for the real world there was no need to change this. For card payment validation, the user must input their correct address. An incorrect address is an indicator of an attempted fraudulent payment and the transaction will fail.

  6. Missing form labels

    • During the Lighthouse audit, some form elements had missing labels which are useful for accessibility.

    • Solved by adding aria labels.

  7. Link does not have a discernible name

    • The Facebook icon on the red banner had no label.

    • Solved by adding an aria label to the <a></a> tag

  8. Colour contrast insufficient

    • The shade of blue originally used for text links was not dark enough to contrast against the site's white background.

    • Solved by changing the link colour from Bootstrap's info shade to dark blue #00008b.

  9. No label for My Account icon

    • Solved by adding an aria label.

  10. Issue with AUTH_PASSWORD_VALIDATORS setting

    • During the Flake8 validation check, warnings were displayed for lines which were too long in settings.py. An attempt to fix this issue resulted in configuration errors.

    • Debug = True:

    • Debug = False:

    • Solved by returning the code back to it's original form and removing the line continuation slash.

Known Issues

This error was removed by running the site on Chrome in Incognito mode.

Stack Overflow user Chrostip Schaejn advised that this error was cause by various Chrome extensions.

Automated Testing

Unit Testing Using ChatGPT

The interest in using ChatGPT from OpenAI for testing has been inspired by two recent demonstrations that I attended, one by Amazon with Code Whisperer and the other by Microsoft with Copilot. I am sure that these features will very soon become embedded in the developer's life. I was not going to include automated testing due to time constraints, but these tests were generated by ChatGPT in a matter of seconds without much input from me. Scary or mindblowingly amazing? I'll let you decide.

I decided to generate these tests for the Blog app files models.py and urls.py. The test code was added to the app's test.py file in this directory:

Conversation with ChatGPT

Running the Tests

The tests were run by typing into the terminal:

python manage.py test blog

Test Result - PASSED