Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-27T21:59:42Z

Jbatty: /* 3) Extend the page generation tool with a bunch of additional strategies, such as: */

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

==Introduction==
This Mozilla project was broken in to 2 main parts: the previous work and the work to be done. The previous work was finished as a part of the OSS project. As a part of the OSS project (explained more below) we created a tool which generates random valid HTML files and automated servo. [https://en.wikipedia.org/wiki/Servo_(layout_engine) Servo] is experimental web browser developed by Mozilla to "to create a new layout engine using a modern programming language". By automating servo (the web browser) we were able to quickly see if servo could render the randomly generated pages.

The goal of this final project was to build off the original project while adding more features. The work we completed as a part of this project is split into a couple main parts. First, we extended the program created in the OSS project to also control Firefox. By also controlling Firefox, we then had 2 screenshots of the randomly generated content - Servo and Firefox . After getting both screenshots, we then compared them using Python and OpenCV. Finally, we were able to expand upon the page generation tool to allow the randomly generated web pages to have more properties/be more complex.

==Previous Work (Part of the OSS Project)==

As per the [https://github.com/servo/servo/wiki/Random-web-content-project project description], we were expected to complete the initial steps. The implementation is explained below for each of these steps.

:1) In a new repository, create a program that can generate a skeleton HTML file with a doctype, head element, and body element, print the result to stdout
::- Here is the [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project link] to the repository which contains code_generation.py file which will be used to generate random valid HTML files.
:2) Add a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
::- The file [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project/blob/master/code_generation.py code_generation.py], contains the code which generates random content specific to the head element and adds style on top of it. As seen in this code, after generating random content to the file, we will add CSS elements on top of this content. We have established a list of commonly used styles, weights, fonts, font_styles, and alignments which will be used at random. For practical purposes, we are limiting the number of options.
:3) Add a module to the program that enables generating random content specific to the <body> element (such as a <p> block that contains randomly generated text) and add it to the generated output
:4) Generate simple random CSS that affects randomly generated content (ie. if there is an element with an id foo, generate a CSS selector like #foo that applies a style like colorto it)
:5) Create a program under Servo's etc/ that launches Servo and causes it to [https://github.com/servo/servo/wiki/Control-Servo-using-WebDriver take a screenshot] of a particular URL - use this to take screenshots of pages randomly generated by the previous program
:Sample Screenshot:
:[[File:Servoscreenshot.png|border]]

==Lists of Tasks==
Below is a list of the tasks that were completed as a part of our final project. Below each task we have described how exactly it was implemented with code examples.

:'''1) Extend the program that controls Servo to also control Firefox using geckodriver'''
Task 1 is relatively simple. It just involves downloading geckodriver and running it. Geckodriver is an open source software engine that allows us to render marked content on a web browser. It should allow us to take screenshots of a particular URL, just like task 5 in the previous work section, but for Firefox instead.

:'''2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ'''
This task involves automating Firefox to use geckodriver and the current servo program. They both will create 2 different screenshots. If servo and Firefox render it differently, we will report that file and mark the differences.

:'''3) Extend the page generation tool with a bunch of additional strategies, such as:'''
:-Generating elements trees of arbitrary depth
:-Generating sibling elements
:-Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
:-Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
:-Randomly choose whether to generate a document in quirks mode or not

:'''UML Diagram of Tasks:'''
Below is a UML diagram of the tasks of the overall system. As you can see, it covers all 3 tasks. It starts with the code generation and then it splits and takes screenshots on both Firefox and Servo. It then compares then screenshots and reports the distance.
:[[File:UMLDiag.jpg|border|]]

==Implementation of Tasks==
====1) Extend the program that controls Servo to also control Firefox using geckodriver====

====2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ====
:To actually make the comparisons we use [https://opencv.org/ OpenCV]. OpenCV allows us to not only make comparisons but will also mark where the differences in. To actually do the comparisons we will first read in the images, convert the images to grayscale, and then call compare_ssim().
<pre>
imageA = cv2.imread(image1)
imageB = cv2.imread(image2)
grayA = cv2.cvtColor(imageA, cv2.COLOR_BGR2GRAY)
grayB = cv2.cvtColor(imageB, cv2.COLOR_BGR2GRAY)
(score, diff) = compare_ssim(grayA, grayB, full=True)
</pre>

This gets us a ''score'' and diff ''values''. The ''score'' variables represents how close the to images are to each other and the ''diff'' variables tells us where the differences are. If the ''score'' indicates that the images are different we then use the ''diff'' value to findContours() and then draw a rectangle around the differences.
<pre>
thresh = cv2.threshold(diff, 0, 255, cv2.THRESH_BINARY_INV | cv2.THRESH_OTSU)[1]
contours = cv2.findContours(thresh.copy(), cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
contours = contours[0] if imutils.is_cv2() else contours[1]
</pre>

After getting contours, we get a rectangle for each contour by calling "(x, y, w, h) = cv2.boundingRect(c)". We then combine any rectangles that are inside each other or very close to each other. After combining the rectangles, we then add the rectangles to each image. Lastly we then save image A (with the rectangles to show the differences)
<pre>
for rrr in rectangles:
x = rrr[0]
y = rrr[1]
w = rrr[2]
h = rrr[3]
cv2.rectangle(imageA, (x, y), (x + w, y + h), (0, 0, 255), 2)
cv2.rectangle(imageB, (x, y), (x + w, y + h), (0, 0, 255), 2)
cv2.imwrite(filename,imageA)
</pre>

====3) Extend the page generation tool with a bunch of additional strategies, such as:====
:For task 3 there are several different parts, but the main goal was to increase the complexity of our randomly generated pages. The code_generation.py file was adapted to provide these functions. The implementation of each subtask is explained below.

'''Generating elements trees of arbitrary depth and Generating sibling elements
:We understood a tree of elements to mean divs inside of each other. By using this definition, it was quite simple to create a tree of elements. When RandomDiv is called we don't just return a div with a random section. We also recursively call RandomDiv a random amount of times. We also may call RandomDiv several time on the same level of the tree. This effectively creates sibling elements. Below is the code for RandomDiv.
<pre>
numDivs = random.randint(1,num_sibling_divs)
for i in range(0, numDivs):
yield '<div id="a'+str(random.randrange(0,count[0]))+'">\r\n'
yield RandomSection(count, max_depth, num_sibling_divs, tree_height, max_headers, min_headers)
if tree_height > 0:
treeHeight = random.randint(0, tree_height)
if treeHeight > 0:
yield RandomDiv(treeHeight - 1, count, max_depth, num_sibling_divs, max_headers, min_headers)
yield '</div>'
</pre>

'''Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
:Implementing this was relatively simple. We just did the same thing we did before but with more CSS properties. Below is the code we used to do this. It does not include creating the arrays with different property values but shows us accessing the different arrays.
<pre>
string_css += 'display: ' + displayTypes[random.randint(0, 3)] + ';\r\n'
string_css += 'background-color: rgb(' + str(random.randint(0, 255)) + ',' + str(random.randint(0, 255)) + ',' + str(random.randint(0, 255)) +');\r\n'
string_css += 'float: ' + floatTypes[random.randint(0, 3)] + ';\r\n'
string_css += 'padding: ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px;\r\n'
string_css += 'margin: ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px;\r\n'
string_css += 'border-width: ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px;\r\n'
string_css += 'border-style: ' + borderTypes[random.randint(0, 4)] + ';\r\n'
</pre>

'''Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
:Separate functions were added to create a span, div, table, ordered list, unordered list, and table. Because a span element is in-line and used typically to label a small chunk of text, the RandomSpan function is called at random within the RandomSentence function. Previously, the RandomSentence function simply called RandomWord a random number of times to create a sentence. To add in a span a small percentage of the time, a variable was given a random integer value between 0-99. If the variable was less than 5, RandomSpan was called, else RandomWord was called.
<pre>
#generate a random sentence using random range function
def RandomSentence():
global count
num_of_words = random.randrange(5, 20)
yield RandomWord()
for _ in range(num_of_words-1):
#1 in 20 words will be within a span
z= random.randrange(0,99)
if z<5:
yield ' '
yield ''.join(RandomSpan())
else:
yield ' '
yield ''.join(RandomWord())
yield '. '
</pre>
The other newly added element types- divs, tables, lists- are called at random within the NestedElement function discussed above. These functions utilize the RandomWord and RandomSentence functions to create their elements. For example, see the RandomTable function below:
<pre>
def RandomTable():
column_count = random.randrange(1,10)
row_count = random.randrange(2,20)
yield '<table>\r\n'
#generate table head
yield '\t<tr>\r\n\t\t'
for _ in range(column_count):
yield '<th>'
yield RandomWord()
yield '</th>\r\n'
yield '\t</tr>'
#fill in rows
for _ in range(row_count-1):
yield '\t<tr>\r\n\t\t'
for _ in range(column_count):
yield '<td>'
yield str(random.randrange(0,1000))
yield '</td>'
yield '\r\n\t</tr>\r\n'
yield '</table>\r\n'
</pre>

'''Randomly choose whether to generate a document in quirks mode or not
:Quirks mode is enable whenever an HTML document does not have a DOCTYPE. To randomly enable Quirks mode we only added a DOCTYPE 50% of the time. Below is the code:
<pre>
quirksMode = random.randint(0,1)
if quirksMode == 1 or quirks_mode_possible == False:
yield '<!DOCTYPE html>'
</pre>

==Testing==
Because of the nature of this project, testing the newly added features will be very simple.
: * For task 1, once we are actually controlling Firefox using geckodriver we know its working (by getting a resulting screenshot).
: * Task 2 actually involves us comparing screenshots. By running the code with images that are the same and images that are different, we have proven that this comparison works.
: * Additionally, we have visually tested that task 3 is complete (seeing that the new page generation features work). While we could probably automate some of the testing for task 2 and 3 (to test all possible scenarios) it is out of the scope of this project.

==Conclusion==
The previously completed work allows us to generate simple html documents with a randomized structure, render the page in Servo, and take a screenshot of the page. This project furthered this work by rendering the pages in both Servo and Firefox, taking screenshots of the pages within both browsers, and reporting differences between the two. This project also expanded on the random content generator. This work will now allow users to evaluate Servo’s ability to load web pages. To make this testing even more informative.

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-27T21:24:51Z

Jbatty: /* Implementation of Tasks */

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

==Introduction==
This Mozilla project was broken in to 2 main parts: the previous work and the work to be done. The previous work was finished as a part of the OSS project. As a part of the OSS project (explained more below) we created a tool which generates random valid HTML files and automated servo. [https://en.wikipedia.org/wiki/Servo_(layout_engine) Servo] is experimental web browser developed by Mozilla to "to create a new layout engine using a modern programming language". By automating servo (the web browser) we were able to quickly see if servo could render the randomly generated pages.

The goal of this final project was to build off the original project while adding more features. The work we completed as a part of this project is split into a couple main parts. First, we extended the program created in the OSS project to also control Firefox. By also controlling Firefox, we then had 2 screenshots of the randomly generated content - Servo and Firefox . After getting both screenshots, we then compared them using Python and OpenCV. Finally, we were able to expand upon the page generation tool to allow the randomly generated web pages to have more properties/be more complex.

==Previous Work (Part of the OSS Project)==

As per the [https://github.com/servo/servo/wiki/Random-web-content-project project description], we were expected to complete the initial steps. The implementation is explained below for each of these steps.

:1) In a new repository, create a program that can generate a skeleton HTML file with a doctype, head element, and body element, print the result to stdout
::- Here is the [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project link] to the repository which contains code_generation.py file which will be used to generate random valid HTML files.
:2) Add a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
::- The file [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project/blob/master/code_generation.py code_generation.py], contains the code which generates random content specific to the head element and adds style on top of it. As seen in this code, after generating random content to the file, we will add CSS elements on top of this content. We have established a list of commonly used styles, weights, fonts, font_styles, and alignments which will be used at random. For practical purposes, we are limiting the number of options.
:3) Add a module to the program that enables generating random content specific to the <body> element (such as a <p> block that contains randomly generated text) and add it to the generated output
:4) Generate simple random CSS that affects randomly generated content (ie. if there is an element with an id foo, generate a CSS selector like #foo that applies a style like colorto it)
:5) Create a program under Servo's etc/ that launches Servo and causes it to [https://github.com/servo/servo/wiki/Control-Servo-using-WebDriver take a screenshot] of a particular URL - use this to take screenshots of pages randomly generated by the previous program
:Sample Screenshot:
:[[File:Servoscreenshot.png|border]]

