Level 9 Testing of WEB - applications

No time to explain, just quickly find out what a Web application is and let's test it!

Web application definition

A Web application is an application that users access using a Web browser through the Internet or Intranet.

A web application is a system that usually includes a set of scripts located on a web server and interacting with databases and other sources of dynamic content

We will call Web applications any applications that provide a Web interface.

Web Application Definition

Web application features

The user uses a Web browser to interact with the server. The user does not communicate directly with the server

The server and browser communicate by sending requests to each other using the standard protocol (HTTP / HTTPS)

Only a web browser can initiate a connection

User interaction is usually carried out using form elements and submitted requests, most often GET or POST

These steps are separated by uniquely identifiable calls from the browser to the application.

The standard view (HTML / XHTML) is used to describe the interface

Differences between a Web application and a regular application

The web interface is displayed not by the application itself, but by the standardized browser engine

The web browser takes over all user interaction and accesses the web application only if it's necessary

Web application dynamically generates a series of Web
documents in a standard format (e.g. HTML) that is supported by browsers

Web Application Features

Differences between a Web application and a regular application

Web browser. The principle of communication with a Web server

A web browser is software for viewing Web sites, i.e. to request Web pages, their processing, output and transition from one page to another

Only a browser can initiate a connection to a web server

A web browser sends a request (in one of the languages, such as JavaScript or VBScript) via one of the access protocols (HTTP, HTTPS). For example, show such and such a file. In response to the request, the server sends the file that the user receives

On the Web browser side, dynamic elements are added to the user interface

Typically, each Web page is delivered to the user as a static document, but the sequence of pages can provide a dialogue with the user through data processing, which the user can enter into Web forms inserted into the page

Web form examples

The principle of communication with a Web server

Example of browser communication with a web server

1. The user clicks on the link, the browser sends a request to the server and waits for a response: Browser -> Server

2. The server runs the script, sends the result to the browser and shuts down: Server -> Browser

3. The browser displays the page, “browsing” it for links that must be requested from the server (<img src>, <script src> tags, etc.) and sends the corresponding requests: Browser -> Server, Browser -> Server ...

4. The user fills out the form and clicks on the button: Browser -> Server

5. The server processes the form, writes the data to the database and sends the browser the Location header: Server -> Browser

6. The browser, having received this header, requests the specified page: Browser -> Server

7. The server is making a request ... and so on.

Web UI Facts

At the moment when the user sees the page in front of him and begins to perform some actions with it, the Server has already completed the work!

And the user interacts not with the Server, but with his HTML page, which he received in the browser

The result of the script on the Server in most cases is plain text - the text of the HTML page, which is given to the browser and displayed to it as normal HTML

The client requested - the server gave.

From here it becomes clear the answer to the question of whether is it possible to know exactly how many users are currently on the site. It is impossible. Because there is not one "on the site". They connect, request a page, and disconnect.

Web application as a client-server application

S-3RO, a question for you. Can you answer? What is needed to interact with a web application?

I certainly do not like boasting, but I know the answer to this question.
For interaction it is necessary:
hosts (client and server);
interactive software; implemented interaction protocols.
Well, how are you?

Great job, S-3RO. Maybe you can tell me what a Web server is?

It's easy, a Web server is a service that receives and processes HTTP requests.
By the way, very often the functionality of a Web server is expanded, bringing it to the level of an application server.
Here, see an example of applications compiled in one service:

Mine also knows about client-server interaction!
The client (user agent) in most cases is a Web browser that issues requests to the server and this initiates a connection.

The main function of the browser:

