Web testing

UI/UX and GUI testing

www.andersenlab.com
Lecture plan

1. Basic UI/UX Concepts 5. Client-server architecture. Its types and components

2. Basic UI Testing Checks 6. Types of servers

7. OSI models. Protocols of application layer

3. Usability testing
8. WEB testing. Types of testing
4. The concept of a web application and the benefits of
using it
UI / UX

UI (user interface - user interface) - is the point of interaction between a person and a product. Design of buttons, input
fields, etc. is where the user interacts with the system.

User Experience is the feelings experienced by the user whilst using the product, while the UI is a tool that allows
interaction between the user and the web resource.
Basic GUI elements

Windows:

● browser window
● dialogue window
● modal window
● pop-up window
Basic GUI elements

Menu:

● main menu
● pop-up menu
● context menu
● system menu
Basic GUI elements

Widgets and control elements:

● accordion
● button
● radio button
● checkbox
● icon
● list
● toolbar
● scroll bar
● slider
● status bar
● tooltip
Basic GUI elements

Let’s explore main types of mouse pointers: Unavailable pointer

Standard mouse pointer Appears when the object cannot be clicked. It is rarely used,
for example, if it is impossible to cancel the current process.
Indicates that you can perform any actions with the object:
scrolling, selection, resizing. The most popular pointer type. Text Pointer

Link pointer This pointer type shows that text information can be selected
for later copying to the clipboard.
Appears only if the object can be clicked. Appears on buttons
and links.
Basic GUI elements

Move Pointer Crosshair Pointer

The moving pointer looks like a cross with four arrows around
It is mainly used in graphic editors to highlight an object.
it. The arrows show that you can move an entire object either
up, down, or side to side.

"Hourglass" pointer
Help Pointer
The question mark indicates there is some helpful information Indicates that the current program is performing some action
to be shared with the user. and clicking on items is not available. You need to wait a while
When using a help pointer, you will often have links to show until the process goes through and the Hourglass cursor
you other areas of useful information. changes to a standard arrow.
Basic GUI elements

Browser tab:
UI testing process

GUI testing process can be divided into several steps:

● testing of visual part (GUI)
● cross browser and cross platform website testing

Cross-browser testing - is the practice of ensuring

that a website works across various browsers and
devices.

Cross-platform testing - is performed to determine

the behaviour of your application and website in
different environments, configurations and platforms.
UI testing

User Interface (UI) testing - the one that performed

by interacting with the system through a graphical
user interface:

● navigation
● colors, graphics, design
● information correct displaying
● cursor behavior and hotkeys
● displaying different amount of data (no data,
minimum and maximum amount)
● resizing the window or screen resolution
Usability

Usability is a measure of how well a specific user in a

specific context can use a product/design to achieve
a defined goal effectively, efficiently and
satisfactorily. Designers usually measure a design’s
usability throughout the development process—from
wireframes to the final deliverable—to ensure
maximum usability.

Usability Testing - is a type of user research that

evaluates the user's experience when interacting with
a website or app. It helps your designers and product
teams assess how intuitive and easy-to-use products
are. The ultimate goal of usability testing is to create
a product that solves your user’s problems and helps
them achieve their objectives with a positive
experience.
Usability

Usability Testing - is a type of user research that

evaluates the user's experience when interacting with
a website or app. It helps your designers and product
teams assess how intuitive and easy-to-use products
are. Main activities:

● design
● navigation
● consistency
Compatibility testing

Compatibility testing is a type of software testing to

check whether your software is capable of running
on different hardware, operating systems,
applications, network environments or mobile
devices. Compatibility types:

● Hardware
● Operating systems
● Software
● Network
● Browser
● Devices
● Mobile
UI testing

Basic UI checks:

● The appearance of elements when the browser window ● Selected items are highlighted
is reduced + the appearance of a scroll ● Uneditable fields differ from editable ones
● Correct spelling of text + text must be aligned ● Design unification (color, font, size)
● Correctness of moving focus in a window (Tab / ● If necessary, there should be tooltips
Tab+Shift) ● Changing the appearance of an element when hovering
over it
UI testing

Additional checks for web forms

Text field Checkbox

● Check text selection with Ctrl+A / Shift+arrow ● Enable checkbox either by clicking on it or using space
● Long text input validation button
● Location next to the corresponding text
Radio-button
Drop down
● Location next to the corresponding text
● Switching buttons using the keyboard ● Scroll functionality should be available if list of items is
too long
Pop-up
● Items should be in alphabetical order (text), or by asc
● Position in the center of the window
order (numbers)
● An item should be highlighted if it is selected
UI testing

Basic checks UI checks