==Lists of Tasks==
Below is a list of the tasks that were completed as a part of our final project. Below each task we have described how exactly it was implemented with code examples.

:'''1) Extend the program that controls Servo to also control Firefox using geckodriver'''
Task 1 is relatively simple. It just involves downloading geckodriver and running it. Geckodriver is an open source software engine that allows us to render marked content on a web browser. It should allow us to take screenshots of a particular URL, just like task 5 in the previous work section, but for Firefox instead.

:'''2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ'''
This task involves automating Firefox to use geckodriver and the current servo program. They both will create 2 different screenshots. If servo and Firefox render it differently, we will report that file and mark the differences.

:'''3) Extend the page generation tool with a bunch of additional strategies, such as:'''
:-Generating elements trees of arbitrary depth
:-Generating sibling elements
:-Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
:-Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
:-Randomly choose whether to generate a document in quirks mode or not

:'''UML Diagram of Tasks:'''
Below is a UML diagram of the tasks of the overall system. As you can see, it covers all 3 tasks. It starts with the code generation and then it splits and takes screenshots on both Firefox and Servo. It then compares then screenshots and reports the distance.
:[[File:UMLDiag.jpg|border|]]

==Implementation of Tasks==
====1) Extend the program that controls Servo to also control Firefox using geckodriver====

====2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ====
:To actually make the comparisons we use [https://opencv.org/ OpenCV]. OpenCV allows us to not only make comparisons but will also mark where the differences in. To actually do the comparisons we will first read in the images, convert the images to grayscale, and then call compare_ssim().
<pre>
imageA = cv2.imread(image1)
imageB = cv2.imread(image2)
grayA = cv2.cvtColor(imageA, cv2.COLOR_BGR2GRAY)
grayB = cv2.cvtColor(imageB, cv2.COLOR_BGR2GRAY)
(score, diff) = compare_ssim(grayA, grayB, full=True)
</pre>

This gets us a ''score'' and diff ''values''. The ''score'' variables represents how close the to images are to each other and the ''diff'' variables tells us where the differences are. If the ''score'' indicates that the images are different we then use the ''diff'' value to findContours() and then draw a rectangle around the differences.
<pre>
thresh = cv2.threshold(diff, 0, 255, cv2.THRESH_BINARY_INV | cv2.THRESH_OTSU)[1]
contours = cv2.findContours(thresh.copy(), cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
contours = contours[0] if imutils.is_cv2() else contours[1]
</pre>

After getting contours, we get a rectangle for each contour by calling "(x, y, w, h) = cv2.boundingRect(c)". We then combine any rectangles that are inside each other or very close to each other. After combining the rectangles, we then add the rectangles to each image. Lastly we then save image A (with the rectangles to show the differences)
<pre>
for rrr in rectangles:
x = rrr[0]
y = rrr[1]
w = rrr[2]
h = rrr[3]
cv2.rectangle(imageA, (x, y), (x + w, y + h), (0, 0, 255), 2)
cv2.rectangle(imageB, (x, y), (x + w, y + h), (0, 0, 255), 2)
cv2.imwrite(filename,imageA)
</pre>

====3) Extend the page generation tool with a bunch of additional strategies, such as:====
:For task 3 there are several different parts, but the main goal was to increase the complexity of our randomly generated pages. The code_generation.py file was adapted to provide these functions. The implementation of each subtask is explained below.

'''Generating elements trees of arbitrary depth
:this

'''Generating sibling elements
:
'''Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
:Implementing this was relatively simple. We just did the same thing we did before but with more CSS properties. Below is the code we used to do this. It does not include creating the arrays with different property values but shows us accessing the different arrays.
<pre>
string_css += 'display: ' + displayTypes[random.randint(0, 3)] + ';\r\n'
string_css += 'background-color: rgb(' + str(random.randint(0, 255)) + ',' + str(random.randint(0, 255)) + ',' + str(random.randint(0, 255)) +');\r\n'
string_css += 'float: ' + floatTypes[random.randint(0, 3)] + ';\r\n'
string_css += 'padding: ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px;\r\n'
string_css += 'margin: ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px;\r\n'
string_css += 'border-width: ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px;\r\n'
string_css += 'border-style: ' + borderTypes[random.randint(0, 4)] + ';\r\n'
</pre>

'''Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
:
'''Randomly choose whether to generate a document in quirks mode or not
:Quirks mode is enable whenever an HTML document does not have a DOCTYPE. To randomly enable Quirks mode we only added a DOCTYPE 50% of the time.

==Testing==
Because of the nature of this project, testing the newly added features will be very simple.
: * For task 1, once we are actually controlling Firefox using geckodriver we know its working (by getting a resulting screenshot).
: * Task 2 actually involves us comparing screenshots. By running the code with images that are the same and images that are different, we have proven that this comparison works.
: * Additionally, we have visually tested that task 3 is complete (seeing that the new page generation features work). While we could probably automate some of the testing for task 2 and 3 (to test all possible scenarios) it is out of the scope of this project.

==Conclusion==
The previously completed work allows us to generate simple html documents with a randomized structure, render the page in Servo, and take a screenshot of the page. This project furthered this work by rendering the pages in both Servo and Firefox, taking screenshots of the pages within both browsers, and reporting differences between the two. This project also expanded on the random content generator. This work will now allow users to evaluate Servo’s ability to load web pages. To make this testing even more informative.

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-27T21:22:01Z

Jbatty: /* Lists of Tasks */

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

==Introduction==
This Mozilla project was broken in to 2 main parts: the previous work and the work to be done. The previous work was finished as a part of the OSS project. As a part of the OSS project (explained more below) we created a tool which generates random valid HTML files and automated servo. [https://en.wikipedia.org/wiki/Servo_(layout_engine) Servo] is experimental web browser developed by Mozilla to "to create a new layout engine using a modern programming language". By automating servo (the web browser) we were able to quickly see if servo could render the randomly generated pages.

The goal of this final project was to build off the original project while adding more features. The work we completed as a part of this project is split into a couple main parts. First, we extended the program created in the OSS project to also control Firefox. By also controlling Firefox, we then had 2 screenshots of the randomly generated content - Servo and Firefox . After getting both screenshots, we then compared them using Python and OpenCV. Finally, we were able to expand upon the page generation tool to allow the randomly generated web pages to have more properties/be more complex.

==Previous Work (Part of the OSS Project)==

As per the [https://github.com/servo/servo/wiki/Random-web-content-project project description], we were expected to complete the initial steps. The implementation is explained below for each of these steps.

:1) In a new repository, create a program that can generate a skeleton HTML file with a doctype, head element, and body element, print the result to stdout
::- Here is the [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project link] to the repository which contains code_generation.py file which will be used to generate random valid HTML files.
:2) Add a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
::- The file [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project/blob/master/code_generation.py code_generation.py], contains the code which generates random content specific to the head element and adds style on top of it. As seen in this code, after generating random content to the file, we will add CSS elements on top of this content. We have established a list of commonly used styles, weights, fonts, font_styles, and alignments which will be used at random. For practical purposes, we are limiting the number of options.
:3) Add a module to the program that enables generating random content specific to the <body> element (such as a <p> block that contains randomly generated text) and add it to the generated output
:4) Generate simple random CSS that affects randomly generated content (ie. if there is an element with an id foo, generate a CSS selector like #foo that applies a style like colorto it)
:5) Create a program under Servo's etc/ that launches Servo and causes it to [https://github.com/servo/servo/wiki/Control-Servo-using-WebDriver take a screenshot] of a particular URL - use this to take screenshots of pages randomly generated by the previous program
:Sample Screenshot:
:[[File:Servoscreenshot.png|border]]

==Lists of Tasks==
Below is a list of the tasks that were completed as a part of our final project. Below each task we have described how exactly it was implemented with code examples.

:'''1) Extend the program that controls Servo to also control Firefox using geckodriver'''
Task 1 is relatively simple. It just involves downloading geckodriver and running it. Geckodriver is an open source software engine that allows us to render marked content on a web browser. It should allow us to take screenshots of a particular URL, just like task 5 in the previous work section, but for Firefox instead.

:'''2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ'''
This task involves automating Firefox to use geckodriver and the current servo program. They both will create 2 different screenshots. If servo and Firefox render it differently, we will report that file and mark the differences.

:'''3) Extend the page generation tool with a bunch of additional strategies, such as:'''
:-Generating elements trees of arbitrary depth
:-Generating sibling elements
:-Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
:-Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
:-Randomly choose whether to generate a document in quirks mode or not

:'''UML Diagram of Tasks:'''
Below is a UML diagram of the tasks of the overall system. As you can see, it covers all 3 tasks. It starts with the code generation and then it splits and takes screenshots on both Firefox and Servo. It then compares then screenshots and reports the distance.
:[[File:UMLDiag.jpg|border|]]

==Implementation of Tasks==
:'''1) Extend the program that controls Servo to also control Firefox using geckodriver'''

:'''2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ'''
:To actually make the comparisons we use [https://opencv.org/ OpenCV]. OpenCV allows us to not only make comparisons but will also mark where the differences in. To actually do the comparisons we will first read in the images, convert the images to grayscale, and then call compare_ssim().
<pre>
imageA = cv2.imread(image1)
imageB = cv2.imread(image2)
grayA = cv2.cvtColor(imageA, cv2.COLOR_BGR2GRAY)
grayB = cv2.cvtColor(imageB, cv2.COLOR_BGR2GRAY)
(score, diff) = compare_ssim(grayA, grayB, full=True)
</pre>

This gets us a ''score'' and diff ''values''. The ''score'' variables represents how close the to images are to each other and the ''diff'' variables tells us where the differences are. If the ''score'' indicates that the images are different we then use the ''diff'' value to findContours() and then draw a rectangle around the differences.
<pre>
thresh = cv2.threshold(diff, 0, 255, cv2.THRESH_BINARY_INV | cv2.THRESH_OTSU)[1]
contours = cv2.findContours(thresh.copy(), cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
contours = contours[0] if imutils.is_cv2() else contours[1]
</pre>

After getting contours, we get a rectangle for each contour by calling "(x, y, w, h) = cv2.boundingRect(c)". We then combine any rectangles that are inside each other or very close to each other. After combining the rectangles, we then add the rectangles to each image. Lastly we then save image A (with the rectangles to show the differences)
<pre>
for rrr in rectangles:
x = rrr[0]
y = rrr[1]
w = rrr[2]
h = rrr[3]
cv2.rectangle(imageA, (x, y), (x + w, y + h), (0, 0, 255), 2)
cv2.rectangle(imageB, (x, y), (x + w, y + h), (0, 0, 255), 2)
cv2.imwrite(filename,imageA)
</pre>

:'''3) Extend the page generation tool with a bunch of additional strategies, such as:'''
:For task 3 there are several different parts, but the main goal was to increase the complexity of our randomly generated pages. The code_generation.py file was adapted to provide these functions. The implementation of each subtask is explained below.

'''Generating elements trees of arbitrary depth
:this

'''Generating sibling elements
:
'''Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
:Implementing this was relatively simple. We just did the same thing we did before but with more CSS properties. Below is the code we used to do this. It does not include creating the arrays with different property values but shows us accessing the different arrays.
<pre>
string_css += 'display: ' + displayTypes[random.randint(0, 3)] + ';\r\n'
string_css += 'background-color: rgb(' + str(random.randint(0, 255)) + ',' + str(random.randint(0, 255)) + ',' + str(random.randint(0, 255)) +');\r\n'
string_css += 'float: ' + floatTypes[random.randint(0, 3)] + ';\r\n'
string_css += 'padding: ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px;\r\n'
string_css += 'margin: ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px;\r\n'
string_css += 'border-width: ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px ' + str(random.randint(0, 20)) + 'px;\r\n'
string_css += 'border-style: ' + borderTypes[random.randint(0, 4)] + ';\r\n'
</pre>