Rendering (representation of HTML code
Secondary functions:
- Simplification of navigation (back, forward, history, bookmarks);
- Data caching;
- The presence of an email client;
- The presence of an HTML editor and WEB inspector, etc.

What do you know about web page rendering?

My know nothing about it ...

And boasted! .. Okay, I’ll tell you how everything happens. Consider the sequence of the browser when displaying a document:

The DOM (Document Object Model) is formed from the HTML document received from the server.
Styles are loaded and recognized, CSSOM (CSS Object Model) is formed.
Based on the DOM and CSSOM, a rendering tree or render tree is formed - a set of rendering objects (Webkit uses the term “renderer” or “render object”, and Gecko uses “frame”). The Render tree duplicates the DOM structure, but invisible elements (for example, <head> or elements with the style display: none;) do not fall here. Also, each line of text is represented in the rendering tree as a separate renderer. Each rendering object contains the corresponding DOM object (or block of text) and the style calculated for this object. Simply put, render tree describes the visual representation of the DOM.
For each render tree element, the position on the page is calculated - layout occurs. Browsers use the flow method, in which in most cases one pass is enough to place all the elements (more is needed for the pass tables).
Finally, all this stuff is rendered in the browser - painting.

In the process of user interaction with the page, as well as the execution of scripts, it changes, which requires the repeated execution of some of the above operations.

Web application as a client-server application

Client Server Application Architecture

Client-server - a network architecture in which devices are either clients or servers

The client is the requesting machine, the server is the machine that responds to the request

Both terms (client and server) can be applied to both physical devices and software.

When conducting testing, it is advisable to imagine the configuration of the system in which the tested Web application is running in order to more effectively address problems

Understanding system configuration adds significance to error description

Client Server Application Architecture

Three-tier client-server application architecture

Three-tier architecture is a variant of client-server architecture in which UI, business logic, data access and data storage are developed and function as independent modules, often on different platforms

The standard three-tier architecture of the organization of the content management system consists of a data warehouse, an application server and a client part

Two-tier client-server application architecture

Two-tier architecture - rejection of the application server. In this case, the most frequently requested data by the user is not stored in the database, but in the form of already formed static information pages

This approach allows you to abandon the chain "receiving a user request - database query - generating the requested page - providing the generated page to the user"

This avoids rebooting the server hardware resources and significantly reduces the load on the database

Obviously, this solution is not suitable for organizing large corporate portals designed to provide not only effective information management, but also the organization of the workplace of an enterprise employee.

Web browser as a thin client

In computer technology, a thin client is a network client computer with a
client-server architecture that transfers the majority of information processing tasks to the server

This distinguishes a thin client from a fat client, which, on the contrary,
It processes information independently of the server, using the latter
mainly for data storage only

A thin client in most cases has a minimal hardware configuration, sometimes without a hard drive

An example of a thin client is a computer with a browser,
used to work with a web application

During a user session, the Web browser interprets and
displays pages and acts as a universal thin client for any Web application

Are you tired?

No time to rest, follow further

Web browser as a thin client

The structure of a Web application using the example of a Web portal

Content is controlled by content management systems

CMS allows you to control the text and graphic content of the Web application, providing the user with convenient tools for storing, navigating and publishing information

Now there are many ready-made content management systems for the site, including free

A set of services and applications (interactive training courses, knowledge control tools, information exchange tools, registration, etc.) As well as personalization tools and

access control

The content of the portal

Search engine and

resource link directory

WEB application structure

Functionality on the client and server

Functionality is implemented both on server and on client side

Functionality implemented on the client side, as the rule is:

- input validation

- implementation of additional interface features,
what is implemented by using script HTML Embedded Features

In addition to scripting capabilities, there are other tools
functionality extensions such as ActiveX technology,
Macromedia Flash et al., Which interact with
Web-application using its own mechanisms

Functionality on the client and server

Technologies based on code execution in a client application

AJAX (Asynchronous JavaScripting and XML):

Eliminates the need to reload the Web page and allows you to load and convert the necessary information on the fly

Not an independent technology, but an idea. AJAX is one of DHTML concept components

Example: Facebook news feed

DHTML or Dynamic HTML:

This is a way to create an interactive website using a combination of:

static HTML markup language

JavaScript Embeddable Scripting Language

CSS (Cascading Style Sheets)

DOM (Document Object Model)

It can be used, for example:

for easier navigation or to give interactivity to forms

to dynamically move items around the screen

can serve as a tool for creating browser-based video games

DHTML applications are completely autonomous in a browser without server support

An example - http://despiration.wix.com/pechenka

Java-applets:

This is a non-self-contained software component, built-in and executable in a browser window - special Java applications, the link to which is embedded in a Web page

Applets can run on all platforms for which there are java virtual machines

Due to the endless security vulnerabilities in applets, the technology has practically died. Chrome no longer supports it.

An examples - http://www.echoecho.com/freejamenus02.htm. Only works in firefox

Macromedia Flash for animation

Adobe Flex

Flex is a large set of classes that extend the capabilities of Flash. The Flex-framework includes features for localization, application styling, development of a modular application, built-in validators and text field formatters - all those tools that developers of online applications need.

Flex Facts:

This is the technology for creating Rich Internet Applications
A technology akin to Flash and based on the description of an interface using an XML dialect - the so-called MXML (a declarative interface description language used by the Adobe Flex platform)
In addition to the interface, it also allows you to describe specific actions of the application
The result of compiling Flex is a swf file executed by Flash Player which is embedded in the browser

Good example - http://albert-elrom3.wix.com/qa-exam

Well, you have a few minutes to gather your thoughts, look out the window or feed the cat, eat a cookie. Congratulations, you have a legal break!

They say knitting helps give the brain a good rest

Differences of Flex from Flash and advantages of Flex:

Flex expands Flash's core capabilities by allowing you to describe the XML application interface, speeding up and simplifying the process of developing rich web applications

Flex charting components made easy to use. Example - Google Analytics Charts

Flex 2, in addition to the development speed, provides the full multimedia features of the Flash Platform: including streaming video, sound, supports data transfer to clients

AJAX can work with Flex

JavaScript:

Web browser-interpreted programming language - code embedded in an HTML page in scripting languages such as typeScript and JavaScript, capable of executing Java applets and controls

Initially used primarily for creating behavior scenarios of browser, currently evolved and implements full-fledged programs, both on the client side and on the server side

An example of rendering space with JS http://maxogden.github.io/voxel-perlin-terrain/

ActiveX:

This is the code interpreted by the browser, executed in its own address space

Web pages may contain links to ActiveX controls, which are dynamically loaded libraries that run in the browser address space

At the same time, unlike Java applets, the execution of ActiveX controls in general is not subject to any restrictions on access to files and other resources of the operating system and network

Deprecated and underused

Technologies Based on Web Server Code Execution

CGI (Common Gateway Interface) - A common gateway interface used to connect an external program to the application’s Web server. Usually these are console applications that generate HTML code that is passed to the browser. How it works:

Access to them - by specifying their name (parameters) in the URL

It’s important that web clients may not necessarily be browsers, they may be
any programs using the HTTP protocol

The input information is the content of the HTTP header or the request body,
in depending on the protocol used

They can be code in scripting languages, or an executable file,
which can be created using almost any development tool

Technologies based on Web Server Code Execution

I think we need to figure out what HTTP is?

HTTP (“Hypertext Transfer Protocol”) is a protocol for the application level of data transfer (initially - in the form of hypertext documents in HTML format, it is currently used to transfer arbitrary data). The basis of HTTP is the client-server technology, that is, the existence of consumers (clients) who initiate a connection and send a request, and suppliers (servers) who wait for a connection to receive a request, perform the necessary actions and return a message with the result.

Technologies Based on Web Server Code Execution

Servlet

Servlet - CGI programs written in Java that have the best performance characteristics and the ability to maintain state (sessions)

A servlet is a program that extends the functionality of a Web server by dynamically generating content and interacting with Web clients using the request-response principle

Servlets are automatically supported by most web servers

Servlets are widespread in the implementation of Web services

Library-based Web applications: e.g. ISAPI or DSO

The problem of limited performance of Web applications can be solved by creating an application in the form of libraries loaded into the address space of a Web server

Placement within the Web page of the code executed by the Web server:

ASP.NET technology - the ability to process events on the server that occur in the client application. ASP.NET is part of .NETFramework, and therefore provides access to all the features of this platform.

JSP technology (Java Server Pages) - a one-time compilation of Java code (servlet) when it is first accessed, execution of the methods of this servlet and putting the results of these methods into a data set sent to the browser

PHP technology (Personal Home Pages) - the use of CGI applications that interpret script code embedded in an HTML page. Ease of development and accessibility for various platforms (more will be described later)

Web services

Advantages of Web services:

Provide interoperability of software systems regardless of platform

Based on open standards and protocols

Using XML makes Web services easy to develop and debug

Disadvantages of Web services:

Less performance and more network traffic through the use of XML text messages
Recently, there has been a massive appearance of applications using Web services, including those intended for end users

Such applications, for example, include Microsoft Office applications.
System, allowing using Web services to use:

data from dictionaries, encyclopedias,

online translation systems,

online ordering services

The principles of construction and work:

Callable commands are described in WSDL

Direct activation of commands occurs in the form of sending SOAP messages to the address where the service is located (using the standard HTTP protocol)

To search for a Web service, there are global or local (internal) directories that support standard UDDI discovery services (UDDI directory)

Universal Discovery, Description, and Integration) of a Web service

