E-TAIL QA: Approach to E-commerce testing in an Agile environment

Proprietary & Confidential
May 29, 2014
E-TAIL QA:
Approach to E-commerce testing in an
Agile environment
E-TAIL QA: Approach to E-commerce
testing in an Agile environment
QA Professionals Meetup – May 2014 1

Proprietary & Confidential 2E-TAIL QA: Approach to E-commerce
QA Professionals Meetup – May 2014
E-commerce and the role of testing in an
Agile environment

Proprietary & Confidential 3
What is E-TAIL (E-Commerce)?
The term “E-TAIL” is a combination of the words "Electronic" and "Retail" and is the latest buzz word for “E-commerce”.
Electronic commerce or E-commerce refers to the purchase and sale of products and/ or services via electronic systems
such as the Internet.
Some of the exclusive features of E-commerce are as follows:
• 24/7 availability: E-commerce sites are available 24 hours/ 7 days in contrast to their brick and mortar counterparts
• Global Reach: E-commerce breaks geographical barriers and is not limited to local consumers
• Easy access from anywhere: E-commerce sites can be accessed via Desktop, Tablets and Smartphones, at work, at
home and anywhere else
• Technology standards: E-commerce follows 1 set of technology standards called Internet standards that is shared
universally across the globe
• Content Rich Information: Complex and content rich information can be delivered to the consumers in a way that is not
possible with traditional technologies like Radio, TV, Magazines
• Personalization/Customization: E-commerce allows personalization of marketing messages and customization of
products and services based on the interests, preferences and past purchases of consumers
• Integration with Social networking sites: Integration with Social networking sites like Facebook, Twitter, Google + and
Pinterest allows consumers to share information about products and services available on the e-commerce sites

Testing E-Commerce websites
Testing of E-commerce websites comprises of the following:
• Test plan development – Creating a test plan to outline the overall test strategy
• Test case creation – Creating detailed test cases

• Functional Testing - Testing the Front-end and Back-end functionality of the e-commerce website
• Browser compatibility testing – Testing the website across various Desktop browsers (on PC and Mac)
and Mobile browsers (on Smartphones and Tablets)

• 3rd Party Integration testing – Integration testing of the site with 3rd party sites/ tools e.g. product
recommendations, ratings and reviews, social networking sites, Email marketing etc.
• Web Analytics testing – Testing of Web Analytics to ensure that the web data is being collected,
analyzed and reported correctly to understand consumer’s usage trends
• Accessibility testing – Verifying that the website adheres to web accessibility standards, e.g. W3C’s
Web Content Accessibility Guidelines (WCAG)

• Performance testing – Testing performed to determine how a system performs in terms of response
times and stability under a particular workload
• Security testing – Testing, analyzing and reporting on the security level of an application to identify any
vulnerabilities or threats that can jeopardize the security or integrity of the Web application
• Regression testing – Testing to ensure that existing functionality still works, after changes are made to
the system/ application

Agile software development
Agile development is a phrase used in software development to describe methodologies for incremental
software development. Agile development is an alternative to traditional project management where
emphasis is placed on empowering people to collaborate and make team decisions in addition to
continuous planning, continuous testing and continuous integration.
In Agile, there is continuous testing that avoids long delays with a large phase of testing after development
is complete. Also, testing in Agile ensures that bugs are found closer to when they are introduced, which
makes them easier to fix.

Role of testing in an Agile environment
• Agile Quality is a team deliverable i.e. Quality is not the responsibility of only the tester – It is the
responsibility of the entire team
• Testers are part of the entire team supporting customers, business stakeholders, developers and other
team members
• Testers support infusion of quality through the entire team and project’s cycle
• Testers are involved in the planning meeting for the sprints and contribute in deriving story points for
stories
• Testers are involved in the retrospective meeting to identify things that went well, things to improve and
actions to apply

Waterfall vs. Agile: Cost of Change over
time
*Reference: Agile Testing slide: Declan Whelan
E-TAIL QA: Approach to E-
commerce testing in an Agile

Test Cases, Defects and
Documentation

Test Case Management
 Be Agile: Leave Excel Behind, for good!
 Test Cases are Value Based and Reusable
 Provides Visibility of Test Cycles

Defect Management
 Defect Management Tools: Atlassian Jira
 Integration with Atlassian Bamboo

Documentation IS Agile
 Wiki as a central space
 Knowledge Transfer made simpler

POSTMAN
A powerful HTTP client to test web services