'''Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
:
'''Randomly choose whether to generate a document in quirks mode or not
:

==Testing==
Because of the nature of this project, testing the newly added features will be very simple.
: * For task 1, once we are actually controlling Firefox using geckodriver we know its working (by getting a resulting screenshot).
: * Task 2 actually involves us comparing screenshots. By running the code with images that are the same and images that are different, we have proven that this comparison works.
: * Additionally, we have visually tested that task 3 is complete (seeing that the new page generation features work). While we could probably automate some of the testing for task 2 and 3 (to test all possible scenarios) it is out of the scope of this project.

==Conclusion==
The previously completed work allows us to generate simple html documents with a randomized structure, render the page in Servo, and take a screenshot of the page. This project furthered this work by rendering the pages in both Servo and Firefox, taking screenshots of the pages within both browsers, and reporting differences between the two. This project also expanded on the random content generator. This work will now allow users to evaluate Servo’s ability to load web pages. To make this testing even more informative.

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-27T20:54:38Z

Jbatty: /* 3) Extend the page generation tool with a bunch of additional strategies, such as: */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-27T20:52:39Z

Jbatty: /* 3) Extend the page generation tool with a bunch of additional strategies, such as: */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-27T20:50:47Z

Jbatty: /* Lists of Tasks */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-27T20:49:33Z

Jbatty: /* Lists of Tasks */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-15T20:37:06Z

Jbatty: /* Work to be done */

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

==Introduction==
This Mozilla project was broken in to 2 main parts: the initial and subsequent steps. The initial steps were finished as a part of the OSS project. The goal of this final project is to complete the subsequent steps. As a part of the OSS project (explained more below) we created a tool which generates random valid HTML files and automated servo. Now, as a part of this project we are supposed to extend the program to also control Firefox, compare the resulting screenshots, and expand upon the page generation tool.

==Background==
TODO: explain servo

==Previous Work (Part of the OSS Project)==

As per the [https://github.com/servo/servo/wiki/Random-web-content-project project description], we were expected to complete the initial steps. The implementation is explained below for each of these steps.

:1) In a new repository, create a program that can generate a skeleton HTML file with a doctype, head element, and body element, print the result to stdout
::- Here is the [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project link] to the repository which contains code_generation.py file which will be used to generate random valid HTML files.
:2) Add a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
::- The file [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project/blob/master/code_generation.py code_generation.py], contains the code which generates random content specific to the head element and adds style on top of it. As seen in this code, after generating random content to the file, we will add CSS elements on top of this content. We have established a list of commonly used styles, weights, fonts, font_styles, and alignments which will be used at random. For practical purposes, we are limiting the number of options.
:3) Add a module to the program that enables generating random content specific to the <body> element (such as a <p> block that contains randomly generated text) and add it to the generated output
:4) Generate simple random CSS that affects randomly generated content (ie. if there is an element with an id foo, generate a CSS selector like #foo that applies a style like colorto it)
:5) Create a program under Servo's etc/ that launches Servo and causes it to [https://github.com/servo/servo/wiki/Control-Servo-using-WebDriver take a screenshot] of a particular URL - use this to take screenshots of pages randomly generated by the previous program
:Sample Screenshot:
:[[File:Servoscreenshot.png|border]]

==Work to be done==
Below is a list of the tasks to be done as a part of our final project. Below each task we have described what we think it will take to complete the respective task.

:'''1) Extend the program that controls Servo to also control Firefox using geckodriver'''
:Task 1 is relatively simple. It just involves downloading geckodriver and running it. Geckodriver is an open source software engine that allows us to render marked content on a web browser. It should allow us to take screenshots of a particular URL just like task 5 in the previous work section.

:'''2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ'''
:This task involves automating Firefox to use geckodriver and the current servo program. They both will create 2 different screenshots. If servo and Firefox render it differently, we will report that file and mark the differences.
:To actually make the comparisons we will use [https://opencv.org/ OpenCV]. OpenCV will allow us to not only make comparisons but will also mark where the differences in. To actually do the comparisons we will first convert the images to grayscale and then call compare_ssim(). This will get us a ''score'' and diff ''values''. The ''score'' variables represents how close the to images are to each other and the ''diff'' variables tells us where the differences are. If the ''score'' indicates that the images are different we will use the ''diff'' value to findContours() and then draw a rectangle around the differences.

:'''3) Extend the page generation tool with a bunch of additional strategies, such as:'''
::-Generating elements trees of arbitrary depth
::-Generating sibling elements
::-Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
::-Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
::-Randomly choose whether to generate a document in quirks mode or not
:For task 3 there are several different parts, but the main goal is to increase the complexity of our randomly generated pages. The code_generation.py file will be adapted to provide these functions. The function used to add random sections will have recursion added to generate elements within elements, resulting in a tree of html elements. The amounting of nesting will be random but limited. Within the sections, tables, lists, spans, and divs may potentially be created. This will involve writing new functions for creating each element, and allowing them to be chosen at random by the function that creates sections of the HTML document. Additionally, the function which provides randomized CSS styling will be extended to generate additional properties.

==Testing==
Because of the nature of this project, testing the newly added features will be very simple. For task 1, once we are actually controlling Firefox using geckodriver we will know it is working. Task 2 actually involves us comparing screenshots. By running the code with images that are the same and images that are different, we will be able to test to see if the comparisons work. Additionally, we will be able to visually test that task 3 is complete (seeing that the new page generation features work). While we could probably automate some of the testing for task 2 and 3 (to test all possible scenarios) it is out of the scope of this project.

==Conclusion==
The previously completed work allows us to generate simple html documents with a randomized structure, render the page in Servo, and take a screenshot of the page. We plan on furthering this work by rendering the pages in both Servo and Firefox, taking screenshots of the pages within both browsers, and reporting differences between the two. Doing so will allow users to evaluate Servo’s ability to load web pages. To make this testing even more informative, we plan to increase the complexity of the structure and styling of the randomly generated html documents.

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-15T20:26:23Z

Jbatty: /* Work to be done */

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

==Introduction==
This Mozilla project was broken in to 2 main parts: the initial and subsequent steps. The initial steps were finished as a part of the OSS project. The goal of this final project is to complete the subsequent steps. As a part of the OSS project (explained more below) we created a tool which generates random valid HTML files and automated servo. Now, as a part of this project we are supposed to extend the program to also control Firefox, compare the resulting screenshots, and expand upon the page generation tool.

==Background==
TODO: explain servo

==Previous Work (Part of the OSS Project)==

As per the [https://github.com/servo/servo/wiki/Random-web-content-project project description], we were expected to complete the initial steps. The implementation is explained below for each of these steps.

:1) In a new repository, create a program that can generate a skeleton HTML file with a doctype, head element, and body element, print the result to stdout
::- Here is the [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project link] to the repository which contains code_generation.py file which will be used to generate random valid HTML files.
:2) Add a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
::- The file [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project/blob/master/code_generation.py code_generation.py], contains the code which generates random content specific to the head element and adds style on top of it. As seen in this code, after generating random content to the file, we will add CSS elements on top of this content. We have established a list of commonly used styles, weights, fonts, font_styles, and alignments which will be used at random. For practical purposes, we are limiting the number of options.
:3) Add a module to the program that enables generating random content specific to the <body> element (such as a <p> block that contains randomly generated text) and add it to the generated output
:4) Generate simple random CSS that affects randomly generated content (ie. if there is an element with an id foo, generate a CSS selector like #foo that applies a style like colorto it)
:5) Create a program under Servo's etc/ that launches Servo and causes it to [https://github.com/servo/servo/wiki/Control-Servo-using-WebDriver take a screenshot] of a particular URL - use this to take screenshots of pages randomly generated by the previous program
:Sample Screenshot:
:[[File:Servoscreenshot.png|border]]

==Work to be done==
Below is a list of the tasks to be done as a part of our final project. Below each task we have described what we think it will take to complete the respective task.

:'''1) Extend the program that controls Servo to also control Firefox using geckodriver'''
:Task 1 is relatively simple. It just involves downloading geckodriver and running it. Geckodriver is an open source software engine that allows us to render marked content on a web browser. It should allow us to take screenshots of a particular URL just like task 5 in the previous work section.

:'''2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ'''
:This task involves automating Firefox to use geckodriver and the current servo program. They both will create 2 different screenshots. If servo and Firefox render it differently, we will report that file and mark the differences.

:'''3) Extend the page generation tool with a bunch of additional strategies, such as:'''
::-Generating elements trees of arbitrary depth
::-Generating sibling elements
::-Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
::-Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
::-Randomly choose whether to generate a document in quirks mode or not
:For task 3 there are several different parts, but the main goal is to increase the complexity of our randomly generated pages. First we will increase the tree depth to an arbitrary depth. We will then generate sibling elements and increase the CSS styling options. Finally, we will increase the amount of HTML elements that can be generated and randomly choose whether to generate a document in quirks mode or not.
:The code_generation.py file will be adapted to provide these functions. The function used to add random sections will have recursion added to generate elements within elements, resulting in a tree of html elements. The amounting of nesting will be random but limited. Within the sections, tables, lists, spans, and divs may potentially be created. This will involve writing new functions for creating each element, and allowing them to be chosen at random by the function that creates sections of the HTML document.

==Testing==
Because of the nature of this project, testing the newly added features will be very simple. Task 2 actually involves us comparing screenshots. By comparing the actual screenshots we will test that things work. Additionally, we will be able to visually test that task 3 is complete (seeing that the new page generation features work). While we could probably automate some of the testing for task 3 (to test all possible scenarios) it is out of the scope of this project.

==Conclusion==
The previously completed work allows us to generate simple html documents with a randomized structure, render the page in Servo, and take a screenshot of the page. We plan on furthering this work by rendering the pages in both Servo and Firefox, taking screenshots of the pages within both browsers, and reporting differences between the two. Doing so will allow users to evaluate Servo’s ability to load web pages. To make this testing even more informative, we plan to increase the complexity of the structure and styling of the randomly generated html documents.

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-09T21:51:21Z

Jbatty: /* Previous Work (Part of the OSS Project) */

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

==Introduction==
This goal of this project is to create a tool that can randomly generate valid HTML pages, then automatically load them in both Firefox and Servo using the [https://w3c.github.io/webdriver/webdriver-spec.html WebDriver protocol] and report if both engines render the content identically. As a part of the OSS project we created a tool which generates random valid HTML files and automated servo. Now, as a part of this project we are supposed to finish the subsequent steps in the project which is explained below.

==Previous Work (Part of the OSS Project)==

As per the [https://github.com/servo/servo/wiki/Random-web-content-project project description], we were expected to complete the initial steps. The implementation is explained below for each of these steps.

:1) In a new repository, create a program that can generate a skeleton HTML file with a doctype, head element, and body element, print the result to stdout
::- Here is the [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project link] to the repository which contains code_generation.py file which will be used to generate random valid HTML files.
:2) Add a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
::- The file [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project/blob/master/code_generation.py code_generation.py], contains the code which generates random content specific to the head element and adds style on top of it. As seen in this code, after generating random content to the file, we will add CSS elements on top of this content. We have established a list of commonly used styles, weights, fonts, font_styles, and alignments which will be used at random. For practical purposes, we are limiting the number of options.
:3) Add a module to the program that enables generating random content specific to the <body> element (such as a <p> block that contains randomly generated text) and add it to the generated output
:4) Generate simple random CSS that affects randomly generated content (ie. if there is an element with an id foo, generate a CSS selector like #foo that applies a style like colorto it)
:5) Create a program under Servo's etc/ that launches Servo and causes it to [https://github.com/servo/servo/wiki/Control-Servo-using-WebDriver take a screenshot] of a particular URL - use this to take screenshots of pages randomly generated by the previous program
:Sample Screenshot:
:[[File:Servoscreenshot.png|border]]

