UI Document- User Interface Document

TM Cart (User)

Project name: TM Cart

Testing Company: Tech Masters Software Services Private Limited
Requirements:

This Application named as TM Cart is an online platform to buy goods from

different vendors.

Domain: Ecommerce

Product Features:

URL: https://ecom.gotechmasters.com/

1. Home Page

1. User should navigate to ‘Home Page’ after entering the URL.

2 Home page should contain the following Options:

➢ Tech Masters logo on top left side of the page.
➢ A search bar with ‘All Categories’ drop-down option on the top middle
of the Page.
➢ ‘All Categories’ option should selected by default in ‘All Categories’ drop-
down
 ➢ “See all results” hyperlink should be displayed below the search result
➢ ‘Compare’ option, ‘Wishlist’ option, ‘Cart’ option, and an ‘Account’
option on the top right side of the page.
➢ Account option should display sub menu as Login and Register.
➢ The message "No products in the cart" should display when
mouse hover at 'Cart' option if there is no products in the
cart.
➢ A Drop-down box as ‘Browse All Categories’ on top left side of the page.
➢ The ‘Browse All Categories’ drop-down should contain “Milks and
Diaries”, “Bread and Juice”, “Clothing & beauty” ,”Fresh Fruit”,
“Electronics” and “Wines and Drinks” as Categories
➢ Main menus such as Home, Shop, Stores, Product, Blog, FAQ and
Contact next to the Browse All Categories drop-down box.
➢ Contact Number as 9846422221 with an icon on the top right side of
the page.
➢ Top categories with images should be listed below
➢ “Top Categories” text heading
➢ There should be Left and Right Arrows against “Top Categories” text
heading for moving the list forward and backward.
➢ "No products found!" message should display when there is
no product available under the selected category from 'Top
Categories' list.
➢ Popular products should be listed below “Popular Products” text
heading Each product in list should contain Product image with
discount percent , Product name, Rating, Vendor name, Price and Add
to Cart button
➢ ‘Quick View’ , ‘Add To Wishlist’, and ’Add To Compare’ icons with tool
tip should display when mouse hover at a product image in ‘Popular
Products’ list
➢ User should be able to navigate to Product detail page when
clicking a product from 'Popular Products' list
➢ Top Selling Products should be listed under “Top Selling” text heading
➢ Trending Products should be listed under “Trending Products” text
heading
➢ Recently Added Products should be listed under “Recently Added” text
heading
➢ Each Product in “Top Selling” , “Trending Products”, and “Recently
Added” should contain Product name ,Price and Image
➢ User should be able to navigate to Product detail page when
clicking a product from 'Top Selling' , ‘Trending Products’ and
‘Recently Added’ product list
➢ Company Name with Logo and “Address:”, “Call Us:” , “Email:” ,
“Working Hours:” should display at the bottom left of Home
page

1.Company Name: Techmasters Software Services Private Limited

2.Company Details;
3.Address: Techmasters Software Services Private Limited
Second Floor, Mullackal Medicals building (Landmark:
Opposite to Canara Bank) Pattoor-Vanchiyoor Road, Trivandrum Kerala-India.
3.Call Us: 9846422221
4.Email: [email protected]
5.Working Hours: 10:00 - 18:00, Mon - Fri
 ➢ At the bottom of Home page should display the following texts;
1.“Company” text heading
a. About us
b. Affiliate
c. Career
d. Contact us
2.”Categories” text heading
a. Men
b. Women
c. Denim
d. Dress
3.”Information” text heading
a. Contact Us
b. About Us
c. Cookie Policy
d. Terms & Conditions
e. Returns & Exchanges
f. Shipping & Delivery
g. Privacy Policy

2. User Login

1) Login option should be displayed when mouse hover at the ‘Account’ option in
the home page

2) Login Page should be displayed when click on the ‘Login’ Option.

3) Login Page should contain the following options:

➢ ‘Login’ Label
➢ ‘Don't have an account? Create one’ Text
➢ ‘Your password’ Field
➢ ‘Remember me’ Check box
 ➢ ‘Forgot Password?’ Hyperlink
➢ ‘Login’ Button

Field Name Field Type Data Type Mandatory

Email Text Box All Characters YES

Your Password Text Box All Characters YES

4) Register Page should be displayed when the click on the ‘Create one’ link on
the ‘Don't have an account? Create one’ option.
5) Profile page should be displayed after entering all valid data and by clicking on
the ‘Login’ Button.
6) ‘Reset Password’ page should be displayed when click on the ‘Forgot
password?’ Option
7) Reset Password Page should contain the following fields:
➢ ‘Email Address’ field
➢ ‘Send Password Reset Link’ Button.

Field name Field type Data type Mandatory

All
Email Address Text field Mandatory
Characters

8) Proper message should be displayed after clicking ‘Send Password Reset Link’
Button (“We have emailed your password reset link!”) and should be navigated
back to the Login page.
➢ User should receive reset link in Registered Email
➢ User should be able to navigate to Reset Password Page by clicking
received reset link in Registered Email
➢ Reset Password Page should contain Email Address field, New
Password field and Confirm Password field
➢ Email Address field in Reset Password Page should not accept
email other than the Registered Email id
➢ Password should reset after entering valid data on all mandatory
fields and by clicking ‘Submit’ Button
➢ Proper Message should be displayed after entering valid data on all
mandatory fields and by clicking ‘Submit’ Button
 ➢ Proper message should be displayed under each mandatory
