Тестирование производительности Ajax приложений с...

atdays.com

Performance Testing

AJAX Application with

JMeter

Vladimir Primakov

atdays.com #atdays

Agenda

AJAX

Main Difficulties of Performance Testing

of AJAX applications with jmeter and

their Solutions

Conclusions

Questions

2

atdays.com #atdays

Me

3

QA Manager at Kuadriga company.

3 years of continuous experience in automated

testing: IBM Rational Robot, Test Complete,

Selenium (RC), Jmeter.

Successfully applied server-side performance and

load testing on 4-5 different projects.

Enjoy photography, sports, and self-improvement

Profile in Linkedin:

http://www.linkedin.com/in/vladimirprimakov

Email: v.v.primakov@gmail.com

Skype: vladimir.primakov

atdays.com #atdays

AJAX - ASYNCHRONOUS JAVASCRIPT AND XML

AJAX – XMLHttpRequest + DHTML (HTML, CSS, Javascript)

4

atdays.com #atdays

Classic and Ajax Web-apps

5

atdays.com #atdays 6

Browser Client We

b-se

rve

r Data store,

backend

processing

Server Side

Classic

GUI

Classic and Ajax Web-apps

atdays.com #atdays

Classic and Ajax Web-apps

7

Http Request

Browser Client

http(s) transport W

eb

-serv

er

Data store,

backend

processing

Server Side

Classic

GUI

atdays.com #atdays

Classic and Ajax Web-apps

8

Http Request

Http Response

HTML + javascript +

CSS data

Browser Client

http(s) transport W

eb

-serv

er

Data store,

backend

processing

Server Side

Classic

GUI

atdays.com #atdays

Classic and Ajax Web-apps

9

Http Request

Http Response

Browser Client

http(s) transport W

eb

-serv

er

Data store,

backend

processing

Server Side

Classic

GUI

Browser Client

Web/

XML/

JSON

server

Data store,

backend

processing

Server Side

AJAX

GUI

HTML + javascript +

CSS data

atdays.com #atdays

Classic and Ajax Web-apps

10

Http Request

Http Response

Browser Client

http(s) transport W

eb

-serv

er

Data store,

backend

processing

Server Side

Classic

GUI

Browser Client

Web/

XML/

JSON

server

Data store,

backend

processing

Server Side

AJAX

Ajax

Engine

GUI

JavaScript

call

HTML + javascript +

CSS data

atdays.com #atdays

Classic and Ajax Web-apps

11

Http Request

Http Response

Browser Client

http(s) transport W

eb

-serv

er

Data store,

backend

processing

Server Side

Classic

GUI

Browser Client

Web/

XML/

JSON

server

Data store,

backend

processing

Server Side

AJAX

Ajax

Engine XMLHttp

Request

object

GUI

JavaScript

call

HTML + javascript +

CSS data

atdays.com #atdays

Classic and Ajax Web-apps

12

Http Request

Http Response

Browser Client

http(s) transport W

eb

-serv

er

Data store,

backend

processing

Server Side

Classic

GUI

(XML)Http Request

Browser Client

http(s) transport

Web/

XML/

JSON

server

Data store,

backend

processing

Server Side

AJAX

Ajax

Engine XMLHttp

Request

object

GUI

JavaScript

call

HTML + javascript +

CSS data

atdays.com #atdays

Classic and Ajax Web-apps

13

Http Request

Http Response

Browser Client

http(s) transport W

eb

-serv

er

Data store,

backend

processing

Server Side

Classic

GUI

(XML)Http Request

(XML) Http Response

XML/JSON

Browser Client

http(s) transport

Web/

XML/

JSON

server

Data store,

backend

processing

Server Side

AJAX

Ajax

Engine XMLHttp

Request

object

GUI

JavaScript

call

HTML + javascript +

CSS data

atdays.com #atdays

Classic and Ajax Web-apps

14

Http Request

Http Response

Browser Client

http(s) transport W

eb

-serv

er

Data store,