==Work to be done==
Below is a list of the tasks to be done as a part of our final project. Below each task we have described what we think it will take to complete the respective task.

:'''1) Extend the program that controls Servo to also control Firefox using geckodriver'''
:Task 1 is relatively simple. It just involves downloading geckodriver and running it. Geckodriver is an open source software engine that allows us to render marked content on a web browser. It should allow us to take screenshots of a particular URL just like task 5 in the previous work section.

:'''2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ'''
:This task involves automating Firefox to use geckodriver and the current servo program. They both will create 2 different screenshots. If servo and Firefox render it differently, we will report that file and mark the differences.

:'''3) Extend the page generation tool with a bunch of additional strategies, such as:'''
::-Generating elements trees of arbitrary depth
::-Generating sibling elements
::-Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
::-Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
::-Randomly choose whether to generate a document in quirks mode or not
:For task 3 there are several different parts, but the main goal is to increase the complexity of our randomly generated pages. First we will increase the tree depth to an arbitrary depth. We will then generate sibling elements and increase the CSS styling options. Finally, we will increase the amount of HTML elements that can be generated and randomly choose whether to generate a document in quirks mode or not.

==Conclusion==
The previously completed work allows us to generate simple html documents with a randomized structure, render the page in Servo, and take a screenshot of the page. We plan on furthering this work by rendering the pages in both Servo and Firefox, taking screenshots of the pages within both browsers, and reporting differences between the two. Doing so will allow users to evaluate Servo’s ability to load web pages. To make this testing even more informative, we plan to increase the complexity of the structure and styling of the randomly generated html documents.

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-09T21:50:51Z

Jbatty: /* Previous Work (Part of the OSS Project) */

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

==Introduction==
This goal of this project is to create a tool that can randomly generate valid HTML pages, then automatically load them in both Firefox and Servo using the [https://w3c.github.io/webdriver/webdriver-spec.html WebDriver protocol] and report if both engines render the content identically. As a part of the OSS project we created a tool which generates random valid HTML files and automated servo. Now, as a part of this project we are supposed to finish the subsequent steps in the project which is explained below.

==Previous Work (Part of the OSS Project)==

As per the [https://github.com/servo/servo/wiki/Random-web-content-project project description], we were expected to complete the initial steps. The implementation is explained below for each of these steps.

:1) In a new repository, create a program that can generate a skeleton HTML file with a doctype, head element, and body element, print the result to stdout
::- Here is the [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project link] to the repository which contains code_generation.py file which will be used to generate random valid HTML files.
:2) Add a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
::- The file [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project/blob/master/code_generation.py code_generation.py], contains the code which generates random content specific to the head element and adds style on top of it. As seen in this code, after generating random content to the file, we will add CSS elements on top of this content. We have established a list of commonly used styles, weights, fonts, font_styles, and alignments which will be used at random. For practical purposes, we are limiting the number of options.
:3) Add a module to the program that enables generating random content specific to the <body> element (such as a <p> block that contains randomly generated text) and add it to the generated output
:4) Generate simple random CSS that affects randomly generated content (ie. if there is an element with an id foo, generate a CSS selector like #foo that applies a style like colorto it)
:5) Create a program under Servo's etc/ that launches Servo and causes it to [https://github.com/servo/servo/wiki/Control-Servo-using-WebDriver take a screenshot] of a particular URL - use this to take screenshots of pages randomly generated by the previous program

[[File:Servoscreenshot.png|border|Screenshot Sample]]

==Work to be done==
Below is a list of the tasks to be done as a part of our final project. Below each task we have described what we think it will take to complete the respective task.

:'''1) Extend the program that controls Servo to also control Firefox using geckodriver'''
:Task 1 is relatively simple. It just involves downloading geckodriver and running it. Geckodriver is an open source software engine that allows us to render marked content on a web browser. It should allow us to take screenshots of a particular URL just like task 5 in the previous work section.

:'''2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ'''
:This task involves automating Firefox to use geckodriver and the current servo program. They both will create 2 different screenshots. If servo and Firefox render it differently, we will report that file and mark the differences.

:'''3) Extend the page generation tool with a bunch of additional strategies, such as:'''
::-Generating elements trees of arbitrary depth
::-Generating sibling elements
::-Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
::-Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
::-Randomly choose whether to generate a document in quirks mode or not
:For task 3 there are several different parts, but the main goal is to increase the complexity of our randomly generated pages. First we will increase the tree depth to an arbitrary depth. We will then generate sibling elements and increase the CSS styling options. Finally, we will increase the amount of HTML elements that can be generated and randomly choose whether to generate a document in quirks mode or not.

==Conclusion==
The previously completed work allows us to generate simple html documents with a randomized structure, render the page in Servo, and take a screenshot of the page. We plan on furthering this work by rendering the pages in both Servo and Firefox, taking screenshots of the pages within both browsers, and reporting differences between the two. Doing so will allow users to evaluate Servo’s ability to load web pages. To make this testing even more informative, we plan to increase the complexity of the structure and styling of the randomly generated html documents.

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-09T21:50:25Z

Jbatty: /* Previous Work (Part of the OSS Project) */

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

==Introduction==
This goal of this project is to create a tool that can randomly generate valid HTML pages, then automatically load them in both Firefox and Servo using the [https://w3c.github.io/webdriver/webdriver-spec.html WebDriver protocol] and report if both engines render the content identically. As a part of the OSS project we created a tool which generates random valid HTML files and automated servo. Now, as a part of this project we are supposed to finish the subsequent steps in the project which is explained below.

==Previous Work (Part of the OSS Project)==

As per the [https://github.com/servo/servo/wiki/Random-web-content-project project description], we were expected to complete the initial steps. The implementation is explained below for each of these steps.

:1) In a new repository, create a program that can generate a skeleton HTML file with a doctype, head element, and body element, print the result to stdout
::- Here is the [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project link] to the repository which contains code_generation.py file which will be used to generate random valid HTML files.
:2) Add a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
::- The file [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project/blob/master/code_generation.py code_generation.py], contains the code which generates random content specific to the head element and adds style on top of it. As seen in this code, after generating random content to the file, we will add CSS elements on top of this content. We have established a list of commonly used styles, weights, fonts, font_styles, and alignments which will be used at random. For practical purposes, we are limiting the number of options.
:3) Add a module to the program that enables generating random content specific to the <body> element (such as a <p> block that contains randomly generated text) and add it to the generated output
:4) Generate simple random CSS that affects randomly generated content (ie. if there is an element with an id foo, generate a CSS selector like #foo that applies a style like colorto it)
:5) Create a program under Servo's etc/ that launches Servo and causes it to [https://github.com/servo/servo/wiki/Control-Servo-using-WebDriver take a screenshot] of a particular URL - use this to take screenshots of pages randomly generated by the previous program

[[File:Servoscreenshot.png|Screenshot Sample]]

==Work to be done==
Below is a list of the tasks to be done as a part of our final project. Below each task we have described what we think it will take to complete the respective task.

:'''1) Extend the program that controls Servo to also control Firefox using geckodriver'''
:Task 1 is relatively simple. It just involves downloading geckodriver and running it. Geckodriver is an open source software engine that allows us to render marked content on a web browser. It should allow us to take screenshots of a particular URL just like task 5 in the previous work section.

:'''2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ'''
:This task involves automating Firefox to use geckodriver and the current servo program. They both will create 2 different screenshots. If servo and Firefox render it differently, we will report that file and mark the differences.

:'''3) Extend the page generation tool with a bunch of additional strategies, such as:'''
::-Generating elements trees of arbitrary depth
::-Generating sibling elements
::-Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
::-Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
::-Randomly choose whether to generate a document in quirks mode or not
:For task 3 there are several different parts, but the main goal is to increase the complexity of our randomly generated pages. First we will increase the tree depth to an arbitrary depth. We will then generate sibling elements and increase the CSS styling options. Finally, we will increase the amount of HTML elements that can be generated and randomly choose whether to generate a document in quirks mode or not.

==Conclusion==
The previously completed work allows us to generate simple html documents with a randomized structure, render the page in Servo, and take a screenshot of the page. We plan on furthering this work by rendering the pages in both Servo and Firefox, taking screenshots of the pages within both browsers, and reporting differences between the two. Doing so will allow users to evaluate Servo’s ability to load web pages. To make this testing even more informative, we plan to increase the complexity of the structure and styling of the randomly generated html documents.

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-09T21:50:15Z

Jbatty: /* Previous Work (Part of the OSS Project) */

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

==Introduction==
This goal of this project is to create a tool that can randomly generate valid HTML pages, then automatically load them in both Firefox and Servo using the [https://w3c.github.io/webdriver/webdriver-spec.html WebDriver protocol] and report if both engines render the content identically. As a part of the OSS project we created a tool which generates random valid HTML files and automated servo. Now, as a part of this project we are supposed to finish the subsequent steps in the project which is explained below.

==Previous Work (Part of the OSS Project)==

As per the [https://github.com/servo/servo/wiki/Random-web-content-project project description], we were expected to complete the initial steps. The implementation is explained below for each of these steps.

:1) In a new repository, create a program that can generate a skeleton HTML file with a doctype, head element, and body element, print the result to stdout
::- Here is the [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project link] to the repository which contains code_generation.py file which will be used to generate random valid HTML files.
:2) Add a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
::- The file [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project/blob/master/code_generation.py code_generation.py], contains the code which generates random content specific to the head element and adds style on top of it. As seen in this code, after generating random content to the file, we will add CSS elements on top of this content. We have established a list of commonly used styles, weights, fonts, font_styles, and alignments which will be used at random. For practical purposes, we are limiting the number of options.
:3) Add a module to the program that enables generating random content specific to the <body> element (such as a <p> block that contains randomly generated text) and add it to the generated output
:4) Generate simple random CSS that affects randomly generated content (ie. if there is an element with an id foo, generate a CSS selector like #foo that applies a style like colorto it)
:5) Create a program under Servo's etc/ that launches Servo and causes it to [https://github.com/servo/servo/wiki/Control-Servo-using-WebDriver take a screenshot] of a particular URL - use this to take screenshots of pages randomly generated by the previous program

[[File:Servoscreenshot.png|frameless|Screenshot Sample]]

==Work to be done==
Below is a list of the tasks to be done as a part of our final project. Below each task we have described what we think it will take to complete the respective task.

:'''1) Extend the program that controls Servo to also control Firefox using geckodriver'''
:Task 1 is relatively simple. It just involves downloading geckodriver and running it. Geckodriver is an open source software engine that allows us to render marked content on a web browser. It should allow us to take screenshots of a particular URL just like task 5 in the previous work section.

:'''2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ'''
:This task involves automating Firefox to use geckodriver and the current servo program. They both will create 2 different screenshots. If servo and Firefox render it differently, we will report that file and mark the differences.

:'''3) Extend the page generation tool with a bunch of additional strategies, such as:'''
::-Generating elements trees of arbitrary depth
::-Generating sibling elements
::-Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
::-Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
::-Randomly choose whether to generate a document in quirks mode or not
:For task 3 there are several different parts, but the main goal is to increase the complexity of our randomly generated pages. First we will increase the tree depth to an arbitrary depth. We will then generate sibling elements and increase the CSS styling options. Finally, we will increase the amount of HTML elements that can be generated and randomly choose whether to generate a document in quirks mode or not.

==Conclusion==
The previously completed work allows us to generate simple html documents with a randomized structure, render the page in Servo, and take a screenshot of the page. We plan on furthering this work by rendering the pages in both Servo and Firefox, taking screenshots of the pages within both browsers, and reporting differences between the two. Doing so will allow users to evaluate Servo’s ability to load web pages. To make this testing even more informative, we plan to increase the complexity of the structure and styling of the randomly generated html documents.

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-09T21:50:02Z

Jbatty: /* Previous Work (Part of the OSS Project) */

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