WSDL (Web Services Description
Language) - XML Web Services Front-end Description Language

(Simple Object Access Protocol)- XML Based Messaging Protocol

Dynamic Web Environment

When during the procedure the value of the attribute of a specific environment does not remain constant, this leads to the fact that the operating environment becomes dynamic

Web environment can rightfully be attributed to dynamic environments

Modifiable parameters of a dynamic Web environment:

Specifically for the resource:

Available RAM
Disk space

Specifically for timing:

Network timeout
The order of committed user transactions

When the test case depends on the exact reproduction of both the set of actions and the operating environment, and the environment cannot be reproduced (in accordance with its dynamic nature), then the error becomes unplayable or difficult to reproduce

Web Markup Languages

HTML markup language (HyperText Markup Language) is the publishing language used in the Web environment - WWW (World Wide Web)

HTML is not a programming language in the broad sense - you cannot create a full-fledged application with it

HTML provides authors with the means to:

Publications of electronic documents with headings, text, tables,
lists, photos, etc.

Click to download electronic information hypertext link

Developing forms for performing transactions with remote services,
for use in information retrieval, reservation, ordering products etc.

Includes spreadsheets, video clips, sound bites and
other applications directly into documents

If you are interested in the HTML topic or you need deeper knowledge in the place where you are going to work: HTML reference and HTML tutorial to help you