backend

processing

Server Side

Classic

GUI

(XML)Http Request

(XML) Http Response

XML/JSON

Browser Client

http(s) transport

Web/

XML/

JSON

server

Data store,

backend

processing

Server Side

AJAX

Ajax

Engine XMLHttp

Request

object

GUI

JavaScript

call

HTML+CSS

HTML + javascript +

CSS data

atdays.com #atdays

Classic and Ajax Web-apps

15

Http Request

Http Response

Browser Client

http(s) transport W

eb

-serv

er

Data store,

backend

processing

Server Side

Classic

GUI

(XML)Http Request

(XML) Http Response

Size - Small

Browser Client

http(s) transport

Web/

XML/

JSON

server

Data store,

backend

processing

Server Side

AJAX

Ajax

Engine XMLHttp

Request

object

GUI

JavaScript

call

HTML+CSS

Size - Big

atdays.com #atdays 16

Classic Response Request

Post HTML Page

atdays.com #atdays 17

Classic

AJAX

Response Request Post HTML Page

Request

Post

JSON Response Part of a page

a)

b)

atdays.com #atdays 18

(AJAX) JSON Response

Part of a page

a)

b)

atdays.com #atdays

Vaadin}> (GWT) Ajax framework

19

atdays.com #atdays

Vaadin}> (GWT) Ajax framework

20

Server Side

GWT

GUI (javascript)

Browser Client Vaadin

Server-side GUI

UIDL - User Interface Description Language

Web

Server

Backend

Processing

GWT widgets

Java

objects

atdays.com #atdays

Vaadin}> (GWT) Ajax framework

21

Server Side

GWT

GUI (javascript)

Browser Client

UIDL - User Interface Description Language

Web

Server

Backend

Processing

GWT widgets

Java

objects

Mirroring (GUI)

Vaadin Server-side GUI

atdays.com #atdays

Vaadin}> (GWT) Ajax framework

22

Server Side

GWT

GUI (javascript)

Browser Client Vaadin

Server-side GUI

UIDL - User Interface Description Language

Web

Server

Backend

Processing

GWT widgets

Java

objects

atdays.com #atdays

Vaadin}> (GWT) Ajax framework

23

Server Side

Vaadin

Engine (javascript)

GWT

GUI (javascript)

Java

objects

Browser Client

UIDL - User Interface Description Language

Web

Server

Backend

Processing

GWT widgets UIDL Vaadin

Server-side GUI

atdays.com #atdays

Vaadin}> (GWT) Ajax framework

24

Server Side

Vaadin

Engine (javascript)

GWT

GUI (javascript)

JSON (UIDL)

Java

objects

Browser Client

UIDL - User Interface Description Language

Web

Server

Backend

Processing

GWT widgets UIDL Vaadin

Server-side GUI

atdays.com #atdays

Vaadin}> (GWT) Ajax framework

25

(XML) Http Request

Server Side

http(s) transport

Vaadin

Engine (javascript)

GWT

GUI (javascript)

JSON (UIDL)

Java

objects

Browser Client

UIDL - User Interface Description Language

Web

Server

Backend

Processing

GWT widgets UIDL Vaadin

Server-side GUI

atdays.com #atdays

Vaadin}> (GWT) Ajax framework

26

(XML) Http Request

Server Side

http(s) transport

Vaadin

Engine (javascript)

GWT

GUI (javascript)

JSON (UIDL)

Java

objects UIDL

Browser Client

UIDL - User Interface Description Language

Web

Server

Backend

Processing

GWT widgets UIDL Vaadin

Server-side GUI

atdays.com #atdays

Vaadin}> (GWT) Ajax framework

27

(XML) Http Request

(XML) Http Response

JSON (UIDL)

Server Side

http(s) transport

Vaadin

Engine (javascript)

GWT

GUI (javascript)

JSON (UIDL)

Java

objects UIDL

Browser Client

UIDL - User Interface Description Language

Web

Server

Backend

Processing

