<value><string>Screenshots during Selenium Tests</string></value>
</item>
<item>
<key><string>text_content</string></key>
<value><stringencoding="cdata"><![CDATA[
\n
<section class="master">\n
<h1>How to take screenshots during Selenium tests</h1>\n
<footer>\n
by the <ahref="mailto:jp@nexedi.com">VIFIB Team</a>.\n
</footer>\n
</section><sectionclass="">\n
<h1>Agenda</h1>\n
<ul>\n
<li>How to write a Selenium test in a Web Page</li>\n
<li>How to run a Selenium test located in a Web Page</li>\n
<li>How to configure Firefox/Iceweasel to enable priveleges to save files on your computer</li>\n
<li>How to take screenshots during a Selenium test</li>\n
<li>How to find your screenshots on your computer</li>\n
<li>Appendix: How to display drop down menus during screenshots</li>\n
</ul>\n
<detailsopen="open">\n
<p>Welcome to this ERP5 Tutorial. We are going to show you how to take screenshots in ERP5, thanks to the « erp5_ui_test_core » business template.</p>\n
</details>\n
</section><sectionclass="illustration">\n
<h1>How to run a Selenium test located in a Web Page</h1>\n
<imgalt="Zelenium Test Launcher"src="developer.Take.Screenshots.In.Selenium.Tests.Zelenium.Test.Launcher?format="type="image/png"title="Zelenium Test Launcher"width="90%">\n
<detailsopen="open">\n
<p>\n
First, you need to enter the following path in your address bar: <b>/erp5/portal_tests/Zuite_viewZeleniumTestLauncher</b>. On this page, you have to enter the location of your Selenium test (if you have created a Zope Page Template inside portal_test, just use <b>\n
/erp5/portal_tests/<i>TEST_ZUITE_NAME</i>\n
</b> and pass this part of the tutorial.)\n
</p><p>You need to set only (and not more) of the three fields on the left depending how you want ERP5 to find your Web Page:</p><ul>\n
<li>\n
<u>External Url</u>: If your web page containing your test is not a Web Page object in your ERP5 instance and is external to your instance, you can directly use the complete url of this web page with the <b>External Url</b> field. You must make sure that the server on which your instance is can access the website where your page is located.\n
</li>\n
<li>\n
<u>ERP5 Web Page Path</u>: If your web page containing your test <b>is</b> a Web Page object in your ERP5 instance, you can input the path to this Web Page with the <b>ERP5 Web Page Path</b> field. The path to your webpage is the part starting with <i>/erp5/</i>, it should be for a Web Page something like: <i>/erp5/test_page_module/5</i>.\n
</li>\n
<li>\n
<u>ERP5 Web Page Reference</u>: If your web page containing your test <b>is</b> a Web Page object in your ERP5 instance, you can also input the reference of this Web Page with the <b>ERP5 Web Page Reference</b> field.\n
</li>\n
</ul>\n
<p>\n
Note: you can also use <b>Zuite_runSeleniumTest</b> directly on your Web Page object and pass zuite_id and test_id as arguments (without specifying any other arguments). It should look like this:\n
You should see a similar page. First, click on <b>Go</b>. To display the test (the table in the middle), you need to click on its name in the left frame. To run only this test, you can then click on the second button <imgsrc="developer.Take.Screenshots.In.Selenium.Tests.Start.Button?format=bmp"type="image/bmp">\n
on the left in the right frame.\n
</p><p>\n
Using <b>Zuite_runSeleniumTest</b> or <b>Zuite_viewZeleniumTestLauncher</b> creates a page template in ERP5 Portal Tests folder /erp5/portal_tests/<i>ZUITE_ID</i>/<i>TEST_ID</i>. If the page template already exists, it overwrites the current page template. You can modify your Selenium test, just like any other Selenium test by modifying the page template (these changes won\'t be reflected on the test contained in the Web Page object)\n
</p>\n
</details>\n
</section><section>\n
<h1>How to configure Firefox/Iceweasel to enable priveleges to save files on your computer</h1>\n
<detailsopen="true">\n
<p>For security issues, some Javascript functions such as pasting data from clipboard (useful for Selenium\'s « type » function), or creating a file on the computer (useful to save the screenshots on your computer).</p><p>\n
To be able to use these functions, you need to modify/add the following line in your Firefox <i>prefs.js</i> user file:\n
<p>There are no reasons to be afraid for the security of your system. Indeed, Firefox will prompt you before using functions with special priveleges and let you choose if you want to activate these priveleges only on the website requiring these priveleges.</p>\n
</details>\n
</section><section>\n
<h1>How to take screenshots during a Selenium test</h1>\n
<detailsopen="true">\n
<p>\n
To capture screenshots during a Selenium test, you just need to use the function <b>captureEntirePageScreenshot</b>. It should be like this:\n
</p><blockquote>\n
<br>\n
captureEntirePageScreenshot\n
<br>\n
some_filename\n
<br>\n
<br>\n
</blockquote>\n
</details>\n
</section><sectionclass="illustration">\n
<h1>How to find your screenshots on your computer</h1>\n
The file is stored in a temp folder (most likely <i>/tmp/</i> if you\'re working under Linux). It\'s filename is the first argument of the function <b>captureEntirePageScreenshot</b> (with <i>.png</i> appended to end if it was not already there).\n
</p><p>\n
Another way to find your screenshot file is to look in Selenium\'s log file (in debug mode). Select <b>debug</b> on the radio button. Launch your test once again and stop it after the first screenshot, in the log, you should see something similar:\n
</p><imgsrc="developer.Take.Screenshots.In.Selenium.Tests.Selenium.Core.Debug?format=png"type="image/png"title="Logs in debug mode"width="400/">\n
<blockquote>saved to file: /your/temp/folder/filename.png</blockquote>\n
<p>\n
You should find your screenshots there. Each time a test is launched, a new screenshot file is created (with <i>-X</i> appended at the end of the filename, where <i>X</i> is a number), old screenshots are not overwritten.\n
</p>\n
</details>\n
</section><section>\n
<h1>Appendix: How to display drop down menus during screenshots</h1>\n
<detailsopen="true">\n
<p>\n
Try this: Taking a screenshot of an opened drop down menu (html <i><select></i> tags) with the method described previously.\n
</p><imgsrc="developer.Take.Screenshots.In.Selenium.Tests.Drop.Down.Menu.Screenshot.Fails?format=png"type="image/png"title="Drop down menu screenshot fails"width="90%">\n
<p>\n
Here\'s the result: nothing is displayed. The method used in Selenium core to take screenshots does not work for HTML basic drop down menus. That\'s why we added a function called <b>showOptions</b> (and an opposite <b>hideOptions</b>) that displays the list of options in drop down menu (with a selected option highlighted) without interfering with the rest of page.\n
</p><p>\n
<b>showOptions</b> has two arguments, the drop down menu locator (see <ahref="http://release.seleniumhq.org/selenium-core/1.0.1/reference.html">Selenium documentation</a> for more information on locators), the second one is the label of the selected option. The example below displays the option of the <b>Modules</b> drop down menu and highlights Persons (Warning: <b>showOptions</b> does not actually select the option, it only displays it highlighted).\n
</p><p></p><blockquote>\n
<br>\n
showOptionst\n
<br>\n
//select[@name="select_module"]\n
<br>\n
Persons\n
<br>\n
</blockquote>\n
<imgsrc="developer.Take.Screenshots.In.Selenium.Tests.showOptions.Functions.Effects?format=png"type="image/png"title="Drop down menu screenshot succeeds"width="90%">\n
<p>\n
<b>hideOptions</b> was made to revert the effects of <b>showOptions</b>, in order not to affect the following screenshots on the same page. It takes only one argument, the drop down menu locator. This function is useless if a new page has been loaded between two screenshots.\n
</p>\n
</details>\n
</section>\n
]]></string></value>
</item>
<item>
<key><string>title</string></key>
<value><string>How To take Screenshots during Selenium Tests</string></value>
In order to see the list of reports available to generate, click on the Reports tab of your ERP5 instance. On the left, you can see the Accounting area displaying a list of the reports you are able to generate: Import Report, Trial Balance, Account Statement, Journal, Third Parties, General Ledger, Balance Sheet, Profit and Loss, and Invoices Report. In order to create a report, <strong>simply click on the line of the report you want to create</strong>\n
. In our example, we will create Account Statement.\n
<p>Here is an example of an Account Statement report Creation. As you can see in the screenshot, please follow the steps to set the following information.</p><p>\n
Firstly, in the red area, the <strong>Section Category</strong>\n
is the group your company belongs to, you will have only one choice here;\n
<strong>From Date</strong>\n
and\n
<strong>At Date (end date)</strong>\n
are the dates delimiting your report.\n
<strong>The At Date is compulsory</strong>\n
.\n
</p><p>\n
Secondly, in the blue area, you can choose which <strong>Simulation State(s)</strong>\n
you want to display in your report, and the\n
<strong>Journal Type (types of transactions)</strong>\n
you need to display.\n
</p><p>\n
Thirdly, in the yellow area, you have to <strong>choose an Account, this is compulsory</strong>\n
, and then you can choose one of your\n
<strong>Bank Account</strong>\n
if you have several ones.\n
</p><p>\n
Then, in the green area, you can choose to display the <strong>Detailed Beginning Balance</strong>\n
, and to\n
<strong>Omit Grouped References</strong>\n
. You can also choose the\n
<strong>Format</strong>\n
of your report. As you will see in this item list, many formats are already supported by ERP5.\n
</p><p>\n
Finally, when you are done editing, click the <strong>"Account Statement"</strong>\n
<p>Here is an example of the Account Statement report we have just created.</p>\n
</details>\n
</section><sectionclass="screenshot">\n
<h1>Another example: Profit and Loss</h1>\n
<imgsrc="http://www.erp5.com/user-Howto.Generate.Report.Edit.Profit.And.Loss?format=png"type="image/png"title="Another example: Profit and Loss"alt="Another example: Profit and Loss">\n
<detailsopen="open">\n
<p>As you can see on the picture, this is an other example of report: Profit and Loss. The details requested by ERP5 are different from the Account Statement, as the report itself is different.</p>\n
</details>\n
</section><sectionclass="screenshot">\n
<h1>Profit and Loss</h1>\n
<imgsrc="http://www.erp5.com/user-Howto.Generate.Report.Print.Profit.And.Loss?format=png"type="image/png"title="Profit and Loss"alt="Profit and Loss">\n
<detailsopen="open">\n
<p>Here is the Profit and Loss Report we have just created.</p>\n
