Soutenance mémoire
LAYOUT BUGS
A layout-based bug is a defect in a web system that has visible effects on the content of the pages served to the user. This content can be anything observable by the client, including the structure of the page’s DOM and the dimensions and style attributes of elements. Hence, unless it has observable effects on the client, we exclude from this definition anything that relates to the inner workings of the application: obviously any server-side state information (session variables, back-end database contents), but also any reference to client-side code, such as values of variables in local JavaScript code. In a nutshell, layout-based bugs are those that can be detected by client-side black-box testing.
This section shall first show that, although seemingly mundane, layout-based bugs are widely present in a large number of real-world applications and web sites. It will then demonstrate how, although based on page layout, bugs of this kind are not limited to simple, static presentation problems, and can in many cases reveal defects in the behaviour of the application.
A first category of bugs consists of disruptions in the layout or presentation of the page itself. By disruption, we mean any property of the page (position, size, number of elements) that contradicts the appearance or content expected by the designer for that page.
NON-LAYOUT BUGS
While not being layout problems per se, several other bugs can be detected by analyzing the contents and layout of a page. We shall see in the following pages that some of them even relate to the expected behaviour or functionality of the application, yet can still be detected through rules expressed on a single static snapshot of the application’s viewport.
MOJIBAKE AND ENCODING PROBLEMS
Several sites and applications incorrectly handle string data outside 7-bit ASCII. Various character encodings, such as Cp1252 or UTF-8, can be used to represent so-called “accented” or “foreign” characters. However, the same character may be represented by a different binary value according to the encoding scheme being used; worse, some encodings, such as UTF-8, may use multiple bytes to represent a single character.
ESCAPING PROBLEMS
Escaping problems occur when strings with special characters fail to be properly encoded or decoded between two applications. The most frequent manifestation of this problem is when reading and writing character strings to a database. Some characters, such as the apostrophe, require to be doubled so as not to be confused with a string delimiter. Problems occur when a system fails to replace double apostrophes by single ones when displaying that data in a form. When saving the form contents back to the database, each apostrophe will again be doubled, resulting in quadruple apostrophes when reloading the page next time, and so on. Hence looking for multiple apostrophes in a form can be used to detect incorrect escaping inside the source code.
RESPONSIVE WEB DESIGN BUGS
A few years ago, access to websites was conditioned by assumptions about the size of the device’s screen. Desktop computers were designed to access websites with minimal window sizes, so if the size of the viewport was smaller than the supported size, the site would appear broken. Nowadays, an alternative approach is needed for proper site operation in a range of different viewport appliances and sizes.
StatCounter statistics dating from October 2017 show that the percentage (56.7%) of Internet users in the world via mobile devices and tablets is higher than the percentage (43.3%) of Internet users via desktop computers (StatCounter, 2017). Thereby, site design must now take into account any device category depending on the size of the screen.
However, the rapid change of device properties could not be followed by web developers. They continued making assumptions from the client’s request. The request for a resource through a browser was followed by a user agent string to identify the type of browser used. Reading the user agent string on the server side causes the release of two versions: a mobile version designed for a maximum width and a desktop version designed for minimum width. Although the approach has many shortcomings, there was unfortunately no better technique. Among its defects, the fact that it does not fit with new devices entering the market, such as tablets that are somewhere in the middle of mobiles and laptops in size, brings the need for another special version for the site. In addition, other versions of the site must be developed in order to satisfy all user devices.
BEHAVIOURAL BUGS
Contrarily to a traditional web application, a Rich Internet Application (RIA) makes use of emerging modern web technologies such as AJAX (Garrett, 2005), Flash, and Silverlight. Therefore, novel testing problems are added to the existing problems in web testing field. An important characteristic of these applications is that they are inherently stateful: their code can store persistent data on the client (using WebStorage, CSS properties, JavaScript variables and objects) and on the server (using cookies, session storage and databases). Moreover, the state of the application is dispersed across a number of elements, and cannot simply be assimilated to the current page’s URL (shown in the browser’s address bar). Features such as asynchronous communication, delta updates, client side DOM manipulation, event handlers and timing (Arora and Sinha, 2012) make it possible to change the state of the application, without either requiring a full reload of a page, or changing the page’s URL. A positive consequence of these features is that such an application can provide a richer (hence its name) user experience; without cookies and JavaScript, mundane operations such as shopping cart manipulations, user sessions (login/logout) and the like would not be possible. However, the presence of a state in the application also introduces the possibility for inconsistencies in the state displayed from one page to the next. These problems are called behavioural bugs, as they are the consequence of multiple pages interacting with each other and coming in a certain order
|
Table des matières
Introduction
1 Bugs in Web Applications
1.1 Layout Bugs
1.2 Non-Layout Bugs
1.3 Responsive Web Design Bugs
1.4 Behavioural Bugs
2 Related Work
2.1 Testing Tools
2.2 Visual Techniques
2.3 Declarative GUI Specifications
2.4 Crawlers
2.5 Manually Testing Responsive Web Design
3 Cornipickle: A Web Application Testing Tool
3.1 A Declarative Layout Language
3.2 A Tool for Verifying Layout-Based Specifications
4 Tools and Applications Using Cornipickle
4.1 Using Cornipickle With a Crawler to Verify Behavioural Bugs
4.2 Using Cornipickle with a Crawler to Verify Responsive Web Design Bugs
Conclusion
Bibliography