Dynamic Web Environment and Markup Languages

Markup Language Modifications

XML (eXtensible Markup Language) - language "simplified version of SGML. XML does not limit us in creating custom markup elements

SGML is the most common and most complex of the meta-languages. It was widely used in the printing and publishing industries, but its complexity made it difficult to widely disseminate it for everyday use. He became the progenitor of the meta-languages used.

HTML - well defined
(via w3c standard - www Consortium) subset (sublanguage) SGML It is rigidly structured

markup language of web pages, but it is syntactically “soft” language: it allows a lot of “liberties”, for example: lack of closing tags, attribute values of elements without quotes, case insensitive and so on

XHTML (eXtensible HyperText Markup
Language — extensible hypertext markup language) is a syntactically “rigid subset of XML. XHTML - the same HTML, but not allowing these syntactic "liberties", for example, in XHTML all elements must be closed, Boolean attributes are written in expanded form

Modern technology is HTML 5

HTML5 has become a necessary, forced evolution of the language in which web pages are written. It was designed to write web applications (the so-called dynamic interactive web pages on which you can do something). Its predecessor, HTML4 (classic HTML) can only create static components like: images, tables, lists, text, and more, while modern media development requires interactive components that can respond to user actions in real time.

It can compete with plug-ins like Microsoft Silverlight and Adobe Flash, which themselves were created to close holes in the fossilized HTML4 standard.
HTML5 has many new syntax features. For example, the elements <video>, <audio> and <canvas>, as well as the ability to use vector graphics and mathematical formulas. These innovations are designed to simplify the creation and management of graphic and multimedia objects on the network without the need for third-party APIs and plug-ins.

Other languages in the Web environment

