20 WhenWise Login Tests

Click Transformed Controls and Use XPath Sibling to locate an element that is not easily identifiable.

Learning Objectives

• Click the Transformed LINK

• Use XPath Sibling to locate an element that is not easily identifiable.

• Review Refactoring: Extract Function, Move to Helper, Move

Test Case #20

Typical user login test cases (login OK and login failed), design-wise, are the same as our session #4 (for the AgileTravel site).

Different from AgileTravel, WhenWise is a real app that people run their businesses on it. (Of course, we are only testing against its test server instance).

In other words, from this session, you will put the knowledge and practices learned in the previous session against real-world test scenarios.

As expected, compared to AgileTravle, you will see some extra but common login elements on the WhenWise Login page, such as "Remember Me”. Please note we will not test the “remember me” business feature. Just focus on the basic login scenarios, but I will ask you to click the ‘remember me’ box.

Tasks

Create a test project in TestWise (introduced in session #1). Then write test steps one by one (as in previous sessions).

Task 1. Click the Transformed LINK

As usual, we start authoring a test step by inspecting the target element first.

The “SIGN IN” button and its HTML fragment.

The link text is 'Sign in'(in HTML), which is different from what we see (UPPER CASE) in the browser. The reason: the displaying of this link text is transformed by CSS:

li#sign-in-list-item>a {
  text-transform: uppercase;
}

In Selenium, which link text should we use? “Sign in” or “SIGN IN”? The answer: “SIGN IN”.

driver.find_element(:link, "Sign in").click  #Fail
driver.find_element(:link, "SIGN IN").click  # OK

Basically, with ‘Link Text’, we use the text that we see on the page.

Task 2. Click the Transformed CheckBox

The “Remember me” checkbox is not a standard HTML checkbox. Rather, it is a transformed one that looks different.

We can locate the element by ID. However, are unable to click it.

the test step failed as the element is not clickable (running in TestWise Debug mode)

A simple explanation is that the check box element ‘#remember_me’ is there, but it is somehow covered by a layer of UI (made by JS/CSS). We need to locate that the click it. We know it is feasible as we can do it manually. Manually clicking the ‘Remember Me’ text checks the checkbox. But how?

Knowledge Point: XPath Tree

The solution is to find the label next to the checkbox. Let’s look at the inspected HTML fragment (left in the image below).