PostMan – REST Client
Core goals
• Automate things as much as possible
• If there is something that can be solved using code, it will be solved using code
• Never repeat yourself
• Testing APIs should not feel like endlessly entering data
• The interface should adapt to the complexity of the request
• Only show what's relevant in the screen
• Unroll the interface gradually
• Complete control over your data
• Keep simple JSON based data formats which can be exported and shared as per user needs

Postman is a powerful HTTP client to help test web services easily and efficiently. Postman lets you craft
simple as well as complex HTTP requests quickly. It also saves requests for future use so that you never
have to repeat your keystrokes ever again. Postman is designed to save you and your team tons of time.
Check out more features
E-TAIL QA: Approach to E-commerce testing
in an Agile environment QA Professionals Meetup – May 2014

Here is what you have to do to get this working:
Install Postman from the Chrome Web Store (if you don’t have it already!)
Install the Interceptor extension
below or just install from the Chrome Web Store to get started.
https://github.com/a85/POSTMan-Chrome-Extension
Open Postman
Click on the Interceptor icon in the toolbar and switch the toggle to “on”
Browse your app or your website and monitor the requests stream in

What can PostMan do?
· Help developers unit test their REST services
· Help QA team to test the backend services
· Configure and save the HTTP Requests for later use
· Share the requests to everyone in the team
· Test services based on environment without many changes

Collections
Collections will take your productivity to another level altogether.
A collection let's you group individual requests together. These requests can be further organized into sub-
collections/folders to completely mirror your API. Requests can also store variations and responses when
saved in a collection. You can add metadata like name and description too so that all the information that a
developer needs to use your API is available right where he needs it. Collections are listed in the sidebar
alphabetically. You can search through collection requests using the search form for quick access.
You can also reorder requests inside a collection by dragging and reordering through the sidebar itself.
The request order is also preserved for folders.

.
Creating a collection
Collections can be created in two ways.
Select the collection side bar tab and click on the "new collection" icon.
In the modal that comes up, enter the collection name and description and
press create.
If you have a request loaded in the request editor already, click "Add to
collection". Enter a new collection name instead of selecting an existing
collection. The collection will be created and the request will be added to
the collection.
Operations on a collection
Editing a collection is quite simple. Hover over the collection name and
click on the edit icon to change the collection name and description.

Web Accessibility
Introduction & Testing

What is Web Accessibility?
“Web accessibility means that people with disabilities can use the Web … [They] can
perceive, understand, navigate, and interact with the Web, and that they can contribute
to the Web.”
- http://www.w3.org/WAI/intro/accessibility.php

Four main types of disabilities that affect use of the web
Visual : Blindness, low vision and colour-blindness
Auditory : Profoundly deaf and hard of hearing
Motor : The inability to use a mouse, slow response time, limited fine motor control
Cognitive : Learning difficulties, distractibility, the inability to focus on large
amounts of information

“Usability” Goals
Visual : Make it easier to read
Auditory : Make it easier to hear
Motor : Make it easier to interact
Cognitive : Make it easier to understand and focus
People experience varying degrees of different conditions, and often one or more conditions at a time.

Why we are talking about Web
Accessibility
• Increase audience / market share
• More user-friendly = higher conversions
• Improves search engine positioning (semantic markup)
• Improves corporate image, reputation and demonstrates
social responsibility

Case Study: Tesco, Usability increases revenue
TESCO (US$23B market cap 04/15/14) made their home grocery service more
accessible to blind customers; this resulted in extra £13m revenue per year.
Tesco originally developed their parallel website for blind and partially-sighted
customers . They discovered most users were using the accessible site. Now they
have one very accessible site.
• Accessibility page
• WAVE test

… Why we are talking about Web Accessibility
It’s the new Ontario law!
• New accessibility requirements came into force on January 1, 2014. Ontario Regulation
191/11, s. 14 (4) of the Accessibility for Ontarians with Disabilities Act (AODA)
• New law affects public sector and large Ontario businesses (>50 employees)
• New websites and web content must conform with the Web Content Accessibility Guidelines
2.0 (WCAG) Level A http://www.w3.org/WAI/WCAG20/quickref/Overview.php

What is WCAG 2.0 Level A
Guidelines created by the Web Accessibility Initiative (WAI) – part of the W3C.
Regarded as the international standard for Web accessibility.
Complete guideline details at: http://www.w3.org/WAI/WCAG20/quickref/Overview.php

