User Interface Testing. What is UI Testing and Why it is so important?

UI is the visual part of a software application that determines how a user interacts with an application, or a website, and how information is displayed on the screen. The UI contains buttons, menus, text fields, and other controls that the users interact with when using an application.
In this presentation, you will read what UI testing is, and why it is so important, also by designing and creating a UI automated test with a practical and easy example.

1. © 2022 Maveryx srl.
All rights reserved.
User Interface Testing
What is User Interface Testing and Why it is so important?

2. © 2022 Maveryx srl.
All rights reserved.
Summary
•What is a User Interface (UI)
•What are UI Tests
•UI Automated Tests Pros and Cons
•Design & Development of a UI test (with an example)
•Conclusion

3. © 2022 Maveryx srl.
All rights reserved.
What is a software UI?
•A User Interface (UI) is the visual part of a software application
that determines how a user interacts with an application or a
website and how information is displayed on the screen.

4. © 2022 Maveryx srl.
All rights reserved.
UI elements
•The UI layer contains the buttons, menus, text fields and all other
controls that users interact with when using an application.

5. © 2022 Maveryx srl.
All rights reserved.
UI by technology
Android
Java
Web
Windows

6. © 2022 Maveryx srl.
All rights reserved.
The UI Design Process
Creating prototypes Converting the prototype
into a refined product
•User Interviews
(requirements
gathering)
•Marketing research
•Competitive
analysis
•…
Final validation

7. © 2022 Maveryx srl.
All rights reserved.
What is User Interface Testing?
•UI Testing is the process of verifying the application’s user interface
•to determine that it satisfy specified (and implicit) requirements
•to demonstrate that it is fit for purpose
•to detect defects

•UI tests check an application via the user interface, in the same
way an end user would.

•UI tests mimic user's actions such as clicking on a control, entering
text, scrolling a page, … checking that the software/UI does what it
should.

8. © 2022 Maveryx srl.
All rights reserved.
User Interface Testing as E2E testing
Service Service Service
U
I
/
E
2
E

t
e
s
t
i
n
g database
User
Interface
•UI tests are very powerful
because they go "end-to-end"
from the UI layer down.

End-to-end means testing all the
different parts of an application
from beginning (the user
interface) to end (the underlying
services, the database
connectivity, etc.).

9. © 2022 Maveryx srl.
All rights reserved.
The Test Pyramid
•The Test Pyramid is a metaphor that tells
us to group software tests into buckets
of different granularity.

•It gives an idea of how many tests we
should have in each of these groups.

•On the bottom of the pyramid, there
are unit tests that run fast and strongly
isolate the tested system parts. On the
top there are UI tests that are slow and
require little isolation.

10. © 2022 Maveryx srl.
All rights reserved.
What is User Interface Testing? Pro &
Cons
•PRO.
•UI tests execute in a way that simulates user interacting with the system →
Closed to real end-user scenarios
•UI tests walk through all the layers of the application-under-test, checking
key application workflows

•CONS. UI tests tend to be slow and fragile.
•Slow. Those tests are slower (e.g., respect to unit tests) because they go
through more layers of the application-under-test → Slow feedback to the
team.
•Fragile. They could be brittle if they are tightly coupled to the user
interface: the smallest change in UI or functionality can break one or more
tests

11. © 2022 Maveryx srl.
All rights reserved.
Design UI tests step-by-step
•A sample "Login" application to learn how writing UI tests

12. © 2022 Maveryx srl.
All rights reserved.
•To start writing your first UI test, think
about what a user would do to log
into the system:

First, she would have to navigate to the
login page.
Once there, she would enter her username
and password.
Next, by clicking the Sign In button she
would logging in into the system.

Design UI tests: test use case

13. © 2022 Maveryx srl.
All rights reserved.
•The test case will result in the following steps:

1.navigate to login page
2.check the login page URL
3.check the username field is editable
4.enter (valid → allowed chars) username
5.check the username is correctly inserted
6.check the password field is editable
7.enter (valid → allowed chars) password
8.check the password is correctly inserted
9.check Sign-in button is enabled
10.click Sign-in button
11.check for presence of the ‘Welcome!’ string

Design UI tests: the test steps

14. © 2022 Maveryx srl.
All rights reserved.
Design UI tests: a simple test case
format
Test Step (/input) Expected Output
1.Navigate to the Login demo page at
https://https://localhost:8080/login
The Login demo page is opened at URL
https://localhost:8080/login

2.Enter valid Username  "John Smith" The username field is filled with the value “John Smith"
3.Enter valid Password  "tZ3!Sz@C" The password field is filled
4.Click Sign In button
The Welcome message is displayed at
https://localhost:8080/welcome
This test case can be executed manually ("as is") or automatically.

15. © 2022 Maveryx srl.
All rights reserved.
Design UI tests: automation
•To automate it, we will use
MAVERYX and Java.
•MAVERYX is an automated
functional testing and regression
testing tool. This software
provides automated testing
capabilities for functional,
regression, GUI, data- &
keyword-driven testing.
•It supports a range of
applications, including web-
based, .NET, Java, and more.

16. © 2022 Maveryx srl.
All rights reserved.
/* start Chrome browser */
Bootstrap.startApplication("Chrome");

GuiBrowser browser = new GuiBrowser();

/* navigate to login page */
browser.navigateTo("https://localhost:8080/login");

/* check the login page URL */
assertEquals("https://localhost:8080/login", browser.getPageURL());

Assertions (like assertEquals) are truths about our
software we may want to check.
Test script analysis (1)

17. © 2022 Maveryx srl.
All rights reserved.
/* the Username text field */
GuiText username = new GuiText("Username");

/* check the Username text field is editable */
assertTrue(username.isEditable());

/* enter username */
username.setText("John Smith");

/* check the Username text field has the entered username */
assertEquals("John Smith", username.getText());
Test script analysis (2)

18. © 2022 Maveryx srl.
All rights reserved.
Test script analysis (3)
/* the Password text field */
GuiPasswordText password = new GuiPasswordText("Password");

/* check the Password text field is editable */
assertTrue(password.isEditable());

/* enter Password */
password.setText("tZ3!Sz@C");

/* check the Password text field has the entered password */
assertEquals("tZ3!Sz@C", password.getText());

19. © 2022 Maveryx srl.
All rights reserved.
Test script analysis (4)
/* the Sign in button */
GuiButton ok = new GuiButton("Sign In");

/* check the Sign in button is enabled */
assertTrue(ok.isEnable());

/* click the Sign in button */
ok.click();

/* the Welcome message */
GuiHtmlElement message = new GuiHtmlElement(AccessibleRoleMaveryx.WEB_H1);

/* check the Welcome message text */
assertEquals("Welcome!", message.getText());
* assertEquals("Welcome!", message.getText()) allows cheking for spelling mistakes...
** you could also add a check on the Sign in button foreground color

20. © 2022 Maveryx srl.
All rights reserved.
Design UI tests: invalid test cases
•Starting from this UI test, you can create other (invalid) tests:

1.Username is left blank →
2.(you should check the error message and also the foreground color)

3.Password is left blank →

4.If Username requires only letters and numbers, enter
username = "J@hn Smith"; → expected “Jhn Smith” (@ not typed)

5.Enter invalid username and password → login failed (“Welcome!” text not
displayed)

6.…

21. © 2022 Maveryx srl.
All rights reserved.
Conclusion
•UI Testing is the process of checking the application’s user interface for
conformance to specifications and to detect failures early.
•UI testing is “synonym” of end-to-end testing, as UI tests slice through all
the layers of an application (front-end/presentation, business, database…)
•To write UI tests, testers should think about what a user would do with the
system.
•This type of testing also includes
•testing size, position, width, height of UI elements
•testing the messages that are getting displayed
•testing the colors of UI elements and messages
•testing the spelling of all labels
•...