HTML5 Testing
Trường: Đại Học Công Nghệ Đại Học Quốc Gia Hà Nội CÔNG TRÌNH DỰ THI GIẢI THƯỞNG “SINH VIÊN NGHIÊN CỨU KHOA HỌC” NĂM 2012 Tên công trình: HTML5 Testing Họ và tên sinh viên: Đỗ Đức Bình Nam, Nữ: Nam Nguyễn Lý Nam Nam, Nữ: Nam Đỗ Vũ Tuấn Nam, Nữ: Nam Lớp: K53CA Khoa: Khoa Học Máy Tính Người hướng dẫn: PGS. Nguyễn Việt Hà ThS. Vũ Quang Dũng Hà Nội, ngày 21 tháng 3 năm 2012. 2 Abstract Our project mainly focuses on HTML5 testing. There are some parts of our framework as following: 1. Web page layout dependency testing - Testing of tags of HTML5 such as tags for SVG, <div> - Testing the visualized layout in UI, that matches the need of displayed data. 2. Behavior user testing of using data - Trigger the use operation of web data - Training the frequency of user behavior data - Apply probability in frequency data for unseen data 3 Table of Contents I. Problem 4 A. Introduction 4 B. Motivation and Objectives 4 II. Solution 5 A. Supposition 5 1. Input: 5 2. Output: 7 B. Knowledge Base: HTML5 Syntax rules 9 1. The DOCTYPE 9 2. Elements 9 3. Text 12 4. Character references 12 C. Solution: Proposed Algorithm 15 1. Component diagram 15 2. Activity diagram 16 3. Sequence diagram 17 III. Experimental results: 22 IV. Conclusion 24 V. Future works 24 V. References 25 4 I. Problem A. Introduction HTML5 was pioneered in 2004 by Web Hypertext Application Technology Working Group. The HTML5 specification was published the First Public Working Draft on Jan-22- 2008. It introduces some new significant capabilities such as - Offline database storage: Faster interactivity and stronger offline applications. - Canvas support for 2D graphics animations without the need to use Adobe Flash or MS Silverlight. - Embedding and controlling audio and video content. So HTML5 is being set up with the expectations of a very powerful markup language. To be successful, a new markup language not only needs support from browsers, it also needs tools that support authoring. Authoring-side tools include editors, content management systems and quality assurance tools for checking the correctness of markup. B. Motivation and Objectives a) Structure of web testing: Web authors may able to make mistakes when they write HTML documents. The vast majority of HTML documents on the web are incorrect in their syntax. Google produced a test of the HTML5 parsing algorithm on several billion documents indicated that 93% of documents had errors on the lowest level of syntax. The remaining documents with 7% may well have higher-level errors that cannot be founded by the parsing algorithm and would require a full conformance checker to find. b) User behavior evaluation in using data: Currently, user behavior evaluation of using data is quite important. The reason is that when we evaluate user behavior of using data well, we can classify data types which users frequently using such as images, audio, text fields, after that, we can focus on data fields with higher grade and spend much resource on these data fields. It also is useful for SEO (Search Engine Optimization). Generally, people often use statistical method to evaluate user’s behavior. However, it is quite difficult to process with a large number of records and the refreshing of data. To combat with this problem, in our research, we proposed a method for evaluating user’s behavior and frequency in using data with probability formula and Naive Bayer Classifier. 5 II. Solution A. Supposition 1. Input: a) Structure of Web Testing: A pure HTML5 file or pure HTML5 source code Figure 1. HTML5 source code sample b) Data areas pattern: + At client side: data areas or links which are operated with users 6 Figure 2. Data areas at HTML5 web client However, making corpus at client side is quite difficult and it is not safety. We propose another way to make input. When users operate at client side (such as move on different areas, click a link), it means that select data from database at server side. This way has some limitations for example, when user manipulate with a link at navigation area – not be selected from server, we can not control this action. + At server side (database): records which are specified by necessary fields. 7 Figure 3. Records at database 2. Output: a) Structure of Web Testing: The syntactically errors in given HTML5 code 8 Figure 4. Checking syntax output sample b) User behavior evaluation in using data: The first colum is ID of record. Other colums are the probability for each class. Each class is specified with other frequency of user behavior in using data. ID of record Class 1 Class 2 Class 3 …………… … 1 12% 67% 3% …………… … 2 56% 1% 17% …………… … 3 30% 30% 30% …………… 9 … …………… … …………… … …………… … …………… … …………… … Figure 5. User behavior evaluation output sample B. Knowledge Base: HTML5 Syntax rules a) Structure of Web testing: HTML5 Documents must consist of the following parts, in the given order: 1. Optionally, a single U+FEFF BYTE ORDER MARK (BOM) character. 2. Any number of comments and space characters. 3. A DOCTYPE. 4. Any number of comments and space characters. 5. The root element, in the form of an html element. 6. Any number of comments and space characters. 1. The DOCTYPE A DOCTYPE must consist of the following components, in this order: 1. A string that is an ASCII case-insensitive match for the string "<!DOCTYPE". 2. One or more space characters. 3. A string that is an ASCII case-insensitive match for the string "html". 4. Optionally, a DOCTYPE legacy string or an obsolete permitted DOCTYPE string 5. Zero or more space characters. 6. A U+003E GREATER-THAN SIGN character (>). 2. Elements There are five different kinds of elements: void elements, raw text elements, RCDATA elements, foreign elements, and normal elements. - Void elements area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr - Raw text elements 10 script, style - RCDATA elements textarea, title - Foreign elements Elements from the MathML namespace and the SVG namespace - Normal elements All other allowed HTML elements are normal elements. Raw text, RCDATA, and normal elements have a start tag to indicate where they begin, and an end tag to indicate where they end. The start and end tags of certain normal elements can be omitted. Void elements only have a start tag; end tags must not be specified for void elements. Foreign elements must either have a start tag and an end tag, or a start tag that is marked as self-closing. Void elements can't have any contents (since there's no end tag, no content can be put between the start tag and the end tag). Raw text elements can have text, though it has restrictions described below. RCDATA elements can have text and character references, but the text must not contain an ambiguous ampersand. There are also further restrictions described below. Foreign elements whose start tag is marked as self-closing can't have any contents (since, again, as there's no end tag, no content can be put between the start tag and the end tag). Foreign elements whose start tag is not marked as self-closing can have text, character references, CDATA sections, other elements, and comments, but the text must not contain the character U+003C LESS-THAN SIGN (<) or an ambiguous ampersand. Normal elements can have text, character references, other elements, and comments, but the text must not contain the character U+003C LESS-THAN SIGN (<) or an ambiguous ampersand. Some normal elements also have yet more restrictions on what content they are allowed to hold, beyond the restrictions imposed by the content model and those described in this paragraph. 2.1. Start tags Start tags must have the following format: 1. The first character of a start tag must be a U+003C LESS-THAN SIGN character (<). [...]... diagram a) Structure of Web testing: Figure 6 Component Diagram of HTML5 Syntax Checker b) User Behavior Evaluation in using data: 16 Figure 7 Component Diagram of User Behavior Evaluation in using data 2 Activity diagram Structure of Web testing: 17 Figure 8 Activity diagram of HTML5 Syntax Checker 3 Sequence diagram Figure 9 Sequence diagram of HTML5 Syntax Checker Explanation: a) HTML5 Syntax Checker Input... Experimental results: 1 HTML 5 Syntax Checker: That is not matched with HTML5 DOCTYPE: HTML5 does not has tag name like: hea HTML5 23 Header Subtitle HTML5 Rocks! HTML5 does not has tag name like: h ... Explanation: a) HTML5 Syntax Checker Input Reader: the component to read in html5 source code from html5 input file and store it in a variable as a string It is seen as a component but just contains a class with the same name 18 Document Type Definition: this component stores all defined data type of html5 language Html5 doctype, html5 tag names and their attributes are located and arranged in the best... people with disabilities 25 - Finding layout bugs: this is about automatic detection of layout bugs in web pages V References [1] HTML5 Syntax: http://www.whatwg.org/specs/web-apps/currentwork/multipage/syntax.html#syntax [2] HTML5 Specification: http://www.w3.org/TR /html5/ [3] HTML5 Standard Document: http://www.whatwg.org/specs/web-apps/currentwork/multipage/ [4] HTML Document Type Definition: http://www.w3.org/TR/html401/sgml/dtd.html... http://www.thesitewizard.com/webdesign/htmlvalidation.shtml [9] Clean up Your Web Page: http://www.w3.org/People/Raggett/tidy/ [10] Finding layout bugs: http://code.google.com/p/fighting-layout-bugs/ [11] HTML5 Syntax: http://www.tutorialspoint.com /html5/ html5_syntax.htm [12] Behavior-Based Web Page Evaluation