How to Meet WCAG 2.0 Level A
1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can
be changed into other forms people need, such as large print, braille, speech, symbols
or simpler language.
1.2 Time-based Media: Provide alternatives for time-based media.
1.3 Adaptable: Create content that can be presented in different ways (for example
simpler layout) without losing information or structure.
1.4 Distinguishable: Make it easier for users to see and hear content including
separating foreground from background.

What is ARIA or WAI-ARIA (it’s the same thing)
Accessible Rich Internet Applications (ARIA) is an HTML5 specification for
adding accessibility information to DOM elements.
ARIA adds meaning to your code so Assistive Technologies can identify the role,
properties, and state of elements on a web page.
ARIA is intended to be a bridging technology. HTML5 partially addresses and
overlaps some ARIA specs.

ARIA Roles, Properties, States
ARIA Roles: Describe elements and their purpose.
<nav role=”navigation”><h1 class=“visually-hidden”>Site Nav</h1><a
href=”#”>link1</a><a href=”#”>link2</a</nav>
Properties: Describe the given state an on object:
<span id=”cartbtn” >Cart</span>
<div aria-labelledby=”cartbtn”>Content</div>
States: Describe the dynamic property of an object that may change in response to
user action
<p aria-expanded=”true”>Content</p>

ARIA Example: Tabbed Content
<aside role="complementary" aria-labelledby="tablist-id">
<h1 class="visually-hidden" id="tablist-id">Visible as a Landmark
Heading</h1>
<!-- tabs -- >
<ul id="nav-main" role="tablist">
<li><a id="nav-store" role="tab" aria-selected="true" aria-
controls="store-locator" href="/en/store-finder" aria-
label="Stores">Stores</a></li>
<li>…</li>
</ul>
</aside >
<!-- content panel -- >
<div id="store-locator" role="tabpanel" aria-expanded="true" aria-hidden="false"
aria-labelledby="nav-store">Tabbed Panel Content</div>

Essential Accessibility Tools
• AChecker WCAG compliance testing http://achecker.ca/checker/index.php
• WAVE Accessibility Evaluation Tool http://wave.webaim.org/
WAVE Firefox add-on http://wave.webaim.org/toolbar/
• NVDA – Screen Reader built for Firefox http://www.nvaccess.org/
How to NVDA: http://webaim.org/articles/nvda/#navigation
• Colour Oracle http://www.colororacle.org/index.html
• Google Chrome Accessibility Developer Tools? (runs in build process)
https://github.com/GoogleChrome/accessibility-developer-tools

Achecker WCAG compliance testing

WAVE WCAG compliance testing

Accessibility Developer Tools

NVDA screen reader

NVDA (Nonvisual Desktop Access) is a free “screen reader” which enables blind and vision
impaired people to use computers. It reads the text on the screen in a computerized voice. You
can control what is read to you by moving the cursor to the relevant area of text with a mouse or
the arrows on your keyboard. NVDA provides the key to education and employment for many
blind people. It also provides access to social networking, online shopping, banking and news.

Installing NVDA
NVDA can be downloaded from the NVDA website, www.nvda-project.org. Please refer to the NVDA website resources for instructions on how to download and
install NVDA on your computer.
Turning on NVDA
There are several ways to turn on NVDA on the computer.
Press Windows key + M to go to the desktop, then press N for NVDA, then Enter; or
Use Ctrl + Alt + N to start NVDA.
After a few seconds NVDA will start.
Defining the NVDA Key
On a computer with a full-sized keyboard, the NVDA key generally refers to the Insert key. On a smaller keyboard such as a laptop, the Caps Lock key can be
used. If you want to use the Caps Lock key, press Tab once on the dialogue box and check the check box by using the Space bar. The NVDA dialogue box will
appear every time you start the program, unless you tell it not to by unchecking the second checkbox in the dialog.
Turning off NVDA
To turn off NVDA:
Press the Insert key or the Caps Lock key + Q, then NVDA will prompt you whether you would like to end the program or not.
Select Yes then Enter.
Turning off your computer
Windows 7 or Windows Vista:
Press the Windows key.
Right arrow once and the shut down option will appear.
Press Enter to shut down.