GWT widgets UIDL Vaadin

Server-side GUI

atdays.com #atdays 28

UIDL Request (Post)

(UIDL) JSON Response

(Show Notifications window)

(Rendering Notifications window)

atdays.com #atdays 29

UIDL Request (Post)

(UIDL) JSON Response

(Show Notifications window)

(Rendering Notifications window)

atdays.com #atdays 30

UIDL Request (Post)

(UIDL) JSON Response

(Show Notifications window)

(Rendering Notifications window)

Element Type Paintable ID

Arguments

atdays.com #atdays

MAIN DIFFICULTIES OF PERFORMANCE

TESTING OF AJAX APPLICATIONS WITH JMETER AND THEIR SOLUTIONS

31

atdays.com #atdays

MAIN DIFFICULTIES OF PERFORMANCE

TESTING OF AJAX APPLICATIONS WITH JMETER AND THEIR SOLUTIONS

32

atdays.com #atdays

MAIN DIFFICULTIES OF PERFORMANCE

TESTING OF AJAX APPLICATIONS WITH JMETER AND THEIR SOLUTIONS

33

atdays.com #atdays

MAIN DIFFICULTIES OF PERFORMANCE

TESTING OF AJAX APPLICATIONS WITH JMETER AND THEIR SOLUTIONS

34

atdays.com #atdays

Typical Performance/Load Testing Stages

35

Analyze Results, Report, and Retest

Execute the Test

Configure the Test Environment

Implement the Usage Scenarios (Scripts)

Plan and Design Usage Scenarios

Identify Performance Acceptance Criteria

Identify the Test Environment

atdays.com #atdays 36

Analyze Results, Report, and Retest

Execute the Test

Configure the Test Environment

Implement the Usage Scenarios (Scripts)

Plan and Design Usage Scenarios

Identify Performance Acceptance Criteria

Identify the Test Environment

Typical Performance/Load Testing Stages

atdays.com #atdays

Problems in Details:

Typical Ajax Applications

37

Unreadable Responses/Requests

Hard to find consistency between

Responses/Requests and GUI elements

Dynamic IDs

Sequential dependency between requests

atdays.com #atdays

Problems in Details:

Vaadin (UIDL) Ajax Applications

38

The same URL for most requests(Vaadin)

Dependency on Screen Resolution (Vaadin)

Error requests are not evident (Vaadin)

Too many requests (Vaadin)

atdays.com #atdays

SOLUTIONS

40

atdays.com #atdays 41

Unreadable

Responses/Requests

atdays.com #atdays 42

1. Get used to this

format

Unreadable

Responses/Requests

atdays.com #atdays 43

2. Use JSON Viewers

atdays.com #atdays 44

3. Use JSON Parsers

atdays.com #atdays 45

4. Parse JSON Yourself

atdays.com #atdays

Hard to find consistency between

Responses/Requests and GUI elements

46

atdays.com #atdays 47

1. Use self-explanatory named IDs

(classes) for GUI elements

Hard to find consistency between

Responses/Requests and GUI elements

atdays.com #atdays 48

1. Use self-explanatory named IDs

(classes) for GUI elements

Hard to find consistency between

Responses/Requests and GUI elements

atdays.com #atdays 49

2. Use Anchors

atdays.com #atdays 50

2. Use Anchors

SAMPLE Scenario: 1. Create a ticket via email in the task management

system

2. Check that the ticket is created

3. Delete the ticket

atdays.com #atdays 51

1) Creating a ticket via email (SMTP Sampler) 2. Use Anchors

atdays.com #atdays 52

1) Creating a ticket via email (SMTP Sampler) 2. Use Anchors

2) Login into the Ticket System

atdays.com #atdays 53

1) Creating a ticket via email (SMTP Sampler) 2. Use Anchors

2) Login into the Ticket System

3) Request to show tickets

atdays.com #atdays 54

1) Creating a ticket via email (SMTP Sampler) 2. Use Anchors

2) Login into the Ticket System

