In a
website apart from the functionality which varies from
application to application, every web site must meet some of the basic web
standard.
And as a QA it is our responsibility to check whether they meet
the standards. So this check list will help you test any website .This is the
generic web check list which can be run on any web application
This Checklist
·
Usability
·
Compatibility and Portability
·
Functionality
·
Performance
·
Security
·
Tips and Tricks
Beginning with the Usability Testing,
Usability testing can be categorized into Navigation, Ease of
Use, Presentation of Information, User Information, and Error Prevention.
In Navigation category, the first point to be checked
is the
The navigation system should be in the same place on every
page and have the same format. Visitors will get confused and frustrated if
links appear and disappear unpredictably. For example footer links in all the
pages should be consistently located in the same format.
1. Terminology should be consistent, i.e. if short form for
"for example" is written as e.g., then it should be written as same
everywhere in site
2. Navigation
buttons should be consistently located.
I.e. Navigation
button should have the same display position on all the screens in the site.
For example Home link or button is generally present on all the screens.
So on all
the screens its display position should be same
3. Navigation should be to the correct/intended destination.
i.e. the correct and intended page should open after clicking a link or tab or
a button
For example
clicking on Home link should open the home page only And not any other page
The flow to destination (page to page) should
be logical.
for example
clicking Cancel or a back button on a child window should take the user back to
its parent window and not to home page that is the navigation should be logical
.
The tab
sequence should be set correctly
i.e. The
correct tab sequence is left to right and top to bottom.
And it
should not skip any fields, buttons or links
4. There
should be a logical way to return, i.e. back button or in bread crumb link
should be provided to return.
e.g. Link or button should be
provided to navigate to the previous page.
5. The Business steps should be within the
process clear or mapped. e.g. In case of E-com site the checkout process should
be properly followed.
e.g. The E-commerce application if user Adds a product in the Shopping
cart then he should be able to move further to Checkout process to complete the
purchase of the product.
6. All
major parts of the site should be accessible from the Home page.
Here the
example of Gmail website will be given during the recording
7. If
necessary, a site map is available. If the site is complicated and there are
many numbers of pages then site map gives the idea about the internal pages.
If the navigation in the site is too complicated then there
should be a site map
Here the
example of Gmail website will be given during the recording
8. If
required, easy-to-use search functionality should be provided.
The search functionality should be present in every website to
help user find its desired record or page.
Let’s have a look at some of the Ease
of Use category check points
1. Help
facilities provided should be appropriate. The text content should be clear and
understandable, if required pictorial representation can be given.
2. There
should be minimal scrolling and resizable screens. If the scrolling is more
then proper anchor should be given to, go to the top of the page.
E.g.
in the Product list page for E-com site the “Back to top of the page” link is present to view the start of the page.
3. Menus
should be loaded first
When web site is opened it takes time to load completely so
while the site is loading menus should be loaded first
Here the example of Gmail web
site can be given
4. Graphics
should have reasonable load times
The images or multimedia files used
on the pages should get downloaded within reasonable time. It should not take too long for loading otherwise user will
get frustrated
5. Messages
should be understandable
i.e the error messages or confirmation messages should be very
clear and understandable with no grammar and spelling mistakes
for e.g. on a registration form if
user keeps any mandatory field blank and hit Save then the message should come
like Please enter <Field name>
6. Confirmation
messages should be available as appropriate
For example
if the user clicks Delete then there should be a confirmation message asking
‘Are you sure you want to delete this record’ and if user clicks yes then the
records should get deleted
Default focus should be present on
the first field in case of form
For example
on login page the default focus should be on User name field e.g. here the example of BTT can be given during the recording
7. In
form if error message comes then the focus should get diverted to the field
having error in it.
For example if on a registration
form user enters an invalid email address and clicks save them error message
box will pop up asking user to enter valid email address.
So clicking Ok on this message box should take the user to the
Email field to make the data entry easy for the user
Example
login page of PMT can be given Open the PMT enter correct name and incorrect
password, and then the focus should be on the password field.
The Next category is Presentation of Information
1. Fonts
should be consistent within the site.
i.e fonts of the text used throughout the site should be same.
For example font and size of the text used for buttons
throughout the site should be same
Example
of Gmail website can be given during the recording.
Company display standards maintain,
e.g. Logos, font size, colors, scrolling
E.g. The Colors and logos if used
are standard on all pages
Here
the example of website can be given.
2. Legal
requirements should be met, i.e. the logo size, if site is diverting to other
site, copyright laws and license
3. Content
sequence should be proper.
i.e most frequently used control or tab should come first
Or in some cases sequence should be
according to the work flow of the application
E.g. like on Zeon solution site
COMPANY is followed by SERVICES then PORTFOLIO, RESOURCES, CAREERS, CONTACT US are
displayed in proper sequence. So the here the sequence is according to the
frequency of use
4. Proper
web-based colors should be used. The colors should not be too dull or too dark.
e.g colors used should be decent
suiting to the type of website
5. White
space surrounding the images should be proper.
e.g. There should not be unnecessary
blank spaces in between the images and text.
6. Tool
tip for all images should be provided and they should be proper.
e.g. like on website the Tool tip is
present for home image. Each image should have a
descriptive ALT attribute and
TITLE attribute associated with it -
particularly images that are also links to other pages. That way, they can
quickly jump to the page they're interested in without having to wait for the
entire page to load.
7. Attachments
should be provided in Read Only format. All the attachments e.g. PDF, word doc,
Excel etc should open in a new window
8. Spelling
and grammar should be correct.
9. Jargon
should be avoided i.e. more use of technical words should not be there English
should be simple , understandable and user friendly language
10. Language
should be present as per the class of audience e.g. US and UK standards should be followed.
Remember Visitors can't buy your products if they can't read the content.
11. Print
functions should work correctly.
For e.g. the Print preview should be
displayed to verify the page length and contain of the page
The User Information category includes
1. Users
should receive email feedback if necessary. All feedbacks should be prompt
E.g. if salary is credited to your
Bank Account, the feedback mail should be received within particular hrs
2. Users
should be informed if a plug-in or browser version is required for a particular
part of application. E.g. To View any flash object on the website flash player
is required
3. Users
should be able to give feedback via email or a feedback form. Feedback form
should be available for the users to share the experience the while using the
site.
The Next category is Error Prevention
1. Errors
should not come unnecessarily e.g. if user is trying to login the banking site
with valid credential he should be able to login successfully.
2. Error
messages should be in plain language. E.g. error message displayed should be
simple and understandable
For e.g in Ecom Seton UK site if the user does not
provided the email id and password,then the error message displayed if “Email
id is required field”, “Password is a required field”
3. Error
messages should describe what action is necessary. E.g
The error
message saying Login is mandatory field instead we can use Please enter user
name
This
message clearly tells what action he needs to do
4. Error
messages should provide a clear exit point
e.g.
message should be clear, relevant and complete.
Example if
mandatory fields are left blank the record will not get saved .So it should be
stated in the message what action user needs to take in order to save the
record
The Audience category define
community of people for whom the website is going to be usable and handy
1. Audience class should be
defined properly.
If the target audiences are
common people with no technical back ground then the site should be work flow
and messages in the site should be such that they can understand it clearly
e.g.
The terminology used should be according to US and UK English
Operating Systems
Environment/Platform category is
2. Operating
environments and platforms should be defined, e.g. Application should be tested
on different operating system windows XP, windows 2000, windows Vista as per the requirement from the client
Various browsers should be specified for testing an application, e.g.
Testing the
web application on different Browsers like IE 6, IE 7, Mozilla firefox,
Opera etc
Web page display often varies widely
between browsers. Page display may look different in different versions of the
same browser!
Validation message should be clear
and concise.
i.e they should be in simple language
with no grammar and spelling mistakes
and it should clearly tell user what
action he needs to take
for example Validation of Numeric
field category included the following
1. Valid
numeric characters in range of 0-9 should be allowed
2. Invalid
characters i.e. alphabets, special character should not be allowed in
numeric fields. Proper error message
should be provide.
e.g. 'Quantity' must be numeric.
3. For
all numeric fields the boundary values and also mid-range values should be
allowed
e.g Maximum length of field is "
30 " characters.
Validation of alphabetic field
For example name fields
1. Valid
alphabets from A-Z and a-z should be allowed
2. Invalid
characters i.e. numbers, special character should not be allowed in
Alphabet fields. Proper error message
should be provided
3. For
all alphabetic fields the boundary values and also mid-range values
Should be allowed.
For e.g. if the field length is 20
characters then user should be able to use 20 characters and less.
Validation of alpha-numeric field
It is similar to alphabetic
characters only the difference is that here the numeric value is allowed with
the alphabetic letters
For example address fields can have
alphabets and numbers in it ,It should allow following characters
1. Valid
alphabets from A-Z and a-z, numbers from 0-9 should be allowed
2. Invalid
characters i.e. special character should not be allowed in
Fields. Proper error message should
be provided
e.g. ‘’ field should contain
alphanumeric characters.
3. For
all the boundary values and also some mid-range values
Should be allowed.
Validation of duplicate records
1. Duplicate
records should not be allowed unless and otherwise specified.
E.g. if user have a gmail account
with name elvina.dave@gmail.com then the application should not allow any other
user to register with the same user name
2. User
should not be allowed to edit the current user name and make it duplicate..
i.e. if user edits a record then it should not be considered
as a new record
e.g.
If I edit my profile on a web site
then it should not allow me to edit my user name Rest other information should
be editable. If I edit otherwise what can happen that if I edit my profile and
edit the select some existing user name then the user name will be duplicated
be considered as a new user In seton uk,
ecom site the email address used while registration is not allowed to edit to
avoid the duplicity.
In banking application if the
transaction is recognized only by username then application should not allow the
user to edit or duplicate it.
Other Validations of fields
1. All
the mandatory fields should be filled by user with valid data
While registering any ecommerce site
the mandatory information has to be filled with valid data for successful
registration.
2. Only
spaces should not be allowed
If any mandatory field is filled by
entering spaces/tab then proper error message” 'First name' is a required
field.” Should be displayed
3. User
should not be allowed to submit with blank data in mandatory field
If any mandatory field is filled by
entering blank spaces then proper error message” 'First name' is a required
field.” Should be displayed
Business Flow category
1. For
the e-commerce site checkout process and payment gateways should be
checked. Verify the complete flow of
the site if related to online payment.
e.g As
an example check process of set on UK will be explained here
2. In
the administration module the data entered/ altered should be reflected
Properly on user front.
i.e consider an example where website offers different
services to its user .And admin has the right to add or edit those service in
that case if admin adds a new service or updates the existing service then it
should be correctly displayed at the user end
Performance checklist
Here we will have a check on the
performance of the web site which depends mainly on the following 2 category
Number of Users category
1. Application
should support the numbers of users which are defined in the SRS
Ex: This feature is used to verify
the load and stress on the application.
In the Ecommerce or any Web
Application, application should run smoothly with the specified user without
getting stuck any where. If application is made for 100 user then it should run
smoothly for 100 users.
Time Frame category
1. After
entering the application URL in the browser with the application should start
in reasonable time with all the ideal conditions i.e. Speed of internet
Ex: If user enters www.Gmails.com in
the browser, then HOME of the application should get displayed in the
reasonable time. Standard download time , Home page downloads within 10 seconds
or less. Internal pages download within 15 seconds or less.
2. The
images present on the page should open in reasonable time. So the size of
images should be moderate
Ex: Images in the application should
get downloaded in the reasonable time when clicked. Size of the images are
depends on the pixel size. So images with small pixel size should used wherever
possible.
3. If
any flash application is present on the page then a loader symbol such as hour
glass must be present on screen till the application gets loaded completely
Test Environment category
1. The
test environment should match the clients requirement
i.e the test environment that we
select for testing should match the requirement mentioned by client in the SRS
Ex: Test server configuration should match with the client's server
configuration like the windows server or Linux server.
2. The
application should work more or less the same when run on maximum and minimum
system configurations (e.g. RAM- 256- RAM 1GB)
There should not be any significant difference in the
performance of the application if it is run on Minimum or Maximum RAM requiremt
or other system configuration for example if minimum RAM requirement is 256 MB
then it should work similar to how it runs on 1 GB .there should not be any
major difference in the performance
Ex: Speed of accessing the
application should work as per the system configuration.
If User gets registered with any of
the side, then registration process response time should work as per the system
configuration.
Database category
1. All
the records should get added properly in the database
Ex: In the web application, if any
user is created then all the entries which belongs to that user should get
inserted into the respective fields into the database like Username, First
Name, Last Name etc.
2. User
should be able to fetch the records from the database
i.e after the records are inserted into the data base it
should also be fetched correctly
i.e if we user name is fetched from the table then it should
return it correctly
Ex: This is a part of database
testing. The user's records which are present in the application should get
fetched as per the queries fired by the user
3. All
the fields should save the information properly
Ex: In the web application, user
registration form is there. If user registers himself or updates its existing
profile then then that information should get saved into the respective fields correctly
The Security checklist the
covers points like data security,privacy, unauthorised login
Access Control
1. If
user enters a wrong password many number of times then the account should get
blocked e.g. in any banking site if the user enters invalid password for 3
times the User id gets blocked and the system does not allow the user to
re-enter the password
2. If
user logs in the account and leaves the application in idle state for more time
then the session should expire and also should not be allowed to work with
browser back button.
i.e if user is logged into the site and is doing any action on
a form or record then he leaves the system and does not perform any action then
its session must expire after a certain specified period of time e.g 10 mins or
20 min depending on the type of site .
For example in banking sites the session expiry time is
usually 5 min or less
Which means, if user performs any
action after 5 min then he is asked to re-login
3. If
user is logged in to the application and copies the same URL in other browser
window then login should be canceled and user should ask for login in the other
window
e.g it happens for banking sites specially if the user is
logged in and checking the account info, copies the URL and paste it in to
another browser then the user is asked to login again to check the account info
4. Unauthorized
user should not be allowed to login i.e. without valid login credentials
e.g. if the user name and password
provided are incorrect then, user should not be allowed to login
Privacy/ Data Security category
1. Sensitive
data should be visible to restricted users
i.e the data should be right
protected.
And sensitive data should be visible
only to admin or the user with the rights assigned to him
For example credit card details of
customers should be shown to the credit card holder or the system administrator
only and not to every user
2. Restricted
information about the company should not be shown publicly or it should not be
leaked out in any way
i.e the restricted and private
information about the company should not be displayed to user .I
3. Sensitive
information such as credit cards numbers etc should not be saved anywhere
i.e. the Credit card info should not be saved in
the data base an y where by the website
if saved then it should be in encrypted form and
displayed as masked
4. The
password should always come in encrypted formats.
The passwords should not be displayed it should be shown
masked
e.g While login, when user enters the
password in the Password text field in to be in encrypted form
5. User
should not be allowed to copy the password or if copied it should be in
encrypted form
e.g. in previous example if we copy
the entered the password ,on the notepad. The visible text is in encrypted
form.
6. The
privileges given for data viewing should work properly
i.e. Add, update, edit, delete
functionalities
7. Cookies
should be checked for changing data. This depends on the application and client
requirement
Before testing the dynamic side we should first delete the
cookies and then test
e.g.
In IE browser the previous entered email address gets displayed they are co
Some
time it is the requirement from the client.
8. URL
should not contain the private data related to the user like Credit Card
details, User ID, etc.
When you navigate to different screens and perform different
operation within the application then URL changes. We need to test that this
url in the browser address should not display credit card number or other
private data like password
Tips and Tricks additional information is given related to
website
1. For
checking the spelling mistakes of contents in website, copy all the contents to
word doc and press F7 or go to tools-> spellings and grammar
2. For
checking the layout of page by increasing or decreasing the font size
"Press Control+ mouse scroll". By doing this font size gets
increased/ decreased.
We need to check that the page layout does not get distorted
if you press Control + mouse scroll
3. In
the word document words which are in all capital are not caught in spelling
check in such case select the word and press "Shift + F3" to make the
particular word or sentence in small case
And then we can check the spelling
4. There
are add-ones provided by Mozilla Firefox which can be downloaded from net in
free. For these Add-ons go to "Tools-> Add-ons-> Get
extension". Add on window will open user can select any Add-on from that
window
5. Web
Developer is good Add-On for web testing. It has the facilities such as ruler,
display lines to check the alignment properly
6. User
can also compare the two contents using Mozilla. Just press "control +
F" find functionality opens on the bottom of the page.
Client sends us the text contents to be displayed on a page.
To check whether that text has been correctly included in the page we can copy
that text from client’s doc and paste it in the find text box if the text is
found in the page then it means that the contents has been incorporated
correctly .If the search fails then it means that the text is either missing or
may be not been included correctly.
This concludes the generic web check list.
Mock-up Checklist
Here I am presenting the Mock-up Checklist
which is used while testing the Mock-ups for the Website.
The QA Process which has been follow in
Zeon has been explained in Brief:
1. For creating any
website, client sends the requirements first.
2. Once requirement
comes, according to them designer team creates the mock-ups which are mostly in
JPG format.
3. Once mock-ups are
created it comes to QA for verification and once QA Approves, it is sent for
Client Approval.
4. If client approves,
Html pages are created as per the approved mock-up templates and it is
integrated with website on platform which will be used (Java, PHP, etc.)
For creating any website Designer Team
first creates the Mock-up in JPG format and it is sent to Client for Approval.
As these mock-ups come to QA we follow the generic checklist of the Mock-up.
We are now switching to different
categories of the checklist in which different point has been distributed.
1. Layout: In the
Layout category there are different points which have been mentioned.
1. Layout should be
simple, consistent: Layout of the mock-ups should be consistent in all the
templates. As there are number of mock-ups has been created for the single
website, layout in all the mock-ups should be same.
2. The color contrast
should be maintained: The Color combination which has been used in the
mock-ups, it should be maintained.
3. The layout
resolution should be proper: In every mock-up layout should be consistent,
generally the layout should be 800 X 600 dimensions.
4. Background color:
Background color of the mock-up should be proper and prior to match with
foreground color.
5. Navigation parts:
The navigation part of the mock-up should be properly highlighted.
6. Page corners: The
corners of the mock-up should be properly chopped. There should not be improper
chopping.
7. The elements such
as buttons, links and bread Crum should stand out properly i.e. they should be
highlighted properly.
2. Images: In the
Images category, we will discuss different points
1. Cropped images: The
images which have been used in the mock-up should be cropped in proper shape
and size.
2. Image Quality:
Images which are used in the mock-up should have good quality, it should be
clear and not blur.
3. image background :
It should match the page background color, images should not look distinctly or
like a patch on the page.
4. Image brightness:
the brightness of the images should be proper in the mock-up.
5. Message conveying
images: the images which are displayed in the mock-up should have specific
topic which relates to the information present in the mock-up.
6. Image Corners: the
corners of the images should be properly chopped and it should be sharp enough
to view.
7. Images alignment:
Images should be properly aligned with the other information which is displayed
in the mock-up.
3. Text/ Font: In the
Text/Font category, we will discuss different points
1. Spellings and
grammar: the information which is displayed in the mock-up should display
correct spelling and grammar.
2. English used: Text
and English which is used in the mock-ups should be specific to the intended
audience like US or CA, it means Canadian English should not be used on the
mockups which will be used on US websites.
3. Links: links which
are displayed in the Text should be properly highlighted and more specifically
in blue color.
4. Menu Name: if the
menus are present in the mock-up, the names in the menus should be consistently
written.
5. Client's
requirements and their products. If the client’s current site is present then
text matter should be taken from that site. ( Explain by indicating in the
mock-up)
6. Text should be
readable in the mock-up.
4. Color: This
category includes different points which we are going to discuss now.
1. Colors used should
be appropriate (e.g. for grouping, pop-out effects, and so forth) (Will Explain
by giving example in the mock-up)
2. The background
images color and the page color should be soothing. (Explain by giving example
in the mock-up)
3. The colors used on
the entire page should be attractive and of proper shade (not too dark not too
dull) : Color combination should be proper in the mock-up.
1. Required logos,
fonts, and colors should be included in the mockup: As per the client
requirement there should be company logos and other information present on the
mockup.
2. Client address: if
the address of the client is present in the mock-ups, it should be correct.
6. Alignment and Stand
of the Page: The category indicates several points:
1. The Mock-up should
be displayed in center.
2. Try to open the
mock-up in JPG format, page should be opened completely.
