Confirm
372
edits
Changes
→Initial Raptor/Mitmproxy page
=== Mitmproxy ===
Instead of using live web pages for performance testing, Raptor uses a tool called [https://mitmproxy.org/ Mitmproxy]. Mitmproxy allows us to record a live web page and save it as a playback archive. Then during the Raptor pageload test (i.e. raptor-tp6) we use Mitmproxy's 'mitmdump' tool to playback the archive through a local proxy. Raptor automatically configures Firefox to use the proxy, and when the test browses to the test page URL, it loads the page from the Mitmproxy playback archive.
For more information about Mitmproxy installation, etc. see the [https://mitmproxy.org/ documentation]. Mitmproxy is an open source tool and the source is [https://github.com/mitmproxy/mitmproxy found here on github].
== Recording a Mitmproxy test page ==
Test pages used for Raptor pageload tests (i.e. raptor-tp6, raptor-gdocs) are mitmproxy recordings that are played back during the test (and ultimately loaded in Firefox via the local proxy). Each test page is a separate mitmproxy recording (*.mp) file, and all the page recordings for each suite are contained in a single zip for that suite (i.e. mitmproxy-recordings-raptor-tp6.zip) on tooltool.
When the Raptor pageload test is run, the mitmproxy recording archive for use during the test is automatically downloaded from tooltool.
The following process was used to record the mitmproxy page archives (on OSX):
1. Install mitmproxy following the mitmproxy [http://docs.mitmproxy.org/en/stable/install.html installation instructions]
2. Setup a local proxy in Firefox:
* Start Firefox
* Preferences => General
* Network Proxy => Settings
* On the "Connection Settings" screen, select "Manual proxy configuration"
* For "HTTP Proxy" type in "127.0.0.1" with port "8080"
* For "SSL Proxy" use the same "127.0.0.1" with port "8080"
* Click the "OK" button to save the proxy settings
3. Install the mitmproxy CA certificate:
* Open a terminal window
* Startup mitmproxy in host mode:
mitmproxy --host
* In Firefox, browse to "mitm.it" and follow the directions on how to accept the CA certificate
* Shutdown the mitmproxy tool (in terminal hit "Q", then "Y" to quit)
4. Record a new page:
* Start Firefox with the proxy still enabled
* Clear the browser history/cache
* In a terminal window start the mitmdump recording tool:
mitmdump -w /path/to/save/recording.mp
* Inside Firefox browse to the URL that you want to record (i.e. www.spacex.com)
* Wait for the page to be fully loaded and displayed
* In the mitmdump terminal window press "ctrl + c" to stop the recording
5. To test playing back your recorded page:
* Start Firefox with the proxy still enabled
* With mitmproxy NOT running, browse to your recorded URL (i.e. www.spacex.com); you'll just get an error saying that the proxy server is refusing connections
* In a terminal window, start mitmproxy playback:
mitmdump -k /path/to/save/recording.mp
* In Firefox browse to the URL that you recorded already (i.e. www.spacex.com). This time the page will load successfully; it is actually loading the page from the local mitmdump archive file (*.mp) and not the external site
* In the terminal window press "ctrl + c" to stop the playback
6. When you're finished remember to turn off your Firefox proxy:
* Preferences => General
* Network Proxy => Settings
* Select "No proxy" and click the "OK" button
== Adding Hero Elements ==
Hero elements are special html attributes that can be inserted into existing html elements in pages, so that we can measure pageload up to the time that specific element is displayed. You basically just add an 'element_timing' attribute to an existing html element i.e. <element_timing='hero1'>.
Raptor supports multiple measurements per single pageload including hero elements. To have a Raptor test measure an existing hero element, you simply add 'hero' to the 'measure = ' line in the Raptor test INI file, and below that add an 'hero = hero1' line that specifies the hero element attribute text (i.e. 'hero1') to look for.
Since Raptor uses Mitmproxy to playback web pages, in order to use hero elements they must be manually added to the web page archive. Tarek created a script ('[https://github.com/tarekziade/mitmflow mitmflow]') to add hero elements to existing Mitmproxy page recordings. See the [https://github.com/tarekziade/mitmflow mitmflow repo] for more information, but the basic steps to add a hero element to an existing Mitmproxy page archive are:
1. Startup Firefox, turn on the proxy.
2. Use Mitmproxy (mitmdump) to playback the web page recording of the page you wish to add the hero element to.
3. Use the Firefox dev tools page inspector and find an element in the test page where you wish to add the hero element. It should be a unique element like a picture, something with a unique id for example.
4. Update the Mitmproxy replacement script accordingly to indicate which element you want to add the hero element to.
5. Use Mitmproxy (mitmdump) to read your page recording, run it through the Mitmflow replace script, and write out a new Mitmproxy page recording with the element having been added. i.e. with Mitmproxy 2.x:
./mitmdump -dd -s "./replace.py" -r /Users/rwood/Desktop/recordings/google.mp -w /Users/rwood/Desktop/recordings/google-hero.mp
6. Be sure to use Mitmproxy (mitmdump) to playback your new page recording and verify with inspector that the hero element was added successfully (and only once - if there are other elements with the same id then the hero element could be added to multiple elements by mistake).
Instead of using live web pages for performance testing, Raptor uses a tool called [https://mitmproxy.org/ Mitmproxy]. Mitmproxy allows us to record a live web page and save it as a playback archive. Then during the Raptor pageload test (i.e. raptor-tp6) we use Mitmproxy's 'mitmdump' tool to playback the archive through a local proxy. Raptor automatically configures Firefox to use the proxy, and when the test browses to the test page URL, it loads the page from the Mitmproxy playback archive.
For more information about Mitmproxy installation, etc. see the [https://mitmproxy.org/ documentation]. Mitmproxy is an open source tool and the source is [https://github.com/mitmproxy/mitmproxy found here on github].
== Recording a Mitmproxy test page ==
Test pages used for Raptor pageload tests (i.e. raptor-tp6, raptor-gdocs) are mitmproxy recordings that are played back during the test (and ultimately loaded in Firefox via the local proxy). Each test page is a separate mitmproxy recording (*.mp) file, and all the page recordings for each suite are contained in a single zip for that suite (i.e. mitmproxy-recordings-raptor-tp6.zip) on tooltool.
When the Raptor pageload test is run, the mitmproxy recording archive for use during the test is automatically downloaded from tooltool.
The following process was used to record the mitmproxy page archives (on OSX):
1. Install mitmproxy following the mitmproxy [http://docs.mitmproxy.org/en/stable/install.html installation instructions]
2. Setup a local proxy in Firefox:
* Start Firefox
* Preferences => General
* Network Proxy => Settings
* On the "Connection Settings" screen, select "Manual proxy configuration"
* For "HTTP Proxy" type in "127.0.0.1" with port "8080"
* For "SSL Proxy" use the same "127.0.0.1" with port "8080"
* Click the "OK" button to save the proxy settings
3. Install the mitmproxy CA certificate:
* Open a terminal window
* Startup mitmproxy in host mode:
mitmproxy --host
* In Firefox, browse to "mitm.it" and follow the directions on how to accept the CA certificate
* Shutdown the mitmproxy tool (in terminal hit "Q", then "Y" to quit)
4. Record a new page:
* Start Firefox with the proxy still enabled
* Clear the browser history/cache
* In a terminal window start the mitmdump recording tool:
mitmdump -w /path/to/save/recording.mp
* Inside Firefox browse to the URL that you want to record (i.e. www.spacex.com)
* Wait for the page to be fully loaded and displayed
* In the mitmdump terminal window press "ctrl + c" to stop the recording
5. To test playing back your recorded page:
* Start Firefox with the proxy still enabled
* With mitmproxy NOT running, browse to your recorded URL (i.e. www.spacex.com); you'll just get an error saying that the proxy server is refusing connections
* In a terminal window, start mitmproxy playback:
mitmdump -k /path/to/save/recording.mp
* In Firefox browse to the URL that you recorded already (i.e. www.spacex.com). This time the page will load successfully; it is actually loading the page from the local mitmdump archive file (*.mp) and not the external site
* In the terminal window press "ctrl + c" to stop the playback
6. When you're finished remember to turn off your Firefox proxy:
* Preferences => General
* Network Proxy => Settings
* Select "No proxy" and click the "OK" button
== Adding Hero Elements ==
Hero elements are special html attributes that can be inserted into existing html elements in pages, so that we can measure pageload up to the time that specific element is displayed. You basically just add an 'element_timing' attribute to an existing html element i.e. <element_timing='hero1'>.
Raptor supports multiple measurements per single pageload including hero elements. To have a Raptor test measure an existing hero element, you simply add 'hero' to the 'measure = ' line in the Raptor test INI file, and below that add an 'hero = hero1' line that specifies the hero element attribute text (i.e. 'hero1') to look for.
Since Raptor uses Mitmproxy to playback web pages, in order to use hero elements they must be manually added to the web page archive. Tarek created a script ('[https://github.com/tarekziade/mitmflow mitmflow]') to add hero elements to existing Mitmproxy page recordings. See the [https://github.com/tarekziade/mitmflow mitmflow repo] for more information, but the basic steps to add a hero element to an existing Mitmproxy page archive are:
1. Startup Firefox, turn on the proxy.
2. Use Mitmproxy (mitmdump) to playback the web page recording of the page you wish to add the hero element to.
3. Use the Firefox dev tools page inspector and find an element in the test page where you wish to add the hero element. It should be a unique element like a picture, something with a unique id for example.
4. Update the Mitmproxy replacement script accordingly to indicate which element you want to add the hero element to.
5. Use Mitmproxy (mitmdump) to read your page recording, run it through the Mitmflow replace script, and write out a new Mitmproxy page recording with the element having been added. i.e. with Mitmproxy 2.x:
./mitmdump -dd -s "./replace.py" -r /Users/rwood/Desktop/recordings/google.mp -w /Users/rwood/Desktop/recordings/google-hero.mp
6. Be sure to use Mitmproxy (mitmdump) to playback your new page recording and verify with inspector that the hero element was added successfully (and only once - if there are other elements with the same id then the hero element could be added to multiple elements by mistake).