3) Request to show tickets 4) JSON Response (Tickets page)

atdays.com #atdays 55

1) Creating a ticket via email (SMTP Sampler) 2. Use Anchors

2) Login into the Ticket System

3) Request to show tickets 4) JSON Response (Tickets page)

5) Checking whether the

ticket is created

atdays.com #atdays 56

1) Creating a ticket via email (SMTP Sampler) 2. Use Anchors

2) Login into the Ticket System

3) Request to show tickets 4) JSON Response (Tickets page)

5) Checking whether the

ticket is created

6) Extracting ticket ID (Regular Expression Extractor)

atdays.com #atdays 57

1) Creating a ticket via email (SMTP Sampler) 2. Use Anchors

2) Login into the Ticket System

3) Request to show tickets 4) JSON Response (Tickets page)

5) Checking whether the

ticket is created

6) Extracting ticket ID (Regular Expression Extractor)

7) Request to Delete ticket

atdays.com #atdays 58

Dynamic IDs

atdays.com #atdays 59

Put Your application into the mode with

Static IDs (Don’t forget to restore this mode

every time you run scripts)

Dynamic IDs

atdays.com #atdays 60

Put Your application into the mode with

Static IDs (Don’t forget to restore this mode

every time you run scripts)

Set specific (debug) IDs for your GUI

elements <h2 id=“AjaxPTproblems">

Dynamic IDs

atdays.com #atdays 61

Put Your application into the mode with

Static IDs (Don’t forget to restore this mode

every time you run scripts)

Set specific (debug) IDs for your GUI

elements <h2 id=“AjaxPTproblems">

Use anchors

Dynamic IDs

atdays.com #atdays 62

Sequential dependency between

requests

E.g.: IDs of all

tree elements

changes every

time I make

changes to

the tree

If dynamic IDs are

used, sequential

dependency

between requests

happens - it means

that previous actions

may influence next

actions and the order

of actions matters

atdays.com #atdays 63

Define definite initial data in the tested

application

Sequential dependency between

requests

atdays.com #atdays 64

Define definite initial data in the tested

application

Breakdown scenarios into undependable

chunks

Sequential dependency between

requests

atdays.com #atdays 65

Define definite initial data in the tested

application

Breakdown scenarios into undependable

chunks

Record scenarios from the beginning to

the end of the chunks

Sequential dependency between

requests

atdays.com #atdays 66

Define definite initial data in the tested

application

Breakdown scenarios into undependable

chunks

Record scenarios from the beginning to

the end of the chunks

Separate chunks using login/logout

(because initialization of IDs happens after

login)

Sequential dependency between

requests

atdays.com #atdays 68

Example

atdays.com #atdays 69

Rename requests during traffic recording - at once as a certain

definite action is made by you in a web-browser.

The same URL for the most requests

(Vaadin)

Rename During Recording

atdays.com #atdays 70

Define one screen resolution for your tests

and record traffic only for it

Dependency on Screen Resolution

(Vaadin)

Screen coordinates are used while accessing these buttons

atdays.com #atdays 71

Error requests are not evident

(Vaadin)

The response code for Vaadin

“Out of Sync” and other

response Errors is still HTTP/1.1 200

atdays.com #atdays 72

Put Global Response Assertion on the test plan level

atdays.com #atdays 73

Too many requests (Vaadin)

atdays.com #atdays 74

Too many requests (Vaadin)

Get used to it!

atdays.com #atdays

Other Problems

75

Difficulty to make estimations

Script creation for (full) AJAX application takes ~

3-4 times more than for Classic application

atdays.com #atdays

Other Problems

76

Difficulty to make estimations

Script creation for (full) AJAX application takes ~

3-4 times more than for Classic application

Bad Supportability (Vaadin)

If application changes in most cases you have to

recreate the affected scenarios completely.

atdays.com #atdays

Conclusions

77

atdays.com #atdays 78

Vladimir Primakov

Email: v.v.primakov@gmail.com

Skype: vladimir.primakov