Reading
There are dozens of keyboard shortcuts that allow you to read content by line, sentence, word, character, etc. The following is a list of
essential reading shortcuts. With these shortcuts, you should be able to navigate through most content.
Numpad +: Start reading at the top of the page
NVDA + ↓: Start reading at the current position
Ctrl: Stop Reading
NVDA + ↑ or Numpad 8: Current line
Ctrl + ←/→ or Numpad 4/Numpad 6: Previous/next word
↑ or Numpad 7: Prior line
↓ or Numpad 9: Next line
←/→ or Numpad 1/Numpad 3: Previous/Next character
F5/Ctrl + F5: Page refresh / Hard page refresh. If you get lost, this is how you can start over.
NVDA + Ctrl + ↑/↓: Rate of speech increase/decrease
You may want to practice reading through the content on this page with a NVDA right now. Keep in mind that there is a link at the top of this
page to skip to the main content.
Navigation
Sighted users visually navigate through web content in a number of ways. They skim for headings, lists, tables, etc. Most of these methods
are available to screen reader users if the site is correctly structured and well organized. To navigate forward and backward through links
and form elements on the page, use Tab and Shift + Tab. Other shortcuts are listed below.

Quick Keys
The following Quick Keys will help you navigate common page elements.
H: Headings
D: Landmarks
1 - 6: Headings level 1-6
F: Forms
T: Tables
B: Buttons
The Search button is often the first button on a page. You can often navigate to the search form but selecting B to jump to the button and
then Shift + Tab to navigate to the previous form element – the search text box.
L: Lists
I: Items in a list
Shift + Quick Key will allow you to navigate through elements in reverse order (works with most Quick Keys).
Other navigation shortcuts
NVDA + F7: Elements List - lists page links, headings, and landmarks
Ctrl + Home: Top of the page
Ctrl + End: Bottom of the Page
Alt + D orF6: Browser address bar
To practice reading and navigation commands, try refreshing the page and navigating to this section of the page. There are several ways
you can do this - navigate to the Table of Contents and activate a link to this section and then begin reading or navigating by sentence,
headings (H), lists (L), Find, or Read Previous/Next line (↑/↓).

While working in NVDA, keep the following guidelines in mind:
While NVDA has early support for accessing Windows and many Windows applications, we will be focusing on accessing web content
only.
Make sure that NumLock is off.
You will probably want to test NVDA in Mozilla Firefox, even if it is not your primary browser.
Remember that screen reader users typically do not use a mouse. As you become more comfortable with NVDA, try using only the
keyboard.
Most browser shortcut keys will work when using NVDA.
The page may not scroll while you read, so you may hear content being read by NVDA that isn't visible on the screen.
Reading
There are dozens of keyboard shortcuts that allow you to read content by line, sentence, word, character, etc. The following is a list of
essential reading shortcuts. With these shortcuts, you should be able to navigate through most content.
Numpad +: Start reading at the top of the page
NVDA + ↓: Start reading at the current position
Ctrl: Stop Reading
NVDA + ↑ or Numpad 8: Current line
Ctrl + ←/→ or Numpad 4/Numpad 6: Previous/next word
↑ or Numpad 7: Prior line
↓ or Numpad 9: Next line
←/→ or Numpad 1/Numpad 3: Previous/Next character
F5/Ctrl + F5: Page refresh / Hard page refresh. If you get lost, this is how you can start over.
NVDA + Ctrl + ↑/↓: Rate of speech increase/decrease
You may want to practice reading through the content on this page with a NVDA right now. Keep in mind that there is a link at the top of
this page to skip to the main content.

Responsive Design Testing

Responsive web design (RWD) is a web design approach aimed at crafting sites to
provide an optimal viewing experience - easy reading and navigation with a minimum of
resizing, panning, and scrolling - across a wide range of devices (from mobile phones to
desktop computer monitors)
A responsive design simply means a website that has been constructed so that all of the
content, images and structure of the site remains the same on any device. For example,
when a user accesses a site on their desktop, they are getting the full view of the site.
But when that same user goes to visit the site from their smartphone or tablet, the site
will retract to fit on the smaller screen.

Why you should make the switch to responsive design
for your website?

Mobile Usage is Increasing
 More than 20 percent of Google searches are now being performed on some sort of mobile
device.
 In 2013 over half of all local searches were done on a mobile device.
 25 percent of Internet users only access the internet via a mobile device in the United States.
 25.85 percent of all emails are opened on mobile phones, with another 10.16 percent being
opened on tablets.
 In 2014 mobile Internet usage is expected to overtake desktop usage.
 Out of the 4 billion mobile phones in the world, 1.08 billion are smartphones and 3.05 are SMS
enabled.