field when the data is not entered.

Field name Field type Data type Mandatory

Email Address Text field All characters Mandatory

New Password Text field All characters Mandatory

Password
Text field All characters Mandatory
Confirmation

9) A popup should be displayed when mouse hover at Account Name

10) The following options with icons should be displayed in the popup
➢ My Account
➢ Order Tracking
➢ My Wishlist
➢ Update profile
➢ Sign out
11) Profile Page should be displayed when click on ‘My Account’ Option.
12) User should be navigated back to Home Page when click on the ‘Sign out’
Option.
13) Profile page should contain the following:
➢ Profile Name with Image and Email Id
➢ Greeting message- “Hello <profile name>!”
 ➢ Description - ‘From your account dashboard. you can
easily check & view your recent orders, manage
your shipping and billing addresses and edit your
password and account details.
➢ Menu List (Left side) with the following options with
icon:
▪ Overview
▪ Profile
▪ Orders
▪ Downloads
▪ Order return request
▪ Address books
▪ Wishlist
▪ Change password
▪ Become a vendor
▪ Logout

Note: Lot of other options are there. Just ignore it.

3. Product Details Page

1) User should be able to navigate to Product page by clicking the main
menu ‘Product’.

2) User should be able to navigate to Product Details Page by either clicking

the product’s name or the product’s image in the Product page.

3) Product Details Page should contain the following details and options.

➢ Image
➢ Product name
➢ Review
➢ Product price
➢ Vendor name
➢ Availability of the stock
➢ Increment/Decrement Box
➢ Add to cart Button
➢ Buy now Button
➢ Wishlist option
➢ Compare list option
➢ Product code (SKU)
➢ Categories

4) Customer should be able to navigate to the Buy Now page after clicking
the Buy now Button
5) Customer should be able to navigate to the vendor page when vendor
name is clicked
6) Customer should be able to increase the number in Increment/
Decrement Box when up arrow is clicked
7) Customer should be able to decrease the number in
Increment/Decrement Box when down arrow is clicked
8) Product should be added to the Product compare page when clicking the
Compare option
9) Proper message should be displayed when product is added to the
 Product compare page
10) Product should be added in the Wishlist when clicking the Wishlist icon.
11) Wishlist icon should be highlighted after product is added to the wishlist
12) Proper message should be displayed when product is added to the
wishlist
13) Product should be removed from wishlist after clicking highlighted
wishlist icon
14) Proper message should be displayed when product is removed from
wishlist
15) Customer should be able to view product description when Description
option is clicked
16) Customer should be able to view Vendor information when Vendor option
is clicked
17) Customer should be able to view Reviews when Review option is clicked
18) Logged in Customer should be able to submit review
19) ‘Write Comment’ option in review field should be disabled if account is
logged out

Field name Field type Data type Mandatory

All
Write Comment Text field Mandatory
Characters

20) File upload popup should be displayed when Upload photos option is
clicked
21) Upload field should only accept Images
22) Customer should not be able to upload more than 6 photos
23) Maximum upload image size should be 2048KB
24) Customer should be able to choose star rating in review tab
25) Customer should be able to post review when Clicking Submit Button
26) A pop-up message as “Added product to cart successfully!” should appear
on top right side of the Product Details Page after clicking the ‘Add to
cart’ Button.

27) Non registered users should navigate to Login page after clicking the Buy
now Button.

28) Product Details Page should contain Categories list, Filter by price list,
and new products list at the right most side of the page.

4.Wishlist
1. Products should be able to add to Wishlist using the ‘Wishlist’ icon in
the products from the following areas:
o Home Page
▪ Top Categories
▪ Popular Products
▪ Top Selling
 ▪ Trending Products
▪ Recently Added
o Shop Page

o Product Page
2. ‘Wishlist’ icon should be displayed on the Home page with number of
items in Wishlist. ‘ Your Wishlist’ page should be displayed when
clicking the ‘Wishlist’ icon in Home page.

3. ‘ Your Wishlist’ page should be accessible from the User Home page →
User Name at top right→ ‘My Wishlist’ .
4. The following details should be displayed in the Wishlist page:

o Main page heading -> ‘Your Wishlist’

o Under the main heading, the message – “There are ‘n’ products
in this list”. ‘n’ indicates the list of items in the Wishlist and only
applicable when the number of items is more than 1.
o Under the main heading, the message – “No item in wishlist!”
should be displayed if there are no items in the Wishlist.
5. The following fields should be displayed in the Wishlist page:
▪ Product
▪ Price
▪ Stock Status
▪ Action
▪ Remove
6. The ‘Product’ field in Wishlist page should display Product name as
hyperlink with image.
7. Product details page should be displayed when clicking on the product
name hyperlink.
8. The price of the product should be displayed in the ‘Price’ field.
9. The ‘Stock Status’ field should display the current status of the stock.
10. ‘Add to cart’ button should be displayed in ‘Action’ field of every
product. It should be possible to add the items to cart by clicking the
‘Add to cart’ button.
11. “Added product (Name) to cart successfully!” Message should be
displayed when products are added to cart from the Wishlist page.
12. It should be possible to remove the products from the Wishlist page, by
clicking the ‘Delete’ icon against each product in the Wishlist page.
13. “Removed product (Name) from wishlist successfully!” message should
be displayed when removing products from Wishlist page