● Location, size, color, width, length of elements; the ● Text and web forms alignment
ability to enter letters or numbers ● Pictures quality
● Whether the functionality of the application is ● Check the location and display of all elements at
implemented using graphic elements different screen resolutions, as well as when resizing
● Placement of all error messages, notifications (as well the browser window (check if a scroll appears)
as the font, color, size, position and spelling of the text) ● Check text for spelling and punctuation errors
● Font is readable ● Check tooltip appearance
● Transition of the mouse pointer to different shapes after ● Design unification (colour, fonts, text of messages,
hovering over different element types button names, etc.)
UI testing

Most common bug cases

● mouse pointer does not switch to the ‘pointer’ state ● change of text size after language switch
when hovering over active element ● wrong web forms alignment
● spelling and grammatical errors ● Not unified fonts
● not aligned input fields in forms ● Selected elements don’t differ from not selected
● wrong displaying of elements after screen resolution elements
change or page scale
UI testing

What are the requirements to pay attention to when

testing UI?

● Requirements for placing control elements on screen

forms
● Requirements for the content and design of output
messages
● Input format requirements
● Requirements for the system response to different user
inputs
● Requirements for response time to user commands
Chrome Extensions

For UI testing can be used the following

Chrome extensions

● Screen Ruler
● What Font
● ColorZilla
● Perfect Pixel
● IE Tab
● Spell Checker
● Grammarly
Page ruler

Page Ruler is an extension that helps you measure

the height, width and margins of objects by simply
overlaying a ruler on top of them and dragging it in the
desired direction.

This is a very useful extension for web UI testing as it

helps you find invisible defects and make sure your
application is perfect down to the last pixel.
What Font

What Font - allows you to check cosmetic defects like

the type and size of the font on the page.

This extension makes it easy to search for fonts. Just

hover over any font and it will show you exactly which
font is applied here.

In addition, the extension provides the ability to

determine whether the font belongs to the category of
free or premium fonts, and whether it is in the Google
Fonts or Typekit database.
ColorZilla

ColorZilla allows you to determine directly from the

browser what specific color is used on your page. A
useful extension when you need to check the actual
colors used against the specification.

In addition to using the selected color in your projects,

this can also be useful if you need to know the exact
color regardless of the monitor, in case the latter is
not calibrated.
Perfect Pixel

Perfect Pixel is analogue of Photoshop, allows you to

overlay a translucent image on top of your page right
in the browser and conduct a pixel-by-pixel analysis.
Spell Checker

Spell Checker - spell checking extension. Checks if

the words on the page are spelled correctly and offers
to make corrections for misspelled words, supports
12 languages, it is possible to add your own words to
its dictionary.
Grammarly

Grammarly is an application that helps with text

proofreading, checks spelling and grammar, and
highlights errors right in the browser.
What is web application?

Web application is a client-server application where the

client interacts with the web server.

The web application logic is distributed between the server

and the client, data is stored mainly on the server,
information exchange is happening over the network.

An advantage of this approach is that clients are

independent of the user's specific operating system, so
web applications are cross-platform.
Advantages of web applications

Distribution cost is less

Easy access to desired Platform Independence
compared to desktop
information
applications

Easy support Vast availability

Client-server architecture

Client-server architecture is a computing or network

architecture in which the network load is shared between
service providers (servers) and service customers (clients).
Types of client-server architecture

1 tier architecture also known as single-tier architecture, is

referred to that kind of software architecture in which all the
GUI (presentation
required components for the working of application are services)
available under the same package.

It means that the user interface, business, layers are

accessible by the application under the same local drive. Application System
Both the client and server reside in the same machine. It is services A
the simplest application architecture used. But this tier is
not suitable for a web application. As it can only access
data available in a single computer or server. Database
services
Types of client-server architecture

2 tier architecture is the one in which the user interface

layer and the database layer are located in two different
machines. It means that the client and the server are not GUI (presentation
on the same computer. services)

The client, which is the user side device gives the System
A
instructions. Then the server which stores all the data and
information is asked to provide the required data or make Application
services
changes in the existing data.

It is easy to maintain and modify the 2 tier application

architecture. Even the communication between client and
Database System
server in the form of request and response is very quick.
services B
But the disadvantage with this architecture is that, if the
number of clients crosses the capacity then the server
finds it unable to respond to the requests made by clients.
Types of client-server architecture

The previously noted shortcomings and limitations of the

