• Design reliable automated tests that are user aware.

• Customize the Chrome browser to save downloaded files into a specified folder

• Verify a File Exists

• Awareness of execution side effects: the file already exists

• Review: "#{variable}/..."

Test Case #47

Test design

• Login (business): physio@biz.com (password: test01 )

• Create an invoice (See Exercise #46)

• Click the “Print” link, wait up to 5 seconds, and then check the PDF file is generated.

Obviously, the focus of this exercise is to check the downloaded file. It appears very simple during manual testing. However, in test automation, we need to consider the following:

1. How to verify a file exists?
   This is easy: use code.

2. To be able to do the above step, two pieces of information are required:
   - the file name, in this case, invoice_C000002.pdf
   - the path of the Chrome download folder. This will depend on who you logged in and on which platform. For example, /Users/courtney/downloads is mine (on macOS).

3. The hardcoded folder path can be problematic in a software team where all team members utilize the automated tests. Ideally, we would like the path of the Chrome download folder to be static.

4. We can set the download folder path when starting a Chrome browser in Selenium scripts.

5. The file might already exist before the test execution.
   After running the test once, the file would be created. So on the second runu, depending on the operating system, the behaviour will be different. For example, on macOS, a suffix (1) (image below) will be added.
   How shall we solve it? By deleting the file in the test script before clicking the ‘Print” button.

Tasks

I suggest doing this exercise step by step. Check the downloaded file first, such as /Users/ME/invoice_C000002.pdf. If this part is working, add the dynamic part.

Task 1. Verify a file exists

Read more

Learning Objectives

• Test inline editing

• Review: live search (search as typing)

• Review: clear a text field

• Review: send special keys, e.g. Enter

• Review: get yesterday’s date in a formatted string (dynamic date)

Test Design

• Select any client (clicks Clients nav on the left to find a client, such as ‘Bruce Lee’)

• On the “Determine Fee” modal, type a character such as s to get a list of matching services. Select one billing item to add. Then click the ‘Create Invoice’ button.

• On the invoice page, click the invoice date (dot underline) to edit it
  (this is known as “inline-editing”)

Test data

• Site URL: https://whenwise.agileway.net

• Login (business): physio@biz.com (password: test01 )

Tasks

This test case might appear a little complex, but it actually is not, as it is quite easy to understand and follow.

Task 1. (Review) Select billing items on the Invoice Creation

This is a common feature in eBusiness-type apps.

You should have all the knowledge to work on it. Just do the minimum to get an invoice created. (we will do a more complex billing item management in the next exercises)

Task 2. Inline Editing

“Inline editing” means that users can click the text to edit it straightway (no need to be redirected to another web page).

The invoice date on the WhenWise Invoice page before clicking:

Read more

• contains in XPath expressions
  (a bit like a partial check-in XPath)

• Tip: Use simple locators whenever possible

• Review: refresh the page

• Tip: Be aware of elements with the same ID

Test Case 45

Continue from #34: adding non-time-based service.

Test Design

• Log in as a business

• Create several service (i.e. billing) items

• Log out

• Log in as a client

• Visit the business’ store URL /biz/wise-pool/store

• Select a billing item and quantity (multiple)

• Verify the total amount in the shopping cart

• Refresh the page

• Click the cart icon and verify the total amount
  This is to verify the session, don’t forget to test this for session-related test cases

Test Data (Login) :

Site URL: https://whenwise.agileway.net
Login (Business): pool@biz.com
Login (Customer): james@client.com
Password: test01

Tasks

Task 1. Select Quantity for a Billing Item (dropdown)

The quantity selection is a drop down box.

Even though the ID locator is recommended in the general case, experienced test engineers would NOT use ID locator this time, like below.

driver.find_element(:id, "quantity-33")

Why? The id’s 33 might change in the next release.

One way to use XPath locator. The statements below select quantity “2” for the first billing item.

Read more

• Drive Full Calendar
  This continues our tour of FullCalendar a popular calendar library that started in Exercise 41.

• Review of Advanced Interactions and learning a new interaction — Mouse Drag and Drop.

• Review XPath and using XPath parent nodes to find specific elements.

Test Case 44

Test Design

• Create an appointment for a resource, (e.g. Jet Li).

• Using the mouse, drag the appointment and drop it into another resource’s calendar on the same page (e.g. Donny Yen).

• Confirm the booking should be moved (modal pop-up).

• Confirm that the booking was successfully moved.

Test Data (Login) :

Site URL: https://whenwise.agileway.net
Login: yoga@biz.com
Password: test01

Tasks

Task 1. Create an appointment booking

This is the same as Exercise 41, you can copy that same script here if you wish.

login("yoga@biz.com", "test01")
visit("/calendar")
cells = driver.find_elements(:xpath, "//tr/td[@class='fc-widget-content']")
cells[8].click
try_for(2) { driver.find_element(:name, "event[title]").send_keys("BuildWise is even Cooler") }
driver.find_element(:id, "create_calendar_appointment_button").click
try_for(2) { expect(page_text).to include("BuildWise is even Cooler") }

Read more

• Narrow down as you type

• Review
  - Click transformed checkboxes
  - Select an option in a standard select list
  - Select an option in a transformed select list

• Find an element as an assertion

Test Case #43

A booking in WhenWise means an appointment with a client and a resource (such as a Piano Teacher).

Test data:

• SiteURL:

https://whenwise.agileway.net

• User login: “physio@biz.com”, password: “test01”

Tasks

1. Select the Branch and Professional dropdown

Both are standard select lists.

<!-- Branch Drop Down -->
<select class="browser-default" onchange="change_available_billing_items();" name="event[branch_id]" id="event_branch_id">
  <option value=""> - All branches - </option>
  <option value="4">Newmarket</option>
  <option value="5">Sydney</option>
  <option value="6">Sunnybank</option>
</select>

<!-- Professional Drop Down -->
<select class="browser-default" name="event[resource_id]" id="event_resource_id">
  <option value="">-</option>
  <option value="1">Mike Zasky</option>
  <option selected="selected" value="2">John Sully</option>
  <option value="14">Randall Boggs</option>
</select>

Tip: Use the dsot snippet in TestWise for drop-down selectors.

Read more

This is an extension of Exercise #41.

Test data:

• SiteURL: https://whenwise.agileway.net

• User login: “yoga@biz.com”, password: “test01”

Purpose

• Selenium WebDriver’s Advanced User Interactions — Mouse

• Drive FullCalendar
  WhenWise uses FullCalendar, a popular calendar view for showing appointments/bookings.

• List concepts in programming

Tasks

Select a multi-time-slot on FullCalendar

As always, when working on a new test case, an automated tester needs to perform it manually first.

1. Click on a time slot and hold

2. Move down a few slots (while holding)

3. Release the mouse

We can replicate the exact steps in Selenium using its Advanced User Interactions (don’t worry about the name, just need to remember its syntax, quite simple too)

Test Design

Read more

• Drive FullCalendar
  WhenWise uses FullCalendar, a popular library for showing appointments/bookings.

• Review of driver.find_elements and List concept
  there are two main statements in Selenium, driver.find_element and driver.find_elements . It is OK to treat them as one as the syntax followed is the same. The only difference is the returned result:
  - find_element returns the first matching element
  - find_elements returns an array (aka. list) of matching elements

Test Case #41

Test data:

• SiteURL: https://whenwise.agileway.net

• User login: “yoga@biz.com”, password: “test01”

Tasks

Click a time slot on FullCalendar

A wrong attempt by an attendee during the training was to click the 10am row’s cell:

driver.find_element(:xpath, "//tr/td[@class='fc-widget-content']/span[text()='10am']").click

Read more

Learning Objectives

• Responsive Testing

Test data:

• WhenWise Login Page: https://whenwise.agileway.net/sign-in

• User login details: yoga@biz.com/ test01

Knowledge Point: Responsive Web Design

Nowadays, we visit websites from multiple devices: computers, tablets and smartphones, with different screen sizes. This will require the developers to design a web page that works reasonably well on all platforms.

Responsive Web Design is a technique used to design a web page that ‘intelligently’ fits the platform. In software testing, ‘responsive web testing’ means testing web pages in different browser dimensions (i.e. different devices).

Simulate viewing a web page on different platforms

Read more

Learning Objectives

Introduce Selenium’s Advanced User Interactions (AUI) API.

So far we have been performing simple user operations such as clicking a button (mouse) and entering text (keyboard). How about more complex ones, such as drag-n-drop? We can do that with Selenium’s Advanced User Interactions.

Knowledge Point: Selenium Advanced User Interactions

While there is the word ‘advanced’ in Selenium’s AUI, its syntax is still quite simple:

driver.action. + one or more above operations + .perform

Mouse operations:

• click

• click_and_hold

• context_click

• double-click

• drag_and_drop

• drag_and_drop_by

• move_by

• move_to

• release

Keyboard operations:

• key_down

• key_up

• send_keys

In this exercise, we will just focus on one: drag_and_drop_by.

Test Design

Italicised text means we have completed them in the previous exercise.

1. Navigate to the business booking page, which we have done many times in previous exercises.

2. Click tomorrow’s date

3. Assert the time slots.

4. Drag the start time slider to narrow the start time range, no matter which direction.

5. Click the blue tick button (above the slider) to apply

6. Assert the available time slots again, shall be less.

Test Data (Login) :

Site URL: https://whenwise.agileway.net
Login (Customer): james@client.com
Password: test01

The business for booking: Wise Tutor. https://whenwise.agileway.net/biz/wise-tutoring

Tasks

Task 1: Drag the start time slider

Read more

Learning Objectives

• Extract the text from multiple same-styled button texts.

• Review
  - find_elements
  - List: assertion
  - List: collect to extract another list from the original List

Test Design

1. Navigate to the business booking page, which we have done many times in previous exercises.

2. Click tomorrow’s date

3. Extract the available time slots, e.g. 9:00, 10:00, …, etc, and do an assertion.
   (we stop here for this article, see the next article for the rest of the test steps)

Essentially, apart from the test steps from the previous exercise, there is really just one assertion step to be done here. Let’s review assertions in software testing.

Test Data (Login) :

Site URL: https://whenwise.agileway.net
Login (Customer): james@client.com
Password: test01

The business for booking: Wise Tutor, https://whenwise.agileway.net/biz/wise-tutoring

Review: Assertion in Selenium WebDriver

Tip: Do by simple steps, and step by step.

In test automation, only start to work on automated test scripts after you have a good understanding of the goal and the steps, which are quite easy, common sense really. But often, beginners bring their half-understanding and eagerness to accomplish the task, making things complex. Once that happened, got stuck and felt frustrated. This can be totally avoided: Do by simple steps.

The KISS principle: Keep it simple, Keep it stupid. In this assertion step, I will show you how I did this in tiny steps, which many beginners didn’t have the patience to do that way.

In this assertion step, think about the following:

Read more

This is an enhancement exercise of the previous two exercises, to create a production-quality automated test script for this core business scenario for WhenWise.

Learning Objectives

• The concept of dynamic test data
  When a manual tester performs “Clicking on tomorrow’s date”, a dynamic test data, they can choose it without thinking. In test automation, we have to ‘think’ as ‘robots’,
  - Get today’s date
  - Get tomorrow’s date
  - Get the specific format of tomorrow’s date as required

• Review
  - Using text() in XPath
  - Refactoring

• Naming of Modal Page Class

Test Design

The steps are the same as before, mainly two enhancement tasks.

1. Don’t use hard-coded tomorrow’s day, make it dynamic.
   It is common that we focus on getting test steps working at the first go, with some rough edges to be refine later. But be sure to do that after you get first successful run, which meant the core test steps are fine only.
   
   However, there are many other factors, such as “Will this test run OK again?”, “Will this test run next week?”, “It is relatively immune to common changes”, … , etc. Make a habit to stabilise and refine the test scripts immediately. For example, the hard-coded date in the previous exercises means the test script works for that day only. Make it dynamic.
   
   Check out the article, Working Automated Test ≠ Good Reliable Test.

2. Refactoring
   For longer test script, it is even more important to refactor as you go. This will help keep your mind clear and debugging test scripts easier.
   The most common refactoring is “Extract to Page Function”.

Tasks

Task 1. Get a dynamic date for booking, e.g. tomorrow

Thanks to the brilliant ActiveSupport library in Ruby, generating a dynamic date is easy.

Read more

Learning Objectives

• XPath with and

• Get formatted date

• Review: XPath text()

Test Design

• Business user logs in

• Navigate to the tomorrow’s calendar

• Find and click the newly booked appointment title

• Verify the appointment, especially, the appointment date (dynamically tomorrow).

Test Data (Login) :

Site URL: https://whenwise.agileway.net
Login (Business): tutor@biz.com
Password: test01

Tasks

Task 1: Run the client booking test

We start with the previous test case. If you run it, it will fail. It was working yesterday! This is because this data in the test case is date/time-related.

Read more

Learning Objectives

• Using text() in XPath

• Review:
  - visit a specific URL directly
  - waits
  - variable in string, e.g. "Hello #{name}"

You don’t need to perform refactoring in this exercise yet, we will do that in Ex#37.

Tip: Work on the main business scenario on your first day

WhenWise is a service booking app. This “Client Makes Booking” surely is the one of main business scenarios. Our series is a training course for total beginners, the order does not matter (the first episode using WhenWise is #20: Login tests). When a QA Engineer joins a new team, I recommend getting one simple core business scenario, like this one, implemented.

Some might say, this business scenario is not complete yet, as no business viewing the submitted booking (BTW, in the next episode). If you can do more, that’s fine. My point here is not about technical, but rather a mindset and working attitude.

You only get to make the first impression once. If you can automate a core business scenario (or the first part of it), it makes a good impression. There are so many fake test automation engineers, the chances are that your colleagues would pre-assume you so too.

Anyway, for total test automation beginners before this course, as you will see, it is not hard to do. :-)

Test Design

After a client user login,

• Go directly to a business booking page

• Click on tomorrow’s date (hard-coded)

• Select a time slot

• Enter minimal booking data to make a booking

• Assert the “Booking created successfully” text

Test Data (Login) :

Site URL: https://whenwise.agileway.net
Login (Customer): james@client.com
Password: test01

Select the business: Wise Tutoring, /biz/wise-tutoring .

Tasks

Task 1. Visit a specific URL directly

driver.get("https://whenwise.agileway.net/biz/wise-tutoring")

or

Read more

This article is one of the “Selenium Training Workbook” series, a set of bite-sized exercises. While each exercise is independent, it may require knowledge and practices covered in previous episodes.

Learning Objectives

• Multiple users log in and out.

• Review: Extract to Function & Extract to Page refactoring

• Review: Automate transformed web controls (the previous episode)

Test Design

• The business user signs in

• Go to its business setting page, set to member access only

• The business user signs out

• An existing customer signs in

• Apply for the membership for one business

• The customers signs out

• The business user signs in (again)

• Find the application for the membership

• Approve it, e.g. setting the expiry date

• The business signs out

• The customer signs in (again)

• Verify his membership

Test Data (Login) :

Site URL: https://whenwise.agileway.net
Login (Business): tennis@biz.com
Login (Customer): james@client.com
Password: test01

Knowledge Point: Use reusable helper functions for repeated common set of test steps.

For this test case, there are at least 4 user sign-ins (two different accounts).

Log in as the customer:

    driver.find_element(:id, "email").send_keys("james@client.com")
    driver.find_element(:id, "password").send_keys("test01")
    driver.find_element(:id, "login-btn").click

Login as the business user:

    driver.find_element(:id, "email").send_keys("tennis@biz.com")
    driver.find_element(:id, "password").send_keys("test01")
    driver.find_element(:id, "login-btn").click

Also, at least three user sign-outs, the same regardless of account.

driver.find_element(:id, "avatar").click
sleep 1
driver.find_element(:id, "logout-link").click

Now imagine, with 7 segments of these in one test script. Not tidy, right?

A better way is to extract the above into functions.

Read more

Learning Objectives

• Locate a Transformed Web Control

• Review: find_elements

• Review: Using XPath to go up to parent nodes

Knowledge Point: Transformed Web Control

A transformed web control is a web element that is transformed that look different from the standard ones, as shown below.

This is commonly accomplished using (on the fly) JavaScript, which conceals the original web control and replaces it with a styled control that serves the same purpose.

Although the functionality remains unchanged, the behaviour of a transformed web control can differ.

This certainly affects the automated test scripts. For starters, the element in the raw HTML source is hidden. We need to drive the newly-generated transformed control instead.

Example: Select an option in a Dropdown List

For a standard dropdown, a typical Selenium test step as below.

Read more

Learning Objectives

• Test Data Preparation

• Search-as-you-type text search and select a result

• Review: Waiting

• Review: Extract to Function refactoring

Test Design

As for any searching-related automated tests, the first thought for QA engineers is test data preparation. For example, WhenWise live search supports several modes:

• By first name, e.g. “James” for full name “James Bond”

• By last name, e.g. “Bond”

• By initials, e.g. “J B”

Also, we need to consider “No matches”, “Single result”, and “Multiple results”. In summary, you need to consider the above before writing automated test scripts.

A quick recap of the two common ways to prepare test data in automated test scripts:

• Using seeded data

• Enter new test data for this test script

Because the WhenWise test server has a built-in data reset utility, the first approach is a lot easier.

Test Data (Login) :

Site URL: https://whenwise.agileway.net
Login: physio@biz.com
Password: test01

Tasks

Task 1: Live Search

A live search box returns a list of matching results as a user types. This is achieved via AJAX.

Read more

Learning Objectives

• Click a specific button or link among several with the same text

• Review: Find multiple matching elements

• List operations (in programming)

• Review: XPath locator, going up to a parent node.

Test Design

• Navigate to the services list page

• Click the “+ NEW SERVICE” button for the “Group lesson” category

• Fill test data to create a new service and assert a successful creation.

Test Data (Login):

Site URL: https://whenwise.agileway.net
Login: coach@biz.com
Password: test01

Tasks

Task 1. Click the “+ NEW SERVICE” button under the category “Group lesson”

Read more

Learning Objectives

• Get cell text in a HTML table

• Review: Find multiple matching elements

• List operations (in programming)

• Assert a list

• Review: Test data preparation

Test Design

1. Prepare some client data

2. Perform a search

3. Click the sorting by email, wait a second or so, verify the client list is ordered.
   (Note: there are two sorting orders, ascending or descending)

4. Do the same for sorting by name
   (Note: in this app, sorting by name means by last name)

Test Data (Login):

Site URL: https://whenwise.agileway.net
Login: driving@biz.com
Password: test01

Tasks

Task 1. Get cell text in an HTML table

A typical HTML table looks like below:

<table id="clients-table'>
 <tr>
  <td> cell 1-1 </td>
  <td> cell 1-2 </td>
 </tr>
 <tr>
  <td> cell 2-1 </td>
  <td> cell 2-2 </td>
 </tr>
</table>

<td> (table data) is also known as cell.

Read more

Learning Objectives

• Test Data Preparation

• Make test data available for all test cases in one test script

• Search-as-you-type text field

Test Design

For customer name searching, we must prepare a set of person names first (for different scenarios). There are two methods:

• Using seeded data

• Enter new test data for this test script

Method 1: (pure) Seeded test data

The test script depends on the seeded test data if the app provides this utility (WhenWise does, see this article).

Pros:

• Very simple (for this test script), just use them.

• Test execution will be fast

Cons:

• Efforts to create and maintain the test data

• If there are changes to seeded client test data, this test script (most likely) will fail.

Method 2: Fresh newly created test data for this test script

Read more

In the previous episode, we created CRUD Client tests for WhenWise with database reset (my father calls it ‘The Simpsons Pattern’). However, 99.9+% web apps won’t have this database reset utility implemented. This exercise shows a typical set of CRUD tests, without database reset.

Learning Objectives

• Review CRUD Test Design, without database reset.

• Review refactoring

• Variables and Scope

• Global Variables

Test Design

We still design four test cases as a whole, putting them into a single test script file.

• CREATE
  We need to create a unique client every single time. This can be achieved using dynamicly-generated names and emails.

• READ
  Use the new client freshly created by the above test case. This means We need to remember the new client name.

• UPDATE and DELETE
  These two actually are similar to the READ — using the newly created client. DELETE must be the last test case in the script.

Test Data:

Site URL: https://whenwise.agileway.net
Login: driving@biz.com
Password: test01

Tasks

Task 1: Using Dynamic Data for CREATE

To ensure uniqueness within the system, each client must have a distinct email address. This means it has to be dynamically assigned. Thanks to Faker, it is quite easy to do so.

Read more