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

2,479 views

Published on

Nurun’s Toronto office recently hosted a QA Professionals meetup. The presentation was followed by an interactive and lively discussion where attendees shared their experiences, processes and best practices on related QA topics.

Speakers discussed various approaches to E-commerce testing in an agile environment, covering topics like:
- E-commerce and the role of testing in an Agile environment
- Test case management, Defect Management and documentation
- Responsive design testing
- Accessibility testing
- Web services testing etc.

Published in: Data & Analytics
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,479
On SlideShare
0
From Embeds
0
Number of Embeds
923
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • It creates transparency between the issues tracked in JIRA and related content in Confluence – requirements documents, project reports, roadmaps, and more
    Confluence creates a central space for information and documentation
    Reporting benefits: Creating macros for reporting makes reporting less time consuming
    Onboarding: Adding documentation for onboarding improves ramp up time for new hires
    Loss of information: Hit by the bus syndrome is reduced when documentation is on a common space
  • E-TAIL QA: Approach to E-commerce testing in an Agile environment

    1. 1. 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
    2. 2. Proprietary & Confidential 2E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 E-commerce and the role of testing in an Agile environment
    3. 3. 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 E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    4. 4. Proprietary & Confidential 4 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 E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    5. 5. Proprietary & Confidential 5 Testing E-Commerce websites • 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) E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    6. 6. Proprietary & Confidential 6 Testing E-Commerce websites • 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) E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    7. 7. Proprietary & Confidential 7 Testing E-Commerce websites • 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 E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    8. 8. Proprietary & Confidential 8 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. E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    9. 9. Proprietary & Confidential 9 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 E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    10. 10. Proprietary & Confidential 10 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 QA Professionals Meetup – May 2014
    11. 11. Proprietary & Confidential 11E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 Test Cases, Defects and Documentation
    12. 12. Proprietary & Confidential 12 Test Case Management  Be Agile: Leave Excel Behind, for good!  Test Cases are Value Based and Reusable  Provides Visibility of Test Cycles E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    13. 13. Proprietary & Confidential 13 Defect Management  Defect Management Tools: Atlassian Jira  Integration with Atlassian Bamboo E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    14. 14. Proprietary & Confidential 14 Documentation IS Agile  Wiki as a central space  Knowledge Transfer made simpler E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    15. 15. Proprietary & Confidential 15E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 POSTMAN A powerful HTTP client to test web services
    16. 16. Proprietary & Confidential 16 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 E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    17. 17. Proprietary & Confidential 17 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
    18. 18. Proprietary & Confidential 18 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 E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    19. 19. Proprietary & Confidential 19 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 E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    20. 20. Proprietary & Confidential 20 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. E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    21. 21. Proprietary & Confidential 21 E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 . 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.
    22. 22. Proprietary & Confidential 22 E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    23. 23. Proprietary & Confidential 23 E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    24. 24. Proprietary & Confidential 24 E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    25. 25. Proprietary & Confidential 25E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 Web Accessibility Introduction & Testing
    26. 26. Proprietary & Confidential 26 What is Web Accessibility? E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 “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
    27. 27. Proprietary & Confidential 27 Four main types of disabilities that affect use of the web E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 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
    28. 28. Proprietary & Confidential 28 “Usability” Goals E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 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.
    29. 29. Proprietary & Confidential 29 Why we are talking about Web Accessibility E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 • Increase audience / market share • More user-friendly = higher conversions • Improves search engine positioning (semantic markup) • Improves corporate image, reputation and demonstrates social responsibility
    30. 30. Proprietary & Confidential 30 Case Study: Tesco, Usability increases revenue E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 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
    31. 31. Proprietary & Confidential 31 … Why we are talking about Web Accessibility E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 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
    32. 32. Proprietary & Confidential 32 What is WCAG 2.0 Level A E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 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
    33. 33. Proprietary & Confidential 33 How to Meet WCAG 2.0 Level A E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 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.
    34. 34. Proprietary & Confidential 34 What is ARIA or WAI-ARIA (it’s the same thing) E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 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.
    35. 35. Proprietary & Confidential 35 ARIA Roles, Properties, States E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 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>
    36. 36. Proprietary & Confidential 36 ARIA Example: Tabbed Content E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 <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>
    37. 37. Proprietary & Confidential 37 Essential Accessibility Tools E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 • 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
    38. 38. Proprietary & Confidential 38 Achecker WCAG compliance testing E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    39. 39. Proprietary & Confidential 39 WAVE WCAG compliance testing E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    40. 40. Proprietary & Confidential 40 Accessibility Developer Tools E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    41. 41. Proprietary & Confidential 41E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 NVDA screen reader
    42. 42. Proprietary & Confidential 42E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 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.
    43. 43. Proprietary & Confidential 43 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. E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    44. 44. Proprietary & Confidential 44 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. E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    45. 45. Proprietary & Confidential 45 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 (↑/↓). E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    46. 46. Proprietary & Confidential 46 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. E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    47. 47. Proprietary & Confidential 47E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 Responsive Design Testing
    48. 48. Proprietary & Confidential 48E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 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.
    49. 49. Proprietary & Confidential 49E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 Why you should make the switch to responsive design for your website?
    50. 50. Proprietary & Confidential 50E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 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.
    51. 51. Proprietary & Confidential 51E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 Recommended By Google Google claimed 67 percent search market share in 2013, making it the most popular search engine in the world.
    52. 52. Proprietary & Confidential 52E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 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.
    53. 53. Proprietary & Confidential 53E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 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.
    54. 54. Proprietary & Confidential 54 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. E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    55. 55. Proprietary & Confidential 55 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. E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    56. 56. Proprietary & Confidential 56 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. E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014
    57. 57. Proprietary & Confidential 57E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 Mobile Testing using Adobe Edge Inspect
    58. 58. Proprietary & Confidential What is Adobe Edge Inspect Adobe Edge Inspect is a workflow and preview tool for testing and simulating across multiple mobile web browsers.
    59. 59. Proprietary & Confidential 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
    60. 60. Proprietary & Confidential 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
    61. 61. Proprietary & Confidential 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.
    62. 62. Proprietary & Confidential 62E-TAIL QA: Approach to E-commerce testing in an Agile environment QA Professionals Meetup – May 2014 Troubleshooting using Spoon.net, Firebug and other Firefox add-ons
    63. 63. Proprietary & Confidential • 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
    64. 64. Proprietary & Confidential How spoon.net looks like
    65. 65. Proprietary & Confidential • 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
    66. 66. Proprietary & Confidential Ready to use
    67. 67. Proprietary & Confidential • 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
    68. 68. Proprietary & Confidential How Firebug looks like
    69. 69. Proprietary & Confidential • 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
    70. 70. Proprietary & Confidential • 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
    71. 71. Proprietary & Confidential • 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
    72. 72. Proprietary & Confidential How MeasureIt looks like
    73. 73. Proprietary & Confidential 73 Thank You.

    ×