Jenkins setup and CI siesta tutorial

[Erik2012]

Hi all together,

I would like to share my first steps with jenkins continous integration using siesta. In our project we have the goal to set up a well tested automated suite for our building process. Here siesta offers a good mechanism to do that, PhantomJS. We are using ExtJS for our GUI. There we have to write logic in JavaScript e.g. getting components when we need them, overriding existing features and so on. For all these stuff we use our jetty server to test this behaviour emulating database requests with ajax stores and json-files. This server is placed in our subversion system so every developer is able to access it. When jetty is placed in subversion it is really simple to execute our tests in jetty on jenkins For this testing process we need to batch some processes.

First we need a directory in the webapps folder of jetty where the tests are placed. In this folder the following directories are placed in. The test directory, the siesta sources, the test-harness.js and the test-harness.html. This has to commit to subversion to give jenkins the chance of knowing the sources. A setup from test-harness.js and the test-harness.html you can find here: https://www.bryntum.com/docs/siesta/#!/g ... ng_started

After your environment is setted up we have to batch the process for jenkins. The jenkins workflow looks like the following:

- Set up the project by copying the source files of the application under tests in your test folder of the webapps directory from the jetty server

- Run the jetty servers start.jar on jenkins with setting up a stop port and a stop key

- call phantomjs on localhost in jenkins with a JUnit report format

- after phantomjs passes all test with success or fail call the start.jar of jetty with the stop command using the stop key and stop port

- remove the project sources which were copied to the jettys webapps directory in jenkins for cleaning up the project again on jenkins and because of you do not want to have this in your subversion when you run this batch file on your local machine

My batch file Run_Siesta_Tests.bat looks like this:

set pathToCopyTo=jetty\webapps\myproject_test

xcopy /S /E /H /Y /Q ExtJsmyproject\resources %pathToCopyTo%\resources\
xcopy /S /E /H /Y /Q ExtJsmyproject\app %pathToCopyTo%\app\
xcopy /H /Y /Q ExtJsmyproject\app.js %pathToCopyTo%

xcopy /S /E /H /Y /Q jetty\webapps\myproject\data %pathToCopyTo%\data\
xcopy /S /E /H /Y /Q jetty\webapps\myproject\ext %pathToCopyTo%\ext\
xcopy /S /E /H /Y /Q jetty\webapps\myproject\language_theme_data %pathToCopyTo%\language_theme_data\
xcopy /H /Y /Q jetty\webapps\myproject\index.html %pathToCopyTo%
xcopy /H /Y /Q jetty\webapps\myproject\log4javascript.js %pathToCopyTo%
 
cd jetty
 
CALL start /B java -DSTOP.PORT=8079 -DSTOP.KEY=mysecret -jar start.jar
CALL webapps\myproject_test\siesta-1.1.7-trial\bin\phantomjs https://localhost:8090/myproject_test/test-harness.html --report-format JUnit --report-file ..\ui_unit_test.xml
CALL java -DSTOP.PORT=8079 -DSTOP.KEY=mysecret -jar start.jar --stop

rmdir /S /Q webapps\myproject_test\resources
rmdir /S /Q webapps\myproject_test\app
rmdir /S /Q webapps\myproject_test\data
rmdir /S /Q webapps\myproject_test\ext
rmdir /S /Q webapps\myproject_test\language_theme_data
del /Q webapps\myproject_test\app.js
del /Q webapps\myproject_test\index.html
del /Q webapps\myproject_test\log4javascript.js

@if errorlevel 1 pause

Now lets take a look on Jenkins itself. After you have created a new project on jenkins you have to configure your buildsteps. When the batch process from Run_Siesta_Tests.bat runs on your local machine it should run on jenkins too. The buildstep which has to be set you can see in the image below.The post-build-action has to set up to publish JUnit-Testresults which reference to the xml file which is produced by the phantomJS report.

I hope this post is helpful for all siesta developers.
Thank you for all the help I got in this forum.