==Introduction==
This goal of this project is to create a tool that can randomly generate valid HTML pages, then automatically load them in both Firefox and Servo using the [https://w3c.github.io/webdriver/webdriver-spec.html WebDriver protocol] and report if both engines render the content identically. As a part of the OSS project we created a tool which generates random valid HTML files and automated servo. Now, as a part of this project we are supposed to finish the subsequent steps in the project which is explained below.

==Previous Work (Part of the OSS Project)==

As per the [https://github.com/servo/servo/wiki/Random-web-content-project project description], we were expected to complete the initial steps. The implementation is explained below for each of these steps.

:1) In a new repository, create a program that can generate a skeleton HTML file with a doctype, head element, and body element, print the result to stdout
::- Here is the [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project link] to the repository which contains code_generation.py file which will be used to generate random valid HTML files.
:2) Add a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
::- The file [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project/blob/master/code_generation.py code_generation.py], contains the code which generates random content specific to the head element and adds style on top of it. As seen in this code, after generating random content to the file, we will add CSS elements on top of this content. We have established a list of commonly used styles, weights, fonts, font_styles, and alignments which will be used at random. For practical purposes, we are limiting the number of options.
:3) Add a module to the program that enables generating random content specific to the <body> element (such as a <p> block that contains randomly generated text) and add it to the generated output
:4) Generate simple random CSS that affects randomly generated content (ie. if there is an element with an id foo, generate a CSS selector like #foo that applies a style like colorto it)
:5) Create a program under Servo's etc/ that launches Servo and causes it to [https://github.com/servo/servo/wiki/Control-Servo-using-WebDriver take a screenshot] of a particular URL - use this to take screenshots of pages randomly generated by the previous program

[[File:Servoscreenshot.png|thumb|Screenshot Sample]]

==Work to be done==
Below is a list of the tasks to be done as a part of our final project. Below each task we have described what we think it will take to complete the respective task.

:'''1) Extend the program that controls Servo to also control Firefox using geckodriver'''
:Task 1 is relatively simple. It just involves downloading geckodriver and running it. Geckodriver is an open source software engine that allows us to render marked content on a web browser. It should allow us to take screenshots of a particular URL just like task 5 in the previous work section.

:'''2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ'''
:This task involves automating Firefox to use geckodriver and the current servo program. They both will create 2 different screenshots. If servo and Firefox render it differently, we will report that file and mark the differences.

:'''3) Extend the page generation tool with a bunch of additional strategies, such as:'''
::-Generating elements trees of arbitrary depth
::-Generating sibling elements
::-Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
::-Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
::-Randomly choose whether to generate a document in quirks mode or not
:For task 3 there are several different parts, but the main goal is to increase the complexity of our randomly generated pages. First we will increase the tree depth to an arbitrary depth. We will then generate sibling elements and increase the CSS styling options. Finally, we will increase the amount of HTML elements that can be generated and randomly choose whether to generate a document in quirks mode or not.

==Conclusion==
The previously completed work allows us to generate simple html documents with a randomized structure, render the page in Servo, and take a screenshot of the page. We plan on furthering this work by rendering the pages in both Servo and Firefox, taking screenshots of the pages within both browsers, and reporting differences between the two. Doing so will allow users to evaluate Servo’s ability to load web pages. To make this testing even more informative, we plan to increase the complexity of the structure and styling of the randomly generated html documents.

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-09T21:49:03Z

Jbatty: /* Previous Work (Part of the OSS Project) */

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

==Introduction==
This goal of this project is to create a tool that can randomly generate valid HTML pages, then automatically load them in both Firefox and Servo using the [https://w3c.github.io/webdriver/webdriver-spec.html WebDriver protocol] and report if both engines render the content identically. As a part of the OSS project we created a tool which generates random valid HTML files and automated servo. Now, as a part of this project we are supposed to finish the subsequent steps in the project which is explained below.

==Previous Work (Part of the OSS Project)==

As per the [https://github.com/servo/servo/wiki/Random-web-content-project project description], we were expected to complete the initial steps. The implementation is explained below for each of these steps.

:1) In a new repository, create a program that can generate a skeleton HTML file with a doctype, head element, and body element, print the result to stdout
::- Here is the [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project link] to the repository which contains code_generation.py file which will be used to generate random valid HTML files.
:2) Add a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
::- The file [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project/blob/master/code_generation.py code_generation.py], contains the code which generates random content specific to the head element and adds style on top of it. As seen in this code, after generating random content to the file, we will add CSS elements on top of this content. We have established a list of commonly used styles, weights, fonts, font_styles, and alignments which will be used at random. For practical purposes, we are limiting the number of options.
:3) Add a module to the program that enables generating random content specific to the <body> element (such as a <p> block that contains randomly generated text) and add it to the generated output
:4) Generate simple random CSS that affects randomly generated content (ie. if there is an element with an id foo, generate a CSS selector like #foo that applies a style like colorto it)
:5) Create a program under Servo's etc/ that launches Servo and causes it to [https://github.com/servo/servo/wiki/Control-Servo-using-WebDriver take a screenshot] of a particular URL - use this to take screenshots of pages randomly generated by the previous program

[[File:Servoscreenshot.png|frame|Screenshot Sample]]

==Work to be done==
Below is a list of the tasks to be done as a part of our final project. Below each task we have described what we think it will take to complete the respective task.

:'''1) Extend the program that controls Servo to also control Firefox using geckodriver'''
:Task 1 is relatively simple. It just involves downloading geckodriver and running it. Geckodriver is an open source software engine that allows us to render marked content on a web browser. It should allow us to take screenshots of a particular URL just like task 5 in the previous work section.

:'''2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ'''
:This task involves automating Firefox to use geckodriver and the current servo program. They both will create 2 different screenshots. If servo and Firefox render it differently, we will report that file and mark the differences.

:'''3) Extend the page generation tool with a bunch of additional strategies, such as:'''
::-Generating elements trees of arbitrary depth
::-Generating sibling elements
::-Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
::-Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
::-Randomly choose whether to generate a document in quirks mode or not
:For task 3 there are several different parts, but the main goal is to increase the complexity of our randomly generated pages. First we will increase the tree depth to an arbitrary depth. We will then generate sibling elements and increase the CSS styling options. Finally, we will increase the amount of HTML elements that can be generated and randomly choose whether to generate a document in quirks mode or not.

==Conclusion==
The previously completed work allows us to generate simple html documents with a randomized structure, render the page in Servo, and take a screenshot of the page. We plan on furthering this work by rendering the pages in both Servo and Firefox, taking screenshots of the pages within both browsers, and reporting differences between the two. Doing so will allow users to evaluate Servo’s ability to load web pages. To make this testing even more informative, we plan to increase the complexity of the structure and styling of the randomly generated html documents.

File:Servoscreenshot.png

2018-04-09T21:47:29Z

Jbatty: uploaded a new version of "File:Servoscreenshot.png"

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-09T21:46:30Z

Jbatty: /* Previous Work (Part of the OSS Project) */

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

==Introduction==
This goal of this project is to create a tool that can randomly generate valid HTML pages, then automatically load them in both Firefox and Servo using the [https://w3c.github.io/webdriver/webdriver-spec.html WebDriver protocol] and report if both engines render the content identically. As a part of the OSS project we created a tool which generates random valid HTML files and automated servo. Now, as a part of this project we are supposed to finish the subsequent steps in the project which is explained below.

==Previous Work (Part of the OSS Project)==

As per the [https://github.com/servo/servo/wiki/Random-web-content-project project description], we were expected to complete the initial steps. The implementation is explained below for each of these steps.

:1) In a new repository, create a program that can generate a skeleton HTML file with a doctype, head element, and body element, print the result to stdout
::- Here is the [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project link] to the repository which contains code_generation.py file which will be used to generate random valid HTML files.
:2) Add a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
::- The file [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project/blob/master/code_generation.py code_generation.py], contains the code which generates random content specific to the head element and adds style on top of it. As seen in this code, after generating random content to the file, we will add CSS elements on top of this content. We have established a list of commonly used styles, weights, fonts, font_styles, and alignments which will be used at random. For practical purposes, we are limiting the number of options.
:3) Add a module to the program that enables generating random content specific to the <body> element (such as a <p> block that contains randomly generated text) and add it to the generated output
:4) Generate simple random CSS that affects randomly generated content (ie. if there is an element with an id foo, generate a CSS selector like #foo that applies a style like colorto it)
:5) Create a program under Servo's etc/ that launches Servo and causes it to [https://github.com/servo/servo/wiki/Control-Servo-using-WebDriver take a screenshot] of a particular URL - use this to take screenshots of pages randomly generated by the previous program

[[File:Servoscreenshot.png]]

==Work to be done==
Below is a list of the tasks to be done as a part of our final project. Below each task we have described what we think it will take to complete the respective task.

:'''1) Extend the program that controls Servo to also control Firefox using geckodriver'''
:Task 1 is relatively simple. It just involves downloading geckodriver and running it. Geckodriver is an open source software engine that allows us to render marked content on a web browser. It should allow us to take screenshots of a particular URL just like task 5 in the previous work section.

:'''2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ'''
:This task involves automating Firefox to use geckodriver and the current servo program. They both will create 2 different screenshots. If servo and Firefox render it differently, we will report that file and mark the differences.

:'''3) Extend the page generation tool with a bunch of additional strategies, such as:'''
::-Generating elements trees of arbitrary depth
::-Generating sibling elements
::-Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
::-Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
::-Randomly choose whether to generate a document in quirks mode or not
:For task 3 there are several different parts, but the main goal is to increase the complexity of our randomly generated pages. First we will increase the tree depth to an arbitrary depth. We will then generate sibling elements and increase the CSS styling options. Finally, we will increase the amount of HTML elements that can be generated and randomly choose whether to generate a document in quirks mode or not.

==Conclusion==
The previously completed work allows us to generate simple html documents with a randomized structure, render the page in Servo, and take a screenshot of the page. We plan on furthering this work by rendering the pages in both Servo and Firefox, taking screenshots of the pages within both browsers, and reporting differences between the two. Doing so will allow users to evaluate Servo’s ability to load web pages. To make this testing even more informative, we plan to increase the complexity of the structure and styling of the randomly generated html documents.

File:Servoscreenshot.png

2018-04-09T21:45:56Z

Jbatty:

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T21:31:27Z

Jbatty:

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

==Introduction==
This goal of this project is to create a tool that can randomly generate valid HTML pages, then automatically load them in both Firefox and Servo using the [https://w3c.github.io/webdriver/webdriver-spec.html WebDriver protocol] and report if both engines render the content identically. As a part of the OSS project we created a tool which generates random valid HTML files and automated servo. Now, as a part of this project we are supposed to finish the subsequent steps in the project which is explained below.

==Previous Work (Part of the OSS Project)==

As per the [https://github.com/servo/servo/wiki/Random-web-content-project project description], we were expected to complete the initial steps. The implementation is explained below for each of these steps.

:1) In a new repository, create a program that can generate a skeleton HTML file with a doctype, head element, and body element, print the result to stdout
::- Here is the [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project link] to the repository which contains code_generation.py file which will be used to generate random valid HTML files.
:2) Add a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
::- The file [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project/blob/master/code_generation.py code_generation.py], contains the code which generates random content specific to the head element and adds style on top of it. As seen in this code, after generating random content to the file, we will add CSS elements on top of this content. We have established a list of commonly used styles, weights, fonts, font_styles, and alignments which will be used at random. For practical purposes, we are limiting the number of options.
:3) Add a module to the program that enables generating random content specific to the <body> element (such as a <p> block that contains randomly generated text) and add it to the generated output
:4) Generate simple random CSS that affects randomly generated content (ie. if there is an element with an id foo, generate a CSS selector like #foo that applies a style like colorto it)
:5) Create a program under Servo's etc/ that launches Servo and causes it to [https://github.com/servo/servo/wiki/Control-Servo-using-WebDriver take a screenshot] of a particular URL - use this to take screenshots of pages randomly generated by the previous program

==Work to be done==
Below is a list of the tasks to be done as a part of our final project. Below each task we have described what we think it will take to complete the respective task.

