Guided: Web Application Exploratory Testing

In this Guided Code Lab, you will complete exploratory testing charters for the front-end of the Marbles Web Store. It sells everything - and more - for marble enthusiasts. It also has a good number of defects, waiting to be found.

A charter is used in exploratory testing to guide your attention to a specific feature, quality aspect, persona, or a combination of those. Each step in this Lab represents a different charter.

To simplify the reporting of defects for you, the developers added a Report defect button on the top of the web page. Simply click the Report defect button, and then click the element on the page that contains the defect. After that, you can click Validate on the different tasks in the charter to verify you indeed discovered a defect.

For each step, you will also have to write a defect report. The report files are already opened for you in the editor to the right.

For each reported defect you should at least report:

1. A short description of the defect
2. The URL where the defect appeared
3. The reproduction path of the defect

Now, go to the next step to learn more about the system under test.

info> Note: Each step is independent of any other steps and they can be completed in any order. Feel free to jump between the different steps if you get stuck or are out of ideas.

If you are curious about the defects you haven't been able to find, you can check the reports in the solutions.txt file.

The system under test in this Lab is the Marbles Web Store, your one stop shop for all kinds of marbles. The store has many different products for sale in several categories. Further more, users can log into their accounts, store their address, and then order their marbles effortlessly.

As the sole tester in the company, you've been tasked with testing the application. There aren't a lot of documented requirements for the system. You can review the available requirements in each step. Besides the requirements, you'll have to rely on your previous experience with e-commerce websites to find potential defects.

The developers have given you the latest version of the code to run. Your first task is to get the web store up and running. Now that the Marbles Web Store is running, you should be able to visit it using the Web Browser tab. Please navigate to localhost:8000 to open the home page.

The developers recently finished the login feature. That's a great step forward, because without signing in, customers wouldn't be able to order anything. With this feature completed, the store should be ready to open soon.

Please focus on the login feature in this charter and try to identify any defects. You may refer to the requirements and user accounts below to design your tests.

Requirements

• All user accounts have an username and a password
• Passwords must have a length of at least 8 characters and may include letters, numbers, and symbols
• After logging in, users can access their profile

Available User Accounts

Because development hasn't yet started on user registration, please use the predefined accounts below for now.

| User Name | Password | Comment | | -------- | -------- | -------- | | AzureDiamond | hunter2! | Valid | | Pilot88 | Fly@w@y8 | Valid | | user | pluralsight | Valid | | CatPersonJake | MyCatIsCalledJake | Valid | | robb | hello123! | Invalid, can't login |

Defect Report

Add your defect report for this charter in 1-login.txt.

info> Note: Remember to use the Report defect functionality to complete all tasks in this charter.

Next, the team would like your feedback on the checkout functionality.

Navigating the catalog, customers select the products they like and add them to their cart. From the checkout page they adjust quantities, enter coupons, and finalize their order.

Customers can only add products to their cart if they are logged in. Furthermore, customers are only allowed to checkout their carts after setting an address.

info> Note: Payment functionality is coming in a later sprint, so for now assume all orders are paid afterwards.

Use Cases

• Adding products to the cart
• Removing products from the cart
• Changing the quantity of a product in the cart
• Using a coupon code
• Checking out the cart

Coupons

Coupons can be added on the checkout screen and apply to all items in the cart.

| Coupon | Effect | | -------- | -------- | | GIVEME10 | 10% Discount | | GIVEME15 | 15% Discount |

Shipping Costs

| Country | Costs | | -------- | -------- | | United States | Free | | Canada | Free | | Any other country | 5.99 USD |

User Account

You can use the test account below to login.

| User Name | Password | | -------- | -------- | | AzureDiamond | hunter2! |

Defect Report

Add your defect report for this charter in 2-checkout.txt.

info> Note: Remember to use the Report defect functionality to complete all tasks in this charter.

A big part of Marbles Web Store's success is the look and feel. You pride yourself in having a contemporary and trusted brand identity. The past few sprints the development and design team have worked hard to polish and finalize the website before the launch. Can you provide them with additional feedback?

Design Guidelines

• Your store name should be used in a consistent manner. The only correct way to write it is Marbles Web Store.
• Your brand's primary color is #0d6efd.
• Your brand's secondary color is #6c757d.
• The look and feel of your web store should convey top quality. You make it easy for customers to achieve their goals.

Defect Report

Add your defect report for this charter in 3-design.txt.

info> Note: Remember to use the Report defect functionality to complete all tasks in this charter.

Accessibility is important to the brand, everyone should be able to enjoy shopping with Marbles Web Store.

The developers worked on improvements for:

• Alternate texts for all images on the website
• Aria labels for objects customers can interact with
• Semantic use of titles and headings

Please help the PO in determining whether there are areas where you can still improve accessibility.

Developer Tools

To complete this charter you will have to look at the source of the application. Right click anywhere on the page, and choose Inspect or Inspect Element.

On some HTML elements you will find attributes that are related to accessibility, such as alt and aria-label.

Defect Report

Add your defect report for this charter in 4-accessibility.txt.

info> Note: Remember to use the Report defect functionality to complete all tasks in this charter.