DHTML (Dynamic Hyper Text Markup Language - is an extension of the HTML language that allows you to create Web pages with such interactive elements as:

moving background located under the static content of the document

moving objects, drop-down menu, buttons, highlighted
when you hover over the mouse, animation, running titles, etc.

JavaScript - is a language for writing programs executed by the browser. It is the standard for Dynamic HTML. For security reasons, it is unable to influence anything other than the browser. It has no means of accessing the computer’s disk, except for the cookie record.

JavaScript - significantly expands the capabilities of a document created in this format

A module written in JavaScript is integrated into the HTML file as a subroutine

It is called for execution from the corresponding line of HTML code using a standard command. May exist as a separate file

PHP is a programming language specially designed for creating server applications

It is very widespread due to its rich capabilities and ease of use.

Because PHP is one of the most common languages for creating and managing WEB sites in this article the principle of the operation of this server-side web language is examined in detail, this is an extra-curricular reading for you: ')

DTD Scheme (Document Type Declaration)

For a complete exchange of information, it is necessary to agree and somewhere to fix which particular markup elements will be used, with which properties and in what order. This is called a document schema, or document type declaration.

The DTD schema tells the validator which version of (X) HTML is used, defines the structure of the document, element types, its properties and data types

DTD can be stored both in the document itself or in a separate file

Linking HTML / XML-document with an external DTD-scheme is carried out by a special directive <! DOCTYPE> in the document header:

<!DOCTYPE HTML PUBLIC ―-//W3C//DTD HTML 4.0//EN‖―http://www.w3.org/TR/REC-html40/strict.dtd‖>

Here and now, open the page source and make sure that the HTML document type is <! DOCTYPE html>

URI concept

URI - this is a universal resource identifier

A universal resource identifier is a very broad concept.

There are no requirements for its format - there is only a requirement for its uniqueness

Examples: the IP address of the computer on the network is http: // http: //54.174.211.229/, the full address of this page is http://www.qaacademy.net/#!level9/g7m0g

The concept of URL and URN

Each resource on the Web has an address that can be encoded using the Universal Resource Locator, or URL

URL - this is a URI that, in addition to identifying a resource, also provides information about the location of this resource

URL — a subset of URIs with a clear format:

URL usually consist of parts:

naming scheme of the mechanism used to access the resource (protocol)

name of the machine on which the resource is located (host)

the name of the resource itself, specified as a path

fragment id

So, we can assume that:

URI = URL or URI = URN or URI = URL + URN. In this case, the URI can indicate both the location of the resource (URL) and its name (URN). And it may contain both. That is, URLs and URNs are special cases of URIs.

There is nothing better than a concrete example:

URI = http://www.qaacademy.net/#!blank-4/mcjbf

URL = http://www.qaacademy.net

URN = #!blank-4/mcjbf

DTD Scheme. URI, URL, URN

HTTP / HTTPS protocols. Port concept

HTTP protocol (HyperText Transfer Protocol - Messaging goes according to the usual scheme:

Request
Answer

HTTPS — an HTTP protocol extension that supports encryption. Unlike HTTP (standard port is 80), for HTTPS, TCP port 443 is used by default

Port - the number of the program on the server (in order to distinguish between programs running on the same host). Port numbers up to 1024 are reserved (the standard establishes the correspondence of the most common services for some numbers), numbers from 1025 to ~ 65000 are for free use

Ways of communicating browser with server

This is asked at the interview

Actually, the communication methods provided by the HTTP protocol are few.

The browser can send information to the server in the following ways:

GET - data is transmitted in the address bar, for example, when the user clicks a link

POST - when the user clicks a button in the form

Cookie - if the server has set a cookie and it has not expired, the browser sends it every time the server is accessed

HTTP authentication - if the server requested HTTP authorization, then the browser will send the entered username and password with each call

HTTP / HTTPS protocols. Port

HTTP request syntax

Standard http request scheme:

For example:

GET /index.html HTTP/1.0

User-Agent: Mozilla/4.05 (WinNT; 1)
Accept: image/gif, image/x-xbitmap,
image/jpeg, image/pjpeg, */*

Basic HTTP request methods:
GET, POST, HEAD

Request Methods GET, HEAD

GET

Request for information located on the server at the specified URL

GET request content body is always empty

Example:

GET /cgi-bin/birthday.pl?month=august&date=24 HTTP/1.О

HEAD

Similar to the GET method, except that there is no body in the server response. The HEAD query is typically used to retrieve metadata, check for the availability of a resource (URL validation), and see if it has changed since it was last accessed.

Request application:

document change time
document size
type of document

HTTP requests

POST

The POST method allows you to send data to the server in a client request

The data sent to the server is in the body of the contents of the client request

URL encoding is used as the encoding scheme with the POST method

Example:

POST /cgi-bin/birthday.pl HTTP/1.0
User-Agent; Mozilla/4.05 (WinNT; 1)

Accept: image/gif, iinage/x-xbj.tmap, image/jpeg, J.mage/pjpeg, */*

Host: www.ora.com

Content-type: application/x-www-form-ur.lencoded
Content-Length: 20

month=august&date=24

Other HTTP request methods

LINK

Associates header information with a document on the server

UNLINK

Unlink header information from the document on the server

PUT

Puts the body of the content of the request at the specified URI

DELETE

Deletes data on the server at the specified URI

OPTIONS

Request information about server communication parameters.

To request data about the entire server as a whole, instead of a URI

request should use *

TRACE

Requires the content body of the request to be returned without
changes. Used for debugging

POST Request Methods

Server responses

The server responds to a client request as follows:

The first part of the server response is a status bar containing three fields: HTTP version, status code, and description:

НТТР/1.0 200 OK

After the status bar, the server passes information headers to the client:

Date: Fri, 10 Jan 1998 08:17:58 GMT
Server: Apache/1.2.6

Last-modified: Mon, 12 Jun 1997 21:53:08 GMT
Content-type: text/html

Content-length: 2482
<empty line>

If the client request is successful, then the requested data is sent

Range of codes

Response Value

100-199

Informational

200-299

Customer Request Successful

400-499

Customer request is incomplete

300-399

Client request redirected, further action required

500-599

Server errors

HTTP server response codes

Cookies in HTTP

This is a small piece of information that the server passes to the client.
The client (browser) will store this information and transmit it to the server with each request as part of the HTTP header

Cookie setting:

HTTP header

Set-Cookie: NAME=value; EXPIRES=date; DOMAIN=domain_name; PATH=path;
SECURE

HTML

<META HTTP-EQUIV="Set-Cookie"
CONTENT="NAME=value;

EXPIRES=date;

DOMAIN=domain_name;

PATH=path;

SECURE―>

Cookie settings:

expires=DATE

Cookie storage time, date in format WDY, DD-Mon-YYYY HH:MM:SS
GMT, after which the cookie expires. If this attribute is not specified, the cookie is stored for one session, until the browser closes.

domain=DOMAIN_NAME

The domain for which the cookie value is valid. Default uses the domain name of the server from which it was exposed cookie value

path=PATH

This attribute sets the subset of documents for which really cookie value

secure

If there is such a token, then the cookie information is sent only through HTTPS (HTTP using SSL). If this marker is not specified, then the information is sent in the usual way.

Cookies policy:

In case cookie accepts a new value with an existing cookie with matching NAME, domain and path, the old value is replaced with the new one. In other cases, new cookies are added.

Using expires does not guarantee the safety of cookies for a specified period of time, since the client (browser) can delete the record due to lack of allocated space or any other limits.

The client (browser) has the following restrictions:

In total, up to 300 cookie values can be stored.

each cookie cannot exceed 4KB

up to 20 cookies can be stored from one server or domain

Server responses

HTTP Cookies

Video cookie instruction

HTTP Authentication

Types of Authentication:

None (no authentication)

HTTP basic authentication

Form-based authentication

Client-certificate authentication

Digest authentication

Authentication Headers:

WWW-Authenticate:Basic realm=―Protected zone‖ (upon receipt of this header, the browser displays an authentication window)

HTTP/1.0 401 Unauthorized (output of a page with a message about unsuccessful authorization)

HTTP/1.0 403 Forbidden (output page with a message about the inability to access the page)

Authentication

Web Application Requirement Collection Specifics

Classification of requirements for Web applications:

Functional: determine the functionality of the system with which
users could complete their tasks as part of their business processes

Non-functional: represent a description of the characteristics of the application that are important for the user when working with the system:

Application Reliability Requirements
Application Performance Requirements
Security requirements
Scalability requirements

Non-functional requirements for Web applications can be considered the Web standard

- W3C - WWW Consortium: http://www.w3.org/standards/

Non-functional requirements for a Web application:

Application reliability requirements:

Determined by the operating conditions of the application (server parameters, the maximum number of users of the application) and acceptable indicators of the quality of the system in these conditions (the processing time of a user request to the system, the number of system failures)

Application Performance Requirements:

Performance is defined as the average processing time for a user’s request to the system. The maximum acceptable response time for Web applications is 5 seconds.

Web application security requirements:

Differentiation of access rights to functions and data of each component of the Web application

Control access level of components and / or users

User authorization and verification

Scalability Requirements:

This is the ability of the system to increase its performance under increased load and adding resources. For the user of the scalable Web application, the moment should remain invisible (i.e., the response time of the system to user requests should not noticeably change) when the load increases (for example, several more users access the application at the same time), and when changing the application configuration, for example if an additional data processing component is added

Specific requirements collection

Web risk management

Risk management project management is a process that helps to determine how the appearance of certain risks associated with the Web environment will affect the project

Working with risks involves identifying, analyzing, planning and tracking them. This process should be addressed before starting work on the project.

Infrastructure and information transfer methods always carry a certain risk, which is important to consider when creating, testing and managing a Web application

Clear action plans must be in place to ensure the safety of each item that contains potential hazards.

Keep in mind possible updates, revisions, the appearance of new versions, releases and anything that may become outdated or cause increased danger

Causes of Risks in the Web Environment

The causes of risks in the Web environment can be:

Operating system

Hardware

Software

Browser

Internet Service Provider

Server

Client

Login Scripts
Error logging

Hypertext Transfer Protocol - HTTP

Transmission Control Protocol/Internet Protocol - TCP/IP

Information Resource Addresses (URLs)

When you risk taking a stale kefir

Example of accounting and risk analysis

Subject of analysis

Risks

Links (HTML):

Incorrect links may not allow your site to function properly. If the links are not updated (not relevant), navigating the site may become problematic

Spelling (HTML)

If the site contains important information, but it is not properly designed or understood, visitors will not use your site

Meta Tags (HTML)

If your site is not registered in search engines, people will not be able to find out about its existence.

Headings(HTML)

If the title is ordinary and not interesting, and the name of your resource says nothing to visitors - there will be difficulties in promoting the site in search engines

Forms (Active Elements)

If visitors after filling out the form do not receive any response, they will consider your site untrustworthy and will not use

Scripts (Active Elements)

If the site has not been tested for specific errors in scripting languages (JavaScript and VBScript), visitors will receive many error messages and stop using the site

XML (Active Elements)

If the documents are not formed correctly, you may encounter errors, which means that the site will not make a good impression

Domain Name (Site)

If the information contained in the domain name is not true, your site will not be able to get a lot of traffic

Ease of use (Site)

If the site is not convenient to use, visitors will find other alternative sites on the Web

Performance (Site)

If you do not work correctly with the elements of the network infrastructure, you will have problems when deploying the site and hosting

Source Control (Site)

The guarantee quality of - only with an understanding of the features of using forms, scripts, databases and any sources from which the site requests information

Server Log Files (WWW)

Use to get rid of malfunctions, maintain the integrity of the site and prevent interruptions in its operation

Web standards

An application / website built according to Web standards is the following of standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG, etc.) and the best proven solutions:

valid code
available code
semantically correct code
friendly urls

For example http://www.qaacademy.net/#!level9/g7m0g, non friendly URL friendly would be http://www.qaacademy.net/level9

In other words, an application / site built to standards should ideally be:

well structured code. The entire html document should have a clear hierarchy, each logical block should be wrapped with div tags
Clean (with valid code), when working with the site you need to check the console all the time, errors thrown into the console are crashes in the program, which means bugs
CSS based. All color, font, padding and other parameters should be described in the style of the component
Search Engine Friendly (SEO). SEO is a separate large section not related to testing. But we are only interested in the functional aspects of SEO.
- As testers, we check whether the website version is opened for robots (seo version) by adding a parameter to the url ? _Escaped_fragment_ = SEO version version does not contain styles, is not intended for users and contains only key search phrases and website pictures
- Is there a site map for indexing by a search engine.
- Is there a robots.txt file that indicates site parameters for indexing by search bots

The following are recommendations for testing Web applications using the Web standards checklist method.

Management of risks

Web standards

Web Standards Checklist Recommendations

Using:

Can be applied, supplemented and expanded taking into account the specifics of a specific Web application

For example - do the pages have the correct Doctype (DTD)?

A declaration must be present at the beginning of each web page.
Markup and CSS will fail validation if the document does not have Doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml">

Are pages encoded (charset)?

If the browser cannot independently determine the encoding of the Web page, visitors will see unreadable text on the screen.

Content-Type: text/html; charset=utf-8

How to work with web inspector

Web inspector is the main tool for web tester. With its help, they detect many bugs and analyze all of them. After all, often an obvious functional bug is accompanied by a console error that will help to understand its cause. More about this in the video tutorial.

Practice

To feel the knowledge of testing, you must use it in practice. Do all the tasks on the list for the site and send them to me. You may need to view the tutorial video above to complete this quest.

Find out which document title of the site
Find out the doc type
Learn the encoding of the site and google what kind of encoding
Find out which favicon (icon for the browser tab), and give a link to the picture
Open SEO version of the site
Open mobile site version
Buy chichas cookies !, find out the font name
Find out the exact size of the cake icon
Give the URL of the picture from the gallery with cakes on the main page
Find the "Cookie Name" in the request for registration on the site (you need to register)
Find out the product id when buying cookies. Example: "id": "338211591"
Find out the HTML code for the color of the button on the main one. Color example: # CA7D08.
Find out the html code of the background color on the site
Measure the average site load time in 10 attempts using the page speed monitor application

Site

Form

level test

Level 10

You need to get at least 14,4 points (60%) for tasks of level 9 to get to level 10

Practice