:'''1) Extend the program that controls Servo to also control Firefox using geckodriver'''
:Task 1 is relatively simple. It just involves downloading geckodriver and running it. Geckodriver is an open source software engine that allows us to render marked content on a web browser. It should allow us to take screenshots of a particular URL just like task 5 in the previous work section.

:'''2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ'''
:This task involves automating Firefox to use geckodriver and the current servo program. They both will create 2 different screenshots. If servo and Firefox render it differently, we will report that file and mark the differences.

:'''3) Extend the page generation tool with a bunch of additional strategies, such as:'''
::-Generating elements trees of arbitrary depth
::-Generating sibling elements
::-Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
::-Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
::-Randomly choose whether to generate a document in quirks mode or not
:For task 3 there are several different parts, but the main goal is to increase the complexity of our randomly generated pages. First we will increase the tree depth to an arbitrary depth. We will then generate sibling elements and increase the CSS styling options. Finally, we will increase the amount of HTML elements that can be generated and randomly choose whether to generate a document in quirks mode or not.

==Conclusion==
The previously completed work allows us to generate simple html documents with a randomized structure, render the page in Servo, and take a screenshot of the page. We plan on furthering this work by rendering the pages in both Servo and Firefox, taking screenshots of the pages within both browsers, and reporting differences between the two. Doing so will allow users to evaluate Servo’s ability to load web pages. To make this testing even more informative, we plan to increase the complexity of the structure and styling of the randomly generated html documents.

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T21:30:58Z

Jbatty: /* Previous Work (Part of the OSS Project) */

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

==Introduction==
This goal of this project is to create a tool that can randomly generate valid HTML pages, then automatically load them in both Firefox and Servo using the [https://w3c.github.io/webdriver/webdriver-spec.html WebDriver protocol] and report if both engines render the content identically. As a part of the OSS project we created a tool which generates random valid HTML files and automated servo. Now, as a part of this project we are supposed to finish the subsequent steps in the project which is explained below.

==Previous Work (Part of the OSS Project)==

As per the [https://github.com/servo/servo/wiki/Random-web-content-project project description], we were expected to complete the initial steps. The implementation is explained below for each of these steps.

:1) In a new repository, create a program that can generate a skeleton HTML file with a doctype, head element, and body element, print the result to stdout
::- Here is the [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project link] to the repository which contains code_generation.py file which will be used to generate random valid HTML files.
:2) Add a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
::- The file [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project/blob/master/code_generation.py code_generation.py], contains the code which generates random content specific to the head element and adds style on top of it. As seen in this code, after generating random content to the file, we will add CSS elements on top of this content. We have established a list of commonly used styles, weights, fonts, font_styles, and alignments which will be used at random. For practical purposes, we are limiting the number of options.
:3) Add a module to the program that enables generating random content specific to the <body> element (such as a <p> block that contains randomly generated text) and add it to the generated output
:4) Generate simple random CSS that affects randomly generated content (ie. if there is an element with an id foo, generate a CSS selector like #foo that applies a style like colorto it)
:5) Create a program under Servo's etc/ that launches Servo and causes it to [https://github.com/servo/servo/wiki/Control-Servo-using-WebDriver take a screenshot] of a particular URL - use this to take screenshots of pages randomly generated by the previous program

==Work to be done==
Below is a list of the tasks to be done as a part of our final project. Below each task we have described what we think it will take to complete the respective task.

:'''1) Extend the program that controls Servo to also control Firefox using geckodriver'''
:Task 1 is relatively simple. It just involves downloading geckodriver and running it. Geckodriver is an open source software engine that allows us to render marked content on a web browser. It should allow us to take screenshots of a particular URL just like task 5 in the previous work section.

:'''2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ'''
:This task involves automating Firefox to use geckodriver and the current servo program. They both will create 2 different screenshots. If servo and Firefox render it differently, we will report that file and mark the differences.

:'''3) Extend the page generation tool with a bunch of additional strategies, such as:'''
::-Generating elements trees of arbitrary depth
::-Generating sibling elements
::-Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
::-Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
::-Randomly choose whether to generate a document in quirks mode or not
:For task 3 there are several different parts, but the main goal is to increase the complexity of our randomly generated pages. First we will increase the tree depth to an arbitrary depth. We will then generate sibling elements and increase the CSS styling options. Finally, we will increase the amount of HTML elements that can be generated and randomly choose whether to generate a document in quirks mode or not.

==Conclusion==
The previously completed work allows us to generate simple html documents with a randomized structure, render the page in Servo, and take a screenshot of the page. We plan on furthering this work by rendering the pages in both Servo and Firefox, taking screenshots of the pages within both browsers, and reporting differences between the two. Doing so will allow users to evaluate Servo’s ability to load web pages. To make this testing even more informative, we plan to increase the complexity of the structure and styling of the randomly generated html documents.

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T21:25:49Z

Jbatty: /* Previous Work (Part of the OSS Project) */

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

==Introduction==
This goal of this project is to create a tool that can randomly generate valid HTML pages, then automatically load them in both Firefox and Servo using the [https://w3c.github.io/webdriver/webdriver-spec.html WebDriver protocol] and report if both engines render the content identically. As a part of the OSS project we created a tool which generates random valid HTML files and automated servo. Now, as a part of this project we are supposed to finish the subsequent steps in the project which is explained below.

==Previous Work (Part of the OSS Project)==

As per the [https://github.com/servo/servo/wiki/Random-web-content-project project description], we were expected to complete the initial steps. The implementation is explained below for each of these steps.

:1) In a new repository, create a program that can generate a skeleton HTML file with a doctype, head element, and body element, print the result to stdout
::- Here is the [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project link] to the repository which contains code_generation.py file which will be used to generate random valid HTML files.
:2) Add a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
::- The file [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project/blob/master/code_generation.py code_generation.py], contains the code which generates random content specific to the head element and adds style on top of it.

==Work to be done==
Below is a list of the tasks to be done as a part of our final project. Below each task we have described what we think it will take to complete the respective task.

:'''1) Extend the program that controls Servo to also control Firefox using geckodriver'''
:Task 1 is relatively simple. It just involves downloading geckodriver and running it. Geckodriver is an open source software engine that allows us to render marked content on a web browser. It should allow us to take screenshots of a particular URL just like task 5 in the previous work section.

:'''2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ'''
:This task involves automating Firefox to use geckodriver and the current servo program. They both will create 2 different screenshots. If servo and Firefox render it differently, we will report that file and mark the differences.

:'''3) Extend the page generation tool with a bunch of additional strategies, such as:'''
::-Generating elements trees of arbitrary depth
::-Generating sibling elements
::-Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
::-Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
::-Randomly choose whether to generate a document in quirks mode or not
:For task 3 there are several different parts, but the main goal is to increase the complexity of our randomly generated pages. First we will increase the tree depth to an arbitrary depth. We will then generate sibling elements and increase the CSS styling options. Finally, we will increase the amount of HTML elements that can be generated and randomly choose whether to generate a document in quirks mode or not.

==Conclusion==
The previously completed work allows us to generate simple html documents with a randomized structure, render the page in Servo, and take a screenshot of the page. We plan on furthering this work by rendering the pages in both Servo and Firefox, taking screenshots of the pages within both browsers, and reporting differences between the two. Doing so will allow users to evaluate Servo’s ability to load web pages. To make this testing even more informative, we plan to increase the complexity of the structure and styling of the randomly generated html documents.

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T21:23:16Z

Jbatty: /* Work to be done */

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

==Introduction==
This goal of this project is to create a tool that can randomly generate valid HTML pages, then automatically load them in both Firefox and Servo using the [https://w3c.github.io/webdriver/webdriver-spec.html WebDriver protocol] and report if both engines render the content identically. As a part of the OSS project we created a tool which generates random valid HTML files and automated servo. Now, as a part of this project we are supposed to finish the subsequent steps in the project which is explained below.

==Previous Work (Part of the OSS Project)==

As per the [https://github.com/servo/servo/wiki/Random-web-content-project project description], we were expected to complete the initial steps. The implementation is explained below for each of these steps.

:1) In a new repository, create a program that can generate a skeleton HTML file with a doctype, head element, and body element, print the result to stdout
::- Here is the [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project link] to the repository which contains code_generation.py file which will be used to generate random valid HTML files.
:2) Add a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
::- As per the file [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project/blob/master/code_generation.py code_generation.py], here is the code which generates random content specific to the head element and adds style on top of it.

==Work to be done==
Below is a list of the tasks to be done as a part of our final project. Below each task we have described what we think it will take to complete the respective task.

:'''1) Extend the program that controls Servo to also control Firefox using geckodriver'''
:Task 1 is relatively simple. It just involves downloading geckodriver and running it. Geckodriver is an open source software engine that allows us to render marked content on a web browser. It should allow us to take screenshots of a particular URL just like task 5 in the previous work section.

:'''2) Compare the resulting screenshots and report the contents of the generated page if the screenshots differ'''
:This task involves automating Firefox to use geckodriver and the current servo program. They both will create 2 different screenshots. If servo and Firefox render it differently, we will report that file and mark the differences.

:'''3) Extend the page generation tool with a bunch of additional strategies, such as:'''
::-Generating elements trees of arbitrary depth
::-Generating sibling elements
::-Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
::-Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
::-Randomly choose whether to generate a document in quirks mode or not
:For task 3 there are several different parts, but the main goal is to increase the complexity of our randomly generated pages. First we will increase the tree depth to an arbitrary depth. We will then generate sibling elements and increase the CSS styling options. Finally, we will increase the amount of HTML elements that can be generated and randomly choose whether to generate a document in quirks mode or not.

==Conclusion==
The previously completed work allows us to generate simple html documents with a randomized structure, render the page in Servo, and take a screenshot of the page. We plan on furthering this work by rendering the pages in both Servo and Firefox, taking screenshots of the pages within both browsers, and reporting differences between the two. Doing so will allow users to evaluate Servo’s ability to load web pages. To make this testing even more informative, we plan to increase the complexity of the structure and styling of the randomly generated html documents.

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T21:21:27Z

Jbatty: /* Previous Work (Part of the OSS Project) */

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

==Introduction==
This goal of this project is to create a tool that can randomly generate valid HTML pages, then automatically load them in both Firefox and Servo using the [https://w3c.github.io/webdriver/webdriver-spec.html WebDriver protocol] and report if both engines render the content identically. As a part of the OSS project we created a tool which generates random valid HTML files and automated servo. Now, as a part of this project we are supposed to finish the subsequent steps in the project which is explained below.

==Previous Work (Part of the OSS Project)==

As per the [https://github.com/servo/servo/wiki/Random-web-content-project project description], we were expected to complete the initial steps. The implementation is explained below for each of these steps.

:1) In a new repository, create a program that can generate a skeleton HTML file with a doctype, head element, and body element, print the result to stdout
::- Here is the [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project link] to the repository which contains code_generation.py file which will be used to generate random valid HTML files.
:2) Add a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
::- As per the file [https://github.com/asoni3/Random-web-content-generator---CSC-517-OSS-Project/blob/master/code_generation.py code_generation.py], here is the code which generates random content specific to the head element and adds style on top of it.

==Work to be done==
Below is a list of the tasks to be done as a part of our final project. Below each task we have described what we think it will take to complete the respective task.

:1)'''Extend the program that controls Servo to also control Firefox using geckodriver'''
:Task 1 is relatively simple. It just involves downloading geckodriver and running it. Geckodriver is an open source software engine that allows us to render marked content on a web browser. It should allow us to take screenshots of a particular URL just like task 5 in the previous work section.

:2)'''Compare the resulting screenshots and report the contents of the generated page if the screenshots differ'''
:This task involves automating Firefox to use geckodriver and the current servo program. They both will create 2 different screenshots. If servo and Firefox render it differently, we will report that file and mark the differences.

:3)'''Extend the page generation tool with a bunch of additional strategies, such as:'''
:Generating elements trees of arbitrary depth
:Generating sibling elements
:Extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
:Extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
:Randomly choose whether to generate a document in quirks mode or not
:For task 3 there are several different parts, but the main goal is to increase the complexity of our randomly generated pages. First we will increase the tree depth to an arbitrary depth. We will then generate sibling elements and increase the CSS styling options. Finally, we will increase the amount of HTML elements that can be generated and randomly choose whether to generate a document in quirks mode or not.