two-tier architecture led to the emergence of a three-tier
client-server architecture with an application server. GUI (presentation System
services) A
The business logic layer in this architecture is implemented
primarily on the application server. Such an organization of
the computational process provides the following
advantages. Application
services System
1. The application server has the ability to manage a pool of B
connections to the database, and therefore the number of
simultaneously established connections to the database
Database System
server can be reduced (one connection can serve several
services C
clients).
Types of client-server architecture

The business logic layer in this architecture is implemented

primarily on the application server. Such an organization of
the computational process provides the following GUI (presentation System
advantages. services) A
1. To make application update requires reinstalling it only
on the application server.
Application
2. The requirements for the configuration and performance services System
of workstations ("thin" clients) are reduced, which reduces B
the cost of building a system.

Database System
services C
Architecture comparison

The 2-tier architecture is simpler, since all requests are

served by one server, but at the same time because of this
it is less reliable and imposes increased requirements on
server performance.

A 3-tier architecture (a special case of a multi-tier one) is

more complicated, but due to the fact that functions are
distributed between servers of the second and third levels,
this architecture represents:

● high degree of flexibility and scalability

● high security (because security can be defined for each
service or layer)
● high performance (since tasks are distributed between
servers)
Architecture components

Client 1

request

Client 2 Web server SQL

Database server
response

Client 3
Architecture components

● web client provides a user interface

● network and communication software – this is all kinds
of equipment, data channels and software used to
transfer requests and responses from a client to a server
Client 1
and vice versa through network protocols
● web server processes requests from client according to
request
its inner business logic Web
Client 2 SQL Database
● DB server is responsible for storing, access, security and server server
response
backup samples of the data it stores
● scripts (if necessary) - take data from the database and
Client 3
return it to the client
Server types

● web server is a system for managing and distributing

application resources
● database server is a component that provides storage,
processing and provision of information to the user
Client 1
● proxy server is an intermediate server in computer
networks that acts as an intermediary between the user
request
and the target server Web
Client 2 SQL Database
● firewall is a device or program designed to filter (permit server server
response
or deny) network data transmission, based on a set of
rules
Client 3
OSI model

OSI (Open System Interconnection) — a model that

describes how different network protocols interact with
each other.

Network protocol — a set of rules and actions (sequence

of actions) that allows connection and data exchange
between two or more devices included in the network.
OSI model

OSI TCP / IP (DOD)

7 Application layer

6 Presentation layer 4 Application layer

5 Session layer

4 Transport layer 3 Transportation layer

3 Network layer 2 Internet

LLC
2 Data link layer
MAC
1 Network Access layer

1 Physical layer
OSI model

OSI
1. Physical layer
7 Application layer
At the first layer of the OSI model physical signals (current,
light, radio) are transmitted from the source to the recipient. At
6 Presentation layer
this level, we operate with cables, pins in connectors, coding
of ones and zeros, modulation, and so on.
5 Session layer
Network devices that belong to the first level are hubs and
repeaters - that is "stupid" pieces of iron that can simply work 4 Transport layer
with a physical signal without delving into its logic..
3 Network layer

2 Data link layer

1 Physical layer
OSI model

OSI
2. Data link layer
7 Application layer
At the second level, we operate with the concept of “frame”.
Here the first identifiers appear - MAC addresses. They consist
6 Presentation layer
of 48 bits and look something like this: 00:16:52:1f:03.

The channel layer is complex. Therefore, it is conditionally 5 Session layer

divided into two sublevels: LLC ( Logical Link Control) and
MAC (Media Access Control). Devices such as switches and 4 Transport layer
bridges live at this level. By the way! The Ethernet standard is
also here. It is comfortably located on the first and second 3 Network layer
layers of the OSI model.
2 Data link layer

1 Physical layer
OSI model

OSI
3. Network layer
7 Application layer
The network layer introduces the term "routing" and the” IP
address”. At this level traffic is routed. If we want to get to the site
6 Presentation layer
wiki.merionet.ru, then we send a DNS request and receive a
response in the form of an IP address and substitute it into the
5 Session layer
packet.

His Majesty the router lives here :) 4 Transport layer

3 Network layer

2 Data link layer

1 Physical layer
OSI model

OSI
4. Transportation layer
7 Application layer
Transportation layer ensures data transfer over the network. The
main start here are TCP and UDP. The difference is that each
6 Presentation layer
transport layer is used for different categories of traffic.

Principle is the following: 5 Session layer

● TCP (Transmission Control Protocol) ensures control of data

4 Transport layer
transfer
● User Datagram Protocol (UDP) is a communications protocol
that is primarily used to establish low-latency and 3 Network layer

loss-tolerating connections between applications on the

internet. UDP speeds up transmissions by enabling the transfer 2 Data link layer

of data before an agreement is provided by the receiving party.

1 Physical layer
OSI model