Recommended By Google
Google claimed 67 percent search market share in 2013, making it the
most popular search engine in the world.

Better User Experience
Users don't have to fool around with zooming and shrinking the text or
images on screen. Instead, all of the content automatically adjusts to
the screen of the device.
This makes it easier and more convenient for users to read and
navigate on your site.

Stay Ahead of Competition
In the business world, you have to stay ahead of the competition.
So, if more and more users are using their mobile devices to search
and make purchases online, you have to cater to that audience by
having a mobile-friendly site.
In fact, 85 percent of adults believe that a mobile site must be as good,
if not better than, a desktop site.

Going Mobile: Responsive Website Examples
Squarespace blog
Squarespace is a company dedicated to website design, so it’s fitting that its own blog be a
shining example of innovative online publishing. Instead of overcrowding the space, each post
is presented one at a time—almost like the page of a book—and navigation between the posts
is easy and seamless.

Trippeo
Another travel site that understands the needs of professionals on the go, Trippeo makes
business travel as easy as possible with its simple mobile interface—complete with price
competition transparency and real-time flight information.

Gatwick Airport
It’s strange that so many airport websites suffer from less-than-intuitive designs when their main
target audience—stressed travelers—is almost entirely dependent on phones or tablets.
Gatwick Airport stands out from the pack, making its responsive website user-friendly on laptop
browsers and, more importantly, mobile devices.

Mobile Testing using Adobe Edge Inspect

What is Adobe Edge Inspect
Adobe Edge Inspect is a workflow and
preview tool for testing and simulating across
multiple mobile web browsers.

Adobe Edge INSPECT – FEATURES
• You can wirelessly pair multiple android and iOS devices , and have them
browse in sync with your computer and perform remote inspection and
debugging

Install Adobe Edge Inspect:
Adobe Edge Inspect application, which can be downloaded from Adobe Creative Cloud with
an account. Once all the requirements have been set up, you can connect your Computer to your
mobile device – in this example my iPhone. Ensure that your devices are in the same wireless
connection, and the Chrome Extension is on the ON state. It will then detect your computer and
give you a 6-digit passcode to connect.
Enter the passcode within the Chrome Extension.
60

Testing Website
Once the code has ben verified and the two devices are connected, every
time you open a webpage in Google Chrome (when Adobe Edge Inspect
is running), it will instantly be displayed on your connected mobile device.
With a Adobe Cloud Creative Pro account you can connect to multiple
devices.

Troubleshooting using Spoon.net, Firebug
and other Firefox add-ons

• Spoon is a web-based computing platform that lets you use your software
and files from any desktop
• Install software once onto your Spoon.net web-based desktop and run
from any computer.
• Files and settings automatically synchronize across all of your devices.
No more emailing or copying documents.
About Spoon.net

How spoon.net looks like

• Navigating To and Launching the Application
Complete the following steps to launch an application (for example, Firefox 5):
1. Select Apps to open the drop-down menu and then select
Productivity. This opens the Productivity Apps library.
2. Select New Browsers.
3. Select the Play button for Firefox 5. This prompts a window
which asks you to install the Spoon plugin.
4. Select OK to install the plugin. After the plugin installs the
application buffers and starts.
Use Spoon.net

Ready to use

• Firebug integrates with Firefox to put a wealth of web development tools
at your fingertips while you browse. You can edit, debug, and monitor
CSS, HTML, and JavaScript live in any web page
About Firebug

How Firebug looks like

• Inspect and edit HTML:
Firebug makes it simple to find HTML elements buried deep in the page.
Once you've found what you're looking for, Firebug gives you a wealth of
information, and lets you edit the HTML live.
Use Firebug

• Tweak CSS to perfection:
Firebug's CSS tabs tell you everything you need to know about the styles in
your web pages, and if you don't like what it's telling you, you can make
changes and see them take effect instantly.
Use Firebug

• Firefox Add-on
• Draw a ruler across any webpage to check the width, height, or alignment
of page elements in pixels.
• Know how big is something on your monitor
About MeasureIt

How MeasureIt looks like

Thank You.

E-TAIL QA: Approach to E-commerce testing in an Agile environment

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to E-TAIL QA: Approach to E-commerce testing in an Agile environment

Similar to E-TAIL QA: Approach to E-commerce testing in an Agile environment (20)

More from Nurun

More from Nurun (20)

Recently uploaded

Recently uploaded (20)

E-TAIL QA: Approach to E-commerce testing in an Agile environment

Editor's Notes