==Conclusion==
The previously completed work allows us to generate simple html documents with a randomized structure, render the page in Servo, and take a screenshot of the page. We plan on furthering this work by rendering the pages in both Servo and Firefox, taking screenshots of the pages within both browsers, and reporting differences between the two. Doing so will allow users to evaluate Servo’s ability to load web pages. To make this testing even more informative, we plan to increase the complexity of the structure and styling of the randomly generated html documents.

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T21:18:10Z

Jbatty: /* Previous Work (Part of the OSS Project) */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T21:17:05Z

Jbatty: /* Previous Work (Part of the OSS Project) */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T21:16:09Z

Jbatty: /* Previous Work (Part of the OSS Project) */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T21:14:17Z

Jbatty: /* Previous Work (Part of the OSS Project) */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T21:13:15Z

Jbatty: /* Previous Work (Part of the OSS Project) */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T21:12:33Z

Jbatty: /* Previous Work (Part of the OSS Project) */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T21:11:06Z

Jbatty: /* Previous Work (Part of the OSS Project) */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T21:07:18Z

Jbatty: /* Previous Work (Part of the OSS Project) */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T21:06:58Z

Jbatty: /* Previous Work (Part of the OSS Project) */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T21:06:37Z

Jbatty: /* Previous Work (Part of the OSS Project) */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T21:03:14Z

Jbatty: /* Previous Work (Part of the OSS Project) */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T21:01:37Z

Jbatty: /* Previous Work (Part of the OSS Project) */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T21:00:57Z

Jbatty: /* Previous Work (Part of the OSS Project) */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T20:59:48Z

Jbatty: /* Previous Work (Part of the OSS Project) */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T20:59:10Z

Jbatty: /* Previous Work (Part of the OSS Project) */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T20:58:56Z

Jbatty: /* Previous Work (Part of the OSS Project) */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T20:58:38Z

Jbatty: /* Previous Work (Part of the OSS Project) */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T20:57:12Z

Jbatty: /* Introduction */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T20:54:55Z

Jbatty: /* Introduction */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T20:52:22Z

Jbatty: /* M1803: Implement a web page fuzzer to find rendering mismatches (Part 2) */

CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)

2018-04-08T20:51:58Z

Jbatty: Created page with "=M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)= By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty) =..."

=M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)=
By Alexander Simpson(adsimps3), Abhay Soni (asoni3), Dileep badveli (dbadvel) and Jake Batty(jbatty)

==Introduction==
This goal of this project is to create a tool that can randomly generate valid HTML pages, then automatically load them in both Firefox and Servo using the WebDriver protocol and report if both engines render the content identically. As a part of the OSS project we created a tool which generates random valid HTML files and automated servo. Now, as a part of this project we are supposed to finish the subsequent steps in the project which is explained below.

MainPage

2018-04-08T20:49:39Z

Jbatty: /* Expertiza */

==Expertiza==
* [[Expertiza documentation]]

* [[CSC/ECE 517 Summer 2008]]
* [[CSC/ECE 517 Fall 2010]]
* [[CSC/ECE 517 Fall 2011]]
* [[CSC/ECE 517 Fall 2012]]
* [[CSC/ECE 517 Fall 2013]]
* [[CSC/ECE 517 Fall 2014]]
* [[CSC/ECE 517 Fall 2015]]
* [[CSC/ECE 517 Fall 2016]]
* [[CSC/ECE 517 Spring 2014]]
* [[CSC/ECE 517 Spring 2015]]
* [[CSC/ECE 517 Spring 2016]]
* [[CSC/ECE 517 Spring 2017]]
* [[CSC/ECE 517 Fall 2017]]
* [[CSC/ECE 517 Spring 2018- Project Juniper:Bookmark Enhancements]]
* [[CSC/ECE 517 Spring 2018- Project E1803: Introducing a Student View for Instructors]]
* [[CSC/ECE 517 Spring 2018- Project E1804: OSS project Yellow: Topic management]]
* [[CSC/ECE_517_Spring_2018- Project E1805: Convolutional data extraction from Github]]
* [[CSC/ECE 517 Spring 2018- Project E1808: Refactor review_mapping_controller.rb]]
* [[CSC/ECE 517 Spring 2018- Project E1810: Show sample submissions and reviews]]
* [[CSC/ECE 517 Spring 2018/E1814 Write unit tests for collusion cycle.rb]]
* [[CSC/ECE 517 Spring 2018- Project M1802: 2D Canvas Rendering]]
* [[CSC/ECE 517 Spring 2018 - E1800: Add past-due assignments to task list]]
* [[CSC/ECE 517 Spring 2018- Project E1812: on the fly calc.rb]]
* [[CSC/ECE 517 Spring 2018- Project M1803: Implement a web page buzzer to find rendering mismatches ]]
* [[CSC/ECE 517 Spring 2018- Project M1803: Implement a web page fuzzer to find rendering mismatches (Part 2)]]
* [[CSC/ECE 517 Spring 2018/E1813 Test Menu Items Model]]
* [[CSC/ECE 517 Spring 2018- Project E1816: Visualization for Instructors]]
* [[CSC/ECE 517 Spring 2018- Project E1817: Adding Student-generated Questions to Rubric]]
* [[CSC/ECE 517 Spring 2018- Project E1822: Extend the functionality of badging]]
* [[CSC/ECE 517 Spring 2018- Project E1815: Improvements to review grader]]
* [[CSC/ECE 517 Spring 2018- Project E1824: Let course staff as well as students do reviews]]
* [[CSC 456 Spring 2011|CSC 456 Spring 2012]]
* [[ECE 633]]
* [[KCU]]
* [[Progress reports]]

==Application Behavior==
* [[Grading]]

==Metaprogramming==
* [[CSC/ECE_517_Spring_2013/ch1b_1k_hf|Lecture on Metaprogramming]]

==Development==

''Expertiza now has a Java dependency, so the machine you are using to develop Expertiza on should have the JVM installed.''