Best regards
Erik

[nickolay]

Thanks Erik! Stickying this post and we'll try to convert to a new guide in Siesta.

[cwtuan]

Which tool do you use to convert report from junit xml to html?

[nickolay]

You can open this report in some continuous integration tool, like TeamCity or Jenkins.

[nickolay]

Testing notifications.

[mats]

Works?

[cwtuan]

I got the notification.

[Kurt]

Because the setup in this tutorial did not work right away for us and we spent tons of time to get this working with Jenkins, I would like to share our setup.

We were confronted with two problems in our task:
1. We had to use a shell script
2. In our case the PhantomJS command had some issues when we tried to use it on Jenkins. Using it locally works


Before be begin with the project, we installed phantomjs on our linux server to use it with Jenkins and put the jetty server in the project.

So we go:
We copy the content in the same way as in the tutorial:

#    Some definitions to get it shorter ################################################
JETTY="src/test/Jetty"
JETTYWEB="$JETTY/webapps"
DIR="$WORKSPACE/$JETTYWEB/myProject/Siesta_Framework/bin"

#    You need to install a version of phantomJS on jenkins itself, NOT the one in the Framework!
PHANTOM="$HOME/bin/phantomjs-1.9.7-linux-x86_64/bin"

#    Clean the test report ##########################################################
rm -r "$JETTYWEB/ myProject /"
rm -r "$JETTYWEB/main/"

#    Create a testfolder in the localhost and copy all relevant data ########################
mkdir "$JETTYWEB/ myProject /"

cp -pr "src/test/Siesta_Framework" "$JETTYWEB/ myProject /"
cp -pr "src/test/browse-automation.html" "$JETTYWEB/ myProject /"
cp -pr "src/test/index.js" "$JETTYWEB/ myProject /"
cp -pr "src/test/index.html" "$JETTYWEB/ myProject /"
cp -pr "src/test/myApp-Tests" "$JETTYWEB/ myProject /"
cp -pr "src/main" "$JETTYWEB/"

Then add executable rigths

#    Give them the rights to get executed ##############################################
chmod u+x -R $JETTYWEB/

Change in the jetty directory and start the server

cd $WORKSPACE/$JETTY

# Start the servers ################################################################
java -DSTOP.PORT=11183 -jar start.jar -DSTOP.KEY=tadam & 
sleep 5

Here the magic happens because of the issues with the phantomjs:
We change directory into the phantomjs of our machine, NOT to phantomjs of the framework and call the phantomjs inclusive the path of the project as the parameters

cd $PHANTOM

#     use the phantomjs on the localhost with following options: ########################
#     --jenkins -> give the framework the information you use a jenkins-server, otherwise the build will be always false.
#     --report-format JUnit -> you want the report in JUnit format
#     --report-file -> the path you want to store the test.xml , relevant if you want to publish the results
#     ./phantomjs --help
#     --web-security=false 
#     --local-to-remote-url-access=true
#     --ignore-ssl-errors=true --> this three are needed to avoid a Access-Control-Allow-Origin.

./phantomjs --web-security=false --local-to-remote-url-access=true --ignore-ssl-errors=true "$DIR/phantomjs-launcher.js" $DIR https://127.0.0.1:11182/ myProject /browse-automation.html \
    --jenkins \
    --report-format=JUnit \
    --report-file=$WORKSPACE/src/test/ui_unit_test.xml \
    --web-security=false \
    --local-to-remote-url-access=true \
    --ignore-ssl-errors=true \

At least stop the server

# Stop the server - ################################################################
cd $WORKSPACE/$JETTY
java -DSTOP.PORT=11183 -DSTOP.KEY=tadam -jar start.jar --stop ]

I hope it will help you and save you some research time

[cwtuan]

thanks a lot!

[akansha85]

I have recently started building test suites for my extjs application, was curious to know if these test suites can also be triggered through maven/jenkins build?

Can you please suggest the best way to trigger the test suite from Jenkins?