OSI
5. Session layer
7 Application layer
The session layer is what manages connections/sessions. An
example is the SMPP protocol (Short message peer-to-peer
6 Presentation layer
protocol), with the help of which well-known SMS and USSD
requests are sent. And the last example: PAP (Password
5 Session layer
Authentication Protocol) is an old protocol for sending a
username and password to a server without encryption.
4 Transport layer

3 Network layer

2 Data link layer

1 Physical layer
OSI model

OSI
6. Presentation layer
7 Application layer
At the sixth layer the message format conversion happens such
as encoding or compression. JPEG and GIF live here, for example.
6 Presentation layer
All images that you see on the screen are transmitted when
sending the file in the form of small portions of ones and zeros
5 Session layer
(bits). So, when you sent a photo to your friend, the SMTP
Application Layer protocol sends the photo to the lower layer, i.e.
4 Transport layer
to the presentation level. Where your photo is converted into a
convenient form of data such as bits (ones and zeros).
3 Network layer

2 Data link layer

1 Physical layer
OSI model

OSI
6. Presentation layer
7 Application layer
In exactly the same way, when your friend starts receiving your
photo, he will receive it in the form of all the same ones and zeros,
6 Presentation layer
and it is the Representation layer that converts the bits into a
full-fledged photo, such as JPEG.
5 Session layer
This is how this level works with protocols (standards) for images
(JPEG, GIF, PNG, TIFF), encodings (ASCII, EBDIC), music and
4 Transport layer
video (MPEG), etc.

3 Network layer

2 Data link layer

1 Physical layer
OSI model

OSI
7. Application layer
7 Application layer
The application layer is the one with which the user actually
interacts with. Whenever you interact with an application on your
6 Presentation layer
computer, you are active at the application level.

For example, if you are using Google Chrome or Skype, then you 5 Session layer
are interacting with the application at Layer 7. This layer uses
protocols such as HTTP, Telnet, and FTP. In short, this layer is 4 Transport layer
focused on end user processes and delivery of any application
that the user wants to access. 3 Network layer

2 Data link layer

1 Physical layer
Application layer

OSI
Application layer protocol examples:
7 Application layer
● HTTP - Hyper Text Transfer Protocol
● HTTPS - Hyper Text Transfer Protocol Secure
6 Presentation layer
● DNS - Domain Name System
● FTP - File Transfer Protocol
5 Session layer
● POP3 - Post Office Protocol v.3
● IMAP - Internet Message Access Protocol
4 Transport layer
● RTSP - Real Time Streaming Protocol
● SSH - Secure Shell
3 Network layer
● IRC - Internet Relay Chat

2 Data link layer

1 Physical layer
Network protocols

HTTP/HTTPS

HTTP is a protocol for fetching resources such as HTML

documents
HTTPS (HyperText Transfer Protocol Secure) - is the
secure version of HTTP, which is the primary protocol used
to send data between a web browser and a website.
HTTPS is encrypted in order to increase security of data
transfer.
Network protocols

Software for working with the HTTP protocol is divided into

three broad categories:
● Servers as the main providers of information storage
and processing services (request processing)
● Clients - end users of server services (sending a
request)
● Proxies (intermediaries) for executing transport
services
WEB testing

Web application testing includes a large number of types

of testing, both functional and non-functional.
Examples:

● Functional testing
● Usability testing
● Stress Testing
● Cross-browser and cross-platform testing
● Security testing
Developer tool

The developer tool allows you to quickly analyze the

content and resources of a web page, view errors, execute
commands, check the value of variables, and much more.
How to open developer tools:

● Mac OS - Ctrl+Cmd+I
● Windows - F12
● Linux - Ctrl+Shift+I
DevTools Settings

Interface theme

You can customize the developer tools and change their

appearance - for example, choose a dark interface design

Hotkeys

There is a list of hotkeys in the settings - we advise you to

familiarize with them as knowing these combinations will
greatly speed up your work.
DevTools Settings

Panel arrangement

In the right upper corner there is a button that is

responsible for the location of the panels. DevTools
can be at the bottom, left, right, and we can also detach
the debugger and work with it in a separate window.
Elements tab

With its help, you can track the elements and their
properties on the page, you can edit styles and check
the layout for overflow.
How to get information about an element?

There are three ways to get information about any

element on the page - choose the most convenient for
you.
Through the inspector

The method is convenient if you can see the element

and can right-click on it. Select Inspect or View Code.
At the same time, the developer panel will immediately
open.
Elements tab

Search by elements

With the debugger opened, press Ctrl+F, and a