* [[Setting Up a Development Machine]]
* [[Creating a Linux Development Environment for Expertiza - Installation Guide]]
* [[Using git and github for projects]]
* [[Using heroku to deploy your projects]]
* [[How to Begin a Project from the Current Expertiza Repository]]
* [[Git]]
* [[How to Change a User's Password on a Development Machine]]
* [[Debugging Rails]]
* [http://rajanalwan.com/ui_guidelines/ Design Template]

==Production==
* [[Deploying to Production]]
* [[Downloading Production Data]]
* [[Accessing the Production Server]]

==Testing==
* [[Using Cucumber with Expertiza]]
* [[Rails Testing Overview]]
* [[Expertiza Continuous Integration]]

==References==
* [[Object-Oriented Design and Programming]]

CSC/ECE 517 Spring 2018- Project Juniper:Bookmark Enhancements

2018-03-27T15:25:41Z

Jbatty: /* Files modified in current project */

==Introduction==

====Expertiza Background====
Best stated in the project documentation, “The Expertiza project is software to create reusable learning objects through peer review. It also supports team projects, and the submission of almost any document type, including URLs and wiki pages.” The system makes it easy for instructors to post assignments and manage students. Students are able to work in teams, submit assignments, receive feedback on their work and review their teammates.

====Description of Current Project====

The project aims at enhancing the usability of the bookmarks feature for any topic. Basic functionality already exists to add bookmarks to topics. When a student logs in to his expertiza account,he/she can sign-up for a particular topic from the list of topics in an assignment. On the sign-up sheet, there is a column for Bookmarks.

[[File:Bookmark.png]]

Users can either view a Bookmark or add a new Bookmark for a particular topic. Users can submit links via add Bookmark to provide helpful sources for the author to complete their work. Users can also view Bookmarks already added for the particular topics. Authors can rank the usefulness of these bookmarks as 1-5 with a drop down menu next to the bookmark. Our project aims to implement this. Also, we want to provide a way for the users who have submitted useful bookmarks to be given credit for it. This can be based on the rating provided by the Author.

This project intends to build on the bookmark functionality by allowing instructors to access the bookmark ratings rubric, and designing a way to assess if these bookmarks are being utilized by the author.

==Issues==
====Problem 1:====
When an instructor is logged in, they can manage rubrics under the Manage > Questionnaires tab. However, bookmark ratings are not available to be selected.

[[File:Problem1.jpg]]

====Proposed Enhancements to the problem:====
After going through the migrations we observed that there have been migrations to add the Questionnaire nodes to the Menu Bar. In these migrations we did not find any code which specifies that the "Bookmark Rating" Questionnaire Node has been added to the Menu Bar. We believe that a migration has to be added which will add the Bookmark Rating Node to the Menu Bar thereby enabling the user to see "Bookmark Rating" as a type of rubric when they go to Manage > Questionnaires.

====Problem 2:====
When a user logs in as an instructor and selects Manage > Questionnaires, the links associated with the Bookmark Rating rubric are broken. When a user clicks on Bookmark Rating link, it should link to a page to create a new Bookmark rating Questionnaire. However, the link does not redirect to the required page, rather an error message is thrown.

[[File: brokenlink.png]]

[[File: brokenlink1.png]]

====Enhancements to the problem====
Previously, the Folder node was named "Bookmarkrating" because of which, after clicking on "New Public Item" or "New Private Item" we get an Error message.
New migrations have been written in which the node has been renamed to "Bookmark Rating" because this is how it has been defined in the Questionnaire Model. Now the links for "New Public Item" and "New Private Item" works properly resulting in the screens shown below.

'''Page that shows the links for "New Public Item" and "New Private Item"'''

[[File: Correctedlink1.png]]

'''Page that is redirected to after we click "New Public Item" or "New Private Item"'''

[[File: Correctedlink2.png]]

====Problem 3:====
The current functionality only allows for the author to review the bookmark, and the reviewer is not able to assess the usefulness of a bookmark.

====Proposed design to address the problem:====
The design below could be implemented to allow for input from reviewers on bookmarks. This would involve modification to the existing classes to add “karma points,” which are points a user acquires for submitting helpful bookmarks. Both the reviewer and the author can submit a 1-5 rating on a bookmark- the author does so based on how helpful they found the link, and the reviewer based on how impactful the bookmark appeared to be on the author’s work.
These ratings translate directly into karma points, making a user who submits a bookmark eligible to earn up to 10 karma points for that bookmark. This would require a field for karma points in the user database, where points would be stored and accumulated. Only the instructor would be authorised to view a students karma points, and the instructor would be able to list, sort, and filter users by karma points. How the karma points are utilized is at the discretion of the instructor; two examples of usage could be for recognition of helpful students and awarding participation grades based on a baseline of karma points.

[[File: UML2.jpg]]

==Files modified in current project==

* db/migrate/20180326223032_update_bookmark_rating_tree_folder_rating.rb

*db/migrate/20121127013927_add_bookmarkrating_folder_nodes.rb

* expertiza/app/models/tree_display_controller.rb

* expertiza/app/models/questionnaire.rb

* config/routes.rb

==UI Testing==

*'''Creating a Bookmark Rating Questionnaire'''
**Login to Expertiza as an instructor
**Navigate to the Manage > Questionnaires menu and select ‘Bookmark ratings’
**Choose either new public item or new private item
**Enter a name, min score, max score, and choose whether the bookmark questionnaire is private from the drop down menu
**Select "Create"
**You will now see a confirmation message stating that the bookmark was successfully created

==Future Work==
*In addition to building the feature designed above, karma points could be extended to other parts of Expertiza to reinforce positive user interactions.
*Build on the current 0-5 rating system by adding criteria for a bookmark ratings. For example, rather than a simple ask for a 0-5 rating with no rubric, ask the user “How informative was the bookmark?” and “How much did the bookmark influence your submission?”

==References==
*Expertiza YouTube channel: https://www.youtube.com/channel/UCdKXzox7hrWjfOMML6FzTWg/videos
*Expertiza Documentation: http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation
*Expertiza on Github: https://github.com/expertiza/expertiza

CSC/ECE 517 Spring 2018- Project Juniper:Bookmark Enhancements

2018-03-27T01:31:33Z

Jbatty: /* Files modified in current project */

==Introduction==

====Expertiza Background====
Best stated in the project documentation, “The Expertiza project is software to create reusable learning objects through peer review. It also supports team projects, and the submission of almost any document type, including URLs and wiki pages.” The system makes it easy for instructors to post assignments and manage students. Students are able to work in teams, submit assignments, review feedback, and review their teammates.

====Description of Current Project====

Basic functionality already exists to add bookmarks to topics. Users can submit links via a bookmark to provide helpful sources for the author to complete their work. Authors can rank the usefulness of these bookmarks as 1-5 with a drop down menu next to the bookmark.

This project intends to build on the bookmark functionality by allowing instructors to access the bookmark ratings rubric, and designing a way to assess if these bookmarks are being utilized by the author.

==Issues==
====Problem 1:====
When an instructor is logged in, they can manage rubrics under the Manage > Questionnaires tab. However, bookmark ratings are not available to be selected.

[[File:Problem1.jpg]]

====Enhancements to the problem:====
An instructor can now see ‘Bookmark reviews’ in the Manage > Questionnaires drop down menu.

====Problem 2:====
When a user logs in as an instructor and selects Manage > Questionnaires, the links associated with the Bookmark Rating rubric do not link to another page, rather an error message is provided.

[[File: brokenlink.png]]

[[File: brokenlink1.png]]

====Enhancements to the problem====
Issues with the migration files have been corrected so that the links now take users to the appropriate page.

[[File: Correctedlink1.png]]

[[File: Correctedlink2.png]]

====Problem 3:====
The current functionality only allows for the author to review the bookmark, and the reviewer is not able to assess the usefulness of a bookmark.

====Proposed design to address the problem:====
The design below could be implemented to allow for input from reviewers on bookmarks. This would involve modification to the existing classes to add “karma points,” which are points a user acquires for submitting helpful bookmarks. Both the reviewer and the author can submit a 1-5 rating on a bookmark- the author does so based on how helpful they found the link, and the reviewer based on how impactful the bookmark appeared to be on the author’s work. These ratings translate directly into karma points, making a user who submits a bookmark eligible to earn up to 10 karma points for that bookmark. This would require a field for karma points in the user database, where points would be stored and accumulated. Only the instructor would be permissioned to view a students karma points, and the instructor would be able to list, sort, and filter users by karma points. How the karma points are utilized is at the discretion of the instructor; two examples of usage could be for recognition of helpful students and awarding participation grades based on a baseline of karma points.

[[File: UML2.jpg]]

==Files modified in current project==
*20180326223032_update_bookmark_rating_tree_folder_rating.rb

==UI Testing==

*'''Adding bookmark rating to Manage menu'''
**Login to Expertiza as an instructor
**Navigate to the Manage > Questionnaires menu and find ‘Bookmark ratings’ now among the options
**Select Bookmark ratings
**You will land on the Bookmark ratings page

*'''Creating a Bookmark Rating Questionnaire'''
**Login to Expertiza as an instructor
**Navigate to the Manage > Questionnaires menu and select ‘Bookmark ratings’
**Choose either new public item or new private item
**Enter a name, min score, max score, and choose whether the bookmark questionnaire is private from the drop down menu
**Select "Create"
**You will now see a confirmation message stating that the bookmark was successfully created

==Future Work==
*In addition to building the feature designed above, karma points could be extended to other parts of Expertiza to reinforce positive user interactions.
*Build on the current 0-5 rating system by adding criteria for a bookmark ratings. For example, rather than a simple ask for a 0-5 rating with no rubric, ask the user “How informative was the bookmark?” and “How much did the bookmark influence your submission?”

==References==
*Expertiza YouTube channel: https://www.youtube.com/channel/UCdKXzox7hrWjfOMML6FzTWg/videos
*Expertiza Documentation: http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation
*Expertiza on Github: https://github.com/expertiza/expertiza

CSC/ECE 517 Spring 2018- Project Juniper:Bookmark Enhancements

2018-03-27T01:30:22Z

Jbatty: /* Files modified in current project */

==Introduction==

====Expertiza Background====
Best stated in the project documentation, “The Expertiza project is software to create reusable learning objects through peer review. It also supports team projects, and the submission of almost any document type, including URLs and wiki pages.” The system makes it easy for instructors to post assignments and manage students. Students are able to work in teams, submit assignments, review feedback, and review their teammates.

====Description of Current Project====

Basic functionality already exists to add bookmarks to topics. Users can submit links via a bookmark to provide helpful sources for the author to complete their work. Authors can rank the usefulness of these bookmarks as 1-5 with a drop down menu next to the bookmark.

This project intends to build on the bookmark functionality by allowing instructors to access the bookmark ratings rubric, and designing a way to assess if these bookmarks are being utilized by the author.

==Issues==
====Problem 1:====
When an instructor is logged in, they can manage rubrics under the Manage > Questionnaires tab. However, bookmark ratings are not available to be selected.

[[File:Problem1.jpg]]

====Enhancements to the problem:====
An instructor can now see ‘Bookmark reviews’ in the Manage > Questionnaires drop down menu.

====Problem 2:====
When a user logs in as an instructor and selects Manage > Questionnaires, the links associated with the Bookmark Rating rubric do not link to another page, rather an error message is provided.

[[File: brokenlink.png]]

[[File: brokenlink1.png]]

====Enhancements to the problem====
Issues with the migration files have been corrected so that the links now take users to the appropriate page.

[[File: Correctedlink1.png]]

[[File: Correctedlink2.png]]

====Problem 3:====
The current functionality only allows for the author to review the bookmark, and the reviewer is not able to assess the usefulness of a bookmark.

====Proposed design to address the problem:====
The design below could be implemented to allow for input from reviewers on bookmarks. This would involve modification to the existing classes to add “karma points,” which are points a user acquires for submitting helpful bookmarks. Both the reviewer and the author can submit a 1-5 rating on a bookmark- the author does so based on how helpful they found the link, and the reviewer based on how impactful the bookmark appeared to be on the author’s work. These ratings translate directly into karma points, making a user who submits a bookmark eligible to earn up to 10 karma points for that bookmark. This would require a field for karma points in the user database, where points would be stored and accumulated. Only the instructor would be permissioned to view a students karma points, and the instructor would be able to list, sort, and filter users by karma points. How the karma points are utilized is at the discretion of the instructor; two examples of usage could be for recognition of helpful students and awarding participation grades based on a baseline of karma points.

[[File: UML2.jpg]]

==Files modified in current project==
*20180326223032_update_bookmark_rating_tree_folder_rating.rb
*20180326223032_update_bookmark_rating_tree_folder_rating.rb

==UI Testing==

*'''Adding bookmark rating to Manage menu'''
**Login to Expertiza as an instructor
**Navigate to the Manage > Questionnaires menu and find ‘Bookmark ratings’ now among the options
**Select Bookmark ratings
**You will land on the Bookmark ratings page

*'''Creating a Bookmark Rating Questionnaire'''
**Login to Expertiza as an instructor
**Navigate to the Manage > Questionnaires menu and select ‘Bookmark ratings’
**Choose either new public item or new private item
**Enter a name, min score, max score, and choose whether the bookmark questionnaire is private from the drop down menu
**Select "Create"
**You will now see a confirmation message stating that the bookmark was successfully created

==Future Work==
*In addition to building the feature designed above, karma points could be extended to other parts of Expertiza to reinforce positive user interactions.
*Build on the current 0-5 rating system by adding criteria for a bookmark ratings. For example, rather than a simple ask for a 0-5 rating with no rubric, ask the user “How informative was the bookmark?” and “How much did the bookmark influence your submission?”

==References==
*Expertiza YouTube channel: https://www.youtube.com/channel/UCdKXzox7hrWjfOMML6FzTWg/videos
*Expertiza Documentation: http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation
*Expertiza on Github: https://github.com/expertiza/expertiza

CSC/ECE 517 Spring 2018- Project Juniper:Bookmark Enhancements

2018-03-27T00:49:39Z

Jbatty: /* UI Testing */

==Introduction==

====Expertiza Background====
Best stated in the project documentation, “The Expertiza project is software to create reusable learning objects through peer review. It also supports team projects, and the submission of almost any document type, including URLs and wiki pages.” The system makes it easy for instructors to post assignments and manage students. Students are able to work in teams, submit assignments, review feedback, and review their teammates.

====Description of Current Project====

Basic functionality already exists to add bookmarks to topics. Users can submit links via a bookmark to provide helpful sources for the author to complete their work. Authors can rank the usefulness of these bookmarks as 1-5 with a drop down menu next to the bookmark.

This project intends to build on the bookmark functionality by allowing instructors to access the bookmark ratings rubric, and designing a way to assess if these bookmarks are being utilized by the author.

==Issues==
====Problem 1:====
When an instructor is logged in, they can manage rubrics under the Manage > Questionnaires tab. However, bookmark ratings are not available to be selected.

[[File:Problem1.jpg]]

====Enhancements to the problem:====
An instructor can now see ‘Bookmark reviews’ in the Manage > Questionnaires drop down menu.

====Problem 2:====
When a user logs in as an instructor and selects Manage > Questionnaires, the links associated with the Bookmark Rating rubric do not link to another page, rather an error message is provided.

[[File: brokenlink.png]]

[[File: brokenlink1.png]]

====Enhancements to the problem====
Issues with the migration files have been corrected so that the links now take users to the appropriate page.

[[File: Correctedlink1.png]]

[[File: Correctedlink2.png]]

====Problem 3:====
The current functionality only allows for the author to review the bookmark, and the reviewer is not able to assess the usefulness of a bookmark.

====Proposed design to address the problem:====
The design below could be implemented to allow for input from reviewers on bookmarks. This would involve modification to the existing classes to add “karma points,” which are points a user acquires for submitting helpful bookmarks. Both the reviewer and the author can submit a 1-5 rating on a bookmark- the author does so based on how helpful they found the link, and the reviewer based on how impactful the bookmark appeared to be on the author’s work. These ratings translate directly into karma points, making a user who submits a bookmark eligible to earn up to 10 karma points for that bookmark. This would require a field for karma points in the user database, where points would be stored and accumulated. Only the instructor would be permissioned to view a students karma points, and the instructor would be able to list, sort, and filter users by karma points. How the karma points are utilized is at the discretion of the instructor; two examples of usage could be for recognition of helpful students and awarding participation grades based on a baseline of karma points.

[[File: UML2.jpg]]

==Files modified in current project==

==UI Testing==

*'''Adding bookmark rating to Manage menu'''
**Login to Expertiza as an instructor
**Navigate to the Manage > Questionnaires menu and find ‘Bookmark ratings’ now among the options
**Select Bookmark ratings
**You will land on the Bookmark ratings page

*'''Creating a Bookmark Rating Questionnaire'''
**Login to Expertiza as an instructor
**Navigate to the Manage > Questionnaires menu and select ‘Bookmark ratings’
**Choose either new public item or new private item
**Enter a name, min score, max score, and choose whether the bookmark questionnaire is private from the drop down menu
**Select "Create"
**You will now see a confirmation message stating that the bookmark was successfully created

==Future Work==
*In addition to building the feature designed above, karma points could be extended to other parts of Expertiza to reinforce positive user interactions.
*Build on the current 0-5 rating system by adding criteria for a bookmark ratings. For example, rather than a simple ask for a 0-5 rating with no rubric, ask the user “How informative was the bookmark?” and “How much did the bookmark influence your submission?”

==References==
*Expertiza YouTube channel: https://www.youtube.com/channel/UCdKXzox7hrWjfOMML6FzTWg/videos
*Expertiza Documentation: http://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation
*Expertiza on Github: https://github.com/expertiza/expertiza

CSC/ECE 517 Spring 2018- Project Juniper:Bookmark Enhancements

2018-03-27T00:45:01Z

Jbatty: /* UI Testing */