Quelltext betrachten

==Introduction==
The recording and playback features of the "expecco web plugin" are provided with all [[Expecco#Editions|editions]] of [[Expecco|expecco]], free of any additional charges. 
By integrating the Selenium IDE in expecco, the strengths of a Capture & Replay tool have been combined with the model based test development. Now, test scenarios can be recorded via the Selenium IDE and then be extended functionally with the help of a comprehensive set of additional building blocks.

Notice that there is also a special [[Expecco#Editions|"web-edition"]] offered, which consists of the web-plugin as described here, packed with a stripped down "lite" version of the expecco execution engine and editor. This is a perfect entry level system for those who do not need the advanced elementary-block coding features of expecco, but only need an easy to use, sophisticated website testing framework. 

Watch our '''short movie about expecco web and model-based test development''' - two minutes is all it takes! (http://www.exept.de/en/products/expecco/web/shortmovie)

Or try the [http://www.exept.de/en/products/expecco/expecco-download '''free 30-day trial'''] to see the real thing.

[[Bild:Expecco-web-network-view.jpg|700px|expecco web]]

== Features overview ==
* Model-based web-test development augmented by capture & replay
* Record web scenarios using Firefox
* Play web scenarios with all established JavaScript-capable browsers
* Modify, enhance, refactor and reuse captured action diagrams
* Easy creation of new compound blocks (activity diagrams)
* Easy to set form parameters using CSV data templates 	
* Combine web interface tests with other systems, measurement devices, sensors or data base queries.
* Re-Recording of scenario parts (no need to rerecord the whole scenario)
* High reusability thanks to the usage of blocks (e.g. "Login", "Order process", etc.)

Other features and a comparison of the various expecco versions is found here:
http://www.exept.de/en/products/expecco/features


== Selenium ==
The basic Selenium Suite consists of a number of open-source JavaScript addOns to allow for capture/replay of websessions using a Firefox browser for capture and any other browser for replay.

== Selenium IDE ==
The Selenium IDE is an extension for the Mozilla Firefox browser. It implements capture (recording) of a websession's activities with a Firefox browser. For replay, all established standard JavaScript-capable browsers like Internet Explorer, Firefox, etc. are supported. 

== Selemium and Expecco ==
The expecco-web extensions consists of a library with hundreds of building blocks, which wrap the selenium command set into graphical action blocks. Thus, instead of using selenium in a textual and script-like fashion, these can now be modeled as a graphical diagram. Due to the numerous possibilities of reuse as compound actions, configuration and parametrization using CSV files, tables and parameter sets, this alone gives a boost to the productivity of every selenium user immediately. It is now very easy to program loops, searches in tables or to navigate over multiple pages in order to search for some information. In addition, non programmers can now also participate in the test definition, creation and execution, due to the much enhanced usability of the advanced expecco user interface. Finally, the detailed tracing, breakpoint and single step options make test development much more productive.

=== Selenium Library Building Blocks ===

In addition to the standard library of expecco, all functions of the Selemnium IDE are available as building blocks. These can be used to create test scenarios and automation tasks fast and easily or to extend exsisting recordings.

For all Selenium commands, corresponding expecco building blocks are provided.

There is a distinction drawn between the following commands:
* '''Is''' - Commands beginning with "Is" return TRUE or FALSE. Example: "isTextPresent"
* '''Get''' - commands beginning with "Get" return a STRING containing the requested value. Example: "getTitle"

* '''Assertion''' - commands beginning with "Assert" cause an error in the negative case which lead into the abortion of the test. Example: "assertElementHeight" or "assertTextPresent"
* '''Verification''' - commands beginning with "Verify" create a log entry in the negative case. The test execution continues. Example: "verifyElementHeight"
 
For all '''Is/Get''' commands corresponding '''Assert/Verify''' commands are available.

Every block includes its own documentation (inside the library), which is written in a somewhat standardized format. 
Here is an example:<br>

 <B>isChecked</B>
   Gets whether a toggle-button (checkbox/radio) is checked.
   Fails if the specified element doesn't exist or isn't a toggle-button.
   <B>locator</B>: an element locater pointing to a checkbox or radio button


The selenium library in combination with the Selenium IDE offer a large number of new possibilities to define web tests in a more structured fashion. All blocks of the Selenium IDE are documented and found in the [[Selenium Library]].

Further information on Selenium and the Selenium IDE is found on the Selenium home page: http://selenium-ide.openqa.org.

== First steps ==
=== Make a Recording ===
[[Bild:Selenium-ide.jpg|thumb|220px|Selenium IDE: Record mode]]
* Menu: ''Extras ► Plugins ► Webtest ► Record Script ...'' ( or else, press the web-capture button [[Bild:Icon_Start_Selenium_Capture.PNG]] ).
* Firefox starts automatically with Selenium IDE
* The Selenium IDE can also be started manually. Click in Firefox on "View ► Sidebar ► Selenium IDE'' or to open the Selenium IDE in a separate window: ''Extras ► Selenium IDE'' 
* After startup, the Record Mode is already activated (Red Record-Button)
* All interactions with website will now be recorded
* By right clicking on a certain element you can access a context menu with special commands (such as verifytextPresent)
* All actions are logged as recorded in the Selenium IDE window
** Changes can be also made here
** It is possible to insert actions manually
* After recording the desired scenario, finish by toggling on the red Record-Button
* Import the recording into expecco, by pressing the import-recording button: [[image:expecco-button.png|expecco button]]
** Alternatively the recording can also be [[FAQ_expecco#The_record_can_not_be_exported_to_expecco.3F | exported to expecco manually]].
* To complete the import, a dialog appears, asking for the name of the recorded diagram
* The recording is now available in expecco as a new block under the specified name
* Select the block in the tree, and navigate to the "Network" tab to see its activity diagram
* In the "Test" tab you can immediately replay the recording via the execute-button [[image:Start-testrun.jpg|Start or Resume Testrun]]

=== Refactoring ===
[[Bild:Expecco-web-new-compound1.jpg|right|thumb|expecco web: create new compound]] 
[[Bild:Expecco-web-new-compound2.jpg|right|thumb|expecco web: create new compound]]
Logically related steps like the login, filling of a form, logout, navigation etc. can be combined and refactored into compound blocks. Thus the diagram becomes clearer and the compound blocks can be reused more easily.
* Click on the "Network" tab
* Select the steps to be combined by dragging a selection-rectangle using the mouse (alternatively, use CTRL-click to select more steps)
* Open a context menu, by right clicking on a selected step. Then select the ''Operations ► Make New Compound Block...'' menu item
* Enter a name for the new compound block
* See the new compound block appearing in the activity diagram
* Also, see it appearing in the navigation tree.
* These blocks can now be reused elsewhere
* Changes must only be made once and will be applied in all activity diagrams containing the block as a step. That means, that to handle a changed login sequence in the tested web-app, only that blocks activities have to be re-captured. Alternatively, you can of course edit the sequence manually by copy-pasting existing blocks, without a need for the Selenium IDE.

=== Functional Extension of a Recording ===
A recording can be augmented with other blocks from the standard library.
* In the tree, navigate to "Imports ► StandardLibary" (if you do not find this item, select the "import" menu item in the File-menu).
* Find the block to insert - the library is organized by grouping similar functions into folders. have a look and see what is already there.
* If you have any idea about the name, tag or documentation string of a block, you can also use the "Search" tab to find blocks in the library (try entering "assert", for example)
* Drag & Drop the desired block from the navigation area into the activity diagram
* Provide input values (freeze or connect them to other pins)
* You may have to insert datatype converters, if the pin types do not match. For example, if an output generates numbers, but an input wants strings, insert a "Number-to-String" converter. If in doubt, use the "Any-to-String", which works almost everywhere.

=== Insert Validation and Error Logging ===
* Start a Recording
* After you have navigated to the page, right click on an element (for example, on a piece of selected text)
* Select: "verifyTextPresent <Name of the element>" from the menu
* Import the recording into expecco
* Select the "verifyTextPresent" step
* Replace it by another block named "isTextPresent". To do this, select the context menu function: "Operations ► Replace by... ► Blocks with the same Number of Pins... ► All Blocks... ► isTextPresent"
* Drag & Drop the "Log [Failure]" block (found in the standardLibrary under "► Assertions, Exceptions & Logging) into the activity diagram of the test
* Alternatively search it by name in the "Search" tab
* Connect the "isTextPresent"-Step with the dropped "Log" block by first selecting the "isTextPresent" step,
* Select: "Special Pins... ► Enable-Input" from the context menu
* Connect the "triggerNo"-Output with the new enable input pin
* Double click on the "errorMessage"-Input and enter an error message as freeze value

If the test is now executed, and the selected text element does not appear, then the test will report an error.

== Special tasks ==
=== Fill in a web form with a CSV file ===
* Click on the tab "Network"
* Markieren Sie die Schritte, die das Ausfüllen des Webformulars umfassen inklusive Navigation zum Formular. Bedenken Sie, dass diese Schritte später für jeden Eintrag in der CSV-Datei ausgeführt werden. Zur Markierung stehen wie gewohnt folgende Möglichkeiten zur Verfügung
** Mouse: Dragging a selection rectangle
** Keyboard: [Caution: Current revision of shortcuts!] 
* By right clicking on the selected steps you can access a context menu for the selection
* Context menu: Operations ► Make New Web Parameter Block... 
* Enter a name for the new web parameter block
* Confirm the following dialog to create a CSV file for the extracted value pairs of the web form. In the file browser you can determine where to save the CSV file.
* Open the following elements in the navigation area Imports ► StandardLibary ► Files & Directories ► Files
* Otherwise you can also click on the tab "Search" and use the blocks name to search for it
* Drag & Drop the block "File [ReadCSV]" into the activity diagram of the test
* Double click on the input  "CSVFileOrStringCol" and enter the path and the filename of the previously saved CSV file
* Connect the output "CSVLineValues" with the input "optionalParameterSet" on the created step

===Integrate user inputs===
* Click on the tab "Network"
* Open the following elements in the navigation area Imports ► StandardLibary ► GUI-Dialogs
* Drag & Drop the block "Dialog [Request String]" into the activity diagram of the test
* Double click on the input "requestLabel" and enter a request for the user
* Double click on the input "title" and enter a title for the dialog window
* Connect the output "answer" with the step using the requested value
* Right click on the input and select "Unfreeze" in the context menu
* Right click again and the remove the checkmark in front of "Parameter" 

== Known problems  ==
===== click vs. clickAndWait =====

Depending on timing variations (bandwidth and responsetime of the server), the click on an element is sometimes recorded as >click< and sometimes recorded as >clickAndWait<.
This is a bug in the Selenium IDE, and you should verify the correct recording by replaying your just captured activity a few times.

:*Possible Bug 1:
:**The >click< command is recorded, although a page is loaded. As the load can take a variable time, the Selenium IDE might fail in the next command, because the actions done there are performed too early, when the page has not yet been loaded.
:**Fix: 
:*:Replace the >click< command by a >clickAndWait<.

:*Possible Bug2:
:**A >clickAndWait< is recorded, although no page is loaded as a consequence. this leads to an aborted execution due to a timeout, when Selenium waits for a never appearing page.
:**Fix: 
:*:Replace the >clickAndWait< by a >click< command.

===== click on non-existing element =====

During replay of a captured >click< or >clickAndWait< command, it may happen that the element to be clicked on is not yet present on the page. This can especially happen, if the element is about to be loaded due to a previous click, type or other action (or even if the element appears due to some asyncronous AJAX activity).
In that case, add a >waitForElementPresent< before the click/clickAndWait, to ensure that the element will be there.

=====Recording actions in Selenium IDE, while the page is loaded =====
:*Problem: Actions, which are performed while a page is not fully loaded, will possibly be not recorded in Selenium IDE.
:*Example: Clicking on a link in a (already visible) navigation menu, while the page is loaded
:*Solution: Only perform actions when the page is completely loaded (Visible in the status bar of the browser). Slow down while recording.

== Further information ==
* [[FAQ_expecco#expecco_web | FAQ expecco web]]
* [[Online Documentation]]