VSoft Technologies BlogsVSoft Technologies Blogs - posts about our products and software development.https://www.finalbuilder.com/resources/blogsContinua 1.5 releasedhttps://www.finalbuilder.com/resources/blogs/postid/721/continua-15-released.NET,Continua CI,GeneralTue, 09 Sep 2014 11:13:57 GMT<br /> <br /> <h2>Continua Version 1.5 is now <a target="_blank" href="https://www.finalbuilder.com/downloads/continuaci">available for download</a></h2> <p>Today marks a milestone in Continua CI as we release version 1.5 of the product. Its been many months in the making, we hope you enjoy the update as much as we enjoyed making it.</p> <p>There are many features that we think you'll benefit from by updating to v1.5, some of these include: </p> <h3>Reworked UI:</h3> <ul> <li>Now using bootstrap framework for styling</li> <li>Redesigned <a target="_blank" href="http://wiki.finalbuilder.com/display/continua/dashboards">dashboards</a> that show more information including graphs.</li> <li>Added stages information to the Project tile and list views</li> <li>Disabled configurations are now displayed as faded</li> </ul> <br /> <h3>Cloning:</h3> <ul> <li>Can now clone whole projects and clone configurations between projects.</li> </ul> <br /> <h3>Stage Conditions:</h3> <ul> <li>Auto Promote conditions - stages can now use conditions to control whether to auto-promote to the next stage.</li> <li>Skip conditions - you can now provide conditions for skipping stages or disable a stage completely.</li> </ul> <br /> <h3>New Actions:</h3> <ul> <li>Update GitHub Status Action is now deprecated (use event handler instead - see below).</li> <li><a target="_blank" href="http://wiki.finalbuilder.com/display/continua/NuGet+Restore+Action">NuGet restore action</a>.</li> <li><a target="_blank" href="http://wiki.finalbuilder.com/display/continua/Fake+Action">Fake (F#) build runner.</a></li> </ul> <br /> <h3>Repository Tags: (Git, Mercurial and Subversion repositories only)</h3> <ul> <li>Continua CI can now detect and list repository tags.</li> <li>Tags are now displayed in changeset tabs on configuration and build views.</li> <li>Repository trigger can now be set to trigger on tag changes (new tags, edits and deletions) changes).</li> <li>You can now run a build on a <a target="_blank" href="http://wiki.finalbuilder.com/display/continua/Builds#Builds-RepositoryBranch/Tag">tagged changeset</a>.</li> </ul> <br /> <h3><a target="_blank" href="http://wiki.finalbuilder.com/display/continua/Build+Event+Handlers">Build Event Handlers:</a></h3> <ul> <li> Octopus Deploy: Create/Deploy/Promote Octopus Deploy releases. </li> <li> Tag Repository Changesets: Apply tags to a repository changeset (Git, Mercurial and Subversion repositories only) </li> <li> <a target="_blank" href="http://wiki.finalbuilder.com/display/continua/Update+GitHub+Status">Update GitHub Status: replaces the Update GitHub Status action</a>.</li> </ul> <br /> <h3>and many more changes including:</h3> <ul> <li> Styling changes for improved handling on small screen sizes</li> <li> Report ordering: you can choose which one is displayed first on the build view.</li> <li> New expression functions: Utils.NewGuid() and Utils.RandomNumber() can be used for generation of temporary paths for example</li> <li> Additional LatestChangeset object within the repository object with Branch, BranchName, Comment, CommitterUserName, CommitterFullName, Created, FileCount, Id and RepositoryUsername properties to use in expressions</li> <li> Continua now supports DUnitX enhanced Command Line Options</li> </ul> <h2>Updating</h2> <p>Updating to this new release is the same regardless if you are using v1.0.X or a recent build from the beta or release candidate. Simply download the installer and run it, the setup will guide you through the install process. As usual we are available on <a href="mailto:support@finalbuilder.com">support@finalbuilder.com</a> if you run into any troubles.</p> <p>For this release you will need to update both the server and agents.</p> <h2>A word of thanks</h2> <p>The team wishes to thank everyone who has participated in the beta and release candidate stages for this release. Your positive feedback has been invaluable in shaping the features and functionality of the product. Thank you for your continued support.</p>721ContinuaCI Version 1.5 - New Dashboardshttps://www.finalbuilder.com/resources/blogs/postid/711/continua-15-new-dashboardsContinua CI,GeneralSun, 29 Jun 2014 16:38:17 GMT<br /> <br /> <br /> <br /> With the upcoming 1.5 release of ContinuaCI &nbsp;we have made a number of enhancements to the dashboards, we think you'll love them! &nbsp;Here is a peek at what's coming soon.<br /> <br /> <h4>The New List View</h4> <img src="/portals/0/articleimages/blogimages/peter/dashboards/all-projects.png" alt="all-projects-listview" /><br /> <br /> <strong>Improvements:</strong><br /> <ul> <li>- Stage indicator blocks provide quick drill-down into the build log.</li> <li>- Improved viability and responsiveness of build actions buttons.</li> <li>- Build action buttons moved to the left for easier access.</li> <li>- Viability enhancements around projects.</li> <li>- Improved Responsiveness and performance tweeks.</li> </ul> <br /> <h4>List View: With Builds Completed</h4> <img src="/portals/0/articleimages/blogimages/peter/dashboards/all-projects-completed-build.png" alt="all-projects-listview-completed-builds" /><br /> <br /> <h4>List View: With Builds Running</h4> <img src="/portals/0/articleimages/blogimages/peter/dashboards/all-projects-multibuild.png" alt="all-projects-listview-completed-multibuilds" /><br /> <br /> <h4>The New Details View</h4> <img src="/portals/0/articleimages/blogimages/peter/dashboards/detail-view.png" alt="details-view" /><br /> <br /> <strong>Improvements:</strong><br /> <ul> <li>- Build and Queue times now have graphs!</li> <li>- Build status card on the left hand side displays the status of the build as it progresses.</li> <li>- Build action buttons are more obvious and responsive.</li> <li>- Stage indicator blocks (present on the build status cards) provide quick drill-down into the build log.</li> <li>- Improved Responsiveness and performance tweeks.</li> </ul> <br /> <h4>Details View: with Builds Queued</h4> <img src="/portals/0/articleimages/blogimages/peter/dashboards/detail-view-queued.png" alt="details-view-queued" /><br /> <br /> <h4>Details View: with Builds Executing</h4> <img src="/portals/0/articleimages/blogimages/peter/dashboards/detail-view-building.png" alt="details-view-building" /><br /> <br /> <h4>Details View: with Builds Finished</h4> <img src="/portals/0/articleimages/blogimages/peter/dashboards/detail-view-finished.png" alt="details-view-finished" /><br /> <br /> Stay tuned for more exciting details regarding the version 1.5 release!711Automated UI Testing with ContinuaCI and Seleniumhttps://www.finalbuilder.com/resources/blogs/postid/709/automated-ui-testing-done-right-with-continuaci.NET,Continua CI,GeneralOpen SourceTue, 20 May 2014 11:46:00 GMT<p>You have just completed an awesomely complex change to your shinny new webapp! After running all your unit tests things are in the green and looking clean.</p> <p>Very satisfied at the quality of your work you fire up the application to verify that everything is still working as advertised. Below is what greets you on the root path of your app</p> <p><img alt="Funny error" src="/blogimages/peter/404-notfound-ie5.gif" /></p> <p>We have all been here at some time or another! What happened! Perhaps it was not your code that broke it! Maybe the issue originated from another part of your organisation, or maybe it came from somewhere on the "inter-webs".</p> <p>Its time to look at the underlying problem however ..... testing web user interfaces is hard! Its time consuming and difficult to get right. Manual clicks, much typing, cross referencing client specifications etc, surely there must be an easier way. At the end of the day we DO need to test our user interfaces!></p> <h2>Automated Web UI Testing</h2> <p>Thankfully UI testing today can be Automated, running real browsers in real end to end functional tests, to ensure our results meet (and continue to meet) expectations.</p> <p>For the sake of brevity and clarity in this demonstration we will focus on testing an existing endpoint. It is considered common place to find functional tests included as part of a wider build pipeline, which may consist of such steps as:</p> <ul> <li>Build</li> <li>Unit Test</li> <li>Deploy to Test Environment</li> <li>Perform Functional Tests</li> <li>Deploy to Production</li> </ul> <p> </p> <p>In this article we will be focusing on the functional testing component of this pipeline. We will proceed on the assumption that your code has already been, built unit tested and deployed to a Functional Test environment. Today we will :</p> <ul> <li>Add Automated UI testing to an existing endpoint google.com</li> <li>Configure ContinuaCI to automatically build our project, and perform the tests</li> </ul> <p> </p> <h3>Software Requirements:</h3> <p> </p> <ul> <li>Visual Studio 2010 Express Edition SP1 or greater (<a href="http://visualstudio.com/">visualstudio.com</a>)</li> <li>Microsoft Dot Net Framework version 4 or greater</li> <li>Java JRE (<a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">http://www.oracle.com/technetwork/java/javase/downloads/index.html</a>)</li> <li>Mercurial (<a href="https://mercurial-scm.org">https://mercurial-scm.org</a>)</li> <li>Mozilla Firefox (<a href="http://getfirefox.com/">getfirefox.com</a>)</li> <li>Nuget (<a href="http://docs.nuget.org/docs/start-here/installing-nuget">docs.nuget.org/docs/start-here/installing-nuget</a>)</li> </ul> <p> </p> <h3>Step1: Prepare a Selenium endpoint</h3> <p>Firstly we will prepare for our UI tests by setting up a Selenium server. <span><a href="http://docs.seleniumhq.org/">Selenium</a> is a browser automation framework which will be used to 'remote control' a real browser. </span>This machine will be designated for performing the UI tests against, preferably this will be a machine separate from your ContinuaCI server.<br /> <br /> Log into the machine you have chosen for the Selenium server with administrator privileges<br /> Download and install Mozilla Firefox (getfirefox.com), this will be the browser that we target as part of this example, however Selenium can target lots of other browsers. For a full breakdown please <a href="http://docs.seleniumhq.org/about/platforms.jsp"> see the docs page</a>: .<br /> Download Selenium Server (<a href="http://docs.seleniumhq.org/download">docs.seleniumhq.org/download</a>), at the time of writing the latest version is 2.41.0.<br /> <br /> Place it into a permanent location of you choosing, in our example ("C:\Program Files (x86)\SeleniumServer")<br /> Download NSSM (<a href="http://nssm.cc/download">nssm.cc/download</a>), unzip it and place into a permanent location of you choosing "C:\Program Files (x86)\nssm-2.22\"<br /> <br /> Ensure that port 4444 is set to allow traffic (this is the default communicationsport for Selenium)<br /> <br /> Open a console and run the following commands:<br /> <span style="font-family: 'Courier New';">"C:\Program Files (x86)\nssm-2.22\win64\nssm.exe" install Selenium-Server "java" "-jar \"C:\Program Files (x86)\SeleniumServer\selenium-server-standalone-2.41.0.jar\""<br /> net start Selenium-Server</span><br /> <br /> <img alt="name project" src="/blogimages/peter/install-sel-1.png" /><br /> <br /> In order to uninstall the Selenium server service, the following commands can be run:<br /> <span style="font-family: 'Courier New';">net stop Selenium-Server<br /> "C:\Program Files (x86)\nssm-2.22\win64\nssm.exe" remove Selenium-Server </span><br /> <br /> <img alt="name project" src="/blogimages/peter/install-sel-2.png" /></p> <h3>Step2: Create a test class and add it to source control</h3> <p>Create a new class library project in Visual Studio, lets call it 'tests'<br /> Open the Nuget Package Manager Console window (tools menu-> library package manager -> package manager console), select the test project as the default project and run the following script:<br /> <br /> Install-Package Selenium.Automation.Framework<br /> Install-Package Selenium.WebDriver<br /> Install-Package Selenium.Support<br /> Install-Package NUnit<br /> Install-Package NUnit.Runners<br /> <br /> Create a new class called within the tests project (lets call it tests) and place the below code (Note: line 23 should be changed with location to the Selenium-Server we setup in the previous step):</p> <pre class="brush: c#; toolbar:true"> using System; using System.Text; using NUnit.Framework; using OpenQA.Selenium.Firefox; using OpenQA.Selenium; using OpenQA.Selenium.Remote; using OpenQA.Selenium.Support.UI; namespace SeleniumTests { [TestFixture] public class test { private RemoteWebDriver driver; [SetUp] public void SetupTest() { // Look for an environment variable string server = null; server = System.Environment.GetEnvironmentVariable("SELENIUM_SERVER"); if (server == null) { server = "http:// *** PUT THE NAME OF YOUR SERVER HERE ***:4444/wd/hub"; } // Remote testing driver = new RemoteWebDriver(new Uri(server), DesiredCapabilities.Firefox()); } [TearDown] public void TeardownTest() { try { driver.Quit(); } catch (Exception) { // Ignore errors if unable to close the browser } } [Test] public void FirstSeleniumTest() { driver.Navigate().GoToUrl("http://www.google.com/"); IWebElement query = driver.FindElement(By.Name("q")); query.SendKeys("a test"); Assert.AreEqual(driver.Title, "Google"); } } } </pre> <h3>Step3: Test the test!</h3> <p>Build the solution<br /> Open NUnit build runner (by default this is located at ~\packages\NUnit.Runners.2.6.3\tools\nunit.exe) , Select file -> Open Project, and locate the tests dll that you have build in the previous step<br /> click the run button<br /> ~ 15 seconds or so you should have one green test!<br /> <br /> <img alt="name project" src="/blogimages/peter/create-project-17.png" /><br /> <br /> So what just happened? Behind the scenes an instance of firefox was opened (on the Selenium Server), perform a simple google search query and undertook a simple Nunit assertion has verified the name of the window was equal to "Google", very cool!.<br /> <br /> Now lets make the test fail, go ahead and change line 78, lets say "zzGoogle", build, and rerun the test. We now have a failing test. Go ahead and change it back so that we have a single passing test.<br /> <br /> <img alt="name project" src="/blogimages/peter/create-project-18.png" /></p> <h4>Create a source control repository</h4> <p>In this example, we're using mercurial</p> <p><span>open a command prompt at ~\</span><br /> <span>type "hg init"</span><br /> <span>add a .hgignore file into the directory. Forconveniencewe have prepared one for you</span><a href="/blogimages/peter/.hgignore.txt">here</a><br /> <span>type "hg add"</span><br /> <span>type "hg commit -m "initial commit""</span></p> <p> </p> <h3>Step 4: Setting up Automated UI testing in ContinuaCI</h3> <p>Navigate to the ContinuaCI web interface</p> <p> </p> <h4>Create a project</h4> <p><br /> Open ContinuaCI<br /> Select "Create Project" from the top tasks dropdown menu<br /> <br /> <img alt="create project" src="/blogimages/peter/create-project-1.png" /><br /> <br /> Name the project something memerable; In our case: "pete sel test 1"<br /> <img alt="name project" src="/blogimages/peter/create-project-3.png" /><br /> Click the "Save & Complete Wizard" button</p> <p> </p> <h4>Create a configuration for this project</h4> <p><br /> Click "Create a Configuration"<br /> Name the config something memorable; in our case "sel-testconfig-1"<br /> Click save & Continue<br /> Click the 'Enable now' link at the bottom of the page to enable this configuration</p> <p> </p> <h4>Point to our Repository</h4> <p><br /> under the section "Configuration Repositories", select the "Create" link<br /> <br /> <img alt="name project" src="/blogimages/peter/create-project-4.png" /><br /> <br /> Name the repository "test_repo"<br /> Select "Mercurial" from the "type" dropdown list<br /> <br /> <img alt="name project" src="/blogimages/peter/create-project-6.png" /><br /> <br /> Select the Mercurial" tab from the top of the dialogue box<br /> Enter the repository location under "source path" in our case '\\machinename\c$\sel-blog-final'<br /> Click validate to ensure all is well<br /> <br /> <img alt="name project" src="/blogimages/peter/create-project-8.png" /><br /> <br /> Click save, your repository is now ready to go!<br /> <img alt="name project" src="/blogimages/peter/create-project-9.png" /></p> <p> </p> <h4>Add actions to our build</h4> <p><br /> Click on the Stages tab<br /> We will add a nuget restore action, click on the "Nuget" section from the categories on the left<br /> Drag and drop the action "Nuget Restore" onto the design surface<br /> Enter the location of the solution file: "$Source.test_repo$\tests.sln"<br /> <br /> <img alt="name project" src="/blogimages/peter/create-project-11.png" /><br /> <br /> Click Save</p> <h4>Build our tests</h4> <p><br /> Click on the "Build runners" category from the categories on the left hand menu<br /> Drag and drop a Visual Studio action onto the design surface (note that the same outcome can be achieved here with an MSBuild action).<br /> <br /> <br /> <img alt="name project" src="/blogimages/peter/create-project-19.png" /><br /> <br /> <img alt="name project" src="/blogimages/peter/create-project-13.png" /><br /> <br /> Enter the name of the solution file: "$Source.test_repo$\tests.sln"<br /> Specify that this should be a 'Release' build under the configuration option<br /> Click save</p> <p> </p> <h4>Setup ContinuaCI to run our Nunit tests</h4> <p><br /> Select the 'unit testing' category from the left hand menu<br /> Drag and drop an NUnit action onto the design surface<br /> <br /> <img alt="name project" src="/blogimages/peter/create-project-20.png" /><br /> <br /> Name our action 'run UI tests'<br /> Within the files: option, specify the name of the tests project '$Source.test_repo$\tests\tests.csproj'<br /> Within the Project Configuration section specify 'Release'<br /> Specify which version of NUnit<br /> In order to provide greater configuration flexibility we can pass in the location of our Selenium server to the tests at runtime. This is done within the 'Environments' tab. In our case the location of the Selenium server is<span></span><span>http://SELSERVER:4444/wd/hub</span><span>.</span><br /> <br /> <img alt="environment tab" src="/blogimages/peter/create-project-24.png" /><br /> <br /> Click Save<br /> <br /> Click save and complete Wizard<br /> We are now ready to build!<br /> <br /> Start a build immediately by clicking the top right hand side fast forward icon<br /> <br /> <img alt="name project" src="/blogimages/peter/create-project-14.png" /><br /> A build will start, and complete!<br /> <br /> <img alt="name project" src="/blogimages/peter/create-project-15.png" /><br /> When viewing the build log (this can be done by clicking on the green build number, then selecting the log tab) we can see that our UI tests have been run successfully. They are also visible within the 'Unit Tests' tab which displays further metrics around the tests.<br /> <br /> <img alt="name project" src="/blogimages/peter/create-project-23.png" /><br /> <br /> <img alt="name project" src="/blogimages/peter/create-project-22.png" /></p> <p> </p> <p> </p> <h3>Step 5: Getting more advanced</h3> <p>Lets try a slightly more advanced example. This time we will examine a common use case. A physical visual inspection test needs to be conducted before a release can progress in the pipeline.<br /> <br /> Place the following code within our test class.</p> <pre class="brush: c#; toolbar:true"> using System; using System.Text; using NUnit.Framework; using OpenQA.Selenium.Firefox; using OpenQA.Selenium; using OpenQA.Selenium.Remote; using OpenQA.Selenium.Support.UI; namespace SeleniumTests { [TestFixture] public class test { private RemoteWebDriver driver; [SetUp] public void SetupTest() { // Look for an environment variable string server = null; server = System.Environment.GetEnvironmentVariable("SELENIUM_SERVER"); if (server == null) { server = "http:// *** PUT THE NAME OF YOUR SERVER HERE ***:4444/wd/hub"; } // Remote testing driver = new RemoteWebDriver(new Uri(server), DesiredCapabilities.Firefox()); } [TearDown] public void TeardownTest() { try { driver.Quit(); } catch (Exception) { // Ignore errors if unable to close the browser } } [Test] public void FirstSeleniumTest() { driver.Navigate().GoToUrl("http://www.google.com/"); IWebElement query = driver.FindElement(By.Name("q")); query.SendKeys("a test"); Assert.AreEqual(driver.Title, "Google"); } [Test] public void MySecondSeleniumTest() { // Navigate to google driver.Navigate().GoToUrl("http://www.google.com/"); IWebElement query = driver.FindElement(By.Name("q")); // Write a query into the window query.SendKeys("a test"); // wait at maximum ten seconds for results to display var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10)); IWebElement myDynamicElement = wait.Until< IWebElement >((d) => { return d.FindElement(By.Id("ires")); }); // take a screenshot of the result for visual verification var fileName = TestContext.CurrentContext.Test.Name + "-" + string.Format("{0:yyyyMMddHHmmss}", DateTime.Now) + ".png"; driver.GetScreenshot().SaveAsFile(fileName, System.Drawing.Imaging.ImageFormat.Png); // perform an code assertion Assert.AreEqual(driver.Title, "Google"); } } } </pre> <p> </p> <p><br /> Build, and run the test.<br /> <br /> In this example we added an additional test to perform a google search, wait at maximum 10 seconds for results to display, take a screenshot (stored it to disk), and perform an NUnit assertion. The screenshot output from the test can be made available as an artifact within Continua!<br /> <br /> Firstly lets commit our changes; "hg commit -m "added a more advanced test""<br /> <br /> Open the configuration in Continua CI (clicking the pencil icon)<br /> Navigate to the stages section<br /> Double click on the stage name (which will bring up the edit stage Dialogue box)<br /> Click on the Workspace rules tab<br /> Add the following line to the bottom of the text area: "/ < $Source.test_repo$/tests/bin/Release/**.png". This will tell Continua to return any .png files that we produced from this test back to the ContinuaCI Server.<br /> <br /> <img alt="name project" src="/blogimages/peter/create-project-25.png" /><br /> <br /> Click on the artifacts tab.<br /> Add the following line : **.png" This will enable any .png files within the workspace to be picked up and displayed within the Artifacts tab.<br /> **.png<br /> <img alt="name project" src="/blogimages/peter/create-project-26.png" /><br /> <br /> Click save<br /> Click Save & Complete Wizard<br /> Start a new build<br /> <br /> <br /> <img alt="name project" src="/blogimages/peter/create-project-14.png" /><br /> <br /> Sweet! A screenshot of our test was produced, and can be seen within the Artifacts tab!<br /> <br /> <img alt="name project" src="/blogimages/peter/create-project-27.png" /><br /> Clicking on 'View' will display the image:<br /> <br /> <img alt="name project" src="/blogimages/peter/create-project-28.png" /><br /> <br /> <span>We have put the sourcecode of this article up on</span><a href="https://github.com/VSoftTechnologies/Automated-UI-Testing">Github</a><span>.</span><br /> <br /> Please subscribe and comment! We are very excited to see what you guys come up with on Continua, happy testing!</p> <p> </p> <h4>Some additional considerations:</h4> <ul> <li>The user which the Selenium service runs under should have correct privileges</li> <li>The machine designated as the Selenium server may require access to the internet if your webapp has upstream dependencies (eg third party API's like github)</li> </ul> 709