search bar will appear at the bottom of the
tag, attribute, class, or text content of the
element. Let's introduce, for example, the
header class, and we will see all the matching
elements.
Elements tab

Visual search

When the debugger is running open the

visual search mode, find the desired
element and click on it.
Elements tab

Make adjustments of the page

elements

If you want to edit an attribute, class,

or text of an element, double-click on
the desired point and make changes.

Press Tab to move forward, Shift+Tab

to move backward, and press H to hide
an element.
Elements tab

Checking layout for symbols

overflow

How to check that the layout will not

fall apart if the number of elements
changes drastically? Let's do overflow
tests.
Text overflow check.

There are two ways:

Find the element, double click and add

text. The easiest way is to copy the
content and paste it multiple times.
Elements tab

Open the Console tab, paste the

command
document.body.contentEditable = true,
press Enter.
Now you can edit any text element on
the page directly.
The corrected text will remain until the
page is reloaded and will not affect the
site in any way.
Elements tab

What to pay attention to?

When adding text, elements must be

stretched vertically, the text must not
crawl out of the element's margins, fall
out or be cut off.
Block overflow

We find the parent block, which

contains the necessary elements and
edit the markup, add a few blocks, apply
the changes and look at the result.
The grid should not break when
overflowing, and the logic of the flow
should be preserved.
Elements tab

Viewing and editing CSS styles

Style information is located on the Styles tab.

Styles specified by the developer are displayed to
the right.
The screenshot on the right shows the browser
styles applied to the element. They may differ
depending on the selected browser. And here are
the inherited styles.
The block with metrics (in the screenshot) is
actually at the very bottom - you need to scroll the
list to the end.
Elements tab

Changing styles right in the browser

Any rule can be edited, and the sizes of

elements can be changed directly in the
block with the metric. For example, let's
redefine the font size value, and the
result will immediately appear on the
screen.
Elements tab

Element colour data

For elements with the color property the color

can be easily changed. For this you need to use
an eyedropper. You can choose any color from
the interface or specify a color in RGBA or HSL.
Console tab

The console displays information about errors in the code, and you can also enter a command there, and it will be executed.

If fonts, pictures or styles are not loaded on the page, then error messages are displayed here. In the upper right corner of
DevTools, warning icons will appear that will open a console window.
Also, all errors in the JavaScript code will be displayed here, indicating the file and the specific place in it where the error
occurred.
Sources tab

Now let’s look at the Sources tab.

This tab displays all resources connected with this page.

Most frequently this tab is used during code debugging.
For example, this is what a minified CSS file looks like on
the Sources tab. To view the file in a more familiar way,
click on the icon with curly braces at the bottom of the
window:
Network tab

By using Network tab you can find out how long

the page took to load, which resources
connected or did not connect to the page, and
much more.
When you first open the tab, it may be empty -
then just reload the page. After reloading, a
table of all resources connected to the page
and data about them will appear at the bottom.
Here you can find out the type of request that
was sent to get the resource, the status of the
response, the size of the resource, and more.
Network tab

Usually Network tab is used to know the

resource state that can’t be displayed on the
page due to some reason but connected to it.
Let’s look at the table and if there is any error
occurred the resource will be highlighted in red.
If there is no errors the status code of each
request will be 200.
The error will be displayed in the Console tab if
error exists in the code.
Network tab

If you click the filter button, you will be

able to see how certain resources are
loaded, such as images or fonts.
In the lower left corner - information
about the number of requests, traffic
and download time is displayed.
We can also choose the connection
speed and check how the site works
on mobile devices somewhere outside
the city.
Application tab

Application tab is aimed to inspect and

clean up all loaded resources, including
IndexedDB or Web SQL databases, local
and session storage, cookies, application
cache, images, fonts, and style sheets.
Key features:

● quick cleaning of storages and caches

● inspection and management of
storages, databases and caches
● inspection and deletion of cookies
Adaptive mode

Simulation of layout testing on mobile

devices
It's easy to check how the layout looks
on mobile devices. We go into
emulation mode and that's it - we can
change the screen width, select a
specific device (for example, an iPhone),
view all media expressions applied to
the page, or select the pixel density to
check the retina graphics.
This is an indispensable tool in working
with adaptive layout.
Adaptive mode

Page screenshots

Another great feature is possibility of

page screenshots. We go into
emulation mode and select “take a
screenshot” in the drop-down menu -
the image is immediately saved to the
computer.
It is also possible to take a screenshot
of the entire page - to do this, select the
Capture full size screenshot option.
Thanks for watching!

Royal Plaza, 24th floor, Pobediteley Ave, 7A,

Minsk, 220004, Belarus

www.andersenlab.com